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.
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.
|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.|
|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.|
|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|
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.
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.
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)
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.
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.
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.
Any image/logo size can be used in your Sponsor Slider. Although, some exceptionally tall images may display smaller within the height constraints of the slider module. If you are seeing any discrepancies, please reach out to your SE contact.
// slider-aspect-ratio="21:9" Ultra-Wide
// slider-aspect-ratio="16:9" Wide
// slider-aspect-ratio="4:3" Standard