Global text - how to edit text types

On this page:

• Editing and using global text
• Custom global texts

To edit a specific text/module, simply double-click on the desired module and the design tool will open at the top of the screen.

The foundation of all websites is a certain style. Two important elements that make up this style and identity are text and colors. In this article, you will find out how to change text throughout your website with just a few clicks.

Editing and applying global text styles

The designer includes a number of configurable text styles that you can add to any text section on your website, helping you maintain a consistent design.

If you want to apply a new font to all texts, change the font for General text, which can be found in the menu Design > Global texts.

If you want to customize the appearance of other text styles, you can do so by selecting the text style from the menu. You can change attributes such as font weight (how bold you want the text to be) size, color, alignment, link style and more.

Once you have determined the text styles for the title and paragraph, you can easily apply them to any content added in the text modules. Simply double-click on the text, highlight the content you want to add a text style to and select the specific style from the Design menu. If you want to make quick adjustments to the global text styles, you can select the edit icon next to the text style in the Design menu.

Styling text for different viewports

This last section is only relevant to you if you want to have different text styles on desktop, tablet and mobile.

All title and paragraph text styles can be optimized for the three main viewports: desktop, tablet and mobile. For example, if you want to style the Light Spot Text style to be 70px on desktop, 50px on tablet and 30px on mobile, start by styling the Light Spot Text font size to 70px in the desktop viewport. Remember: Any changes made in the desktop viewport will affect tablet and mobile.

Next, change the Light Spot Text font size to 50px for the tablet view (remember to click on the tablet view in the top bar of the editor before editing the module). Any changes made in the tablet view will affect mobile, but not desktop. Finally, change the font size for Light Spot Text to 30px for the mobile view (remember to click on the mobile view in the top bar of the Designer before editing the module). Any changes to the mobile view will not affect other views.

The viewport hierarchy is "broken" for rows, columns or modules when you change any of the elements in one of the viewports individually. For example, when you change the font size on tablet or mobile and then change the font size on desktop, the changes on desktop will not affect the other viewports. This is to help you avoid overwriting viewport-specific changes and designs every time you change something on desktop or tablet.

Gray indicator dots next to style options: When you see a gray indicator dot next to a style option, it means that a style change has been made locally on that element. No gray indicator dot means that the style is inherited from the global style. Click the gray indicator dot to reset the style and return to inheriting from the global style.

Updated on: 11/03/2024