Warning: Invalid argument supplied for foreach() in /home/realtio9/public_html/joanmargau/wp-content/plugins/divi-overlays/divi-overlays.php on line 3008
Redoing A Website With Divi

Redoing A Website With Divi

Website Redo

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

Style Guide

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. 

Color Scheme

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. If you do decide to change the brand colors and logo it will be an opportunity to email to your existing clients the new changes in a logo and a website.

Color helps to focus our attention as does being able to easily read the content. The color of something can make it look pleasant or unpleasant. 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.

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

As you do this you’ll get the color that resonates with the color scheme you have in mind. 

The Implications of Color

Green: Wealth, Health, Balance, Relaxing, Easy-going Environment

Yellow: Creative, Friendly

Blue: Loyalty, Coolness, Trust, Security

Purple: Soothing, Calming, Luxury, Truth

Orange: Aggressive, Excitement, Fun

Red: Energy, Urgency, Courage, Warmth

Pink: Romantic, Tranquility, Sexuality, Feminine

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. 

Expriment with the Color Palette. There is no right way to do this. But what you’re looking for is a uniform color for your website.

Font Pairing

Which font is the right font? Again, 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. For a website, you want to 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.Have you noticed how many people wear eye glasses, myself included. It’s not confined to older people it’s a phenomenon of using the eyes constantly to read text on different sized screens.

Here’s a very good website that you can see an example of font pairing with the colors. The Ultimate Collection of Google 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 that there are people in the world 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 the blog post Quickly Build a Website in Divi that I wrote on RealTime Paradigm Blog. I show an example of how using a flip module is a great effect, but it’s not obvious that you need to mouse over the text to see the other side.

This could be faulted as being inaccessible. You do want to watch for that kind of use. Animation and moving parts on a web page is now the “in style.” Just because you think it looks cool doesn’t mean you should use these effects. The best practice on this one is to use it very 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, this is why you should always make sure your text size is not too small. It’s the perfect way to get someone off your website if they can’t read the text.

The whole purpose of 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. 

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.

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 – It’s FREE!

This article gives you the information. It’s written from my experience. I’ve made them all.  The First Mistake was starting a free website. It looked simple to do, or so the text read so I clicked the “get started” button. Every step was complicated. First I had to select a name for my website then I discovered the name I wanted to use was taken by someone else.  With the free website the name of the website had the website platform in the URL and this signals to the world it’s a freebie. The only way the platform name wouldn’t be in the URL was to upgrade.

I thought the website was free?  The website is free, but the URL looked like this: http://mywebsitename.wordpress.com this didn’t look right. I don’t want wordpress.com in the URL! Too bad this is how a free platform works.

If I wanted to continue, I would have to buy a domain name and then I could have the URL as http://joanmargau.com. If I had the right information to begin with I wouldn’t have started a free website with a free theme. I didn’t like the website and I didn’t want to buy a domain name… and I couldn’t figure out how to use the theme either. I thought WordPress was easy to use. It is when someone shows you how it works.

N

Step # 1 The Domain Name

You don’t want to start out with a free website at all. The first step is to decide on a domain name and to check if this domain is available to use. The name of your website should tell people what the website is about. It is the name of the industry or business or your personal name. But it is the first thing you need to do before starting a website. 

N

Step # 2 The Website Must be Self-Hosted

Self-hosting isn’t hosting your website on your computer. It’s using a Hosting Company to host your website on their server. Which is the best Hosting Company? The one that gives you the best support based on your level of comfort with the intricacies of website management.

 

N

Step # 3 Choosing the Right Hosting Company

Don’t go with the cheapest price. Cheap hosting fees mean insufficient memory and you’ll have to upgrade to get enough memory. Even if you think your website is only a small one with a few pages and a blog. The content will soon mount up with images and videos and the website will run out of memory, and you’ll have to upgrade your hosting fees.

The Hosting Company must be able to give you PHP 7.0+ without costing extra. You want free SSL certificate, daily backups of your website and email service, and 24/7 helpful tech support and WordPress expertise.

