How to Build a Blog in WordPress with Elementor Pro and OceanWP

Brenda Barron wrote another helpful guide for us, providing you with a step by step tutorial on how to build a blog with Elementor Pro and OceanWP.

Elementor and OceanWP make a powerful duo in the WordPress world. They allow you to build a well-designed website from scratch with a few simple clicks, as we demonstrated in our How to Build an Architecture Site with OceanWP and How to Create a WordPress Site with Elementor and OceanWP guides. Make sure you check out those posts if you have yet to build your site.

Check out this tutorial, showing how to create a blog in WordPress step by step with Elementor’s Posts widget:

Elementor is a powerful plugin, and you can use it for a variety of different purposes. That includes blog posts and blog archive pages. This can completely change the way you approach the process you use to create new blog posts, and it can allow you to go beyond a simple style of using text and images.

Let’s take a look at how to build these types of pages using Elementor, Elementor Pro and the OceanWP theme.

How to Build a Blog Post with Elementor & OceanWP

Elementor and page builder plugins like it make it incredibly simple to build custom web page designs without needing to know how to code. Naturally, users began wanting to use these capabilities to build aesthetically-pleasing, visually-stunning blog posts.

However, it should be noted that you need to be cautious when using page builder plugins to build blog posts. This is because any design you build completely goes away when you deactivate the plugin. The fallout isn’t nearly as bad with Elementor as it is with other page builder plugins. Elementor leaves behind your content while some page builder plugins leave behind a mess of shortcodes on the frontend of your site.

It’s not likely that you’ll ever need to deactivate Elementor, but you should at least consider the possibility when it comes to blog posts. If you are a newbie, you might want to check out a more basic tutorial about building blogs. You likely aren’t going to publish nearly as many as pages as you are blog posts. Some sites have hundreds of blog posts. It would take an extraordinary amount of time to redesign all of them.

Building blog posts with Elementor

Here are a few suggestions if you’ve made your decision and are ready to begin building blog posts with Elementor.

  • Limit the Amount of Blog Posts You Build with Elementor – You can eliminate some of the risk (the risk being the number of blog posts you need to spend time redesigning if you ever choose to move away from Elementor) by only using the plugin to build a certain type of post or at least keeping the amount of the posts you build with Elementor to a minimum.
  • Keep a Log of the Posts You Build with Elementor – Doing this can eliminate the amount of time it takes to redesign blog posts by preventing you from having to look through each and every one of the posts you’ve published to see which ones you’ve used Elementor to build.
  • Create Two Versions of Every Post – If you use Elementor to build a blog post, consider creating a second version of that post without the plugin and archiving it. If you ever need to uninstall the plugin, all you’ll need to do is copy and paste it into the WordPress editor (more or less) to redesign it.

With that said, let’s get to building a blog post with Elementor inside of OceanWP.

Using Elementor for blogging

Hover over Posts in the admin panel, and click Add New as you normally would. Give your post a name, and save it as a draft. Let’s talk about the settings you can configure on the backend thanks to OceanWP before we open the Elementor editor.

Scroll down until you see the OceanWP Settings screen option. Turn it on if you don’t see it. You can see the options allow you to change various settings in terms of the way the page is structured, such as whether or not the post has a sidebar and which side it’s on, if so. You can also change your header and footer options for individual posts.

Feel free to take a bit of time to configure your settings before continuing. Click Edit with Elementor once you’re ready.

Creative uses when creating blog posts

When you use a page builder plugin to build a blog post, you’re opening the door to a wide number of possibilities in terms of creativity. The content modules available in Elementor will allow you to add a variety of different designs and styles effortlessly, many of which you can incorporate into the post itself so they’re not just “pretty fluff.”

Text is a simple way to approach custom styles using Elementor, particularly with the Heading and Text Editor modules. If you read the guides we published on building a site with Elementor and OceanWP, you know each module has a Style section. You can use this section to add various text styles to your post using the typography settings.

Instead of text that looks the same throughout the post save for the headers, you could create something along the lines of this:

How to build a blog post with Elementor

This is a really simple way to use a page builder plugin to build a blog post, but we can dive a little further than this. For example, a food or DIY blog could use the Counter module to list the ingredients or supplies to complete the recipe or project. You’ll first need to click Add New Section, then select the section layout that suits your ingredient/supply list best.

Designing a blog post on WordPress

A reviewer can list their scores for various aspects of a piece, such as a movie, with the Skillbar module:

Adding a certain element to a blog post

There are also a number of additional modules bloggers may find useful:

  • Image
  • Video
  • Button
  • Google Maps
  • Alert
  • Pricing Table
  • Progress Bar
  • Testimonial
  • Image Gallery
  • Toggle
  • SoundCloud

How to build a blog archive page with Elementor Pro & OceanWP

Most themes use a single style for blog archive pages, a style you’re forced to live with as it’s not able to be changed.

