Navbar (Links Only)
Editing Fonts
Watch the video below to learn how to edit fonts used in this template, and to understand how edits will affect your style guide.
Editing Section Spacing
Watch the video below to learn how to edit the spacing of all sections throughout the website.
Color Scheme
Use this section to edit sitewide colors. Ensure you save the swatch every time you make an edit.
Body
The background color. Typically black, white, or gray.
CTA
The "brand" color of the site. Will be on anything needing to pop.
CTA Text
This will be on the text of all elements with the "CTA" color.
Text
All text that goes on the "Body" color will be using this swatch.
Shadow
Elements with a shadow will use this swatch. Can be transparent.
Box Borders
All boxes/anything needing slight emphasis will use this swatch.
Input Borders
Form inputs will use this swatch on their default or placeholder state.
Text Styles
Use this section to edit text sizes. If your project is using global styles, simply remove the classes from the elements. To edit the fonts, please edit the global style "Body (All Pages)".
Subheader 1
Subheader 2 (CTA Color)
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Button Styles
Use this section to edit button size, radius, and padding. To edit fonts and colors, please edit globally!
Spacers
Use this section to resize sitewide spacers.
Border Radius
Below this paragraph you will see some tiny web elements. This is a collection of elements with a border-radius applied, which you can use to update radius values across the site. To view & edit these elements, simply hover over the section.
Note: Buttons and nav dropdowns are not included in this section, so please ensure those are updated too.
Oops! Something went wrong while submitting the form.
$8 per month
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Free
Forever!
Get StartedStarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$14.99
/mo billed annualy
Professional
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$24.99
/mo billed annualy
Get StartedAgency
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$34.99
/mo billed annualy
Get StartedDemo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Free
Forever!
Get StartedStarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$14.99
/mo billed annualy
Professional
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$24.99
/mo billed annualy
Get StartedAgency
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$34.99
/mo billed annualy
Get StartedDemo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Free
Forever!
Get StartedStarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$14.99
/mo billed annualy
Professional
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$24.99
/mo billed annualy
Get StartedAgency
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$34.99
/mo billed annualy
Get StartedWhat's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
END OF SECTION
Hero (Simple)
Subheader
Generic SaaS Template!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Get startedHero (Large Image)
Subheader
Generic SaaS Template!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Get started
Hero (With Email Form)
Subheader
Generic SaaS Template!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Oops! Something went wrong while submitting the form.
No credit card required!
Welcome Hero
Welcome back, friend! 👋
Logo Section (Infinite Scroll)
Logo Section (Standard)
As seen in
Logo Section (Large Grid)
Check out our amazing clients!
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Content Section (Simple Text On Left)
Generic SaaS Template!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Get started
Content Section (Simple Text On Right)
Generic SaaS Template!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Get startedContent Section (Auto Rotating Tabs)
We have some awesome features
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Generic SaaS Template!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vita.
Get startedGeneric SaaS Template!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Get startedGeneric SaaS Template!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Get startedContent Section (Cards)
We have some awesome features
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Content Section (Feature Grid)
We have some features that we think you would fall in love with!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Get startedContent Section (Mobile Display)
We have some features that we think you would fall in love with!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Content Section (Computer Display)
Welcome to our awesome product.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Get started
Accordion Section (Below Text)
Have a question? Get an answer!
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
Accordion Section (Beside Text)
Have a question? Get an answer!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Contact UsWhat's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
Accordion Section (Grid)
Have a question? Get an answer!
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
What's 9 + 10?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 21
Pricing Table (Large Tabs)
Fair pricing for any budget
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
$8 per month
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
$80 per month
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
$800 per month
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Pricing Table (Complex)
Fair pricing for any budget
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Free
Forever!
Get StartedStarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$14.99
/mo billed annualy
Get StartedProfessional
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$24.99
/mo billed annualy
Get StartedAgency
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$34.99
/mo billed annualy
Get StartedDemo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Free
Forever!
Get StartedStarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$14.99
/mo billed annualy
Get StartedProfessional
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$24.99
/mo billed annualy
Get StartedAgency
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$34.99
/mo billed annualy
Get StartedDemo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Free
Forever!
Get StartedStarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$14.99
/mo billed annualy
Get StartedProfessional
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$24.99
/mo billed annualy
Get StartedAgency
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
$34.99
/mo billed annualy
Get StartedPricing Table (Standard)
Fair pricing for any budget
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Free
Forever!
Get StartedStandard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
$79
/mo billed monthly
Get StartedExpert
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
$189
/mo billed monthly
Get StartedDemo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
Free
Forever!
Get StartedStandard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
$59
/mo billed annualy
Get StartedExpert
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Feature label goes here
Feature label goes here
Feature label goes here
Feature label goes here
$159
/mo billed annualy
Get StartedFeature Comparison
We're better than all our competition
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Option
Option
Option
Something you want
Something you want
Something you want
Something you want
Something you want
Something you want
Something you want
Something you want
Contact Form (Standard)
Have a question for us?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Email supportOops! Something went wrong while submitting the form.
Contact Form (With Location)
Oops! Something went wrong while submitting the form.
Have a question for us?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Simple Sign Up Screen 1 (Basic)
Create an account
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Have an account? Sign in
Simple Sign Up Screen 2 (Show/Hide Password)
Create an account
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Have an account? Sign In
Simple Sign Up Screen 3 (Half/Half)
Create an account
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Have an account? Sign In
Simple Sign Up Screen 4 ("Hidden" Password)
Create an account
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Have an account? Sign In
Simple Sign Up Screen 5 (Modal)
Modals
To make these lightbox elements easier to work with, we've added some CSS to the Global Site Header which changes the default styling to display:none, and positioned:fixed. As a result, the modal elements are default visible in the designer and default hidden on the published site.
Login Screen 1 (Basic)
Login
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Need an account? Sign up
Login Screen 2 (Show/Hide Password)
Login
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Need an account? Sign up
Login Screen 2 (Half/Half)
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Upgrade Modal