Styleguide

Divi Ecommece Pro Styleguide

Backgrounds

.dsdep-background-color-primary

.dsdep-background-color-second

.dsdep-background-color-dark

.dsdep-background-color-light

Borders

.dsdep-border-color-primary

.dsdep-border-color-second

.dsdep-border-color-dark

.dsdep-border-color-light

Buttons

.dsdep-button-primary

.dsdep-button-second

.dsdep-button-outline

.dsdep-button-underline-primary

.dsdep-button-underline-second

.dsdep-button-medium

.dsdep-button-large

Lorem ipsum dolor sit

.dsdep-module-button-primary

Lorem ipsum dolor sit

.dsdep-module-button-second

Lorem ipsum dolor sit

.dsdep-module-button-outline

Lorem ipsum dolor sit

.dsdep-module-button-underline-primary

Lorem ipsum dolor sit

.dsdep-module-button-underline-second

Lorem ipsum dolor sit

.dsdep-module-button-medium

Lorem ipsum dolor sit

.dsdep-module-button-large

Box shadow

.dsdep-shadow-primary

.dsdep-shadow-second 

Lorem ipsum dolor sit

.dsdep-module-button-shadow-primary

Lorem ipsum dolor sit

.dsdep-module-button-shadow-second 

Colors

Lorem ipsum dolor sit

.dsdep-color-primary

Lorem ipsum dolor sit

.dsdep-color-second

Lorem ipsum dolor sit

.dsdep-color-dark

Lorem ipsum dolor sit

.dsdep-color-light

Lorem ipsum dolor sit amet

.dsdep-link-color-primary

Lorem ipsum dolor sit amet

.dsdep-link-color-second

Lorem ipsum dolor sit amet

.dsdep-link-color-dark

Lorem ipsum dolor sit amet

.dsdep-link-color-light

Lorem ipsum hover over me

.dsdep-link-hover-color-primary

Lorem ipsum hover over me

.dsdep-link-hover-color-second

Lorem ipsum hover over me

.dsdep-link-hover-color-dark

Lorem ipsum hover over me

.dsdep-link-hover-color-light

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

.dsdep-heading-color-primary

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

.dsdep-heading-color-second

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

.dsdep-heading-color-dark 

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

.dsdep-heading-color-light

Border radius

.dsdep-borderRadius

.dsdep-borderRadiusImage 

Checklist

  • Dolore magna aliqua
  • Ut enim ad minim veniam quis nostrud
  • Duis aute irure dolor in reprehenderit

.dsdep-checklist 

  • Dolore magna aliqua
  • Ut enim ad minim veniam quis nostrud
  • Duis aute irure dolor in reprehenderit

.dsdep-checklist + .checklist-secondary

  • Dolore magna aliqua
  • Ut enim ad minim veniam quis nostrud
  • Duis aute irure dolor in reprehenderit

.dsdep-checklist + .checklist-dark

  • Dolore magna aliqua
  • Ut enim ad minim veniam quis nostrud
  • Duis aute irure dolor in reprehenderit

.dsdep-checklist + .checklist-white

  • Dolore magna 
  • Ut enim ad 
  • Veniam
  • quis 
  • Lorem
  • ipsum
  • Amet consectetur
  • Elit sed
  • Tempor
  • incididunt
  • Duis aute
  • irure dolor

.dsdep-checklist + .checklist-inline

  • Lorem ipsum dolor sit amet consectetur
  • Elit sed do eiusmod tempor incididunt
  • Dolore magna aliqua  ut labore
  • Ut enim ad minim veniam quis nostrud

.dsdep-checklist + .checklist-2-col

  • Lorem ipsum dolor sit amet
  • Elit sed do eiusmod tempor
  • Dolore magna aliqua
  • Ut enim ad minim veniam
  • Ullamco laboris nisi ut aliquip 
  • Duis aute irure dolor in reprehenderit

.dsdep-checklist + .checklist-3-col

  • Lorem ipsum dolor sit
  • Elit sed do eiusmod
  • tempor incididunt
  • Dolore magna aliqua
  • Ut enim ad minim
  • veniam quis nostrud
  • Ullamco laboris nisi
  • Duis aute irure dolor in 

.dsdep-checklist + .checklist-4-col

Headers

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

.dsdep-heading-with-line + .line-dark

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

.dsdep-heading-with-line + .line-light

Accordion Divi Module

.dsdep-accordion

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.

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.

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.

Blog Divi Module

.dsdep-blog

Email Optin Divi Module

.dsdep-optin

.dsdep-optin + .dsdep-inline-optin

Contact Form Divi Module

.dsdep-contact-form

Testimonial Divi Module

.dsdep-testimonial

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.

.dsdep-testimonial + .has-rating + .stars-5

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.

.dsdep-testimonial + .has-rating + .stars-4

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.

.dsdep-testimonial + .has-rating +  .stars-3

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.

.dsdep-testimonial + .has-rating +  .stars-2

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

.dsdep-testimonial + .has-rating + .stars-1

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

.dsdep-testimonial + .has-rating

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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.dsdep-testimonial 

Search Divi Module

.dsdep-search

Social Media Follow Divi Module

.dsdep-social-icons

facebooktwitterpinteresttumblrvimeo

Slider Divi Module

.dsdep-slider

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.

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.

Woo Add to Cart Divi Module

.dsdep-add-to-cart

Woo Reviews Divi Module

.dsdep-reviews

Woo Images Divi Module

.dsdep-woo-images

Woo Tabs Divi Module

.dsdep-woo-tabs