OceanWP, on the other hand, is different. It allows you to combine Elementor Pro with Ocean Elementor Widgets to choose your own style for blog archives.

Speaking of which, you’ll need to purchase Elementor Pro as well as the Ocean Elementor Widgets extension before continuing with this section. A single-site license for this extension is $39/year, but you can gain access to all of the extensions we offer (over a dozen with more to come) for a low price of $44.50/year. Elementor Pro is available separately for $49/year.

General archives

Let’s start with a general archive for all of your posts. Start by adding a new page, and naming it as such, such as “The OceanWP Blog Archives,” replacing “OceanWP” with your blog’s name, of course.

Scroll down to the OceanWP Settings section after that, and configure your settings. I suggest opening the Title section and disabling the Display Title setting so you can use a custom heading with the Heading module. Save the page as a draft, and click Edit with Elementor.

Start by scrolling down to the Elementor Pro elements and dragging over the Posts element. You can do a lot with this element using the Columns and Posts Per Page settings, but we’re going to focus on creating a few specific styles in this post. Let’s start with a large archive style that uses large versions of your featured images.

Set the Columns setting to 1, and the Image Size setting to Full.

Customizing the featured image in the blog

You can change the metadata and “Read More” styles in the settings at the bottom of the editor, such as adding the author of each post, changing the “///” separator to “|” or changing the number of words shown in each excerpt.

Changing the number of excerpt words

Change content styles by editing the typography and color settings. You can even showcase your latest blog posts in a list style by configuring these settings:

  • Columns: 1
  • Image Position: Left
  • Image Size: Medium 300 x 300
  • Image Width: 35%
  • Excerpt Length: 50

Feel free to tweak the settings a little to make the list look the way you want it to.

Designing the blog page on WordPRess

You can also display your latest posts in a grid layout. To do so, set the Image Position to top, and increase the Image Width setting.

Category archives

You can also display posts from a particular category or multiple categories. This won’t change the real archive page, the one your readers visit if they click the category link in your metadata section, but you can at least use it in menus and links.

Create and configure your page like before, but name it after one of your categories, such as “WordPress Plugins Archives,” and click Edit with Elementor.

In the Posts widget, open the Query menu in the Content section, and select the category you want to display. You can choose multiple.

Choose which blog categories to display

How to add pagination in WordPress using Elementor

You can also add pagination to your page so users can click to see more posts if they wish. This is as simple as choosing a pagination style using the Posts widget. You can change the text used for the Previous/Next buttons, such as Newer and Older.

WordPress Blog pagination

Ocean Elementor Widgets Features & Pricing

The Ocean Elementor Widgets extension costs $39/year on its own for a single-site license. It’s free when purchased with the Core Extensions Bundle ($44.50/year), as stated before. With this bundle you will have access to:

  • Blog Grid
  • Skillbar
  • Alert Message
  • Blog Carousel
  • Newsletter
  • Pricing

View the sales page for this extension to see screenshots of each widget as well as a link to our demo, which you can use to try out each extension yourself.

View Ocean Elementor Widgets

About the Author

Ben Pines

Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

26 Responses

  1. I do not clearly see whatthe speciality for a OceanWP Theme is. I use the Genesis Framework…
    However, is there a chance to customize/edit the »real« WordPress Category/Archive Pages with Elementor in the Future? This would be a killer feature, wouldn`t be?

  2. You can make new page. Name it as category. Then set no follow and redirect the category oceanWP page with the custom one.

  3. I wish there was a way for Elementor to style the REAL Category Archive pages which is reached by clicking on the Category link in the Meta Data section.

  4. Hello,

    Regarding customization and settings of website: Do OceanWP customization settings overrule Elementor Page Builder settings or the other way round? If I declare “open sans” my basic font in OceanWP settings do I have to declare it again in Elementor each time for each section?
    I think you should write an article about that issue to help Elementor users to chose the way they want to work with the settings.

    I have the feeling one should declare all settings with OceanWP whenever possible and make the “fine tuning” afterwards with the settings Elementor offers

    Thank you for your great articles that help to understand the working of Elementor

  5. Hi,

    Sorry, I forgot to mention another issue with Elementor. How to use PHP in Elementor sections/widgets?

    I could not find any information about it.

    For example:

    [code]

    [/code]

  6. I have one more question. I want to add recipes in my website in which I am using elementor page builder.
    Recipe plugins like “WP recipe maker “, “WP ultimate recipe” etc. Can I add this recipe to my blog and edit with elementor page builder?

    I heard that this is not possible in elementor page builder.
    What about someone with cooking website?

  7. on my blog post pages I have a top menu made with elementor. And in blog posts list widget it displays menu items as a beginning of the text. How can I avoid that?

  8. Thanks to guide me to create the wordpress Blog…..
    i am new in digital marketing and i know importance of the own site as blogger…
    i am creating the blog on wordpress.. but i little bit confused in choosing the theme and which theme is best for my blog…
    can you suggest me the some free theme for my blog?……..

Leave a Reply