H1 ENTRY-TITLE
THIS IS THE H1 HEADER, ALSO KNOWN AS "ENTRY-TITLE".
The mobile version CSS styles are:
font-size: 20px;
line-height: 28px;
letter-spacing: 0.4px;
padding: 15px 10%;
font-family: 'Founders Grotesk','Source Sans Pro', sans-serif;
height: auto;
margin: 0;
text-transform: uppercase;
The desktop version CSS styles are:
text-align: center;
font-size: 48px;
line-height: 35px;
padding-top: 26px;
padding-bottom: 26px;
text-transform: capitalize;
The background default color is #12342E (this may change depending on the page Body Class.)
H2 PAGE TITLE
This is the H2 Page Title. It Appears Under the Entry-Title.
The mobile version has CSS styles of:
color: #12342E;
font-size: 32px;
font-family: 'SangBleu Versailles', serif;
line-height: 36px;
letter-spacing: -0.64px;
margin-top: 30px;
The desktop version has modified CSS styles of:
font-size: 66px;
line-height: 72px;
letter-spacing: -1.32px;
H3 HEADER
This is the h3 header. It's used for subheaders.
The mobile and desktop version have CSS styles of:
font-size: 28px;
font-family: 'SangBleu Versailles', serif;
H4 HEADER
This is the h4 header. It's the colorized sub-headings used below the h2's.
The mobile uses CSS styles of:
font-size: 20px;
font-family: 'Founders Grotesk','Source Sans Pro', sans-serif;
font-weight: 500;
line-height: 24px;
margin-top: 12px;
The desktop version uses modified CSS styles of:
font-size: 40px;
line-height: 40px;
H5 HEADER
This is the h5 header typically used for text content a little bit bigger than paragraph text. By default it is set in the bold (700) cut.
By default, this CSS style is set to BOLD.
CSS
To create Read More... arrows & links
- Precede the <a anchor with a <p class="arrow-box">
Section Colors
The About section has a body class of "green"
The Visit section has a body class of "blue"
Full width images
To create a full-width width image on mobile, but the same image padded on desktop:
- Use "stretched" as the widget class
- Insert image align none
- Uncheck Automatically assign paragraph tags
Row Backgrounds
To add a background behind a row:
- On the Row Layout options, go to "Edit Row" > Layout > "full-width"
- In Attributes, add "background" to the row class
Content width (without using columns)
To restrict width content on a full-width page:
- Row Styles > CSS Declarations
- add "max-width: 600px;"
