Fragment Specific Tags Guide in Liferay

Fragment Specific Tags in Liferay are unique elements allowing editable sections within a site. They empower users to modify content directly from the page editor, eliminating the need for source code adjustments. 

Editable Text Tags

Editeble text tag is used to Seamlessly edit text content in-line

<div data-lfr-editable-id="text1" data-lfr-editable-type="text"> Your editable text here </div>

Editable Image Tags

Allows you to Change images directly from the editor

<img data-lfr-editable-id="image1" data-lfr-editable-type="image" src="default-image.jpg" />

Editable Background Image Tags

Add and edit background images for sliders or divs.

<div data-lfr-background-image-id="background-img-unique-id">  <h1 data-lfr-editable-id="header1" data-lfr-editable-type="text">Example Header</h1> </div>

Action-ready Button

Trigger actions using a button component.

<button class="btn btn-${configuration.buttonColor} btn-${configuration.buttonType}" data-lfr-editable-id="action" data-lfr-editable-type="action">    Perform Action </button>

For More Fragment Specific Tags

Arrow