This time-saving functionality allows you to set default Text and Button styles and have those used for elements across the entire page!

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!

In order to access and start setting Page Styles, click on the 💧 icon within your page's sidepanel. 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.

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 sections 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:

For Desktop, the options available are:

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. 

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:

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. 

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:

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: