Use the Text content type to add a container and text editor with a “What You See Is What You Get” view of the content to the stage. In addition, you can add links, images, variables, and widgets to the text from the editor toolbar. You can access the text editor directly from the stage or from the toolbox Settings. Changes made directly to the stage are saved automatically. To learn more, see Using the Editor.
Formatted Text on Banner
To add text
In the Page Builder panel under Elements, drag a Text placeholder to a row, column, or tab set on the stage.
Drag Text Placeholder to Stage
Use the editor to enter and format text, as needed. To learn more, see Using the Editor.
Text Editor with Content
When complete, click Save.
To add a link
The Insert Link button in the editor makes it easy to add a hyperlink to an image in the gallery. However, it can also be used to create an inline link in text, provided that you have the URL in advance. Unlike the Widget button, the Insert/Edit link button is not integrated with pages, products, or categories in the store.
To create a link for a telephone number or email, see Adding Custom Variables.
In the storefront, navigate to the page that is to be the target destination for the link. You can either paste the fully qualified URL or a relative URL that omits the reference to your store domain.
Full URL https://mystore.com/women/tops-women/tees-women.html Relative URL ../women/tops-women/tees-women.html
In the text editor, select the
Shop Tees >text in the third line. Then, choose Bold () on the editor toolbar.
Again select the “Shop Tees >” text in the third line. Then, choose Insert/edit link () on the editor toolbar.
In the Url field, enter the relative link that you prepared.
Set Target to
This setting opens the page in the same browser window, rather than opening a new tab.
In the Title field, enter
The Title link attribute is used by some browsers as a tooltip.
Click OK to save the link and return to the Page Builder workspace.
To change text settings
Hover over the text container. Then, choose Settings ( ) in the toolbox.
Because the text container is tightly nested inside another container, make sure that you have the correct toolbox.
Update the content and settings as needed using the descriptions at the end of this page for reference.
When complete, click Save and return to the Page Builder workspace. Then, click Save to save the page.
|Move||Moves the text container to another valid place on the page.|
|(label)||TEXT||Identifies the current container as a text element.|
|Settings||Opens the text container properties in edit mode.|
|Hide||Hides the text container.|
|Show||Shows the hidden text container.|
|Duplicate||Makes a duplicate copy of the text container.|
|Remove||Deletes the text container and its content from the stage.|
|Editor||Used to enter new text or edit existing text. You can also enter and edit text, and add links, images, variables, and widgets from the editor toolbar.|
|Alignment||Determines the horizontal alignment of the text in relation to its parent container. Options:
Default - Applies the default setting that is specified in the style sheet of the current theme.
Left - Aligns the text along the left border of its parent container, with allowance for any padding that is specified.
Center - Aligns the text in the center of its parent container, with allowance for any padding that is specified.
Right - Aligns the text along the right border of its parent container, with allowance for any padding that is specified.
|Border||Determines the border style that is applied to all sides of the text container. Options:
Default - Applies the default border style from the style sheet that is associated with the current theme.
None - Provides no visible indication of container borders.
Dotted - The container border appears as a dotted line.
Dashed - The container border appears as a dashed line.
Solid - The container border appears as a solid line.
Double - The container border appears as a double line.
Groove - The container border appears as a grooved line.
Ridge - The container border appears as a ridged line.
Inset - The container border appears as an inset line.
Outset - The container border appears as an outset line.
|Border Color||Determines the color of the container border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.|
|Border Width||Determines the width in pixels of the container border.|
|Border Radius||Specifies the size of the radius that is used to round each corner of the container border.|
|CSS Classes||Specifies the names of CSS classes from the current style sheet that apply to the text. Separate multiple class names with a space.|
|Margins and Padding||Determines the size, in pixels, of the outer margins and inner padding of the row. Enter each corresponding value in the row container diagram.
Margins - The amount of blank space, in pixels, that is to be applied to the outside edge of all sides of the text container. Options: Top / Right / Bottom / Left
Padding - The amount of blank space, in pixels, that is to be applied to the inside edge of all sides of the text container. Options: Top / Right / Bottom / Left