Text Block element

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

What is a 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 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.

    4. 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.

How to set the font style to bold, italic, and underlined

You can quickly style for the text with the quick tool. Just click on any part of the Text Block, the quick tool will show up right away. You can style the text with bold (B), italic (I), and underlined (U).

 

How to add a Hyperlink 

Also on the quick tool, you should see a hyperlink icon. Select the text and click on the hyperlink icon to insert the link you would like to redirect your customers to.

 

How to create a number or bullet list

More advanced featured on the quick tool, you can easily create a number or bullet list for the paragraph as below:

 

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. 

If you're interested in learning more about the powerful and user-friendly GemPages, please feel free to read out more articles here or reach out to our Support Team. We'd be happy to answer any questions you have.

 


Was this helpful?

Related Questions