Site Style Guide

Header One Styling

WYSIWYG Settings

WYSIWYG Settings Reference for H1

Output

Heading One

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Two Styling

WYSIWYG Settings

WYSIWYG Settings Reference for H2

Output

Heading Two

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Three Styling

WYSIWYG Settings

WYSIWYG Settings Reference for H3

Output

Heading Three

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Four Styling

WYSIWYG Settings

WYSIWYG Settings Reference for H4

Output

Heading Four

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Five Styling

WYSIWYG Settings

WYSIWYG Settings Reference for H5

Output

Heading Five

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Six Styling

WYSIWYG Settings

WYSIWYG Settings Reference for H6

Output

Heading Six

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Paragraph Styling

WYSIWYG Settings

WYSIWYG Settings Reference for Paragraphs

Output

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

This is a paragraph that contains some inline styles. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Inline Text Styling

WYSIWYG Setting

WYSIWYG Settings Reference for Bold Text Inline Style

Output

Bold Text

WYSIWYG Setting

WYSIWYG Settings Reference for Italic Text Inline Style

Output

Italic Text

WYSIWYG Setting

WYSIWYG Settings Reference for Underline Text Inline Style

Output

Underline Text

Button Styles

Page Builder Setting

Page Builder Settings Reference for Outlined Button Style

Output

Outlined

Page Builder Setting

Page Builder Settings Reference for Filled Button Style

Output

Filled

Icon System

HTML Code

<i class="material-icons">ICON_NAME</i>
A full list of available icons can be found here.

Output

whatshot

Brand Colors

Available Colors

mid grey
light grey
red
gold
tan

These colors available for use for text, backgrounds and buttons.

Grid System

Page Builder Settings

Output

WYSIWYG Settings Reference for Column Widths
1/6
WYSIWYG Settings Reference for Column Widths
1/5
WYSIWYG Settings Reference for Column Widths
1/4
WYSIWYG Settings Reference for Column Widths
1/3
WYSIWYG Settings Reference for Column Widths
1/2
WYSIWYG Settings Reference for Column Widths
2/3
WYSIWYG Settings Reference for Column Widths
3/4
WYSIWYG Settings Reference for Column Widths
5/6
WYSIWYG Settings Reference for Column Widths
1/1

Full Grid

1/6
1/6
1/6
1/6
1/6
1/6
1/5
1/5
1/5
1/5
1/5
1/4
1/4
1/4
1/4
1/3
1/3
1/3
1/2
1/2
2/3
1/3
3/4
1/4
5/6
1/6
1/1

Spacing System

Margin and padding of rows and columns can be modified to adjust spacing of content. Margin will affect the how much the row pushes against outer elements. Padding affects how much the row pushes content within it.

Page Builder Settings Reference for Row and Column Spacing

Hiding System

Sections and elements can be hidden in the Page Builder by adding the following classes.

Page Builder Setting

Page Builder Settings Reference for hiding onmobile class

Adding the classname hide-mobile will hide the element at all screen sizes less than 840 pixels wide.

Page Builder Setting

Page Builder Settings Reference for hiding ontablet class

Adding the classname hide-tablet will hide the element at all screen sizes between 840 and 1280 pixels wide.

Page Builder Setting

Page Builder Settings Reference for hiding ondesktop class

Adding the classname hide-desktop will hide the element at all screen sizes larger than 1280 pixels wide.

Page Builder Setting

Page Builder Settings Reference for hiding onall class

Adding the classname hide-all will hide the element at all screen sizes.

Page Builder Setting

Page Builder Settings Reference for hiding oncombined class

Classes can also be combined separated by a space to hide elements at mixed sizes.

Ready to take the next step?

Whether you have been attending church your entire life or this is your first time exploring faith, we will meet you wherever you’re at on your journey. To help with this, we offer a few ways for you to take steps forward in your faith.

Learn More