In The Market For A New Theme?
Are you in the market for a new website theme? I may have a solution for you.
Divi is one of the most flexible and versatile themes I’ve ever come across. The arrangement of modules allows you to customize your website to compete with the best of your competitors.
Since the folks at Elegant Themes developed Divi theme, they’ve had a large drop off in their other themes. This is all due to the fact that Divi is so easy to use, easy on the eye, great for SEO and will please your readers. As we all know, please your readers, and they will come back time and again.
Allow me to explain to you the benefits of Divi theme and give you a tutorial to get you started with this gem. Here’s my guide on how to use Divi theme for beginners.
Before Activating Divi
When I first began with Divi theme I thought to myself, ‘where the heck do I begin‘. It didn’t take me long however, to appreciate how easy it actually is to set up.
Before you do activate Divi as your current theme, be aware that you may lose some customization settings that were relevant to your previous theme. This is common whenever you change theme. You may not be able to retrieve these settings unless they are saved. Check to see if your previous theme has an option to save your customized settings.
Divi Out Of The Box
As this is a beginners guide, I will not be going into the advanced options unless I think it will be beneficial or relevant. I know you are new to this so I don’t want to overload you with the settings that you wouldn’t understand. Many of these options are not required for your website to function properly anyway.
Once you activate Divi as your new theme, visit your website and see what changes have taken place. If this is a new website with no content, you will obviously not notice any changes. If you have an existing site with pages and posts already created, you may see a change in your layout design.
Let’s begin with the Divi’s Options and Settings.
Under ‘Appearance’ on the side menu, you’ll find ‘Divi Theme Options’. This is where you’ll be able to set specific settings relating to you new theme.
As you can see in the image above, your Options is for filling in a lot of the variables that are associated with Divi, such as your logo & favicon file locations. Don’t know what a favicon is? Look at the tabs open in your web browser. See the small icon designated to each website that is open. That’s a favicon.
This ‘General Settings’ section also allows for your email auto-responder API keys for Aweber and Mailchimp. For those unsure what this is, I’ll quickly explain.
Auto-responders collect and store contact email addresses that you capture from your website. It also sends out automated emails that you set up and organizes your subscriptions. They are priceless when it comes to setting up an email campaign.
Back to our ‘General Settings’. You can toggle on or off social icons (see the blue ones at the top of this page) and add you social Url’s. Elegant Theme’s has a free plugin that is compatible with the Divi theme, it’s called Monarch. This is a much better option for your social media buttons. I have it installed on this website so you can see what they look like. These can be customized to your liking.
General settings can also dictate the number of posts to display on a category, archive, search and tag pages. There’s also a date format option.
You probably wont have to set anything under the navigation tab. You have an option to exclude pages or categories here. You can also turn off dropdown menus or a home page link. Not sure why you’d do any of these but nice to have the option I suppose.
Again, not much to do here. The Layout section enables you to switch on or off information from the editing area of posts and pages. I’d suggest you leave these alone.
Comments are enabled by default on posts. It’s a good idea to leave this on if you are trying to rank higher is search engines. Google likes comments and engagement so the more comments the better.
This Ad Management is a great little section for adding an affiliate banner. You can to it in one of two ways.
- Find an image that is 468×60 pixels in size. Upload it into your media area and insert the link to that file in the field ‘Input 468×60 advertisement banner image‘. Now add the affiliate link in the field ‘Input 468×60 advertisement destination url‘. Don’t forget to click the Enable button and then save it.
- If you have a HTML code for you affiliate banner, insert it in the ‘Input 468×60 adsense code‘ field. Again, don’t forget to click the Enable button and then save it.
This is a section that will come with experience. It’s not necessary to fill out immediately, and your pages will still rank by adding a focus keyword into your individual posts. In fact your whole blog content is full of keywords that will ultimately get ranked.
The Integration section is good for adding your Google Anayltics code. Every little bit helps when it comes to getting ranked.
Here’s how you can find your tracking code to add.
Elegant themes does have a fairly good support section if you’re ever in trouble.
Under Appearance – Customize, you will find the menu to the right. It is the Customization menu. The main things you’ll want to play with here are colors and theme settings.
Under the colors section are options to change these various items:
Background Color/Link Color/Main Font Color/Accent Color/Footer Background Color/Menu Links Color/Active Menu Link Color/Primary Navigation Background/Secondary Navigation Background.
The great thing about the customization area, is that an image of your page is live whilst you change colors. So, as you pick a new color, your page image updates immediately. However, it’s not saved until you hit the save button. This is great, just keep experimenting until you think you found the perfect palette.
Under this area you will find different options pertaining to the look of your home page. You can choose a boxed layout if you’d prefer, this removes the full width of the page.
Other options include stretching the background image, having a vertical navigation menu, switching on and off your social icons in the header and footer and importantly whether to include a search bar.
I’d personally always recommend a search bar. How many times have you been taken to a site through finding a post. Then wondering if they have a post about something else that comes to mind. Lots of website have hundreds, if not thousands of posts. A search bar will find what you’re looking for immediately.
One of the default settings is to have your logo justified to the left, on the same line as the primary menu bar. When you scroll down the page, you logo reduces in size slightly. This reduction will always happen, it’s part of the theme. Having your logo to the side of the menu does however limit your menu items. I found that changing the ‘Header Style‘ to ‘Centered’, puts the logo above the menu. This may help if you want extra options in your menu bar (that’s assuming you’re using a horizontal menu like mine).
Other Settings For Beginners
All the other settings here are going to be relevant to your individual taste. As you can see on the image above right, there is an option to change fonts. I’d stay with the default to start with as it’s easy on the eye. If you do decide to change font, keep in mind that people have to be able to read this. You may want to show the creative side of you, but that is no use if the font is unreadable or requires more concentration to decipher it.
Schemes gives you the option to choose between 4 in-built color themes, Green/Orange/Pink/Red. Have a play with those and see if they fit your requirements. I find it just as easy to change manually. Many of these can be set in the page builder, which will be explained in part 2 of this post.
If you’d like a background image displayed, options will appear to set it correctly. You can tile it, position it and choose between fixed and scrolled.
The Navigation section here allows for selecting 3 menus. As a beginner I’d keep the single primary menu until you have enough content to need multiple menus. If you want a secondary menu, it appears in the bar at the top where my small social icons are located.
A Footer menu will appear at the bottom of your website where my social icons are located.
There are other settings here that can be changed through the normal back-end of your website. Things such as Front Page Display (static or posts) and widgets.
You may notice I have Divi Child options. This is for more advanced use by adding a child theme to Divi. It’s not required for beginners.
I hope you have gained some understanding for using your Divi theme and if you have any questions, please make comment below.
Part 2 of this tutorial is now available to view at How To Use The Divi Builder – Part 2 There is an overview video of Divi included.
If you want to know more about Divi, click here.