๐Ÿ‘‹ Welcome to your site style guide.

This is a quick and easy reference for the general styles, text, and colors that define the overall look and feel of your website. We've also included instructions on how to achieve specific effects.

In case you missed it:
Your site also has an Elements Library, which contains a reference library of saved sections and modules.

Color Palette

These are the colors (and corresponding hex codes) that are used throughout this website.

#6EB43F

#F1F9FE

#009FC3

#0077C0

#01283F

#F28100

#FFB23E

Heading Styles

Your heading font is called Jost.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Text Styles

Your general body font is called Jost.

This is what normal text looks like.
This is bold text.
This is italicized text.
This is a link.

This is a blockquote.

 

Unordered list:

  • This is an unordered list item.
  • This is another unordered list item.

 

Ordered list:

  1. This is an ordered list item.
  2. This is another ordered list item.

This is extra large text. You can make text like this by using the xlarger css class.

This is larger text. You can make text like this by using the larger css class.

This is smaller text. You can make text like this by using the smaller css class.

This is what normal text looks like.
This is bold text.
This is italicized text.
This is a link.

This is a blockquote.

 

Unordered list:

  • This is an unordered list item.
  • This is another unordered list item.

 

Ordered list:

  1. This is an ordered list item.
  2. This is another ordered list item.

This is extra large text. You can make text like this by using the xlarger css class.

This is larger text. You can make text like this by using the larger css class.

This is smaller text. You can make text like this by using the smaller css class.

โšก๏ธ Quick Tip

How to use classes in the page builder

All page builder elements, from rows, to columns, to modules, allow you to assign custom CSS classes to manipulate their appearance in a predefined way. We have indicated when this is the case with any of the elements below.

To assign a class to an element:

  1. Open the Row, Column, or Module settings.
  2. Click the "Advanced" tab.
  3. Scroll to the bottom.
  4. Enter your desired class in the "Classes" field. (To add multiple classes, separate them with a space.)
  5. Hit "Save"

Bonus: You can add the class invert to any element to create inverted text (like this!)

Click to open larger.

Background Colors

You can assign predefined background colors by updating a row or column with the classes indicated below. If you manually set a background color in the page builder, it will automatically override your class.

This has the classes bg-main and invert

This has the class bg-light

This has the classes bg-dark and invert

Button Styles

These are the built-in button styles. The text of each button below is the same as the CSS class you need to assign to achieve the desired look. For example, if you set the class of a button to be alt-button, it will look like the alt-button below.

Inverted Button Styles

These are the button styles when combined with the invert class. In some instances, these styles can be useful when displaying a button on a dark background. To use an inverted button, add invert as a class, in addition to any other appropriate classes. In some cases, the default and inverted versions of a button may (intentionally) look the same.

Resizing Buttons

You can change the size of a button by using the classes larger or smaller. You can also combine these with other button classes, for a wide range of style and size combinations.

Button Shortcodes

You can use a shortcode to display a button in an area that isn't using Beaver Builder.

For use in the visual editor

Basic usage:
[button url="https://example.com" text="Button text"]
Force it to open in a new tab/window:
[button url="https://example.com" text="Button text" new-window="true"]
Add extra classes:
[button url="https://example.com" text="Button text" class="additional-class-name another-additional-class-name"]

For use in the text/HTML editor

<a class="button" href="#">Read more</a>
Read more

Image Sizes & Dimensions

When you upload an image to the site, it's important to make sure that it's the right dimensions (or approximately so). This will help speed up load time and make your site more accessible to people on slower connections.

Page Banners (Featured Image)

1920x960px (approx)

Your featured images are also used as your page banners. If you upload a significantly different size, it may appear blurry, take a long time to load, or be cropped in an unusual way.

Headshots

600x600px (approx)

Ideally, headshots should be cropped before uploading. If you upload an alternate size, it may be cropped automatically.

Inline Images

1200px wide (approx)

Inline images go within your content, and are not intended to display at the full width of the page.