Articles on: Website

Global text - how to edit text types

The foundation of every website is its unique style, which shapes its identity and makes it recognizable. Two crucial elements that significantly influence this style are typography and the color scheme. In this article, you'll learn how to customize text styles and colors globally for your entire website, achieving a consistent and professional appearance with just a few clicks. Discover how to ensure a uniform design across all devices and set individual accents when needed.



On this page:



Editing and Applying Global Text Styles


The Designer includes a set of configurable text styles that you can add to any text section on your website to ensure a consistent design.


Change the respective text style: Click Design -> Global Design > Global Texts -> select the respective font and adjust it.



You can adjust the following features:

  • Font family
  • Font weight
  • Color
  • Text decoration
  • Font size
  • Letter spacing
  • Paragraph height
  • Font Case
  • Text alignment
  • Link settings (font weight, color, decoration)


Once you've set the text styles for titles and paragraphs, you can easily apply them to all content you add in text blocks. Simply highlight the content you want to apply a text style to and select the appropriate 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.



Formatting Global Text Styles for Different Devices


All title and paragraph text styles can be optimized for the three main viewports: Desktop, Tablet, and Mobile.


For example, if you want to design the "Light Spot Text" style to be 70px on desktop, 50px on tablet, and 30px on mobile, you would proceed as follows:

  1. Start by setting the font size of the Light Spot Text to 70px in the Desktop viewport. All changes made in the Desktop viewport also affect the Tablet and Mobile devices.
  2. Next, set the font size of the Light Spot Text for the Tablet viewport to 50px (remember to click on the Tablet view in the Designer's top bar before editing the module). All changes made in the Tablet view affect the mobile view, but not the Desktop.
  3. Finally, set the font size of the Light Spot Text for the Mobile viewport to 30px (remember to click on the mobile view in the editor's top bar before editing the module). Any changes in the mobile viewport would not affect other viewports.



Note: The viewport hierarchy for rows, columns, or modules is broken as soon as you individually change one of the elements in one of the viewports. For example, if you change the font size on the tablet or mobile device and then change the font size on the desktop, the changes on the desktop will not affect the other viewports. This way, you can avoid viewport-specific changes and designs from being overwritten every time you change something on the desktop or tablet.



Custom Text Styles


In addition to the standard text styles in the Designer, you also have 10 custom styles available if you want to define additional styles.

This can be useful, for example, if you have an announcement banner on your website and want every text on it to appear in its own style. Click on one of the custom styles, design it as you like, and give it a suitable name to make it easier to recognize later.



Tip: If you see a gray indicator dot next to a style option, it means that a style change has been made locally to that element. No gray dot means the style is inherited from the global style. Click on the gray indicator dot to reset the formatting and revert to inheriting the global formatting.



Keywords: Website design, Global text styles, Customize colors, Font, Typography, Responsive design, Desktop view, Tablet view, Mobile view, Custom styles, Website identity, Design settings, Text formatting, Font size, Line height, Color scheme, Website customization, Consistent design, Web layout.

Updated on: 30/07/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!