To edit the font family and color used globally on all type elements edit, select the Body element and edit the Body (All Pages) class.
To edit the global H1 class edit the ALL H1 Heading class.
To edit the global H2 class edit the ALL H2 Heading class.
To edit the global H3 class edit the ALL H3 Heading class.
To edit the global paragraph (P) class edit the ALL paragraphs class.
PARAGRAPHS
Use paragraphs any time that you have a text that more than just a few words, note that paragraphs need to be spaced between themselves clarify when one paragraph ends and another begins.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
To edit the Small Paragraph class edit the Large-P class.
LARGE PARAGRAPH
Some times you need to have a big paragraph, for example below your hero section to give context to the heading.
To edit the Small Paragraph class edit the Small-P class.
SMALL PARAGRAPH
Some times you want to have smaller text, for example when you mention terms and conditions, you can use this class whenever you need a low hierarchy text.
To edit the color of the light text class edit the Light-Text class.
To edit the type elements nested inside a Rich Text element, select the text and edit the ALL Heading class nested inside Rich-Text
Make sure you enable the "Nest selector" option.
You'll be using Rich Text elements on dynamic content like blog posts. If you need to have headings and text styles different than the rest of your website, you can edit them here.
This is a paragraph element inside a Rich Text
To make changes to the bullets size and left padding edit the List class.
Select the Background color you'd like to edit and click EDIT SWATCH (pencil Icon)
To edit the size and padding of all buttons edit the Button class.
Specific changes to Ghost button, like background color & border should be made on the Ghost-Button class.
To edit the native text links, edit ALL Links class
Changes to the colors of inverse buttons can be done by editing the Inverse combo classes
To edit the different elements by selecting the classed starting with Form
To edit the left-right padding on all sections, select the top section on this page and edit the Section-Padding class
SECTION PADDING
Each one of your sections should include the Section-Padding class, to make sure there's consistent padding and your elements are not touching the edges of the screen.
To edit the Max-Width of the container element, select the top container on this page, and edit the Container class
CONTAINER
Each section on the page should have a Container within keeping the main content centered within a maximum width to improve readability and consistency.
To edit the content of the popup, click the symbol and edit the texts / links from the Override panel
To edit the design of the popup, double-click the symbol to edit styling / elements
To use the popup on other pages, copy the Popup-Background-Wrap element from this page (including the symbol inside).
To edit the open animation, select the button below and edit the Open-Popup on the interactions panel.
Open PopupLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Button Text ✖️Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Button Text ✖️