Image Buttons

Each layout container has custom class: 'image-button-container' applied to it for better responsive breakdown. This is optional but recommended when using throughout your website.

You can copy the layout with the custom image buttons from here and paste them onto your site to ensure proper display. Remember to consider using appropriate amount of description text depending on the context of the button. (i.e. less text for a four column layout than a two column layout etc)

All Content is updated within the element settings. The Title, description and link are the possible fields. The description text (element settings > design > header content area) and the link (element settings > design > footer content area) are both optional.

Once the buttons have been edited, toggle 'compose' mode off and refresh your browser window if you wish to preview them before publishing. Refreshing your browser when toggling 'compose' mode on and off is recommended.

Custom Class: image-button-container

Custom Class: image-button

To update: Element Settings > Design > Header Content

Image Size: 445px wide by 505px tall

Custom Class: image-button

Element Settings > Design > Header Content > Optional description text

Custom Class: image-button

Optional description text

Custom Class: image-button

Optional description text

Custom Class: image-button-container

Custom Class: image-button

To update: Element Settings > Design > Header Content

Image Size: 645px wide by 545px tall

Custom Class: image-button

Optional description text

Custom Class: image-button

Optional description text

Custom Class: image-button-container

Custom Class: image-button

To update: Element Settings > Design > Header Content

Image Size: 645px wide by 375px tall

Custom Class: image-button

Optional description text

Full Width Image Button

Custom Class: image-button

To update: Element Settings > Design > Header Content

Image Size: 1180px wide by 340px tall