How to build a blog in WordPress using Elementor Pro and OceanWP – Part 01
How to use Elementor Pro and OceanWP to build a blog archive page
Most themes use a single-style blog archive page, and you will definitely want to change this style.
On the other hand, OceanWP is different. It allows you to combine Elementor Pro with Ocean Elementor Widgets to choose your own style for your blog archive.
Speaking of which, before continuing this section, you need to purchase Elementor Pro and Ocean Elementor Widgets extension. The single site license for this extension is $39 per year, but you can access all the extensions we provide (including more extensions) at a low price. Elementor Pro is purchased separately for $49 per year.
Let’s start with a general file of all your articles. First, add a new page and name it “OceanWP Blog Archive”, of course, replace “OceanWP” with your blog name.
Then scroll down to the OceanWP settings section and configure your settings. I recommend turning on the “Title” section and disabling the “Display Title” setting so that you can use a custom title for the title module. Save the page as a draft and click “Edit with Elementor”.
First, scroll down to the Elementor Pro element and drag the Posts element. You can use the “Number of columns per page” and “Number of articles per page” settings to make a lot of settings for this element, but we will focus on creating some specific styles in this article. Let’s start with a large archive style that uses a large version of featured images.
Set “Column” to 1, and “Image Size” to “Full Width”.
You can change the metadata and “continue reading” style in the settings at the bottom of the editor, such as adding the author of each article, changing the “///” separator to “|” or changing the number of words displayed for each excerpt.
Change the content style by editing typography and color settings. You can even display your latest blog posts in a list style by configuring the following settings:
- Number of columns: 1
- Image position: left
- Photo size: Medium 300 x 300
- Image width: 35%
- Summary length: 50
You can adjust the settings at will to make the list look like you want.
You can also display the latest articles in a grid layout. To do this, set the “Image Position” to “Top”, and then increase the “Image Width” setting.
Category Archive
You can also display articles in a specific category or multiple categories. This will not change the real archive page, if the user clicks on the category link in the metadata section, the page will be visited, but you can at least use it in menus and links.
Create and configure your page as before, but name it after one of your categories, such as “WordPress Plugin Archive”, and click Edit with Elementor.
In the “Article” widget, open the “Query” menu in the “Content” section and select the split you want to display. You can choose more than one.
How to add pagination with Elementor in WordPress
You can also add pagination to the page so that users can click to view more articles as needed. It’s as simple as using the Posts widget to select the pagination style. You can change the text used for the previous/next button, such as update and older.
Ocean Elementor Widgets features and pricing
For single site-licenses, the official Ocean Elementor Widgets extension is used separately for $39 per year. It can be used for free when purchased with the official Core Extensions Bundle (44.50 USD/year). With this bundle, you will be able to access:
- Blog grid
- Skillbar
- Alert message
- Blog carousel
- Newsletter
- Pricing
That is a wrap! 🙂