The title of a page is h1.
Teaser/Subheaders are h2
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 Default Template layout. This is the default template when you create a new page. To change your template layout, click the Template dropdown in the Page Attributes box on the right.
The other commonly used layout is Flexible Content 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 Flexible Content, click here.
Warning: If you are in the Default Template and then decide to have columns, switching to Flexible Content will erase all your page’s content and vice versa.
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 carots 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 drop-down.
This will also apply to uploading an image under the Featured Image – Header. Click the Add Image button.
Image upload limit is 1oo mb and no more than 4000 pixels wide. You can check your image’s dimensions and size but going to the image > right click and select Properties >General Tab will show the size and Details tab will show the dimensions.
Video
To upload a video, click on Add Media at the top of your tool bar and upload your image. Once the video is uploaded, you can add the video to your webpage.
To add an video, click Add Media > Video > Insert into Page.
Please limit one video per page.
These pages can have a video in the header at the top of the page. If you decide to have a video in the header, select the Type dropdown in the Featured Video box on the right side. Select Internal if the video you want to use has already been uploaded to the website. If not, then select External.
If you want to add a Youtube video > copy the embed code > click on the Text tab on the top right of the edit window and paste the code.
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.
Colored Horizontal Lines (seen above)
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. A light gray variation is also available but only accessibly in Flexible Content layout.
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. In order to get it aligned left, 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