How to design a blog with WordPress and Divi

In the previous post on Divi, I showed you the reasons why it is always better to invest in a premium quality theme than a free one and how, Divi, within the great variety of WordPress templates, will undoubtedly be one of your more successful options.

To know more about the characteristics of this great product, in this article I will teach you in detail how to design the cover or home page of your blog following a design based on the structure of the famous landing pages.

As you well know, the cover of your blog will be the page of your website that receives the highest number of visits, so an optimized design attending to important aspects such as the design and creation of texts based on copywriting techniques, will increase your rates. Much more conversion.

We will see step by step how to achieve all this with Divi in a simple and intuitive way, simulating the creation of the cover of this same blog.

In addition, as an extra complement, we will finish with a guide that will be useful for you when creating and designing both your pages and your blog articles with Divi, as well as with the help of its visual builder Divi Builder. Easily and without complications.

Design the blog cover

The cover of your blog or home page is the page that will channel most of your Traffic and, therefore, receive more monthly visits.

Due to this, this type of page will become more important in all aspects (commercial, marketing, personal brand, etc.), so it is vital to clearly capture all your content, to convey the correct message to your reader from the first moment you land on it.

To successfully accomplish this task, there is no better approach than to consider your blog cover as one landing page and include it each and every one of the elements that it should have.

For this, next we will see the approach that this type of pages should have, some essential elements, Tips for inspiration and a tutorial to compose your cover with Divi successfully.

Traditional format versus landing page

The primary goal of a landing page is none other than catch the attention of your new readers from the outset, while we eliminate any kind of distraction.

This can lead them subtly shaped by each of the areas of your page, generating empathy, “attacking” their areas of pain to finally let you know that what you offer them is the real solution to the problems and concerns that were raised.

The use of landing pages has been in use for quite some time and your conversion rate With respect to the traditional format of the blog, it is much larger.

That is why, from my point of view, it is always much better to make use of this type of pages as a cover for your blog, compared to others with more classic formats than they show a simple arbitrary list of posts.

Get inspired by other bloggers and replicate them with Divi

Designing your blog cover from the beginning is not an easy task since, as you will have seen, you will not only have to learn to use various design tools, but also be very clear the structure and appearance that it must have.

And you must be very clear from the beginning: each element must have a specific purpose 100% oriented to increase the conversion rate to the maximum.

So the best you can do from the start is to make a comprehensive study, analyze to other bloggers, influencers and even your competition, to extract their strengths and once inspire.

Information is in abundance; you just have to know where to look, starting with the main theme of your Blog, your niche or specialization.

As an example, take Citizen 2.0 ; a blog that, as you know, is everything related to blogging, WordPress, optimization, SEO , social networking and personal branding .

What makes this cover an example of inspiration? What could it bring you? Let’s analyze it a little more:

  • Message: a minimalist landing page, simple and that transmits everything that can bring you with a Clear and direct message: Create a blog that works.
  • Empathy: Showing yourself directly to your audience generates closeness, empathy and trust from the first moment, thus increasing Odds of converting.
  • Specialization: 9 main themes with which they manage to position themselves as an authority in their niche, once they provide the reader with access to the sections that interest those most.
  • Blog: the “core” of their website is the blog and they demonstrate it by making your access very easy Through its categories, links to its most commented posts, the most recent along with direct button to it,
  • Follow-up: a display of all the most important social networks linked to your project so that they can be aware of all their news.

Elements that your cover should have

