One of the great keys to the success of WordPress has been to make it easy for “normal” people, people who are not design professionals, with the concept of templates or customizable themes to design your website.
The idea of templates pre-designed by design professionals has been great, because it allows you to start almost effortlessly from the first moment with a website that visually will make a good first impression on the reader, not like the websites of yesteryear, when they arrived they made you want to run away …
Among all of them, Divi has gradually emerged as the leader for being possibly the most customizable, most versatile and easiest to use. And also because Elegant Themes (the company behind Divi), follows the curious policy of giving along with Divi all the other themes and plugins in its catalog
In the WordPress theme repository you can find thousands of free templates. In addition, these, although in the early years of WordPress they left a lot to be desired, in recent years you can already find very professional designs.
However, these free templates often have a common problem: very little customization possibilities.
Therefore, there are very strong reasons to consider using a professional paid theme instead of a free one, a template that allows you to customize anything on your website and that allows you to do it in an easy way.
In this post I will briefly explain these reasons first and then we will start with the first part of a complete tutorial to create a blog from scratch with Divi which is the WordPress template.
The reason to recommend Divi is that, at this moment, it is in my opinion the best general-purpose WordPress template (valid to create any style of site) and oriented to “normal” users , without technical or design knowledge; It has an infinite capacity for customization and is 100% visual.
It’s no wonder that, for all these reasons, it has recently swept by becoming the most popular professional WordPress template by far.
Why use a professional WordPress template like Divi?
The obvious question is, why then use a professional paid template like Divi?
1. Limited customization ability in free themes
Customization capabilities are often very limited in free themes. Normally, beyond a few basic colors and changing the logo, little else you will be able to customize. Even something as basic and important as being able to change the font for the menus, titles and text of the content, etc., you cannot adjust it in almost none.
Not receiving an economic return for a job, limits the time you can dedicate to it and that shows in the quality. Therefore, in many free themes, although beautiful, the quality (level of errors and incompatibilities with plugins, speed, etc.) leaves something to be desired.
Here we should accept the “freemium” themes, which are free “layer” versions of the paid version and the level of quality, therefore, similar.
3. Updates and support
Many of the free themes are abandoned over time. It is logical since, if they do not give an economic return to the author, over time it becomes increasingly difficult to motivate themselves to continue working on it.
On the other hand, it is also logical; the dedication that good support requires, an author can offer for free to thousands of people. With the desire, at the beginning, miracles are achieved. But over time, if there is no income, motivation goes down.
Here we find the same problem derived from lack of income. A powerful product needs documentation (written, in the form of video tutorials, tips and tricks, design examples, etc.). Again, without income it is much more difficult to create and maintain it.
A WordPress programming job as a template always carries security risks, leaving doors open to malicious attacks due to bad programming practices or simple errors.
Again, in a professional theme with a good team and a constant dedication behind it, it is constantly improving, and the more popular that theme is, the more feedback the community has of this type of problem, so that they are corrected. A free theme, and more if it is not too popular, is more susceptible to failures of this type.
6. Performance / price ratio
The above reasons already seem to me enough reason to consider a professional topic, but the definitive reason is that, in addition, a topic like Divi is not something very expensive.
As we will see later, Divi can be purchased for $ 89 (less than € 80 in exchange) and it is simply little money in relation to the value it brings you, everything it has to offer and the fact that with Divi you get rid of problems; Any design modification you want to make over time, you know you can do it with this WordPress template.
How to install the Divi display from Elegant Themes
In addition to explaining the steps to install Divi in WordPress, I will also tell you where you can buy it and what the essential basic settings are.
So let’s go to the mess
Where to buy Divi
Divi, being a premium theme, is not accessible through the free WordPress repository.
In order to acquire it, you must go to the Elegant Themes website where you can make the corresponding payment, depending on the plan you choose.
There are currently two plans:
- Yearly Access:for $ 89 a year (after that year you will have to renew if you want to access the updates).
- Lifetime Access:for a one-time payment of $ 249.
By hiring any of these plans you will have access to:
- All Premium Elegant Themes themes (nearly 90).
- All its premium plugins: Divi Builder, Monarch and Bloom.
- Updates and improvements.
- Technical support.
- Unlimited use (you can install any of its products on as many websites as you consider necessary).
How to install Divi in WordPress
Once you have acquired one of their plans, the next thing is to install Divi. To do this, follow the following steps that I have marked for you:
- Access your Elegant Themes user area.
- In the Downloads section go to Divi and press «Download» to download the theme in zip format. Unzip the folder.
- Access WordPress and go to “Appearance> Theme> Add a new one”.
- Click on “Upload theme> Choose file”. Select your Divi folder.
- Click “Install”and then activate it.
Note: if during the installation process you have any problem, it is probably related to the memory limit. Although there are several ways to approach this matter, the best thing you can do is request an increase in it through your favorite hosting provider.
Essential basic settings in Divi
After installing the theme, the configuration comes managed through three basic levels:
- Theme options:the most basic level of configuration where you can add your logo, modify the navigation menu, keep your theme updated, etc …
- Theme customizer: to make much more specific adjustments to your blog content, your header, and other elements such as the footer.
- Module customizer: if you use Divi Builder this option allows you to set configurations that will be applied by default in each of its modules.
Of all of them, the most basic and essential corresponds to the Options of the topic that we will talk about next.
The remaining two will be included in the different stages of designing your blog with Divi in the following posts in this series.
To start configuring your blog with Divi, access WordPress and in the side menu, mouse over the Divi icon.
You will get a drop-down menu with all the configuration menus and other options.
Click on the “Theme Options” menu to access it:
This tool will allow you to start configuring your blog with Divi through a series of general adjustments on certain options.
As you will see, all of them are grouped in the following tabs:
Despite there being sufficient documentation on the options of the topic, below I show you the most important adjustments that you must make on your blog with Divi:
- Upload your logo and favicon for your website.
- Activate / deactivate your navigation bar, so that it is always fixed and visible while browsing your blog.
- Enter the Google API in case of using a geolocation service through Google Maps.
- Add the URLs of your social networks and activate each one, in order to make use of your social icons in the navigation bar, footer and in other parts of your blog.
- Activate the “back to top” button, to facilitate the navigation of your readers.
In this tab you will control everything related to navigation, both your pages and your blog entries.
You can exclude certain links, set a certain number of drop-down menus, as well as activate or deactivate them.
My recommendation is that you omit this option and configure your navigation by creating menus through the navigation system that WordPress offers you by default, since it is much easier and more intuitive to configure.
Don’t worry, Divi offers you direct access to it through its Theme Customizer tool. We will see later
Once created, it will be perfectly displayed in the header of your blog with Divi.
Thanks to this option, all the CSS generated through the Divi Builder plugin will be stored in a static file, thus improving the performance of your blog considerably.
Leave everything as it is by default:
- Static File Generation:
- Output Styles Inline:
This way you will achieve greater optimization of your website and, therefore, a reduction in loading time, improving your search engine rankings.
With this option you can activate or deactivate certain information in the form of metadata (author, date, categories and comments) both on your pages and in your posts, as well as restricting the use of comments.
From a practical point of view, it is better to focus on the first tab related to “Design of the individual entry” and activate the boxes that you consider necessary, since it is the one that you will use the most.
In my case, I only have information about the author and the number of comments activated.
If you are interested in monetizing your blog from advertising with Google AdSense, here you can add a banner, its corresponding image, the URL, as well as the corresponding code.
Divi allows you to control SEO-related aspects such as adding a custom title to your blog, as well as a description for both the home page and your posts and many more options.
In this case I recommend you make use of what is perhaps the best SEO plugin that exists today: Yoast SEO.
A very powerful plugin, easy to use and on which you will find a lot of information to get the most out of it.
This section will help you implement any type of code in different areas of your HTML document, such as in the <head> and <body> tags.
Especially interesting if you know programming and want to modify the structure of various HTML elements through libraries such as jQuery or you need to add tracking code from Google Analytics, Facebook Ads or some email marketing tool like Active Campaign.
Don’t forget to complete this part as soon as you install your Divi theme in WordPress.
Enter both your username and the API key that you will find in your Elegant Themes user area to have direct access to updates.
Basic design and branding
Human beings are highly sensitive animals to elements such as images since much of the information that we transmit to our brain is done visually.
Exactly the same thing happens in the field of web design.
That is why branding, that is, the construction of an image or personal brand to show to others, will be vital in the viability of your project, thus successfully differentiating yourself in a market as competitive as the Internet.
During the creation of your brand, the design of your blog will obviously play a fundamental role.
The good thing about using a theme like Divi versus using free products is that it will provide you with all the necessary tools so that the technical aspects involved in the creation process are not an obstacle.
Next we will see how thanks to tools such as the Theme Customizer we will be able to develop fundamental elements in the design of your blog such as your header, colors, typography, so that, once that stage is over, we can focus on the content with the help of Divi Builder.
Color scheme, header, logo and footer
If you access the Theme Customizer you will see how all the content is organized through the following categories or tabs:
- General adjustments.
- Header and navigation.
- Styles for mobile devices.
- Color combination.
- Static cover.
- Additional CSS.
To start designing your blog with Divi we will focus on the most relevant ones: general settings, header and navigation and footer.
In this section we will apply a series of general settings on your blog:
- Site identity:here you can add the title of your blog and a short description that perfectly summarizes what your audience will find in it. Very important in order to achieve a correct positioning from the beginning.
- Format adjustments:mainly set the width of your blog content and the height of the sections and rows, essential elements in the layout process with Divi Builder.
- Typography:select the font type for both the header text (elements) and the body text and apply the styles and colors that you deem appropriate.
- Background:here you can select the background color that your blog will have and you will even put an image in its place.
Header and navigation
The header is an essential element in your blog, since it will allow you to quickly navigate through the pages that make up your website.
As you can see, Divi divides it into a main menu, where you will normally place the most relevant links on your blog and a secondary one, to add information and other links that you consider of special interest.
To correctly configure your header follow these recommendations:
- Header format:you can set a header style by leaving your logo on the left and the main menu on the right, both centered, leaving the logo on top of the menu, centered on the line, etc … My recommendation is that, whatever the modality choose, the menu is as minimalist and accessible as possible, to always improve the user experience.
- Main Menu Bar:Focus on setting the menu and logo height and applying the font styles for each of your links.
- Secondary menu bar:practically the same as the previous case, except that the logo is not present in this one.
- Fixed navigation setting:if you selected the fixed navigation bar option in the Theme options, your menu will always be visible, regardless of whether you go up or down to different areas of your website. In this section you can configure its appearance through the styles provided by this option.
- Header elements:If you activated showing your social icons in the Theme Options you will be able to show them in your secondary navigation bar, along with a search icon and an email address.
The footer or footer is the bottom area that is present in practically every website.
It consists of a widget area, a bottom menu, and a bottom bar.
Let’s see in a little more detail each of its parts:
- Layout:Distribute the number of columns in your widget area and designate a general background color for your footer.
- Widgets: it applies all the styles of the widgets area referring to the texts, links, etc …
- Footer elements:here you will activate your social icons to be shown in the bottom bar.
- Bottom menu:If you created a bottom menu in WordPress, it will be displayed here. You can set its background color and styles referring to the text.
- Bottom bar:the last element in the footer where you can edit your credits and change their appearance through the background color, typography, etc.
Menu and logo customization
To customize your logo and menu we will focus in greater detail on some of the tabs previously seen in the Theme Customizer, specifically:
- Header and Navigation: Header Format and Menu Bar.
- Menu: applicable only to the navigation menu.
In it you will see the Header Style drop-down menu, which will allow you to customize the location of your logo:
- By default:your logo will be located on your left and the navigation menu on the right.
- Centered: you will center both the menu and the logo, leaving the latter at the top.
- Logo centered on line: similar situation to the previous one but in this case the logo will be located in the center, between the links in the navigation menu.
- Swipe:The logo is placed on the left as the first case, while the menu is hidden through a sliding panel that is displayed when clicking on the ≡
- Full screen:the location of the logo is the same as in the previous case. The only thing that changes is the way the navigation menu is displayed, in this case taking up the entire screen.
Main menu bar
In the Main Menu Bar tab you can hide the logo image and set a maximum height for both it and for your navigation menu.
Also, as we saw earlier, you can configure the styles of the texts in your menu by being able to change the type of font, the color and size of the texts, etc…
In the Menus tab you can create as many menus as you want, establish a name and location (main, secondary or lower) and add as many links or items as you consider necessary.
This option, like other Divi options, is native to WordPress so you can also run it through the administrator, specifically, through the ” Appearance> Menu” path.
The good thing about this functionality is that to manage your menus you will not have to open another page or leave the one you are using to access the WordPress administrator, with the consequent waste of time that this would take.
The responsive design is nothing more than a set of techniques applied on a website so that each of your pages fit correctly on different mobile devices.
As you will understand, in a world in which the use of tablets and smartphones is increasing every day, making your blog responsive is an essential requirement.
Divi, as well as the different elements of Divi Builder, adapt very precisely to these, avoiding having to spend a lot of time on this type of task.
However, you will find several ways to further adjust your responsive design.
You can configure it through the following tools:
- Theme customizer> Styles for mobile devices:here you can configure general styles such as the size of texts and the height of the sections and rows of your content, for both tablets and smartphones.
- Divi Builder: the plugin allows you to customize responsive styles such as margin, fill, size, spacing, text height, etc. … in practically any component, be they rows, sections or modules.
To check the appearance of your blog on mobile devices, you can use the display modes provided by both the Theme Customizer and the Divi Builder.
One of the advantages of Divi over other free products is the ability to customize each of its elements through the theme together with Divi Builder.
It will not matter at all the theme you plan to show your audience, nor the weight that the various elements of your blog will play.
Divi is a multi-purpose product, so it will allow you to create practically any type of blog you have in mind.
Here is a series of real blog layouts edited through Divi and Divi Builder:
- Nomad Capitalist: an international blog specializing in business issues and tax optimization.
- The Global Church Project: dedicated website with a religious theme.
- Hannah Hall Photography: wedding photography website.
- Dan Carr Photography: international photography blog.
If you are one of those who likes to go further and have knowledge of CSS style languages, the opportunities to personalize your blog will be much greater.
Divi offers you many possibilities for you to implement your code in many elements of your blog.
I show you below how to do it:
Additional CSS / Custom CSS
Thanks to the custom CSS option that you will find in the general tab of the theme Options along with the additional CSS option , in the Theme Customizer you will be able to add all the code you need.
As easy as writing it, saving your changes, publishing them and you’re done.
Divi Builder elements
In addition to all this, each and every one of the elements that you can create with Divi Builder, that is, its sections, rows, columns and modules are prepared so that you can customize them with CSS.
On the one hand, you can set classes and CSS identifiers so that later you can apply your styles in the additional CSS / custom CSS that I told you about just above.
On the other hand, each of these components has available a series of fields corresponding to different parts of the structure of each element so that you can insert your CSS rules there and apply them specifically:
I hope that this article has brought you value and that, after reading it, you can make the most of the potential of this magnificent tool. But … this has only just begun! If you really want to know how to get the most out of it, don’t miss my next post, in which I will explain in detail how you can create a blog with Divi.