On this page
Page Styles - Button (coming soon!)
You can set different text styles for Headlines (H1, H2, H3, ect), Links and Regular Text (Regular, Regular 2 & Regular 3). You can also set different button styles (coming soon) for Primary and Secondary buttons on a particular 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:
Text and Button (coming soon)
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, H1 text type will use Lato font, 40px size, 700 font weight, 1.2 line height, etc.
(Note: There are a few exceptions to this, please see below for more details)
Along with text styles for Headings and Links, there are 3 groups of default styles for Regular text:
This is helpful when you need to configure different settings for "Regular" texts on a page. Some of the blocks already contain elements that by default, use different "regular" text styles. You can set default settings for each of them, if you know you'll want to use various options for regular text styles.
The 3 different "Regular" text types can be assigned to text using the "Text Type" option available in the text editor:
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 except for Regular text (Regular, Regular 2, Regular 3). NOTE: Font Style options are still available for Regular text through the Text editor.
Font Color - Select desired text color
For Tablet and Mobile resolutions, the majority of the settings are inherited from Desktop styles. You can however, change the Font Size and Line Height 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.
Note: If you update the Page Style settings later, these customizations that you've made 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 for Desktop and Tablet. Mobile devices will continue to use the Page Styles set through the Page Styles settings.
Notification icons will be shown above each text style set which differs from the default Page Styles for the particular text type. In the example below, "Regular" text in this element was changed to 20px and 700 font weight. Both of these styles differ from the default Page Styles set for "Regular" text type, so the "Default parameter setting is changed" notification is shown above each style:
To set the chosen text type back to default, highlighted the text and click the "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.
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).
Page Styles - Button (coming soon!)
Click the dropdown menu for "Button" in the Page Styles menu to see the options available for buttons:
First, choose the Button Type (Primary or Secondary) you'd like to edit:
Next, choose on which device type (Desktop, Tablet or Mobile) you'd like the button edits applied for:
Apply the style changes you want used for the Button Type and Device Type combination selected using the available Text, Styling, Hover State and Settings styles below: