Global Presets UI Style Guide

01.

Color Palette

Let’s set some default colors for this site’s color palette. You can also just keep the default colors that are already there. (If you need help choosing complementary colors, try using coolors.co awesome color palette generator. )

02.

Theme Customizer

Before you begin customizing the various modules, head over to the Theme Customizer to set the default fonts, sizes, etc.

    03.

    Speaker Dashboard

    Now head back over to the Theme Customizer and configure the settings for the Speaker Dashboard.

      04.

      Text Styles

      In the third part of this style guide wireframe, you can style your different text types. You’re also provided with a primary, secondary and tertiary option.

      How to edit the different presets:

      1. Click into the settings of a text module.
      2. On the top, click on Preset:…
      3. Click on the pencil icon to edit its respective preset.

       

      Primary

      Secondary

      Tertiary

      All in one

      Heading 1

      Heading 2

      Heading 3

      Heading 4

      Heading 5
      Heading 6

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore etedolore 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.
      • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Heading 1

      Heading 2

      Heading 3

      Heading 4

      Heading 5
      Heading 6

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore etedolore 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.
      • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Heading 1

      Heading 2

      Heading 3

      Heading 4

      Heading 5
      Heading 6

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore etedolore 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.
      • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      04. 

      WorxSpace Modules

      The fourth part of this style guide handles some of the most-used modules inside WorxSpace. Here, we’re also providing you with a primary, secondary and tertiary version of each module which you can style and add as a global preset. Feel free to create more alternative designs for each module.

      Primary

      Secondary

      Tertiary

      Email optin

      Call to action

      Your Title Goes Here

      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 Title Goes Here

      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 Title Goes Here

      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.

      Image

      Blog

      No Results Found

      The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

      No Results Found

      The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

      No Results Found

      The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

      05. 

      Other Modules

      The fifth part of this style guide handles some of the most-used modules inside Divi. Here, we’re also providing you with a primary, secondary and tertiary version of each module which you can style and add as a global preset. Feel free to create more alternative designs for each module.

      Primary

      Secondary

      Tertiary

      Blurb

      Your Title Goes Here

      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 Title Goes Here

      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 Title Goes Here

      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.

      Contact form

      11 + 5 =

      8 + 14 =

      11 + 2 =

      Divider

      Person

      Name Goes Here

      Name Goes Here

      Position

      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.

      Name Goes Here

      Name Goes Here

      Position

      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.

      Name Goes Here

      Name Goes Here

      Position

      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.

      Social Media Follow

      Toggle

      Your Title Goes Here

      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 Title Goes Here

      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 Title Goes Here

      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.

      Testimonial

      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.

      Name Goes Here

      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.

      Name Goes Here

      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.

      Name Goes Here

      Video

      Accordion

      Your Title Goes Here

      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 Title Goes Here

      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 Title Goes Here

      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 Title Goes Here

      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 Title Goes Here

      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 Title Goes Here

      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.