Content delivers value, which helps build trust and ultimately leads to sales. Creating a blog post on your WordPress website is, therefore, an effective way to deliver value for visitors and, more importantly, keep them coming back to your website for more. You can post news, events, whitepapers, how-to guides or entertaining articles, which can then be shared periodically to spike interest in your company.

This article is the first in our series of tutorial articles, aimed at providing practical advice and help with your digital marketing activities. Future tutorials will also include tips on Search Engine Optimisation and other techniques for maximising the impact of your content marketing. We welcome any suggestions for topics you would like us to cover, please use our CONTACT FORM to let us know your ideas.

Here’s our step by step guide to creating a blog on your website using Elegant Theme’s Divi Builder so you can begin attracting more people to your website.

1 – Login

First, log into your WordPress dashboard. This is usually your website’s URL followed by /wp-admin. [www.yourdomain.com/wp-admin ]. ‘/wp-admin’ can sometimes be changed for security purposes, in which case, the person responsible for maintaining or hosting your website will be able to give you the correct address to access your dashboard.

Wordpress admin login

2 – Create a new post

Once logged in, simply hover over ‘Posts’ on the left sidebar and then click ‘Add New’.

WordPress_dashboard_posts_add_new

3 – Launch the Divi builder

You’re now at the starting point of creating your Divi blog (or any blog for that matter). Replace ‘Add title’ with the title of your blog and proceed to ‘Use Divi Builder’ to enter the actual blog page.


wordpress_posts_add_title_and_edit_with_divi_builder

4 – Use a template or start from scratch

Divi Builder will present you with 3 options for starting your blog:

wordpress_new-post_divi_buider_layouts

  • To start fresh, ‘build from scratch’. Choose this one to start with as it will help you understand the process better, and since blogs follow a simple format it’s just as fast.
  • As you become more competent using blogs you can create and save blog layouts and select them as templates using the ‘choose a premade layout’ option.
  • Lastly, you can outright clone an existing page on the website if you have saved it.

5 – Create your layout

When the new blog page has loaded, you will be asked to insert a row. This is simply how you want to structure certain parts of the page. The green blocks below represent columns for your content. Selecting a single green block will make your content cover most of the page by default. Most blogs will be formatted this way so for the sake of simplicity we will select this one.

 wordpress_divi_builder_insert

6 – Select your content modules

The green block allows you to add ‘modules‘. Once you have selected your column structure, numerous module choices will appear in alphabetical order. Select ‘Text’ to begin writing.

 wordpress_divi_builder_insert_module

7 – Add your content

Text settings will now pop up and anything you type into the ‘content’ box within it will appear on the blog page in the background.

wordpress_divi_builder_text_settings_headings_example

Use Heading 2 for subheadings, Heading 3 for subheadings within that subheading and so on. ‘Paragraph’ will be the normal text. You can hover over the many symbols to see your editing options, however, we highly recommend using the ‘Design’ tab (see image below) and clicking on the ‘text’ drop-down for paragraph text or ‘Heading text’ for headings.

Simply click on the green check mark in text settings to save individual changes or the red cross to cancel changes. Remember, this does not save the whole blog. To save the blog, go out of text settings, click on the purple (…) sign and there will be a blue ‘save draft’ box. This will save everything.

 

Adding Images to Divi

There are two ways to add images that offer slightly different functions:

 

Method A: Add media in the text module

You can easily add images in the text module. There is an ‘ADD MEDIA’ option under the ‘Content’ < ‘text’ tab (see the previous image for reference). This will take you to the media library where you can upload images.

wordpress_media_library_upload_files_page

Drag and drop saved image files into the library or use the ‘upload files’ tab before adding the uploaded image to the page.

 

Method B: Adding an image module

Adding a separate image module can give you more options to customise images in your blog. To add this, we need to go out of the text settings, scroll to the bottom (or top) of the grey module block, hover your mouse over it, and click the grey (+) sign. The ‘insert module’ menu then appears (see step 6 for reference). Now select the ‘image’ option. Once opened, click on the image placeholder and you can access the media library and follow the same process as method A to upload an image.

Note: You can edit image size in the ‘media library’ tab on the right sidebar labelled ‘attachment details’, then click ‘edit image’ to scale or crop. You can see how to edit images on WordPress in more detail in this guide. 

Congratulations! You now have the basic tools for text and images to create a blog using the divi builder on WordPress. Remember to click on the green checkmark in text settings to save individual changes or the red cross to cancel changes. Save the entire blog with the purple (…) sign < ‘save draft’ (bottom right corner).

There are also lots of customisable options on the ‘designs’ tab in the text settings, we recommend you experiment with these to understand the effects of the different settings and work out the most suitable configuration for your needs.

 

Other Important Divi Functions

The last thing to consider is navigating the page. You will inevitably be coming in and out of module settings and wanting to move things around. We touched upon adding a new module. If you hover over parts of the blog you’ll see the outlines of different ‘blocks’ split into sections, rows and text boxes as well as the (+) buttons to add new ones. These blocks form the structure of your blog.

Add_new_section_and_row_button_divi_builder

Structure

Blue/purple blocks are sections – This block determines the overall width of each section on the page.

Green blocks are rows – This block determines column structure (see the image in step 5).

Grey blocks are modules – This block determines the type of content e.g. text, images, code (See image in step 6).

Remember: A module (grey) must be placed within a row. A row (green) must be placed within a section (blue/purple). Subsequently, you always create your Divi blog first with a section, then a row and finally a module within both. This means you cannot, for example, drag a ‘text’ module out of a section unless there is another section created with a row in it to store the module.

 Navigation

Each block in the blog has a menu (near the top edge) when you hover over it:

 

The cogwheel (second from left) takes you to the block settings where most changes are usually made.

The four-way arrow (far left) will allow you to drag and drop sections, rows and text boxes across different parts of the page.

The other 3 options allow you to duplicate, save and delete parts of the blog highlighted (in that order).

Main_menu_button_divi_builder

When you click the main menu button (image above), you can see how your Divi blog looks mobile, tablet and desktop by clicking the appropriate icons in the grey box. The purple box lets you control the page settings and on the right is your save options like mentioned earlier.

desktop-tablet-mobile-divi-blog-view

How your blog looks when editing isn’t necessarily how it will look when published. You can view a ‘finished’ version of your blog at any point by saving your draft and clicking on ‘Exit Visual Builder’ on the top menu of the page. ‘Enable Visual Builder’ to return back into editing.

Finally: Add a featured image and publish your blog

To wrap things up, once you’re happy with your blog, you’ll want to add a featured image at the top. To do this, go out of Divi through the top menu by clicking on ‘Edit Post’. When you’re back in the WordPress dashboard, there’s a ‘featured image’ tab on the right sidebar. Go into that and you’ll be taken to the media library to upload an image. When you’re ready to go live, ‘preview’ the blog and press ‘Publish’ in the top right corner. Hide the visibility of your blog at any point by changing the status to ‘private’ just below that.

wordpress_divi_blog_posts_add_new

Well done for making it this far! You now have a beautiful blog to help build relationships with your visitors. Once your blog is live, however, you will only attract some existing website visitors unless you actively promote or optimise it. An effective strategy for marketers is to research what people are looking for on search engines like Google, crafting a blog to provide a solution, and optimise your blog to rank high on Google to attract masses of new visitors.

Divi gives you the power to create attractive and engaging content for your blog.  However we know that sometimes these tasks can be difficult or you might just not have the time to be writing content and creating images.  If you would like some help from our professional copywriters and graphic designers, get in touch to find out how we can help to create great content and then get it noticed by your potential customers.