Framework

Global Presets UI Style Guide

01. Color palette

In this part of the style guide, you can modify each color inside the Text Module’s background settings. Use that same color code inside the Text Module below it to have a written version of the color code too. Use these color codes inside your Divi Theme Builder default color palette afterward.

#F4F4F4

#3b57a3

#058d9d

#e9476f

#eb5a42

02. Text styles

In the second part of this style guide wireframe, you can style your different text types. You’re also provided with a primary, secondary and tertiary option, each of which you can afterwards turn into individual presets.

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet. I am a link – colour can be changeable though to any of the palette that works (but withthe dark underline.

blockquote

  • Lorum Ipsum

Heading 1

Heading 2

Heading 3

Heading 4

body text

03. Modules

The last 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.

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.

N

Your title goes here

Contact form

2 + 10 =

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.

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.

Slider

“Very impressed! The site has definitely brought in new business. I will be engaging Happy by Design to help with advertising and email marketing”

“Happy by Design were absolutely brilliant from the very start – quick, efficient, innovative and with a flair for style and design.”

“I would recommend Happy by Design without question to others looking for designers that genuinely care about delivering the right results. Many thanks! “

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.

Pricing

Blog

2024 Website Trends

2024 Website Trends

This year has been dynamic for website design, with several trends emerging and shaping how we experience the online world. Are you curious about what the future holds? Let us give you a sneak peek into what we should watch in 2024! 1. Embrace minimalism Websites are...

read more
How do I write copy for my website?

How do I write copy for my website?

As Web Designers, we know the most challenging part of a web design project for many, is web copywriting. Our clients have varied in how much copy they have wanted to write, from zilch, nada, zero, to War and Peace. We have supported many of our clients by creating...

read more

04. Extras

Stuff not covered by the other bits! Tips and tricks.

Tip: Keep Style Guide in Separate Tab to Copy/Paste Specific Styles (Gradients/Box Shadow/Border/…)

Last but not least, it’s a great idea to always keep the style guide in a separate tab. Using Divi’s built-in and cross-page copy-paste option will help you quickly transfer styles, like gradient backgrounds, from one element to another!

Icons

Backgrounds

05. Examples

Website Services

We offer a range of services including graphic design, digital marketing and website hosting as well as our core services below:

Web Design

Design and launch a professional and responsive WordPress website. Happy by Design offer Web Design and Web Hosting packages.

Web Design Services

Website Care Plans

Let Happy by Design take care of your WordPress website so you can focus on other aspects of your business

Maintenance plans

SEO

Increase your website traffic by improving your Search Engine Optimisation (SEO). Affordable SEO packages with reports included.

SEO Packages

Not sure where to start?

Traditional and online marketing can be overwhelming, but we support our clients every step of the way. From the initial meeting, through to project completion. We provide how-to guides and offer plenty of plain-English advice and support throughout.

We believe in building lasting relationships with our clients, so we always go the extra mile to make sure that you are happy! Get in touch so we can help you work out what your business needs.

Why Happy by Design?

We are a small but perfectly formed team in Cheltenham who focus on creating great websites for small businesses, (having lots of fun whilst we do so). Otherwise known as Pandora and Jo!

We are super client focused, approachable and supportive and will ensure you are proud of the marketing you do.

We each have over 20 years experience (many of which spent working together) and will be your biggest supporters! Promoting your work and rooting for your success.

You can find out more about Happy by Design, or if you’d like to hear from some of our happy clients, our testimonials are a good place to start!

What else can we help with?

We also provide a range of other services. Get in touch to find out how we can support your business.

Online

N

Website hosting

N

Content management

N

Responsive web design

N

Wordpress websites

Print

N

Literature

N

Copywriting

N

Promotional material

N

Design for web

Digital

N

Social media

N

Email marketing

N

Animation for social

N

Search engine marketing

“Very impressed! The site has definitely brought in new business. I will be engaging Happy by Design to help with advertising and email marketing”

“Happy by Design were absolutely brilliant from the very start – quick, efficient, innovative and with a flair for style and design.”

“I would recommend Happy by Design without question to others looking for designers that genuinely care about delivering the right results. Many thanks! “

Some of our awesome clients

Squashed Robot Films
The Railway Cheltenham
Wychwood Festival
Cheltenham Comedy Festival
Spectacle of Light
The Vine Cheltenham
The Swan Cheltenham
Thomas Trilby - Entertainer

Get in touch today to discuss your website project