Page headline is an H1 font
This is an H2 headline
This is an H3 headline
This is an H4 headline
Here is some paragraph text, and some notes about the layout.
If you scroll to Page Options at the bottom of the editor you will see that this page is set to a full width layout with no side bar. This allows you to have photos stretch the full with of the screen. If you want a fixed width element (not stretched), you change this layout setting or just set individual elements to a fixed width.
You can also set the header image in the page options. The header text will be the text you entered as the page title. (back at the top of the editor)
Custom Style Sheet: Page header and Call To Action Box Styles
These elements are styled with custom css inserted into each page. Click the gear icon at the to right corner of the editor, paste in the styles and customize colors and sizes in the css. Code is printed at the bottom of this page.
- .callOutBox creates the blue box with light blue border and drop shadow
- .circleBackground creates the light blue background inside the call to action box
- .page-banner sets the color of the border at the bottom of the header image
- div.page-banner div.container h3 sets the styles for the page title font inside the header image
Call To Action: H3 header, aligned to center and white.
This little “Call To Action Box” is a row inside another row. The outer row has a dark blue background, #24909b.
The outer row column settings have the extra class name set to “callOutBox”
The inner row settings have the extra class name set to “circleBackground”.
*Make sure to paste the css styles into the page settings. Copy the code at the bottom of this page.
This is an h4 heading
This is an H2 heading
Box styles (This is a row with two columns.)
The row has a solid border, #24909b, width is 5px, 5px 20px, 5px. Top margin is 10%. The column gap is set to 20px and equal height check box is checked.
Right Column has a margin of -45px to force the heading up into the border. Padding is set to 2%, 5%, 2%, 5%.
H4 heading has 32px font size. h4 background is set to white and it has 10px padding on the left and right.
Left Column has background set to rgba(36,144,155,0.15). If you need to force the background to the bottom of the box, you can adjust the bottom padding until it looks right. (this example has bottom padding set to 19%.)
Image is set to full, centered, rounded corners.
This is an h4 heading
This is an H2 heading
Box styles (This is a row with two columns.)
The row has a solid border, #9a8acc, width is 5px, 5px 20px, 5px. Top margin is 10%. The column gap is set to 20px and equal height check box is checked.
Right Column has a margin of -45px to force the heading up into the border. Padding is set to 2%, 5%, 2%, 5%.
H4 heading has 32px font size. h4 background is set to white and it has 10px padding on the left and right.
Left Column has background set to gba(180,159,204,0.25). If you need to force the background to the bottom of the box, you can adjust the bottom padding until it looks right. (this example has bottom padding set to 19%.)
Image is set to full, centered, rounded corners.
This is an h4 heading
This is an H2 heading
Box styles (This is a row with two columns.)
The row has a solid border, #efbe97, width is 5px, 5px 20px, 5px. Top margin is 10%. The column gap is set to 20px and equal height check box is checked.
Right Column has a margin of -45px to force the heading up into the border. Padding is set to 2%, 5%, 2%, 5%.
H4 heading has 32px font size. h4 background is set to white and it has 10px padding on the left and right.
Left Column has background set to #efead9. If you need to force the background to the bottom of the box, you can adjust the bottom padding until it looks right. (this example has bottom padding set to 19%.)
Image is set to full, centered, rounded corners.
Page header and call out box styles.
This is the custom css code that needs to be pasted into the page editor (gear button at the top right of the editor):
.
.callOutBox {
border-bottom: 10px solid #51b1bb;
border-top: 3px solid #51b1bb;
border-right: 3px solid #51b1bb;
border-left: 3px solid #51b1bb;
background-color: rgba(36, 154, 155, 0.75);
box-shadow: 10px 10px #e0e0e0;
max-width: 525px;
margin-left:auto;
margin-right:auto;
text-shadow: 3px 3px #24909b;
}
.circleBackground{
margin-left:10px;
margin-right:10px;
margin-top:0px;
margin-bottom:10px;
}
.page-banner {
border-bottom: 20px solid #24909b;
}
div.page-banner div.container h3{
font-family: PlayfairDisplay-bold, serif;
font-style:italic;
border-bottom: 10px solid #51b1bb;
border-top: 3px solid #51b1bb;
border-right: 3px solid #51b1bb;
border-left: 3px solid #51b1bb;
background-color: rgba(36, 154, 155, 0.75);
box-shadow: 10px 10px #24909b;
max-width: 525px;
margin-left:auto;
margin-right:auto;
text-shadow: 3px 3px #24909b;
}