Flexible Content Layout
This title is h1
Teaser/Subheaders
Teasers/subheaders are h2 > Font: Sans Serif > Size: Medium > Color: Medium Blue
Teasers/subheaders are the only text to be in medium blue. All other text is black.
The colored bar line above is called a Gradient Underline. That can be found under Formats > Heading Style. This can only be used when text is in h1. It will center align by default.
The body text is in Paragraph text by default.
Everything so far here is left aligned. Another common alignment is center. See below.
Page Layout Template
This page is currently in the Flexible Content layout. To change your template layout, click the Template dropdown in the Page Attributes box on the right.
The other commonly used layout is Default Template layout. This is the only layout that will support columns and dropdown menus. If you plan to use columns or dropdown menus now or in the future, use Flexible Content. To see a page using Default Template, click here.
Warning: If you are in the Flexible Content layout and then decide to switch to the Default Template, your content will be erased and vice versa.
Accordions
This is an accordion layout. This expandable section is used when you have content that can be hidden, such as answers to an FAQ. You can also add an image to your accordion section. Once you add your accordion, be sure to align it either to the left or right. In this case, the image is aligned left.
Accordion layouts are only available in Flexible Content layouts. If you are using a Default Template layout, you will not be able to have accordions.
Yes! You can have as many as you want. You can also add an image to your accordion section. Once you add your image, be sure to align it either to the left or right. In this case, the image is aligned right.
Columns
Columns can add a dynamic element to dense content. This line is in h2.
Below is a 1/3 column layout. You can have up to 6 columns max. The default spacing on the inside of content columns and between blocks is set to Small.
Title is h6
Here is an example of content that can be in a column layout. Images are optional. A call to action is also optional. Read more >
Title is h6
Here is an example of content that can be in a column layout. Images are optional. A call to action is also optional. Read more >
Title is h6
Here is an example of content that can be in a column layout. Images are optional. A call to action is also optional. Read more >
Buttons
Buttons are commonly used for Call to Actions, or CTA’s such as:
- Donate
- Join us
- Watch Video
Creating your button
- Highlight your text
- Insert a link (you can not create a button if the text is not a link)
- Under Format > Button and Links > Primary
Different types of Buttons
Primary: The most commonly used button.
Secondary: Only used when the Primary button is already used on the same page.
Small: Only used in columns or in Sidebars.
Tip: Keep your CTA’s as short and concise as possible. The longer your CTA, the larger the button, the more space that is wasted.
Links
Linked text should be Bold and Italicized. Once you link the text, the color will change from black to blue.
An alternative to buttons are carets (>), which should be used for supplemental actions such as:
- Fill out this form>
- Read more>
- Learn more>
These carets are also used at the end of a title of an article or at the end of a column. These can be seen in the Column section of the Flexible Content page.
Images and Videos
Images and videos can enhance your webpage and elevated your content.
Images
To upload an image, click on Add Media at the top of your tool bar and upload your image. Once the image is uploaded, you can add the image to your webpage.
To add an image, click Add Media > Image > Insert into Page.
The image size upload limit is 100 mb.
You can control the size of the image by clicking on the image and manually dragging the one of the corner points. If you want a predetermined size, select the image and click on the Edit tool. You will be taken to an Edit Tool page, where you can select a variety of sizes in the size dropdown.
Video
In this layout, it is highly recommended to add a video by selecting Featured Video block on the right hand side. Select the Type dropdown. Select Internal if the video you want to use has already been uploaded to the website. If not, then select External for videos like Youtube.
Adding a video to the body of your text is not recommended, as the width will fill the entire screen.
Hero/Featured Videos
Videos will not autoplay by default. The only videos that should autoplay are ones in the Featured Video section. To turn on autoplay, select the newly added video and select the Edit tool. Once in the Video Details window, check the Auto box.
The video size upload limit is 40 mb.
Footer section is h1 and center aligned
This section is reserved for your call to action, usually with a button.
The Gradient Underline above is center aligned by default. To create this short center alignment, create the horizontal line first. Then select the line. When selected, click the Format option and select Horizontal Rules and selected Short Centered. Select Short Left or Right whichever one is needed. You can also change this by HTML code. To change the alignment short left line, toggle the “text tab” above and replace the html code of the gradient with the following: <hr class=”hr–short hr–left” />
Content should only be centered aligned in the following design situations:
When sidebars are not present on the page.
When a logo/graphic or name needs to be presented prominently, like a sponsor.
If you have a Call to Action button at the bottom of the page.
If you still have questions, please visit our FAQ section
Horizontal Lines
These graphic separators should be used when a webpage has a large amount of content (like this page) and requires a break in the copy.
The Separator, or the light gray bar line above this section, can be added via the Show Advanced Options > Separator at the bottom of this Visual Editor layout.
The colored gradient bar line below can be added by clicking on the Horizontal Line button on the tool bar in edit mode.