Quick Links

CTA Row

STEP INTO OUR LEGACY—EXPLORE THE HISTORY OF COASTER TODAY!

See History

Colors

White

$white

Black

$black

Gray

$gray

Light Gray

$light-gray (lighten($gray, 25%))

Primary

$primary

Secondary

$secondary

Tertiary

$tertiary

Typography

H1 – Heading 1

H2 – Heading 2

H3 – Heading 3

H4 – Heading 4

H5 – Heading 5
H6 – Heading 6

Paragraph

<p>This is a standard paragraph text.</p>

Address

1129 SE Centennial St, Bend, OR 97702

Preformatted Text

This is preformatted text.

Lists

  • Bullet 1
  • Bullet 2
  • Bullet 3
  • Bullet 4

Numbered

  1. Item
  2. Item
  3. Item
  4. Banana

Container Shortcode

This content is in container shortcode

Wrap content in a responsive container to align it within the page layout.

This shortcode adds a .container class for consistent styling across the site.

Shortcode:

[container]
content_here
[/container]

Compact Shortcode

This content is in compact shortcode

Use this shortcode to condense content into a tighter, well-organized format. Perfect for sections where you want a neat, compact layout.

This shortcode adds a .compact class for streamlined styling and reduced spacing around the content.

Shortcode:

[compact]
content_here
[/compact]

VD Custom Class (Vertical Divide)

Purpose: The .vd class is used to add custom vertical spacing and styling to blocks, ensuring a polished layout and consistent design across different columns or sections.

Usage: To use the .vd class, simply add class="vd" to any block that requires this custom styling. This is particularly useful for enhancing the layout of columns or grouped content blocks.

Example:

Find
Your Tribe

Our community-driven fitness cultures a sense of belonging and mutual support, empowering individuals to achieve their health goals together through shared motivation and accountability.

Everyone
is Welcome

Our gym welcomes all fitness levels, offering a supportive environment where beginners and seasoned athletes alike can thrive and reach their personal goals.

Train for
Everything

At our gym, we focus on training for life, helping you build strength, resilience, and healthy habits that support your everyday well-being and long-term success.

How to Apply:

1. Add the class vd to the parent block where you want to implement custom vertical styling.2. Use it to keep columns or grouped content visually cohesive and well-spaced on your page.

This ensures your layout looks polished and organized, even across different screen sizes.

Widgets and Customizer Options

Our theme includes several widget areas and customizer settings to give you flexibility and control over your content.

Footer Widget Areas:

  • Footer 1, Footer 2, Footer 3: These areas allow you to add widgets that will display in the footer.

Customizer Settings:

  • Inverted Logo: Upload an alternative logo for dark backgrounds.
  • Top Note Bar: Enable a top notification bar and customize its content.
  • Owl Carousel: Easily add a slideshow feature to your homepage using Owl Carousel if enabled.

Go to Customizer

Buttons

Default Button Example

Use this standard button for general actions without additional styling.

Button

Button Variants

Button Outline

Class Name: none – WordPress Outline

Use this red button for secondary actions.

Outline Button

1. Secondary Button

Class Name: btn-secondary

Use this red button for secondary actions.

Red Button

2. Secondary Button with Dark Arrow

Class Name: btn-secondary arrow-dark

Use this button with an arrow icon for prominent navigation or calls to action.

Explore More

3. Tertiary Button

Class Name: btn-tertiary

A neutral button suitable for less emphasized actions.

Learn More

4. Link-Style Button

Class Name: btn-link

This button is styled as a simple text link, ideal for inline actions.

Read More

5. Dark Arrow Button

Class Name: arrow-dark

Use this button with a dark arrow icon for enhanced visibility on light backgrounds.

Next Step

6. Light Arrow Button

Class Name: arrow-light

This button features a light arrow icon, suitable for use on darker backgrounds.

Proceed

How to Use These Buttons

  1. Add a Button Block: Use the WordPress block editor to insert a button block.
  2. Apply a Custom Class: In the “Block Settings” on the right-hand side, add the custom class name (e.g., btn-secondary or arrow-dark) in the “Additional CSS Class(es)” field.
  3. Customize Text and Links: Modify the button text and link URL to suit your needs.

These examples and instructions make it easy to implement various button styles and enhance your website’s visual appeal!

Layouts

50%

50%

66%

33%

33%

33%

33%

[/row-black]

Media Block

Text left

Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow’s nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.

Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow’s nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.

Rows with Background Colors

You can apply slanted or non-slanted designs for your row sections using shortcodes, using the background color and slant attributes.

If you use overlap=”true”, it will pull it over the element above it (eliminating 100px margin top)

Row Black

row-black

Row White

row-white

Row Primary

row-secondary

Row Secondary

row-secondary

Row Tertiary

row-tertiary

Row Gray

row-gray

Row Gray

row-gray

Row Light Gray

row-light-gray

////