Houghton College Entry Way

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 Blue Button Color

Standard Button

Blue

Text Button

Blue

Page Builder Setting

Page Builder Settings Reference for Gold Button Color

Standard Button

Gold

Text Button

Gold

Page Builder Setting

Page Builder Settings Reference for Green Button Color

Standard Button

Green

Text Button

Green

Brand Colors

Available Colors

blue
gold
green

These colors are 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/4
1/4
1/4
1/2
1/2
2/3
1/3
3/4
1/4
5/6
1/6
1/1

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.