• A Nice Page Heading

    This is for a brief description or sentence that sells the page to its visitor. This should be kept somewhat brief. This exists in two elements for desktop/mobile rendering.

A Nice Page Heading

This is for a brief description or sentence that sells the page to its visitor. This should be kept somewhat brief. This exists in two elements for desktop/mobile rendering.

Style Guidelines


This is an example of paragraphs, lists, and headings and font variants that are within a Text Block element. Please  ensure all elements are housed within columns while using the page builder. This is an example of bold text. This is an example of italic text. This is an example of bold, italic text.

This is an example paragraph that is housed inside 1/2column Enfold page builder element. It is set to break to full with on tablet-sized devices (device width less than or equal to 990px wide). Almost all elements should have their breakpoints set to break at 990px.

Paragraph and Text Usage


Whenever possible, place unique, not directly related paragraphs into new text blocks. A good guide for this is if you would introduce the next paragraph with an heading element, it should be placed within its own text block.

Headings, unless using the Special Heading element, should be placed within the same text block as its related paragraph(s). Further, if possible, these paragraphs should also be wrapped within a column element for animation purposes.

Bold and italic text are supported. Use bold and italic text for emphasis of words within paragraphs, not for paragraph headings. While italic text is supported, its use is heavily discouraged and instead it is recommended to use bold text to show emphasis on this website in an effort to keep the typography consistent with the brand.

Heading Usage


H1 elements should never be used inside page content. Instead, use H2-H6 Elements. Below are some guidelines on when to use which.

H2 Usage

The H2 element should be used to denote new sections of content within a page. For instance, for an about page, there may be a section about a company’s history, a section about its company culture, a section containing contact information, etc. These sections would be titled using an H2 element. This section on heading usage is titled using a H2 element.

H3 Usage

H3 elements are great for sub-sections of sections. For instance, Under a “company history” section, there may be a paragraph about the companies founding, a paragraph about the company’s growth, and a paragraph about the company’s current initiatives. These paragraphs could be headed with an H3 element to introduce them. This paragraph and the previous paragraph are headed with H3 elements.

H4-H6 Usage

There are currently no usage guidelines concerning H4 and H5 elements. Use these at your own discretion. There are also no rules against using the H6 element but doing so is heavily discouraged. Please avoid it.

Special Headings

Generally, you’ll use special headings to display headings with a lightblue bar underneath them like so. While headings H1-H6 are supported by the Special Heading element, its best used only with H2 elements. You may also render the blue bar inside of a paragraph by using the horizontal element inside a text block.

You can change the color of the bar below the heading to darkblue or teal by adding one of the following classes, respectively: special-heading-border–darkblue, special-heading-border–teal.

Whitespace

The Enfold Separator/Whitespace element is very useful for spacing elements on a page. You may need to use them to add space between column rows (for instance to add some white space between sections like above). When using a Separator/Whitespace element to add whitespace, set it to “Whitespace” and set it’s size to no greater than 60px. Sometimes you may need to set this to a lower value for consistent spacing.

When you use the Enfold Special heading on a new row, you likely will not need to use the Whitespace element.

Images

Images, by default, will not have a corner clip effect. To add this, one must add a custom css class to the image element in the Enfold page builder. There are four classes, each clips the image in a specific corner:

  • clip–top-left
  • clip–top-right
  • clip–bottom-left
  • clip–bottom-right

Animations

This website utilizes animations often however to stay consistent with the brand only a handful of animations are used for certain elements. Unless the element does not exist inside an Enfold column element, the animation should always be applied to the column directly, not the element.

Nearly every element placed with the Enfold Page Builder should feature an animation.

Paragraphs and 1/1 Columns

Generally, paragraphs of text should and 1/1 columns be animated From Bottom to Top, and always when the paragraph is full width or within a 1/1 column.

Image Content

Images may use the following animations: From Bottom to Top, From Right to Left, Fade In, and From Left to Right (if the page does not feature a sidebar). While you should decide which animation to use based on the content on the page, generally Fade In and from Right To Left animations.

Column Content

From Left to Right and From Right to Left animations may be used for columns that are not full width, on Special Headings that are not wrapped within a column element. And on images.

If a page features a sidebar, do not use the From Left to Right animation and instead use From Right To Left. If a page does not feature a sidebar, either animation may be used. However, use From Left to Right for content on the left side of the page and From Right to Left for Content on the Right Side of the Page.