skip navigation

Site Guide

This is your cheat sheet for site edits! Do not delete this page, as it works as a quick reference for best practices, help articles, and the custom features built into your site.

Custom & Reserved Classes

There are several classes that are used to identify global content that will display on every page, please refrain from changing these. You can find them described here.

Page Elements and Layout Containers can be modified by adding one or more custom "classes" to the page element or layout container. This will change the appearance of your site.

You can add more than one class on a page element or layout container by separating them by a space.

Please use caution when adjusting page elements and layout containers that already have custom classes. There is no way to revert edits made to the custom class field. Make note of what classes are being used before changing them, in case you need to go back.

Page Elements

Custom Class Effect
call-to-action This class is used on the Link Page Element. The Link Element must be inside the Global Shared layout container.
social-media-links This class is used on the Social Media Links page element. The Social Media Links element must be inside the Global Shared layout container.

Layout Container

Custom Class Effect
global-shared This class is used on a layout container which lives on the assets page. The container is setup to only contain two page elements with custom classes. The custom social media links & the custom call to action that is shared between the site header & site footer.
global-footer This class is used on a layout container which lives on the assets page. The global footer layout container accepts every page element and does not require custom classes. For the Premier template these elements will not appear in some versions of the global footer.
global-slider This class is used on a layout container which lives on the assets page. The global slider layout container uses only the Single Photo page element and they do not require custom classes.

Custom Class Locations

Name/Reference Element Global Location Required Class(es) Notes
Global Shared Layout Container Site Header & Footer global-shared Located on Assets Page
Global Footer Layout Container Site Footer global-footer Located on Assets Page
Global Slider Layout Container Site Sponsor Slider global-slider Located on Assets Page
Call To Action Link Link Element Site Header & Footer call-to-action Located on Assets Page
Social Media Links Social Media Links Site Header & Footer social-media-links Located on Assets Page

Home Page Design

The home page of your site has been modified to automatically adjust the look & feel of your site. These changes are applied based on the position of layout containers & page elements on the page.

These page elements & layout containers do not require custom classes. To be enabled they only need to be placed in the proper order.

Full Width Media Slider

To enable the full width media slider the Media Slider Element should be inside a single column Layout Container. This layout container should be the first layout container on the page.

Image Size:
We suggest you leave the Aspect Ratio setting of the Media Slider to Ultra-Wide, but we have included all of our suggested image sizes for all three Aspect Ratio selections available:
    - Ultra-Wide: 21:9, 2000x857
    - Wide: 16:9, 2000x1125
    - Standard: 4:3, 2000x1500 (not recommended)

Custom Call To Action Elements

To enable custom call to action elements the Call To Action elements should be inside a layout container that is the second layout container on the page. This layout container can be set to any column arrangement. The Call To Action elements will take on the custom styles only if they are set to their default action style.

Image Size(s):
The CTA images can be any size, but we suggest that they all be cropped/trimmed to be exactly the same size so that they render at the same height.

Global Sponsor Slider

The global sponsor slider lives on the Assets page. It is created out of a layout container that has the class of 'global-slider' and contains only Single Photo Elements. The global slider layout container can be of any arrangement. The Single Photo Elements do not require any classes.

Image Size(s):
Images that are a 1:1 or 2:1 ratio are best. Keep the file sizes to 200px max for width and 150px max for height. SVG files are best if possible, since they’re smaller in size and produce the best quality.

Media Slider Aspect Ratios

// slider-aspect-ratio="21:9" Ultra-Wide
// slider-aspect-ratio="16:9" Wide
// slider-aspect-ratio="4:3" Standard