Global Dodigi Presets UI Style Guide

This global presets style guide is a great way to start a new web design project! Wondering how to turn modules into global presets? For a detailed tutorial on how to use this style guide, click on the link below to be redirected.

01. Color palette

In the first part of the style guide, you can find the color palette that’s been used for the website.

#8300e9

#c17ff4

#99cc00

#565656

#474747

#f7f7f7

02. Visuals

The second part of this style guide shares some of the visuals that are included inside the website.

Hero Design 1

Hero Design 2

Hero Design 3

Section Design 1

Section Design 2

03. Text styles

In this part of the style guide, you’ll find the different text styles that were used throughout the layout pack. There’s a separate preset for each heading style and a global preset with all text styles in one.

Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4

Body

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.

All in one

Heading 1

Heading 2

Heading 3

Heading 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 aliquip ex ea commodo consequat.

04. Buttons

Here, you’ll find the buttons that have been used in the layout pack. 

Button 1

Button 2

Button 3

05. Pop-ups

Here, you’ll find the popups that have been used in the layout.

Pop up 1

Pop up 2

Pop up 3

06. Blurbs

Up next, we have some blurb modules that have been frequently used in the layout pack.

Blurb 1

5

Curabitur aliquet quam

Blurb 2

Trust

Curabitur non nulla sit amet nisl tempus convallis quis. Donec sollicitudin molestie.

Blurb 3

=

Trust

Curabitur non nulla sit amet nisl tempus convallis quis. Donec sollicitudin molestie.

Blurb 4

Access to mentors and industry experts

07. Other modules

Next, we’re sharing other module designs that were used in the layout . Upon importing with presets, these have all been added to your preset library. If you didn’t enable the import presets option, you’re able to turn any one of these modules into a global preset.

Divider 1

Number Counter 1

Curabitur arcu erat

Image 1

Image 2

Call To Action 1

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.

Persons

Aviwe Gwayi

Aviwe Gwayi

Media and communications officer

Accordion 1

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.

Email optin form 1

Contact form 1

Send A Message

Video 1

Slider 1

“Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.”

— Tatiana Gagelman

Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo. Vivamus suscipit tortor eget.

— Lizzie Rose

Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta.

— Alice Krejčová
Blog 1

Post 6

HEADING Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet aliquet leo. Praesent vehicula congue nunc ut pellentesque. Sed vulputate massa sit amet sapien sagittis, in accumsan turpis volutpat. Nulla nibh mauris, malesuada eu rutrum ac,...

Post 5

HEADING Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet aliquet leo. Praesent vehicula congue nunc ut pellentesque. Sed vulputate massa sit amet sapien sagittis, in accumsan turpis volutpat. Nulla nibh mauris, malesuada eu rutrum ac,...

Post 4

HEADING Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet aliquet leo. Praesent vehicula congue nunc ut pellentesque. Sed vulputate massa sit amet sapien sagittis, in accumsan turpis volutpat. Nulla nibh mauris, malesuada eu rutrum ac,...

Blog 2

Post 6

Post 6

HEADING Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet aliquet leo. Praesent vehicula congue nunc ut pellentesque. Sed vulputate massa sit amet sapien sagittis, in accumsan turpis volutpat. Nulla nibh mauris, malesuada eu rutrum ac,...

Post 5

Post 5

HEADING Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet aliquet leo. Praesent vehicula congue nunc ut pellentesque. Sed vulputate massa sit amet sapien sagittis, in accumsan turpis volutpat. Nulla nibh mauris, malesuada eu rutrum ac,...

Post 4

Post 4

HEADING Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet aliquet leo. Praesent vehicula congue nunc ut pellentesque. Sed vulputate massa sit amet sapien sagittis, in accumsan turpis volutpat. Nulla nibh mauris, malesuada eu rutrum ac,...

Post 3

Post 3

HEADING Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet aliquet leo. Praesent vehicula congue nunc ut pellentesque. Sed vulputate massa sit amet sapien sagittis, in accumsan turpis volutpat. Nulla nibh mauris, malesuada eu rutrum ac,...

Post 2

Post 2

HEADING Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet aliquet leo. Praesent vehicula congue nunc ut pellentesque. Sed vulputate massa sit amet sapien sagittis, in accumsan turpis volutpat. Nulla nibh mauris, malesuada eu rutrum ac,...

Post 1

Post 1

HEADING Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet aliquet leo. Praesent vehicula congue nunc ut pellentesque. Sed vulputate massa sit amet sapien sagittis, in accumsan turpis volutpat. Nulla nibh mauris, malesuada eu rutrum ac,...

08. Columns

Last but not least, we have some column styles that have been frequently used in the layout.

Column Style 1

01

Imperdiet Porttitor Sem

Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta.

Column Style 2

02

Imperdiet Porttitor Sem

Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta.

Column Style 3

03

Imperdiet Porttitor Sem

Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta.