Brenda Barron wrote another helpful guide for us, providing you with a step by step tutorial on how to create a blog page in WordPress 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 page 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.
Building WordPress blog posts with Elementor
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.
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 page, 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:
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.
A reviewer can list their scores for various aspects of a piece, such as a movie, with the Skillbar module:
There are also a number of additional modules bloggers may find useful:
- Google Maps
- Pricing Table
- Progress Bar
- Image Gallery
How to build a WordPress 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.
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.
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.
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.
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.
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.
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.
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
- Alert Message
- Blog Carousel
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.