You can set different Text styles for Headings (Heading 1, Heading 2) Subheadings (Subheading 1, Subheading 2), Links and Body Text (Body Copy 1 - 6).
You can also set different Button styles for Primary, Secondary and Style 1 - 3 buttons, allowing for a total of 5 different button styles that can be configured and used for buttons across your page.
This functionality also lets you set different styles for Desktop, Tablet and Mobile devices independently from one another, allowing for better control of page styles shown for each device type used to view your page!
Accessing Page Styles
In order to access and start setting Page Styles, click on the 💧 icon within your page's left-side panel. There you will be presented with two dropdown sections:
Click the dropdown arrow for each section to expand the menu where you can access the different page styles available for each element.
Page Styles - Text
First, choose the Device Type you want to set the text styles for by clicking on the corresponding device icon:
Next, use the Text Type dropdown menu to select from the various Text Types available that you want to set the style for:
Then set the font styles you want use for the particular text type for the device type selected:
Once the style has been set, all text on the page that uses the specific text type will use the default text styles set for that text type. In the example above, for Desktop devices, Heading 1 text type will use Merriweather font, 36px size, 700 font weight, 1.2 line height, etc.
📝 There are a few exceptions to this, please see below for more details.
There are also 6 different text styles that can be set for Body text:
This is helpful when you need to configure different settings for "Body" texts on a page. Some of the blocks already contain elements that by default, use different "Body Copy" text styles. You can set default settings for each of them, if you know you'll want to use various options for body text styles.
The different text types can be assigned to text using the "Text Type" option available in the builder's inline text editor:
If certain text has been changed to use styles that differ from the Page Styles, it can use the default page styles once again by selecting the text in the editor and clicking the "Reset Styles to Page Styles" button:
Setting Different Sets of Styles for Different Types of Devices
For Desktop, the options available are:
Font Name - Select a Font from the drop-down menu. If you've imported custom fonts, you will see those listed here as well!
Font Size - Set the size of the text
Font Weight - Select the weight of the font: from regular to bold (this setting also depends on the availability for the selected font)
Line Height - Regulates the interval between text lines
Font Style - ‘Underline’ and ‘Italic’ options are available for all text types
Font Color - Select the desired text color
Text Alignment - Align text Left, Center, Right or Justify
For Tablet and Mobile views, the majority of the settings are inherited from Desktop styles. You can however, change the Font Size, Line Height and Text Alignment for the corresponding Text Type.
This is super useful if you want more control over the text styles when viewed on smaller screens! Text styles that you set through the Text Editor for individual text elements, only work for Desktop and Tablet devices. With this feature, mobile devices will use the Default Font Size that you set for Mobile viewing.
Using the Text Editor to set Custom Styles for individual blocks/text elements
Simply click the text element you want to customize to use the inline text editor. Then, highlight the text that you want to customize, and apply the desired settings using the Text Editor.
📝 If you update the Page Style settings later, these customizations that you've made in the builder's inline text editor will be preserved and will not be overridden by any changes made to the page styles settings. Any customizations you make to individual elements will override the Page Styles.
To set the chosen text type back to default, highlighted the text and click either the "Reset Styles to Page Styles" or "Remove Styles" button. The default styles for the text type will then be used once again:
Text elements within Blocks which will not use the Page Styles
Any dynamic Price element within Buy Boxes are not covered by Page Styles Settings, for example:
If you click on a particular text element and see the EDIT ELEMENT OPTIONS box in the left side panel, instead of the standard Text Editor, then this text is not covered by the Page Styles settings.
Page Styles - Button
First, choose the Device Type you want to set the button styles for by clicking on the corresponding device icon:
Next, click the dropdown menu for "Button" in the Page Styles menu to see the options available for buttons:
Choose the Button Type you'd like to edit from the dropdown menu:
Apply the style changes you want used for the Button Type and Device Type combination selected using the available Main, Styling and Settings styles available in the sidebar. More details on these settings here:
Using the Editor to set Custom Button Styles for individual blocks/elements
To set a particular button type for a button included on your page, click on the button in the builder and then select the type you'd like used for the button under the "Button Type" section of the sidebar:
Then use the options available in the sidebar to set custom button styles for a particular button:
Custom edits applied to a particular button will not use default page styles any longer and will instead use the custom styles set for it in the builder. To use default page styles instead, click the "Reset Styles to Page Styles" button and the button will use the default styles set for the particular button type once again:
Important Notes about using Page Styles
When Copying or Sharing a Page which uses Page Styles, those styles will be copied/shared along with it. If the recipient of a shared page which uses a custom font, does not already have this font, the font will be replaced with Lato, which is the default font.
Page Templates use their own set of page styles. You may find that not all text on a Template will inherit the Page Styles. You can customize these elements using the Text Editor.
Page Settings edits/changes are saved automatically. To see these changes reflected on your LIVE page, you must then click the Update button (if the page is already Published) or the Publish button (to publish the page).