Tutorials
Installing Coastal
Install Coastal, import the demo content, and import the Theme Builder Layouts (and optional SOS – Simple Overlay Solution Layout)
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!
