Redoing A Website With Divi

Redoing A Website With Divi

First Step The Style Guide

Build a Style Guide
Change the color scheme
Set the color palette
Chose the font pairing
Deal with Accessibility

The Style Guide should be the first consideration when you’re going to redo a website. Even if you’re not redoing a website and you’re starting from scratch, you should create a Style Guide. This takes into consideration all the elements that will give you the effect you wish to have for the website.

There is no perfect style, there’s only the style based on preference.

As you start the process you’ll be able to figure out what you like and what you don’t like.

Which Style is Best?

There isn’t one that is better than another. Styles come and go. What doesn’t change is the way the style should not interfere with the content.

In the Design section of every module in the Divi Theme there are options to create good styles. It’s a matter of balance when it comes to styles. If there’s too much style it’s a distraction. With all the design elements built into the Divi Theme, and other Themes, you can overdo styling.

Colors have meaning and when they’re combined with other colors they either clash or match. Colors also bring an emotional response. Think about how some colors are soothing and other colors provoke action.

Interesting Fact:

“Research reveals people make a subconscious judgment about a person, environment, or product within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on color alone. “Source: CCICOLOR – Institute for Color Research

Color communicates and is an important element throughout the style of the website. If there is an existing color incorporate the same logo colors. Unless you want to redesign the logo. Depending on how well your company is known by it’s logo will help you make this decision. 

Color helps focus attention but it should never be distracting or too bright as to hurt the eyes. Many people are color blind and don’t see true colors. 

There is no perfect color that will be good for everything. Using only one color is uninteresting and the content will be ignored.

The Color Wheel

Most useful tool to use when making sure you get just the right kind of color tone and hue. The software used for this process is Affinity Designer. All of the softwares have the color wheel tool. You will find color charts built into note taking applications. All the time on a website you are looking at a combination of text and color. 

What I like about a color wheel is when you drag the small circle and you will see the color change in the selected image or shape.

Color wheel used to select colors

The Default Color Palette

The Divi Theme comes with the ability to change the Default Color Palette and is located in the Theme Options area. Here you can set the colors. When you set this Color Palette those colors will be used throughout the site.

All colors come with a specific RGB, or CYMK, or #and a number setting. You can put your curser anywhere in the square and the color setting will change giving you the number of that color.

The Right Font

Which font is the right font? There isn’t one. There are six-hundred Google Fonts to choose from so how do you know which one you should use.

Fonts are tricky. They need to be readable. Sounds obvious, but when you look at the many styles of Fonts available you find some are much easier to read than others.

Chose an easy to read Font. You do not want to give the person visiting your website eye fatigue.

You want to be sure you have clean open spaces and readable content. We do so much more reading than we used to do. We are constantly reading text on different sized screens.

For a comparison of how a font looks with color this article The Ultimate Collection of Google Font Pairing gives examples and shows the different sets of font pairing. You do not have to use those exact font pairings.

The choice of fonts is a matter of preference. You will find some fonts appeal to you and others don’t.

Accessibility

Your website must be accessible to someone with a disability. We don’t always remember there are people that are color blind, or handicapped in some way. Their online interaction is going to be different and it’s necessary to take into consideration accessibility.

In this blog post Quickly Build a Website in Divi on my other website RealTime Paradigm, I show an example of how using a flip module is a great effect, but it’s not obvious you need to mouse over the text to see the other side. This could be faulted as being inaccessible.

Animation and moving parts on a web page is now “in style.”

The best practice with animation; use it sparingly. You want to eliminate any barriers to prevent interaction.

The World Wide Web Consortium has an Introduction to Web Accessibility article for further reading.

One common error is an overly complicated navigation system with too many items in a menu that folds out into a sub menu. This can cause confusion as to where you are in the website.

People have visual disabilities. Make sure the text size is not too small, or too light. It’s the perfect way to get someone off your website if they can’t read the text.

A website has to be functional, accessible, operable, and this takes thinking through how you are going to redo the website.

You don’t have to have the website done by a designer. In fact, the best person to design a website is you. Of course you might need some help to do this as website software is now more sophisticated.

The Divi Theme is a robust theme with all the options available including AI generation for images and text.

k

Follow These Steps

Build a Style Guide

Change the Color Scheme

Set the Color Palette

Choose the Font Pairing

Deal with Accessibility

All of these steps will take you on a journey to redo your website. The context of a website is complex but when you approach it from this angle you’ll get the results you want when you redo a website in Divi.

Write in Real Time with the Divi Visual Builder

Write in Real Time with the Divi Visual Builder

Write directly onto a web page in real time?

