Display text with the Text Block element

This article will help you learn about the Text Block element and how to use it.

What is the Text Block element?

The Text Block element is designed to present a block of text composed of one or more sentences. You can use this element flexibly in your online store such as in a section with an image, FAQs page, feature descriptions, etc. 

Settings tab's parameters

    1. Typography

      • Font Size (in pixel), Line Height (in em), Letter Spacing (in pixel): For these parameters, you just simply slide the adjustment bar from left to right and vice versa to configure them.
      • Text color: This parameter allows you to choose the color for the content, which can be text or icon.

      • Font: You can choose any fonts which are available in the Font Manager or add any custom fonts from external sources. For better page loading and graphic design, the maximum font displayed on a page is three fonts. However, there is no limit to configure fonts in your store. You can take a look at this article to know how to add a custom font to your site. 

      • Text Transform: You can manipulate text to appear in all-uppercase or all-lowercase, or with each word capitalized.

    2. Text Shadow


      • To add shadow to text, you need to toggle this feature on.

      • Click on More settings to modify the look of the shadow 

    3. Alignment:

      • This parameter allows you to determine how the text is positioned within the selected text box. The four primary types of text alignment include left-aligned, centered, right-aligned, and justified.

    1. Extra class name: If you wish to customize the content element particularly, please use this field to add a class name and then refer to it in the CSS file.

Create a section with image and text 

By using 3 elements: Row, Image, Text Block, you can build a section with image and text from scratch. The following video will directly help you with how to implement it on your page. (Start at 05:00)


Design a Text Block on different screen versions

You can adjust any parameters on different screen modes without affecting each other if that parameter goes along with the Responsiveness icon as below. You can also design a Text Block that is separated for only the mobile version with the Visibility feature. Further information can be found here.

If your text is overlapping or running off the screen on the mobile version, you can fix it quickly by adjusting the font size or line height of your text. 


That's all! Please click the Format Your Text article to discover more advanced features or get in touch with our enthusiastic support team for more assistance! 

Was this helpful?