N

Step #4 Choosing the Website Software

This time you’re in luck the best software for a website is WordPress and there is no cost to you to use WordPress. It’s delivered to you when you sign up with a Hosting Company. WordPress is the most used software for websites worldwide. It is secure and updated regularly. The next step is the most challenging one.

N

Step #5 Choosing the WordPress Theme

There are literally hundreds of themes each one better than the one you looked at previously, and they’re free. By now you should be wary of the word “free.” My advice; never go with a free WordPress Theme. Do yourself a favor and go with the most used Premium WordPress Theme in the world, the Divi Theme. This is all you will need.

One of the things you do not want to do is to have to change your theme each year. Why? A theme comes with a one year license to use and to continue using that theme you must renew the license. 

Why the Divi Theme?

There are plenty of themes and why I’m prepared to recommend the Divi Theme is because it’s the one theme that let’s you be in charge of your website. The idea that only a designer or a programmer can build a website isn’t true. You can build a website without knowing code and be in control of the website you own. There is a learning curve, as there is with all software. But once you know how it works, you’ll be building your website.

To use the Divi Theme you must be a member of Elegant Themes.

The Leader in the Industry

In my opinion this theme is the best WordPress theme. I have used other WordPress themes but they aren’t as versatile as the Divi Theme. Divi comes with an on page Visual Builder and a Theme Builder.

No other WordPress Theme offers this much versatility. And, you don’t need to know how to code to use the Divi Theme.

 

The Most Important Consideration – Your Budget

How much money are you wanting to spend? None? Then you’ll live with the free website and eventually come to the point of dissatisfaction because you can’t get what you want out of the website and it isn’t working. If you’re going to have a website it will take an investment on your part, but it’s not as expensive as you think.

The Figures

Step # 1: The Domain Name. You can purchase the domain through the Hosting Company as most of them are Domain Registrars. A domain is priced from $9.88 to $20. All domains must be renewed annually to keep them from dropping into the public domain. Some Hosting Companies will include the domain for free when you sign up with them for hosting. This might be for the first year of hosting only.

Hosting Fees

Step # 2 and #3: Hosting Company. A Hosting Company will have attractive low introductory rate offers. After the introduction period the price will go up to the regular monthly rate. Always make sure you know what that rate is. Don’t be lured by the cheaper hosting company. Remember, cheap means insufficient memory and upgrade to use more.

For more information take a look at SiteGround pricing. As a comparison take a look at WordSpaces pricing.

Divi Theme Purchase

Step # 4 and #5: WordPress and the Divi Theme. WordPress is included. A WordPress Theme overlays the WordPress core. The core is the free part of WordPress. To use the Divi Theme you must be a member of Elegant Themes. The memebership includes tech support and all the products that come with the Divi Theme. The products are Monarch, a social media sharing plugin, Bloom an email opt-in plugin, and premade layout packs added weekly to the Divi Library.

The Elegant Themes membership is $87 per year. You can upgrade to a lifetime membership with a one time fee for $249 and thereafter your fees for all the products and features will be $0.

If you’re budget conscious, there will be special discounts and offers and of course there’s Black Friday in November.  This means you get a huge discount off joining Elegant Themes and the lifetime membership.

What is your budget? How much should you spend? As much as you need depending on where you want to go with your website. 

Some of the links on this page are my affiliate links. I only recommend products I use on my websites and on clients websites.

Can You Build Your Own Theme?

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. You won’t have the problems becuase you’ll have the right tools to use.

The Divi Theme was created by Elegant Themes in 2013. It has become the most used theme in the world and has been translated into thirty-two different languages because it’s so versatile and you don’t have to know how to do HTML.

Designers and Developers have been using a Child Theme method to build stylized themes. The Divi Theme Builder makes Child Themes something you don’t really need. That’s the way of technology it forges the new and gives everyone the opportunity not just the few elite. Now you can start to think about building your own unique website with your style.

Develop Means Build

