Quimper Website Template

Global Presets UI Style Guide

This global presets style guide is a great way to get started with customising your new website! Wondering how to use these global presets to make your site your own? If you purchased the WooWoo Website Course add-on with your theme, then click on the button below to take you to the training.

Didn’t get the course but want to add it? Click here to upgrade

01. Colour palette

In the first part of the style guide, you can find the colour palette that’s been used for the child theme. Once you have updated to your own brand colours, use these colours inside the default colour palette in your Divi Theme Options.

#ffffff

#2a292b

#9cdfcb

#e2d2c6

#f7f4f0

02. Visuals

The second part of this style guide shares some of the visuals that are included inside the child theme. By installing the demo content or importing any of the individual layouts, these visuals have automatically been added to your media library, ready for you to use.

03. Text styles

In this part of the style guide, you will find the different text styles that have been used throughout the child theme. There is a separate preset for each heading style and a global preset with all text styles in one.

Heading 1

Preset: QMP H1

Heading 1

Heading 2

Preset: QMP H2

Heading 2

Heading 3

Preset: QMP H3

Heading 3

Heading 4

Preset: QMP H4

Heading 4

Heading 5

Preset: QMP H5

Heading 5

Heading 6

Preset: QMP H6

Heading 6

Body

Preset: Default

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.

Preset: Intro

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.

List

Preset: QMP List 1

  • Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
  • Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Proin eget tortor risus.

Preset: QMP List 2

  • Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
  • Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Proin eget tortor risus.

All in one

Preset: QMP All Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorum ipsum dolor sit amet.

  • Quisque velit nisi

Blockquote

Preset: QMP Blockquote

Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

04. Buttons

Here, you’ll find the buttons that have been used in the child theme.

Button 1

Preset: QMP Button 1

Button 2

Preset: QMP Button 2

Button 3

Preset: QMP Button 3

05. Blurbs

Up next, we have some blurb modules that have been frequently used in the child theme.

Blurb 1

Convallis a pellentesque nec

Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec.

Blurb 2

Convallis a pellentesque nec

Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec.

Blurb 3

Egestas Amet Bibendum Vestibulum Consectetur

Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec.

Blurb 4

7:30 - 8:30
  • Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.
  • Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.

Preset: QMP Column Outline

Preset: QMP Row Outline

Testimonial 1

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

Company Name

Slider 1

Alii tincidunt constituto nam cu, nobis invidunt te mea, has maiestatis quaerendum in. Ex verear veritus accusam pro. Per posse docendi ea. Eu everti persequeris sea, eos corpora adipisci mediocritatem an. Idque ullum sensibus ea pri, ex audiam suavitate reprehendunt est.

Duo quis odio maiorum ei, noster interesset te vix. Erant animal imperdiet vix in, has possit euismod no, choro invidunt nec te. Mea an dictas partiendo, sit quod accumsan ad. Has antiopam iracundia ea, nam ad mollis pericula, per choro omittam indoctum no.

Sarah Finn

company name

Alii tincidunt constituto nam cu, nobis invidunt te mea, has maiestatis quaerendum in. Ex verear veritus accusam pro. Per posse docendi ea. Eu everti persequeris sea, eos corpora adipisci mediocritatem an. Idque ullum sensibus ea pri, ex audiam suavitate reprehendunt est.

Duo quis odio maiorum ei, noster interesset te vix. Erant animal imperdiet vix in, has possit euismod no, choro invidunt nec te. Mea an dictas partiendo, sit quod accumsan ad. Has antiopam iracundia ea, nam ad mollis pericula, per choro omittam indoctum no.

Sarah Finn

company name

Blog 1

06. Other modules

Last but not least, we’re sharing other module designs that were used in the child theme. 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.

Toggle 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.

Accordion 1

Proin eget tortor risus?
Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus.
Quisque velit nisi pretium?
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Lorem ipsum dolor sit?
Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Vivamus suscipit tortor eget felis porttitor volutpat.
Praesent sapien massa?
Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus.

Divider 1

Divider 2

Divider 2

Email optin form 1

Contact Form 1

3 + 4 =

Social Media Follow 1

Social media follow 2

Get Your Copy

Quimper
Website Template