DIVI Styeguide

The complete Style guide for Divi Designers.

Hero #1

Titel #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore magna sit voluptatem aliqua.

Learn MoreContact Us

Hero #2

HERO #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore magna sit voluptatem aliqua.

Learn More

Hero #3

HERO #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore magna sit voluptatem aliqua.

Learn More

Page Headings 

Styleguide

Mrz. 10, 2022

Styleguide

Mrz. 10, 2022

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

Alison Jones

Mak Co.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Augustine

Mak Co.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Jon Jones

Mak Co.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Jon Jones

Mak Co.

Buttons

Bright button

Dark button

Bright outline button

Dark outline button

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

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

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

Blog Style #2

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

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

[code]

shortcode #2

[code]

Video

Video #1

EMAIL Optin

Email Optin #1

Email Optin #2

countdown Timer

Tag(e)

:

Stunde(n)

:

Minute(n)

:

Sekunde(n)