Develop means build, but not in the sense of building it from the ground up and using code. WordPress core software is already coded. A WordPress Theme overlays the WordPress framework. The Divi Theme is a theme framework and this means you’re now in the position of being able to build a website.

The Web Page Structure

A web page is divided up into sections. The top part of the page is the Header, the content is in the middle, and the footer is at the bottom of the page. The web page isn’t the same as an 8″ x 11″ piece of paper. It’s as long as the content on the page.

The information inside the web page is made up of dividers, or div containers stacked on top of each other. The dividers are arranged into column widths to put content on to the page.

The header has the logo and the main nagivation menu. The footer has information such as the copyright notice and other links and information. The header and the footer appear on each page throughout the site, this is known as global or sitewide.

h

The Page Builder Concept

The page builder overlays the existing WordPress editor and helps you put content onto the page. As the term implies it builds the page without your having to use code. It is a method created by the developers. Not everyone likes to  use HTML.

We’re looking at the web page from the front end, the finished product. All software used on a computer is operated by code that runs in the background while the software is in use.

With the Visual Builder you see your edits on the page as you enter the content into the mdoule.

Drag and Drop Modules

The modules are self-contained. They are mini content management systems for a particular item you want to use on the web page.

This is also an invention of the developers who figured out how to use the basic icon commands and wrote the code to create the specific module with settings for content, design, and advanced styling.

The whole style of drag and drop modules has changed the way a website is built. The Global Editor allows you to save the module in a particular style throughout the website. This means you don’t have to style each module.

Styling the Content

With the new Theme Builder you can style the header and the footer, this means you don’t have to use a Child Theme for a website.

i

Your Website

Have you been thinking that even building a website is too much technical know how. Contact me and let’s talk.

Building a Website Before Building a Theme

Building a website isn’t done in three steps. Before you can run and build a theme you will need to learn to walk in the foundational knowledge of how a theme functions. The Divi Theme now includes builder features. These builder features are the most advanced tools that will assist you with your project no matter what level the project is at. Even if it’s still an idea inside your head, you’ll find the solution in one of the Builders built into the Divi Theme.

The Divi Builder

The Visual Builder

The Theme Builder

The Divi Builder

This is built into the Divi Theme but is also able to be used as a stand alone plugin in a WordPress website. That is one of the excellent features about using WordPress for a website, the ability to add functions to the website. These addons are known as plugins.  The Divi builder replaces the standard WordPress editor and gives you a module to use for everything you want to do. You can use the Divi Builder plugin with any WordPress Theme. The Divi Builder is available from Elegant Themes the makers of the Divi Theme.

The Visual Builder

Built into the Divi Theme for use as an onpage visual editor where you see the content as you create it in real time. One of the most avanced technologies in website building. A first of it’s kind. As you type the content into the module you can view the content. The Visual Builder will increase your work speed and accuracy. You edit your content as you type the content into the module. Even if you copy and paste the content you are able to read it and edit the content easily.  This way of working when writing for the web is a content creators dream.

The Theme Builder

Just recently added to the Divi Theme. It’s the leading innovation into website building. The fact that you can build a website, and a theme if you want, without needing to know code, is a technological achievement that is complimetary to our ability. Of course there is more to building a theme than just being able to use the feature of the Theme Builder.

Going without a website isn’t a good idea. The Internet isn’t going to be eliminated. Online communication is the best way to reach an audience, grow a business, share information, and learn. In fact, we’re so in love with the Internet most of us can’t sleep at night because we’re inside our computers finding more information. To build a website you need the foundational knowledge about how the Divi Theme works.

Foundational Knowledge

The best way to get the foundational knowledge the basics of the how it’s done is to see Divi in action. The best way to see how it works is to see it in action. When you see what is possible then you’ll be inspired to bring your idea into your website with a blog. For a live in-person demonstration on how to start using the Divi Theme contact me. 

Blogs with the Divi Visual Builder in real time. When she’s not blogging she’s teaching you how the amazing Divi Theme works so you can build your website. Also known to be in love with the Divi Theme since it came out in 2013.

Joan Margau

More About Website Building