See your words flow onto the page as you type them into the module? Style the module with a different color and shape? You see it as you style it.

Unheard of. Impossible… until now. Enter the Visual Builder experience built into the Divi Theme.

The Buit-in Divi Visual Builder

Writing is a chore and not everyone likes to do it. But today you need to write and create content regularly. We’re doing it all the time, in emails, texts, tweets, commenting on blog posts, on social media, but we still need to create content for the website and the blog. In some cases you’re able to hire a freelance Copywriter to do the writing for you, but this can get expensive, and you can do it yourself. A common complaint about writing content is; there’s no time to write the list of topics you’re going to write.

Technology to the rescue, you now have a tool to help you write in real time directly onto the web page. Remember that blog post or landing page idea you had for your website? The content is still languishing in the document where you created it… if only you could remember where you created the document. What happened to the goal you made; to write and publish more posts?

The Blog Post Publishing Solution

Use the built-in Visual Builder that comes with the Divi Theme. The Visual Builder is an on-page visual editor where you type into the specific module and see your edits alongside the module as you enter the content.

Traditionally you would write the content in a separate document and then copy and paste it onto the web page or blog post. After you copy and paste the content you have to format headings and subheadings. You may want to use an image, but you have this long block of text to deal with. Where do you add the image? Using the Visual Builder you can access the page layout. Seeing the visual element of the page layout guides the content.

The content is shaped by the amount of space available in context to an image or column width. This helps the writing to be precise and on point. Not only is it clear where you want to put the content, but it’s clear how you want to arrange the content.

A Different Experience

Writing content directly onto the page and editing as you write, is an entirely different experience.  You can immediately tell if the content is relevant and on point. Instead of writing and returning to edit, you edit as you write. This method is efficient, it not only saves time, but it will improve your writing, and help you formulate the sentence structure.

Everyone has a different way of writing and there’s no right way to write.

Creating content regularly is necessary. The content is the ‘voice’ of the business. People are searching for information about what you do. If your website doesn’t have an active blog with current information, people will move onto the blog that does have current and upcoming information.

Engaging Content

Create engaging content is something you think about.

But how do you do this in real time? Using images combined with content is attractive to the reader.

Images engage attention immediately, even before text is read.

Some people will scroll up and down the page reading only the headings and subheadings and then look at the pictures before they read the informaton in the article.

 

The image also needs to be on subject otherwise the viewer’s attention is absorbed into the image. Their minds are off vacationing by the water with the scenic picture of a waterfront.

Connecting With The Content

When you write content using the Divi Visual Builder, you’re not only connecting with your audience, but you’re connecting with the content itself.  Even if you don’t like to write, you’ll find you will read the text you just wrote and writing content will take on a new form. It will actually inspire you and before you realize it you’re creating content instead of talking about it.

If you’re a writer, you’ll be delighted with the Visual Builder. All writers enjoy writing. No one says they are a writer and doesn’t like writing.

When you write and read your own writing, you’re looking into a mirror. This is reflected through the content and because you connect with the content you’re writing you’ll reach the intended audience.

Since using the Visual Builder my content creation has increased one hundred percent. I can press the publish button the same day as the post is written. I’ll return to the just published post the next day to refine the content.

I have completely departed from writing the blog post out in a word document and then copying and pasting it into the blog post. My blog posts don’t wait long to be written.

The Divi Difference – Using the Visual Builder

The Divi Builder

One of the major disappointments with WordPress was the difficulty to put content into the page or blog post. It requried knowing short codes and some HTML.

The Developers of WordPress Themes built a Page Builder specifically to help you add content to the page or post without needing code. If it hadn’t been for the Page Builder, WordPress might not have become such a widely used software for a website. 

The Divi Visual Builder

Adding content to the page and seeing the edits as you add them is an advanced innovation of technology.

This could be the end of long meetings and discussions over wireframe drawings of the website layout that don’t match the content. It’s always been a problem for content creators and designers. No one quite knows what to do with the text and how to arrange it on the page or blog post.

Divi Visual Builder

The Divi Theme Builder

The value in building your own theme is priceless. No other website will have the same style.

Design and Content Creation Teams can now work together and build a complete website with an active blog. The image shows the Theme Building area where you start to build the theme and add templates.

To use the Divi Theme Builder it’s necessary to have foundational knowledge of the basic elements.

You can learn more about Divi here.

Divi Theme Builder

Your Theme

Now it’s possible. You can create a specific design from scratch. Even if you don’t know how to use code. It’s not necessary. Of course this isn’t recommended if you have not ever used the Divi Framework. After you have used the Divi Framework and understand how Divi works you will be able to build your own theme.

