DocumentationCommercePage Builder

Elements - Text

Last update: Thu Sep 07 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • User

Use the Text content type to add a text container with a WYSIWYG (“What You See Is What You Get”) editor in the Page Builder stage. In addition, you can add links, images, variables, and widgets to the text from the editor toolbar.

w-700
Formatted text on a banner
NOTE
If you are making significant changes to Page Builder content, it is recommended that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

Text editor tools

You can access the text editor directly from the stage or from a settings page. Changes made directly to the stage are saved automatically. For more information, see Using the Editor.

w-600
Text editor tool - TinyMCE

Text container toolbox

w-600
Text container toolbox
Tool
Icon
Description
Move
img-md
w-25
Move icon
Moves the text container to another valid place on the page.
(label)
TEXT
Identifies the current container as a text element.
Settings
img-md
w-25
Settings icon
Opens the text container properties in edit mode.
Hide
img-md
w-25
Hide icon
Hides the text container.
Show
img-md
w-25
Show icon
Shows the hidden text container.
Duplicate
img-md
w-25
Duplicate icon
Makes a copy of the text container.
Remove
img-md
w-25
Remove icon
Deletes the text container and its content from the stage.
NOTE
Hidden elements are stored in the database and invisible to customers. However, these elements are visible to search engines and other bots that crawl your site. They are also returned as part of the content if requested through an API call with an attribute of invisibility, unless you remove them from the stage.

Add text

  1. In the Page Builder panel, expand Elements and drag a Text placeholder to a row, column, or tab set on the stage.

    img-md
    w-600 modal-image
    Dragging a text placeholder to the stage

  2. Use the editor to enter and format text, as needed.

    For more information, see Using the Editor.

    img-md
    w-600
    Text editor with content

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, if 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.

  1. In the storefront, navigate to the page that is to be the target destination for the link and copy the link information.

    You can use either 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

  2. Select the text in the editor space and click Insert/edit link (+-------------------------------------+ | img-md | +=====================================+ | w-20 | +-------------------------------------+ | Insert/edit link button | +-------------------------------------+) on the editor toolbar.

    img-md
    w-500 modal-image
    Adding a link to formatted text

  3. For URL, enter the relative link that you prepared.

  4. Set Target to None.

    This setting opens the page in the same browser window, rather than opening a new tab.

  5. For Title, enter Shop Tees.

    The Title link attribute is used by some browsers as a tooltip.

  6. To save the link and return to the Page Builder workspace, click OK.

    img-md
    w-500 modal-image
    Link detail

Insert an image

  1. Place the cursor in the text where you want to insert the image.

  2. Click Insert/edit image (+--------------------------------------+ | img-md | +======================================+ | w-20 | +--------------------------------------+ | Insert/edit image button | +--------------------------------------+) on the editor toolbar.

  3. For Source, click the search icon to use the media storage for locating and selecting an image.

  4. For Image Description, enter descriptive text for the image.

    This text populates the alt link attribute for the image and is used by some browsers for accessibility.

  5. Enter the width and height Dimensions, in pixels, for rendering the image on the page.

    Keep the Constrain proportions checkbox selected to automatically maintain the aspect ratio for the image.

  6. To insert the image and then return to the Page Builder workspace, click OK.

Change text settings

  1. Hover over the text container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+) icon.

    note note
    NOTE
    Because the text container is tightly nested inside another container, make sure that you have the correct toolbox.

  2. Update the content as needed.

  3. Update the Advanced settings as needed.

    • To control the positioning of the text within the parent container, choose an Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      Option Description
      Default Applies the alignment default setting that is specified in the style sheet of the current theme.
      Left Aligns the list along the left border of the parent container, with allowance for any padding that is specified.
      Center Aligns the list in the center of the parent container, with allowance for any padding that is specified.
      Right Aligns the block along the right border of the parent container, with allowance for any padding that is specified.

    • Set the Border style that is applied to all four sides of the text container:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
      Option Description
      Default Applies the default border style that is specified by the associated style sheet.
      None Does not provide any visible indication of the 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.

    • If you set a border style other than None, complete the border display options:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Option Description
      Border Color Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
      Border Width Enter the number of pixels for the border line width.
      Border Radius Enter the number of pixels to define the size of the radius that is used to round each corner of the border.

    • (Optional) Specify the names of CSS classes from the current style sheet to apply to the container.

      Separate multiple class names with a space.

    • Enter values, in pixels, for the Margins and Padding to determine the outer margins and inner padding of the text container.

      Enter the corresponding values in the diagram.

      table 0-row-2 1-row-2 2-row-2 layout-auto
      Container area Description
      Margins The amount of blank space that is applied to the outside edge of all sides of the container. Options: Top / Right / Bottom / Left
      Padding The amount of blank space that is applied to the inside edge of all sides of the container. Options: Top / Right / Bottom / Left

  4. When complete, click Save to apply the settings and return to the Page Builder workspace.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d