Since you have seen firsthand some of the characteristics of a successful blog, we briefly summarize some of the elements key to have them in mind When designing your blog cover:

  1. Title: that perfectly summarizes the essence of your blog that catches the reader’s attention and invite you to continue reading the content completely.
  2. Subtitle: a text that supports the title, reinforcing its message.
  3. Hero shot: an image, a video, in short, a multimedia content that is in accordance with the message that the blog transmits and is a representation of it.
  4. Call to action: also known as “Call to action”, that is, the action you want your readers carried out. Normally associated with downloading a free product or Lead Magnetas part of the process of subscribing to your newsletter.
  5. Benefits: an area dedicated to briefly summarizing the value of your blog through a listing of points with access to the various themes that you will find in it.
  6. Testimonials: statements from clients and colleagues that endorse and give authority and weight to your project.
  7. Reinforcement: a powerful closing phrase that encourages immediate conversion.
  8. Final call to actionfinal access to the product with which you will convert your readers into subscribers.
  9. Social Networks: a direct way of connection through your favorite social networks.

Note: you do not have to follow all these recommendations strictly, although I do advise you to follow a similar structure. The case of BloggerGeeks you can serve as an example because, although not Includes elements such as Reinforcement and a final Call to action, it does have most of the Basic components on its cover.

Once you have your list cover not stop; Do tests with A / B test tools like those offered by Divi, to finally stay with your perfect cover.

How to design your cover with Divi Builder

To compose the cover of your blog with Divi Builder we will divide the process into 3 distinct sections:

  • Header and navigation.
  • Content.
  • Footer.

I will explain the process below in a summarized way so that later, through a video, I can analyze Step by step as I have carried it out.

1. Header and navigation

In this step simply select the layout of our logo and the header menu.

Thanks to the “Header and navigation” tab, we have chosen that the logo is centered, being just above the navigation menu.

Once done, in the “Main menu bar” we select the height of the logo and the menu to then go on to adjust the styles of the texts of the latter.

2. Content

The development of the cover content will be carried out by Divi Builder.

To start designing you will have to activate the constructor and for this you have two options:

  1. Back-end:from the WordPress editor of the page itself. Press the button “Use the Divi Builder” and will show the Divi Builder interface.
  2. Front-end:from the page itself. To do this, from the WordPress editor of the page press “Using Visual Builder”. Another option is to press the button “Enable Visual Builder” that Found on the page itself.

For the design of the cover itself, what I have done is divide it into content In 5 different sections:

  1. Create a blog that works.
  2. Testimonials – Presentation
  3. What are we talking about here?
  4. The most commented contents.
  5. Latest published articles.

Note: as we shall see, the sections are the basic elements from which the design Divi Builder It begins and allows us include rows with certain columns, to finish deploying the modules.

1. Create a blog that works

Within the section we have included two rows:

  1. Row: formed by two text modules corresponding to the title and subtitle.
  2. Row: with a text module to include the list of benefits, plus a button with access Free training.
2. Testimonies – Presentation

Formed by two rows with:

  1. Row: an image module plus two text modules, to include the first testimony and the Co-founder’s name.
  2. Row: exactly the same, but the modules have an inverted order.
3. What are we talking about here?

This time we would have 5 rows:

  1. Row: with 3 modules related to the introduction texts.
  2. Row: 3 rows with 3 columns where 3 ad modules have been installed for each one of the blog categories.
  3. Row: the last one with a search module for blog articles and their corresponding text.
4. the most commented contents

Two row section:

  1. Row: formed by two text modules corresponding to the section title and the subtitle.
  2. Row: with a blog module where the posts with the highest number of comments and a button to access the blog.
5. Last published articles

Same structure as in the previous case, except that the blog module in This case shows the last published articles.

3. Footer

For the footer we have created a section, instead of configuring it through the “Footer” tab Found in the Theme Customizer.

The reason is that it does not yet have options that allow us to add icons and a series of texts in a much more personalized way.

So we’ve created a section with the category overall so that every change we make it will be shown on all those pages where it has been installed.

The only thing to do is, once created, install it in each and every one of the pages, as if it were a footer.

This section consists of a single row with 4 text modules.

In one of them we have introduced social icons via a shortcode, created from the plugin elegant social Themes: Monarch.

If you want to see everything in a much more visual way, here is a video where I show you everything step by step, without complications:

