8 Tips To Help You Create A Professional Website With WordPress and Divi

I’ve been working with and developing on the WordPress platform for several years. Over those years, I’ve used dozens of themes, hundreds of plugins and have even written a few plugins and scripts myself.

What I have learned is that a powerful theme framework is worth it’s weigh in gold. This framework must do a few things right.

  1. It must be SEO and Mobile friendly out of the box. You don’t need to spend extra time and effort on these things when they can be done for you.
  2. It must be flexible enough for the veteran developer, like myself, to use as well as the novice. You have to be able to let them theme work for you or be able to customize the theme that fits your needs.
  3. It has to be affordable and highly supported. With the way WordPress and other plugins release updates, things break. The theme framework needs to stay on top of these breaking changes and resolve those issues in a timely manner.

Divi meets and exceeds all of these requirements for me.

I’ve been using Divi for several years and I can honestly say that I’d recommend it to anyone for any project within WordPress. With very few caveats and exceptions, it does almost anything a person or business would need it do to. And at an affordable price, an Elegant Themes membership is really a no-brainer for me.

Note — This article is less about the technical aspect of getting WordPress and Divi setup and more about logically thinking about and designing the site. If you need help with setup and installation, picking a web host, getting an Elegant Themes subscriptions and more, I’d be more than happy to assist you with that. It’s just not something I’m going to cover in this article.

So without any further delay, let’s jump into it!

Decide On Your Main Objective

Every website needs to have one or two main objectives. When I talk with a perspective website customer, this is one of the first things I talk about. I find out what they want their main objective to be with this project.

Do they want to capture email leads or build an email list? Do they want people to call them or email them about a service? Do they want a blog to publish their content and use affiliate links to help monetize their site?

Take some time and decide what the main goal of the website will be. This may seem obvious, but all too often people or businesses don’t take the time to really figure this out.

Why is this so important? Can’t I just figure this out along the way?

Well, you can, but your main objective should really be used to craft the design of each one of your pages.

For example, if your main objective is to get a potential customer to call you, then each one of your pages should start or end with a phone number or funnel down into some kind of Call To Action where they clearly know they better call you for more information.

So it’s better to figure this out ahead of time so you can craft each page around this goal.

Choose Your Pages

Similar to above, you’ll want to sit down and figure out all the pages you want on the website. This also might be a given, but sometimes you might think of a page in the middle of implementing the site that throws off your whole menu or navigation system. So it’s better to try and figure out all of these up front.

Here are some good questions to ask.

  • Will I have a shopping page or will I sell something on the website? If so, will there be sections that I want logically divided within the menu? For example, if I sell shirts, will there be a men’s and women’s section? WooCommerce does a fantastic job of navigation within your online shopping cart, but sometimes you’ll want a separate landing page for these logical divisions.
  • Will I have a contact page?
  • Will I have a gallery page, portfolio page or some way to advertise/demonstrate my work?
  • Will I have an about page, telling people about the website or project?

Think through all the different ways you’ll want this laid out and all the ways you might want the pages divided. This will help you with page creation and navigation ahead of time and prevent issues once you get to implementing the pages.

Adjust Your Colors, Buttons, and Fonts

Your brand or business undoubtedly has a style; whether it’s a particular color set, logo or fonts. So you’ll want to design your pages and overall site theme with those in mind.

Divi makes this extremely easy.

Once you have Divi installed and set as your main theme, head over to the Divi → Theme Options section in your WordPress dashboard. From there you can start setting things up according to your style.

Take some time to look through these options and read the help on them if you don’t know what they do. Don’t worry, it will take some time to figure out what all these do. Heck, I’ve been using Divi for several years and I still don’t know what they all do, so don’t feel bad if you feel overwhelmed.