This is the future and it gives the user a new role. You don’t have to be asking someone to change something in your website. You can change it yourself.

The Visual Builder has forever changed the way a website is created.

More About Building a Website with the Divi Theme

GDPR and Your Website

GDPR and Your Website

GDPR and Your Website

The European Union General Data Protection Act is in effect May 25, 2018. The Information provided is a courtesy and is not legal advice.

websites must be in compliance

The user now has complete control over their data and has a say in how it may be used.

As a website owner you must explain to the user why you need the data, and what it is for. The user has to agree that you can use their data for the purpose you describe.

There are plugins and software that track people’s movement on a website. You will have to disclose the method you use to collect data.

The fact that software can document the use of a website by a visitor is unsettling for the visitor. This does not promote trust and people are more likely not to do business with companies that disclose information about their activity on a website.

WordPress

Official Support of GDPR

Automattic

Automatic is the owner of WordPress used by 30% of websites worldwide. WordPress will add features necessary to comply with the GDPR regulations.

The law reqires site owners to be transparent and explain how a business collects, stores, or processes personal data of residents in the European Union.

Solution

When you sign up for WordPress.com only limited information is needed to set up an account. Only your email and username is needed.

You have control of your content. The privacy settings give you choices to make your site public, private or hidden from search engines.

Personal Information

Details: email addresses, names IP addresses are considered personal data. Depending on the service you provide you must disclose how this information is used.

Use of Information

The website must disclose how the information is used, allowing the user to take into consideration whether to use that service or not.

Third Party Selling

When your information is shared, a website can share or sell it to third-party services. A user has a right to know what happens to their information.

GDPR Legal Obligation

With the passing of this law a website owner has a legal obligation to comply. This law is not yet effective in the US, but similar legislation might be passed soon.
Information Resources

Elegant Themes provides more detailed information.

WordPress outlines Automattic’s compliance with GDPR.

Official GDPR Information.

Wikipedia General Data Protection

Your Privacy

Take it Seriously

Anyone who uses the Internet, and that’s everyone, has a right to private information treated with respect.

It is not acceptable to just want to profit from someone’s use of a website or a sign up for a service.

The Web is now complex

The web is an information space, where we come together and share information. This information is susceptible and there have been too many personal data breaches.

Security and Confidence

We use the web everyday. As we do we are being tracked and documented. Even though there is a general data protection act, we have seen the violation of privacy continue.

The web is under threat

“if we spend a certain amount of time using the intenet we have to spend a litle proportion of that time defending it, worrying about it, loking out for it… Do me a favor, fight for it for me.” Sir Tim Berners-Lee. The Case for the Web Report.

Every Action You Take

It is time to revise how we interact on the Internet. Read carefully the Privacy and Terms of Service. Just exactly what does this company do with your information?

The Divi Theme is GDPR compliant.

Never Take The Web For Granted

It’s time for regulation and standards to be implemented. The use of the Internet is a right, and this right shouldn’t be violated by anyone. A Contract for the Web outlines the rights and responsibilities for all who use the web.

Sample Contact Form

With optional opt-in buttons

Please indicate your consent:

Privacy

Information you provide is confidential and is only used to contact you.

You must reveal tracking methods used. Articulate the method in the privacy page. Inform the user how you use their information.

General Data Protection 

The implimentation of the General Data Protection Act (GDPR) is not yet in effect in the United States. It is only a matter of time before it will be. There is a definite threat to the web, and if we want it to continue then it is necessary to implement standards. The GDPR is a step forward. The World Wide Web was given to us by a man with an idea to connect information systems to promote knowledge, bring people together, and make knowledge freely available.

Everyone who uses the web can protect the open web as a basic right. No one should be denied access and neither should anyone have their privacy violated.

From the Blog in Real Time

The Truth About AI

The Truth About AI

Welcome to the world of Artificial Intelligence! AI is a rapidly growing field of technology, with more and more applications being found in our everyday lives. AI uses advanced algorithms and automated processes to study and interpret data, enabling machines, devices...

read more
Build Your Website Right The First Time

Build Your Website Right The First Time

Why don't we do it right the first time? Because we don't have the right information. The right information only comes from someone who has made the mistakes themselves and is willing to share their experience so you can do it right the first time.The First Mistake -...

read more
Can You Build Your Own Theme?

Can You Build Your Own Theme?

Yes! How so? The Divi Theme Builder will come out October 17, 2019.  Something we always associated with a designer or a developer is now going to be available for us users. The long awaited Divi 4.0 is about to launch. It will change the way you think about websites....

read more