This time-saving functionality allows you to set default text styles and have them used automatically on your page!
You can set different text styles for Headlines (H1, H2, H3, ect), Links and Regular Text from the very beginning and these styles will be used automatically on that particular page. This functionality also lets you set different font sizes for Desktop, Tablet and Mobile devices!
Setting Default Page Styles
In order to start setting Default Page Styles, click on the water drop icon within your page's left side panel:
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, 28px size, 900 font weight, 1.2 line height, etc.
(Note: There are a few exceptions to this, please see below for more details)
Along with Default 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 Style Presets" option available in the text editor:
You can set 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.
You can still use the Text Editor to set custom styles for individual blocks/text elements...
Simply click the text element you want to customize to open the EDIT TEXT BLOCK pop up window. Then, highlight the text that you want to customize, and apply the desired settings using the Text Editor.
Note: If you update the Default Page settings later, these customizations that you've made will be preserved and will not be overridden by any changes made to default page settings.
Any customizations you make to individual elements will override the Default Text Styles for Desktop and Tablet. Mobile devices will continue to use the Default Text Styles set through the Default Page settings, with a few exceptions...
The following block elements use styles set through the Text Editor even for mobile devices. This means that for these particular text elements, you can still set custom styles through the text editor and have them work for all types of devices including mobile:
- Dynamic Buy Box (“Retail Price”, “Your Price”, “You Save” text elements):
- Best Value Offer (Price elements):
- Best Value Offer 2 (Price elements):
- Best Value Offer 3 (“YOU SAVE” text elements):
- Offer Box 2 (“Retail Price”, “Exclusive Sale Price”, “YOU SAVE” text elements):
- Booster Page Opt-in (“Only”, “Coupons Left” text elements). NOTE: This block is only available for templates of ‘Booster Page’ category (Zipify Pages Plus subscription plan):
There are also Text elements within Blocks which will not use the Default Page Styles...
Any Price element within Buy Boxes are not covered by Default Page Settings, for example:
If you click on a particular text element and see the EDIT ELEMENT OPTIONS box, instead of the standard Text Editor, then this text is not covered by the Default Page Settings.
What you should know when using Default Page Styles...
- Our first priority is to preserve existing pages as they are working properly. Therefore, this feature will only work on NEW Pages. The following message will be shown for any previously created pages prior to the release of this feature:
- If you add an "Existing Block" from an old page (which doesn't have default styles) to a new page, the block will not automatically inherit the default page styles set for that new page. In order to apply default styles to a previously created block on a new page, open the text editor for that block and click to Remove Styles.
- When Copying or Sharing a Page which uses Default 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 default styles. You may find that not all text on a Template will inherit the Default 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).