The Color Pickers Default Palette is something that you’ll want to change. This palette will show up on all the advanced design option screen when you’re creating your design. Instead of having to remember or type the color ids ( those little color codes like #ffffff for white) each time you want to change the color of an element, it’s easier to just assign them one place here and pick them from the color picker later.

Divi Theme Options

You’ll see what I mean later on but just trust me, setting your default colors here will save a lot of time in the future. Just click on the colors you want to change and enter their ids.

Next, you’ll set up your default fonts. From this same screen, just a few settings underneath the color palette is an option called Use Google Fonts. Toggle this to enabled and this will allow you to use all the Google standard web fonts in your theme.

Click the Save Changes button at the top when you’re done.

Theme Customizer

Next, on the right-hand side WordPress menu, navigate to Divi → Theme Customizer.

In here there are even more options to confuse you! Maybe one day I’ll do a series on each one of these options, but like above, we’ll just focus on this one option that will save you a lot of time.

We’re going to choose the two fonts we want to use throughout the whole website. One set of fonts will be used for headings (anything with a heading tag <h1>, <h2> etc…) and another set for your normal paragraph text.

Setting these will give your site a uniform look and feel. Having clear and readable web-enabled fonts is a must. It allows users of all types to clearly read what you’re trying to convey to them. Nothing is worse than going to a website with an extremely curly or cursive font and struggling to read it! So pick some fonts that look nice and clean.

Typography

Navigate to the General Settings → Typography section. From there, look down and choose a header font and body font. This allows the preview window on the right to change and display the fonts as you choose them.

If you need help choosing a pair, try https://fontpair.co and find a pair that is easy to read and pleasing to your eye. Most of them should be available to use in Divi as well. After you’ve picked your fonts, make sure to click the Publish button at the top to save your selection.

Lastly, let’s customize our default button. You’re going to use buttons all over your website, so it will save you some time and effort to customize the default button to your liking. That way, when you add a button to a page, you won’t have to do any work to make it look like the majority of buttons around your site.

There may be some exceptions to this (the need for a darker or lighter button on different backgrounds), but for the most part, a single button design will work for now.

While still in the theme customizer, navigate back to the main section and click on Buttons. Click on Buttons Style first.

From here you can customize a button however you like. I’m not going to cover all the settings but I’ll go over some of the ones I like to change.

I usually like to start by increasing the Text Size. I set it at 20 or above. I want the buttons to stand out and get noticed. Therefore, they’re usually a little thicker and larger.

Next, I’ll change the Text Color and Background Color to my liking. This is something that is usually an accent color for the site; one of the colors I set earlier in the default color palette.

Give it a Border Color and Radius if you like and set the font the uppercase if you really want it to stand out.

I usually leave the font set at Default Theme Font just for congruency.

I add a hover icon, set the icon color and tell it to only show on hover. This way the button will animate whenever someone hovers over it with their mouse.

Then click Publish and save it. Navigate back one level and then go into Button Hover Styles.

From here, I sometimes add a little further animation by increasing the Border Radius or Letter Spacing. You can change up the color a little if you want, but I’d advise against this too much as it can get distracting if you go overboard.

I like clean and subtle changes so I generally leave the Background Color and Border Color the same as the colors I picked in the Button Style options. This is where setting those default color palette options helps so you don’t have to remember the color codes.

Publish and save.

Now that you’ve set default colors, buttons and fonts, your website has a uniform look and feel. This way when you’re adding items to your page design, everything will flow and look uniform throughout.

Let’s move on to designing pages!

Pick A Template

Now that you’ve decided on all the pages you want, and what kind of Call To Action you’ll have on some of those pages, it’s time to get started creating.

I always like to start with the main, home, or landing page first. This is likely the first impression people will have when visiting your site and you have somewhere in the realm of 7 seconds to grab their attention. This page has to be clear, concise, and objective oriented.

Navigate to your WordPress dashboard and click on Pages → Add New.

First, you’ll want to enable the Divi Builder if you haven’t already. Click on the purple Use The Divi Builder button if it hasn’t been activated yet.

New Page Divi Builder

Next, in the top right corner, under Divi Page Settings, set whether you want this page to be a full-width page or have a sidebar.

Now, here’s a great way to start building a page.

Divi has a fantastic library of pre-built web pages and designs. This is a great way to get your creative juices flowing as well as knock out a lot of the legwork for laying out a page design. I usually use these pages to start a page design and alter it to fit my needs.

Down in the purple Divi Builder section click on Load Layout. This brings up the Pre-made Layouts section.

Load Layout

From here, you can click on a layout package that you like to further drill down into the layout pack. Then you can choose the layout you like. There is usually a layout for landing pages, blog pages, shop pages and more. Let’s use the Restaurant Layout Pack for this example and then use the Landing Page. Click the button on the bottom of the preview window where it says Use This Layout.

It will take a while to load as it has to download all the resources and images for that layout in the background. Once it loads, the Load Layout screen will go away and you’ll be back to your created page with all the items in the Divi Builder loaded.

Use Layout

Now, one thing I like to do from here is scroll back to the top of the page and click on the Use Visual Builder button. This allows the page preview to load and shows you how the page will look.

As you mouse around the page, you’ll notice that the individual elements of the builder will pop up their context menus. This will allow you to edit the row, column or item settings. You can also duplicate items, move them around or remove them.

Play around with these context menus and get used to editing items, rows, and columns.

Context Menus

I’m not going to dive into each setting for these items in the article. I could go on for ages about each setting. I might make that a series later, but for now, this gives you a nice template to start with and hit the ground running.

I now start editing the page to suit my needs. This includes things like;

  • altering colors
  • changing the lorem ipsum text
  • changing images
  • changing the text font to site defaults (these prebuilt layouts usually
    manually set the font)
  • removing unused sections
  • removing formatting on buttons styles
  • making the page fall in line with the website theme and colors

Also, another good habit to get into when previewing these pages in the Visual Builder is constantly looking at the page in desktop, tablet, and mobile view. You can do this by clicking on the purple … Divi button at the bottom of the page, and clicking on the appropriate button on the left side for each view.

Although I’ve found this to be imperfect occasionally, and I need to actually preview it on my phone or tablet, this does a really decent job of showing you how the page will morph on different screen sizes.

View On Mobile

Reusable Headers, Footers and More Oh My!

One of the most powerful features in Divi is the ability to create reusable items. This can be items as small as buttons or as large as full pages.

I use this feature all the time when I create websites.

One of the things you really want to think about is how the header or footer of your pages might look. Maybe you want each one of your pages to have a bold header showing users what that page is all about. Or perhaps you want each one of your pages to have an eye-catching footer with a menu and a nice fat Call To Action nudging them to sign up to your mailing list.

Wouldn’t it be nice if you could design these items, save them and then just reuse them on each page? Well yes, you guessed it. With Divi, you can!

Let’s go back to the page we just created and look at it again in the Visual Builder. We can see that at the bottom of the page, there is a great looking footer already designed. Let’s pretend that you just got done creating this section (pat yourself on the back) and you want to make this the footer to all your pages.

Hover your mouse over the top left corner of that section until the context menu for that row appears. The 4th button allows you to save that section to your library.

Add To Library

Click that button and it will allow you to save this section to your library. Choose a Layout Name, make it global, and add it to a category if you want.

Making an item global allows the section to change in a single place and have those changes reflected everywhere that item is used. For example, we’re making this saved footer section a global item and plan on putting in on several pages. Let’s say that our hours of operation change. Normally, we’d have to update this on every single page that has these hours listed. Not so with a global item. When we change something in a global item, it’s changed everywhere that item is used. This is why a global item for a header or footer makes sense.

Also, adding it to a category makes sorting and categorizing your saved section and items easier to find. Once you learn the power of saving these items, you’ll start doing it more. If you start making categories for them, it’s easier to find them. For example, I usually make a category for buttons, row, CTA (call to action), and headers. These categories usually cover everything I tend to save. That way when I need to quickly add a button that isn’t the default button we styled earlier, I can quickly find it in the library and add it.

This brings us to our next point. How do we add these things we just saved?

Click on the purple … button at the bottom of the page and then bring up the Wireframe View.

Wireframe View

At the top of the page, click on the blue circular + sign below the first section. This allows us to add a row to this page. Now click on Add From Library and you should see the item you just saved in green. Green signifies that it’s a global item so you know if you alter it, the changes will show everywhere. You’ll also notice that you can choose from the categories drop down, which is where the categories you just created comes in. It’s just a filtering option to make it easier when you have a lot of saved items.

Add From Library

Now that section is added to your page. You can now leave the wireframe view and see the section you just added is now at the top.

This is how you can save headers, footers, buttons and more making it easy to reuse design features on your website.

Add Integrations

Divi has a great way if integrating with your favorite email list providers, social media sites and more. This makes creating beautiful opt-in pages, sharing your social media account and other things dead simple.

If you go back to your WordPress dashboard, then navigate to Divi → Theme Options, you’ll see a list of these integration settings on that main settings page.

You can hook up your Facebook, Twitter and Google+ profiles as well as a Google API key for maps integration. This will allow Divi to display your social profiles in the menu, footer and other places you’ve set up in your Theme Customizer.

Let’s talk about mail list integrations.

One of the most powerful ways to connect with your audience in through a mailing list or newsletter. If you don’t have one, get one. There are tons of providers out there that offer a plethora of great services. Some are free and some are paid. But the one that I usually start people out with is Mailchimp. I know, you either love them or hate them. But I like them for starting people out with because they have a relatively easy setup and a good amount of features for free.

Connecting Mailchimp to Divi is super simple.

Let’s go back to that page we just created. This time, we’re not going to use the visual builder. We’ll use the standard builder. Underneath our Fullwidth Header, click the Standard Section link.

Standard Section

This will bring up the Insert Columns dialog. We’ll choose the top left option which will add just a single column to this row. Now it will take us back to the builder where we should see a new row (blue) and a new column(green) added to the page. Inside we can click on the Insert Module+ link to add a new module to this column. Let’s add an Email Optin module to this column.

Email Optin

Now, we should see the settings for our new module. We can set the title, button text, and more for this module, but the important part for now is setting up the Mailchimp Integration.

Scroll down until you see the Email Account section. Here, you’ll select the Service Provider from the drop down menu as Mailchimp. Then you’ll hit the Add button. This will show you some additional for Account Name and API Key. Enter a name to associate this account with. The name doesn’t really matter. Then enter your API key. This can be obtained from your Mailchimp dashboard. If you don’t know how to find this, click the Email Provider Account Setup Documentation link here or on the settings page to find out more information. Once entered, click the Submit button and your email lists will be populated.

Now you can select the list you want people to sign up to from the Mailchimp List drop-down and click Save & Exit at the bottom of the page.

This will hook your website up to your mail list provider and allow people to start signing up for all the goodness you provide. You can further customize the Optin module look and feel with dozens of options if you want.

Customize Modules To Fit Your Design

There are dozens of modules in Divi that allow you to rapidly create and design stellar websites. Having to hand code all these things or find a plugin for them would take hours or even days, but Divi has an extensive library of them.

You’ve already worked with the Optin module earlier. But Divi has everything from a Blog module that allows you to display the latest blog posts to a Slider module, Gallery module and so much more.

Each one of these modules also has dozens of design customizations that allow you to create the style and design that fits your brand or business.

However, just like saving things to your Divi library speeds up the design process, so does customizing some of these more commonly used modules.

For example, let’s say that we use the Social Follow module several times throughout our site. This module just shows a cool section of your social media links for people to click on. We could save a template of this section to our library OR we could also go into the Module Customizer and set some of these settings to meet our needs.

Either way works, but let’s see how this way might be easier for you.

Again, back in the main WordPress dashboard, navigate to the Divi → Module Customizer section. In here, you’ll see all the modules you can customize. Scroll down to the Social Follow section and select it.

You can now customize the Follow Font & Icon Size as well as the Font Style for this section. This means that every time you add a Social Follow module to a page, these settings will now always be what you set here. Instead of having to change them each time you add this module to a page, now this is their default settings.

Image how much time you’ll save by setting some of these default settings for the more commonly used modules throughout your website.

Now I’m not going to suggest you go through all of these modules and set them up. I would just suggest that you know how to do this. If you start seeing a pattern where you are adding the same module to different pages and having to go in and set some customizations, then you might consider checking back here and seeing if you can make those customizations a default and save some time. This is one of those things that you’ll want to know about up front but might not necessarily use until you get into the page design.

Conclusion

This just scratches the surface of how to use Divi to create modern, mobile friendly, and professional looking websites. The sky is literally the limit on how creative you can be with Divi and the team at Elegant Themes has done a superb job with this framework.

Like I mentioned earlier, I almost exclusively use WordPress and Divi for all my customer projects. The ability to quickly deploy a great looking website that scales and is easy to manage is priceless.

If you’re interested in working with me, having me take a look at your project or just following me, please take a look at my website and contact me. I plan on writing more tips and tricks for WordPress and Divi as I go along and sharing some of the awesome things I’ve learned over the last few years.

I'm a veteran cubicle jockey turned freelancer. I love to create things and help people solve their biggest business problems using technology.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store