Tutorials

Installing Coastal

Install Coastal, import the demo content, and import the Theme Builder Layouts (and optional SOS – Simple Overlay Solution Layout)

Download Layouts

Getting Started

After you’ve installed and imported the demo site, learn how to start customizing Coastal to your liking.

How to edit the CSS

If need be, you may have to edit some CSS to change certain design aspects of Coastal. Don’t worry … it’s very easy and John walks you through it.

Using the “hero” Body Class

If you’d like the navigation bar to be transparent on your page (like the demo Home page), this tutorial is for you.

Editing the Menu Colors

Learn how to change the menu link colors, box shadow, the call-to-action button colors, and the mobile menu background image.

Floating Columns

Learn how to adjust the floating columns in the demo Home page. Easily adjust the padding using CSS.

Side-by-side Buttons

Learn how to use the side-by-side buttons feature. You could also easily use this technique on any Divi site.

Two Column Switch

Learn how to switch the column order for tablet & mobile. This is great for two column sections with an image and content.

Animated Blurbs

Learn how to adjust the animated blurb links. This technique could be used on any Divi site. Referral tutorial

Ken Burns Effect

Learn how to implement the Ken Burns effect to background images in Coastal. This technique could be used for any Divi site.

Blog Read More Links

Learn how to adjust the Learn More links in the Coastal blog feed. Easily adjust the button colors.

Editing the Footer

Learn how to edit Coastal’s footer in the Theme Builder. Also learn how to adjust the order of a three column row. This technique could be used on any Divi site.

We got your back.

Need help with Coastal that’s not covered here? Hit up our Superfly Support and they’ll be happy to assist you!

Contact Support