And to finish this section, I would also like to show you how to create an “About” page following the same principles as in the previous video, where I showed you how to design the cover of your blog:

Create your posts and pages

Color scheme

Regardless of the type of page you want to create on your blog, be it a landing page, Your home page, a specific page or an entry, you have to be very clear from the beginning the color scheme of your blog .

You should know that the colors will affect your conversion rate, since each of them it conveys a different message and they must be in complete harmony.

Since the choice of your favorite colors is something totally subjective that will arise from your tastes and needs, I recommend indagues more with this article on the choice of colors of your blog where you will get all the information you need.

If you’ve read the article or you knew something about the theory of color you see how For example, for the Citizen 2.0 logo two complementary colors have been chosen that match very Good with each other: a dark blue (# 2C3E50) and an orange (# D96709).

To choose your favorite colors I recommend some of the following tools:

  • Adobe Kuler: Adobe application to create your palette.
  • Paletton: Another very useful tool similar to Adobe Kuler.
  • Color Zilla: Chrome application to detect the color of each element of any page.

Once you have your colors selected, it is only a matter of defining what function each one will play, to know where to implement them.

An example could be using that orange color for the active links of your blog and the Blue for certain sections of your blog, such as your footer:

Color scheme in Divi

As you will see, Divi offers you many tools for choosing your colors in all locations of your blog, ranging from the header and footer through the Customizer topics to sections, rows and modules, which you can implement with Divi Builder.

Even through the design Responsive can select a text color and a background for Menu of your mobile devices:

Typefaces

The choice of typography on your blog is essential in the design and creation process we will have to seek to achieve a balance between the different types of letters so that they enhance the appearance of our website, without actually overloading.

For a correct choice we will follow a series of basic principles:

Colors

Always try to choose a font color that offers a suitable contrast between it and the color Background, in order to facilitate reading.

In turn, try to choose variations of basic colors softer make the reader feel comfortable with, Inviting you to stay on your website as long as possible.

An example of this would be choosing a soft dark color (# 44444 and # 090909) to a white background, instead of the black color type (# 000):

Size

Selecting the correct font size depending on the type of font is also something to have very into account.

For example, in the header texts or elements <h> will maintain a hierarchical structure where a text <h1> will be larger than their respective <h2> and so on.

If you need more information, here’s an example of typographic scale applied to web design.

Line height

Line height, or line spacing is another key element to consider as it will provide an adequate margin that will allow your text to breathe making the reading process much more pleasant.
In the previous example you will also find enough information about this parameter.

Spacing

Choose a spacing right between characters will make much better readability.

This is normally not a concern, as it has been taken into account during development of each typeface, but you can control this parameter through the Divi styles and Divi Builder.

Combination

Finding the perfect combination between different types of fonts can be a real headache.

It is especially important to find different fonts between the header and body texts, since this way you will get an adequate contrast.

The solution is to investigate websites that provide information of this type, observe the typography in other blogs and put into practice what you have learned.

For this I recommend these two tools:

  • Canva Fonts Combinations
  • Font Pair.

Using fonts and styles in Divi

Divi, unlike other free products, currently has more than 90 types of Fonts for both header and body text.

You can select the one you need through the Theme Customizer:

Once done, you can always select other sources specifically in places like the main and secondary menu of your Header and in all those modules that have incorporated texts such as, for example, the text module and the ads .

Resources

To help you more during the process of choosing your sources I recommend:

  • Google Fonts: the Google font directory that will inspire you and to that you select the ones that you like the most.
  • WhatFont: a Chrome extension to identify the font of any website, its color, etc.

How many columns do we want to use?

Once the previous elements are clarified, you can start with the design of the content of your pages and tickets.

To do this, the Divi Builder offers you a design or layout system based on two key elements: the sections and rows.

Sections

Sections are the foundations of Divi Builder design, since from them you can start contributing content to your pages and posts.

Through them, you will implement different rows that will give the variety of design that the construction of your blog requires.

The sections are classified into several types:

  • Standard: It is the most common type of section and has up to 11 different row types.
  • Full width: to implement full width modules.
  • Specials: allows you to create row combinations and therefore more complex designs.

Rows

The rows are secondary elements of design with Divi Builder and are responsible for organizing your content through its columns.

These columns are the exact places where you can install the modules that will equip your blog with all the functionality you need.

How many columns to use then?

The number of columns to use really depends on your needs.

There will be pages where certain sections require a 3-column layout, while others with an alone will suffice.

In the case of your blog entries you will have the opportunity to choose whether content will have a full width or, on the contrary, it will transfer part of it to use a bar lateral or sidebar where you can include your widgets , opt-in forms, etc. …

To configure them you will only have to access the entry in question through the WordPress administrator and in “Settings publishing Divi” select the page layout.

Posts, categories and metadata listing pages

For the main page of your entries, that is, the one that shows a list of all, Divi Builder offers you his blog module.

With this module you can do, among many other things:

  • Number of articles: choose how many articles will be displayed per page.
  • Categories: include or exclude certain categories
  • Content: show the extract of your article or all the content.
  • Featured Image: Enable or disable your featured image.
  • Metadata: show useful information such as postdate, author, categories, comment numbers, etc …
  • Design: arrangement of the articles (in grid or full width format).

In addition to this you can apply other effects such as: superimposing a series of colors with icons, control all styles of different fonts and add styles CSS.

Image gallery

If your blog is focused on topics such as photography, fashion, travel, etc. … the pictures they will obviously take on a determining role.

Divi offers you a module called Gallery that lets you create as many galleries as you want, and adjustments, so you can customize them to your liking.

Through this module you can define the number of images to display per page, enable the pagination, apply styles to titles and legends, etc…

In addition, as in the case of the Blog module, you can have a design Grid type and a slideshow of images, and you can also add an overlay of icons with custom colors.

User Profile

Probably, as your blog design progresses, you need to include information about yourself or about any other person who collaborate with you.

With Divi we can create such profiles through its module person because it offers you enough Configuration options, being able to add:

  • User name.
  • Job.
  • Social media profile address.
  • Social icons.
  • Description.
  • Image.

Conclusion

We end this article, which I sincerely hope you have found useful.

Apart from encouraging you to collaborate by sharing your feedback and your experiences with the Divi theme through the comments, you will soon have a third article at your disposal where we will see in detail how to design landing pages with this product, as well as implement another series of fundamental elements in any website, such as social icons and subscription forms.

Keep in touch!

Arsalan Masoodhttps://arsalanmasood.com/
Internet Entrepreneur, Blogs Writer, Marketer, Social Media & SEO Expert. Passionate about WordPress Blogging, Digital Marketing and SEO. Founder & CEO of Virally Media Private Limited & BloggerGeeks

What is WordPress, what is it for and how does it work?

Did you know that WordPress is the absolute leader worldwide for creating websites? Right now, according to W3Techs surveys, 31.7% of the world's websites are made with WordPress, the next...

WordPress or Blogger (Blogspot): Which is the best for you?

When it comes to creating a blog or a website in general, WordPress and Blogger are still the two most popular options. But which one...

Why in WordPress free themes can be very expensive

One of my first projects as a freelance was to make the website of a Tech Blog. At that time I was at the University and we...

The practical guide to migrate WordPress without a headache

Migrating WordPress is a problem that is surely in the "top ten" of the problems that a blogger user of this platform faces or, at least, it is one of the...

How to create a super easy WordPress Gravatar and why you should have it

In today's post I am going to explain something that you have surely heard of on many occasions: gravatar. Sounds familiar to you, right? Surely yes! When you...

How to Migrate Blogger to WordPress – The Complete Guide

All are tedious, complicated and unappetizing, but they are nothing compared to migrating a blog from Blogger to WordPress.org without having nightmares and losing hair. So, because...