Creating a New Blog Post from a Divi Template

Creating a New Blog Post from a Divi Template

Before you get started creating a blog post, make sure you are logged in to your WordPress site. Log in to WordPress at yoururl.com/wp-admin/. For more information on logging in, see our article WordPress: Logging In, Navigating the Menu, and More Resources.

In WordPress, blog content is created as posts. For Divi WordPress websites, we create a Divi blog post template for you to use that includes a section for content and a sidebar section. The template ensures styling consistency within blog posts. A list of posts on your site can be found by clicking Posts on the sidebar (see the first example below).

Once you’re on the Posts page, you’ll see a list of all the blog posts on your website. Note in the following example the template page has “– Draft” next to the post’s name (the second example below). This means the blog post has not been published to your website yet for visitors to view. The template post is not published as it is only a template for your posts. Any posts that are in progress but are not yet finished get saved as drafts as well and will have the “– Draft” extension.

Posts on Navigation Menu
“- Draft” Extension on Template

Template Setup

After clicking on your template, you will see a page with a large purple box with other colored boxes within it. This is the Divi Builder, a drag and drop system that is used to build sites and templates. In the example below, the template has a full-width blog post title (pictured in purple). The row below it is split into two columns: the blog post and the blog sidebar. To make it easier to understand, see the color-coded comparison between the Divi Builder and the sections on the live website. (Note: The Divi Builder page has been desaturated as not to distract from the colored sections.)

Color Coded Divi Builder Template
Correlation of Color Coding to Post
Now that we have explained the template, it is time to move on to the fun part: creating your first post!

Cloning the Template and Creating a Post

In the example above, you saw how Divi post templates are created. In order to start editing your first post, you first need to clone the template. NOTE: Be sure to always clone the template and not edit it in order to keep the template as a template. To clone the template, find your template and hover over its name. A list of options will appear underneath the file name, as seen below. Click on Clone.

Once you click Clone, you will see a copy of your template. Click on this copy to edit it. First, edit the post’s name. By default, the name of your template file will be in the white title. Click in the box, delete the template title, and type the title of your blog post. In the example below, the new title is New Blog Post. This will automatically update the full-width purple post title section therefore it will not need to be manually edited.
Default Title and Slug
Updated Title and Slug

Updating the Slug

Next, you’ll need to update the slug. The slug for your blog page, for example, is /blog. The slug shows up after your website URL. Commonly, slugs look similar to your blog post name. Slugs contain dashes instead of spaces, all lowercase letters, and no special characters. To edit your slug, click within the white box and simply type in the slug. Then, click OK. You can also copy your blog post title into the slug edit field and WordPress automatically apply standard slug formatting.

Editing Content

Now that your post has a title and a slug, it’s time to edit the blog content. Click on the hamburger icon (the triple bar icon in the first image below) on the section with your blog content (in this case, Blog Post Text). A window will pop-up that will allow you to edit the contents of the blog.

Click the Hamburger Icon to Edit the Post Content
Visual Editing Mode and the Pop-Up Editor
It is recommended to edit content in the Visual Mode because this editing mode behaves similarly to Microsoft Word. In this mode, you can highlight text and manipulate it by using the options on the text bar. Your website does have default typography to keep a consistent look and feel, therefore, we suggest limiting your text styling to only changing the heading levels, bold or italicized text, creating lists, and center text if needed.

Click on Visual to ensure you are in Visual Mode, as seen above. Then proceed to add your content to the text section indicated by “Blog text goes here.” If your blog entry is pre-written within another document, you can copy and paste the content into the box. However, when pasting the content, make sure to right mouse click and select “Paste Unformatted” (Windows) or “Paste and Match Style” (Mac) so that the content uses your website’s styles and not the document you’re importing it from.

Images Inside Blog Posts

A picture speaks a thousand words. Images not only give the eyes a break and add visual appeal to text-heavy articles, but they also convey your message in ways that text sometimes cannot. To learn more about adding images to your posts, visit our article on Uploading Media and Adding Images in Divi.

Previewing and Saving Post Content

To preview your post, click on the eyeball icon [insert image of eyeball icon here] at the bottom of the pop-up window. Once in preview mode, you can toggle between the screen size options to see how your post appears on differently sized devices by selecting the appropriate icon in the purple menu bar to the top of the preview pane [insert image of screen size icons here].  Once you like the way it looks and are done editing, click Save & Exit on the bottom right.

Desktop Preview
Tablet Preview
Mobile Preview

Saving Your Blog Post

You’ve finished the hard part of editing the blog content. So what’s next?

Categorizing Posts

If your blog is organized into categories, you will need to categorize this new post. Find the Categories section on the right-side menu (as seen below). New categories can be created using the “+ Add New Category” link. Otherwise, select the category for the post from the existing options. (Note: Your options will differ from the examples shown as they reflect your site.) For more information on categories, see WordPress Codex’s Manage Categories SubPanel.

Categories Section

Save Draft or Publish the Post

If at any point you would like to save your work but not publish it on your website, you can click the Save Draft button underneath the Publish section of the editing page. This will save a copy of your blog post but not post it to your live website. Once all your changes are complete, you can publish your blog post by clicking Publish.

Save Draft and Publish Buttons

Summary

  1. Log in to your site at www.yoururl.com/wp-admin/
  2. Go to Posts.
  3. Find your blog post template and hover over its name to get a list of options.
  4. Click “Clone” to duplicate the template. Find the duplicate. Hover over the duplicate’s file name and click “Edit”.
  5. In the white box at the top of the page, delete the current title text and type in your blog post’s title.
  6. Change the Permalink located beneath the title box. Click “Edit”. Delete the text that is there. Copy and paste your blog post title into the box and click “OK”.
  7. Find the black section that says, “Blog Post Text”. Click the hamburger icon. Inside the pop-up, delete the placeholder text.
  8. Copy and paste your blog post content (or type it) into the box where the placeholder text was. Remember to right click and “Paste without Formatting”. Edit the styling of the article if needed in the Visual mode which allows text editing similar to Microsoft Word. To add images, follow our guide Uploading Media and Adding Images in Divi.
  9. Preview the blog post using the teal Eyeball icon on the center bottom of the pop-up. Click the pink X icon to exit the preview.
  10. To save your content edits, click the green “Save and Exit” on the bottom right of the pop-up. The pop-up will close.
  11. Change the category of your blog post.
  12. Publish your blog post by clicking the “Publish” button**.

**NOTE: “Save and Exit” only saves the content in the pop-up. If you make changes to a post that has already been published, the “Publish” button will say “Update”. Your changes will not save to your blog post until you also click “Update”.

That’s it! You have now duplicated the Divi Post template, edited the title and slug, entered your blog post content, categorized your post, and published it. The steps for editing within the pop-up window are the same across Divi. For that reason you can apply this knowledge towards any posts and pages you create going forward.

How can we help?