Getting Started with Elements

Within the elements manager, you can change your logos (light and dark), favicon, social share image, header setup, footer setup, and social media links.

Branding

Controlling your logos, social share image, and favicon.

Logo for light backgrounds

This is a darker coloration logo so it contrasts from the lighter background which it'll appear in front of.

Logo for dark backgrounds

This is a lighter coloration logo so it contrasts from the darker background which it'll appear in front of.

Favicon

A 32x32 PNG favicon you'd like to use for your site.

Social share image

This will be used when an image isn't available when a link to a page is shared. In a 16:9 ratio.

Header

Adjusting your header, adding dropdowns, and more.

Display options

When you'd like to adjust how your header is setup, hover the next to "Configure header" then you can use the alignment icons to select how you'd like it to look.

display-options

Background color

To adjust the background color, hover the next to "Configure header" and select the first tab which a color square.

You can either select a preset color you setup while using our styles manager or enter an RGB or HEX color code.

Compensation for light or dark backgrounds

Following up on adjusting the background color, if you have set a darker colored background, you can use the white "T" in front of the black square or the versa for a lighter background.

More can be found on this and how to setup the font colors when this is adjusted in this help doc: Styling for light and dark backgrounds.

light-or-dark-backgrounds

Adjusting the logo height (size)

You may do this by using the up and down arrows next to "logo he:"

elements-two

Adjusting the logo positioning

Mattering on your logo's layout, you may have to adjust it in order for the positioning to align with the links/button within your header.

adjust-logo-position

Header padding

If you'd like for your header to be smaller or larger in height, you can use the padding tool to adjust that.

header-padding

Adding text links to the header

adding-text-links

To add a link, click the "+" button, type the text for the link then within the tool-tip that appears, add either a smart link or full URL.

Although we do not suggest it, you can use the new tab icon

Adding an action link to your header

If you'd like a button or a link with an arrow within your header you can use the lightning icon. To customize this reference the style manager getting started doc.

adding-action-links

Footer

Adjusting the footer background-color

Alike the header, you can either use a preset color designated within styles manager or enter a HEX or RGB color.

Compensation for light or dark backgrounds

Following up on adjusting the background color, if you have set a darker colored background, you can use the white "T" in front of the black square or the versa for a lighter background.

More can be found on this and how to setup the font colors when this is adjusted in this help doc: Styling for light and dark backgrounds.

Adding to your footer

Area for address or contact info

This is a set of two open text fields for your company address, email, or phone.

Social links

Wanting to allow people to follow along on other mediums? Add your social links.

Adding links

Links have a structure within the footer, there's a category which contains a list of links.

To add a category simply click the lightning icon and to delete it, delete all the links within the category.

No results found