DIVI STYLE GUIDE PRO
The complete Style guide for Divi Designers.
Hero #1
HERO #1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore magna sit voluptatem aliqua.
Hero #2
HERO #2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore magna sit voluptatem aliqua.
Hero #3
HERO #2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore magna sit voluptatem aliqua.
Page Headings
Style guide
Style guide
Headings & Paragraphs
Heading One
Heading Two
Heading Three
Heading One Light
Heading Two Light
Heading Three Light
Normal Paragraph
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
A Quote
This is a quote
” Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. “
NOTICES
Notice #1
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
Notice #2
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
Section Descriptions
Donec id elit non mi porta gravida at egeum sociis natoque penatibus et magnis dis
TESTIMONIALS
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Buttons
Bright button
Dark button
Bright outline button
Dark outline button
Bright Rounded
Dark Rounded
Bright rounded outline
Dark rounded outline
BLURBS
Blurb Style #1
Aliquam porttitor mauris
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
Blurb Style #2
Pellentesque in ipsum id orcipibus?
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat.
Blurb Style #3
Event Details
Blurb Style #4
Dark Blurb
Vulputate Magna Eros
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Standard Blurb
Vulputate Magna Eros
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Bright Blurb
Vulputate Magna Eros
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Light Blurb
Vulputate Magna Eros
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Images
Normal Image
Black & White
Hover to Opacity
No Rounded Corners
BLOG
Blog Style #1
How To Make A WordPress Website 2023
https://youtu.be/OUfmu4cCCSc In this video, we'll walk you through the entire process of setting up a WordPress...
Blogger Pro
How to make an online course website
In this video, I show you step-by-step how to make an online course website with WordPress, LearnDash, and Divi. Buy...
5 Ways To Make Money As A Web Designer.
Blog Style #2
How To Make A WordPress Website 2023
https://youtu.be/OUfmu4cCCSc In this video, we'll walk you through the entire process of setting up a WordPress...
Blogger Pro
How to make an online course website
In this video, I show you step-by-step how to make an online course website with WordPress, LearnDash, and Divi. Buy...
5 Ways To Make Money As A Web Designer.
CONTACT FORM
Contact Form #1
Contact Us
Contact Form #2
Contact Us
Contact Form #3
Contact Us
Contact Form #4
Contact Us
Social Media icons
Social Media Style #1
Social Media Style #2
Accordion
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sagittis, urna eu convallis pulvinar, urna enim mollis magna, eget dictum lorem quam eget leo. In non arcu tempor, placerat quam sed, luctus est. Fusce ac eleifend leo.
School Meals Menu
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Call To Action
Call To action #1
Get a Free Quote in Under 24hrs!
Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada.
Call To action #2
Get a Free Quote in Under 24hrs!
Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada.
Shortcode
ShortCode #1
shortcode #2
Video
Video #1
EMAIL Optin
Email Optin #1
Email Optin #2
countdown Timer
Day(s)
:
Hour(s)
:
Minute(s)
:
Second(s)