How To Add Blog Posts in WordPress Using Elementor

Elementor is a free drag-and-drop WordPress editor that allows you to customize your website front end without writing code. Like many other WordPress theme builders, the Elementor plugin helps you control every aspect of your web design process, including page layout.

In this tutorial, we’ll provide a step-by-step guide on how to create a blog with Elementor on WordPress sites.

1. Enter the WordPress website built with Elementor

Go to Visit Site at the top left corner of your WordPress dashboard to enter the website where you want to add a new post. If you don’t have the Elementor page builder, you can head to elementor.com to install it.

Input your username and password into the appropriate fields. Then, click Login.

2. Install the JetBlog plugin

While WordPress provides options to create and publish blog posts, the features are somewhat limited. As a result, we’ll need to install a plugin to access extended features and add-ons. If you’re looking for basic blog posting capability, you can skip this step and move on to step three.

With JetBlog, you can include multiple features in your blog pages, like video playlists, smart post tiles, and a text ticker widget. Also, it works with both Elementor pro and the free version.

To install the JetBlog, first download the file from CrocoBlock, the plugin’s creator. You’ll have to pay a one-time fee to get download access. Click on the Buy button on the homepage to pay and get the plugin.

After downloading, you’ll need the plugins on the taskbar on your screen’s left side. Next, select Add New from the drop-down options.

Alternatively, you can click on Installed Plugins and select the Add New button at the top of the page.

Clicking on Add New will cause WordPress to upload the JetBlog file from your computer hard drive. Next, click Upload Plugin at the top of the Add Plugins page. If you downloaded the plugin as a .zip file, use the Browse button to navigate the file path and select the file. Click Install Now to begin the installation process.

When the installation is complete, go back to the Plugins to activate JetBlog on your Elementor WordPress site. Click on the Plugins option from the sidebar and select Installed Plugins.

At this point, you should see JetBlog on the list. Select the Activate button just below JetBlog. The plugin should now become active.

3. Select the blog posts to be displayed

Now that we have the JetBlog plugin (if you chose to do so), go to Pages on the taskbar on the left side of your screen. Select All Pages.

You’ll see a list of all the pages on the website. Select the page you want to edit.

4. Click on Edit with Elementor

As you hover around the list of pages on your website, you’ll notice each small menu expand under the page title. Go to the page you want to edit and select Edit with Elementor.

A new window will appear on the screen with the selected page on the main screen and your Elementor editor panel on the left side of the screen. The editor panel contains several sections, each with unique design tools. Scroll down the taskbar to access the JetBlog design editor panel.

5. Go to Content > General

To begin, create a new section by clicking the + button, as seen in the image below.

The next step is to input a JetBlog posts widget into the section. Go to the taskbar and scroll down to the Jet Element column. Select Smart Post List.

The new widget will come in a preset template, automatically featuring some posts from your website as placeholders.

However, we can edit the widget using the tools provided on the Edit Smart Posts List taskbar on the left side of the screen.

Click on the Content tab and then General. From this tab, you can arrange the layout of your section, set the height, metadata, author’s name, and more. You can also configure custom fields for additional post content flexibility.

6. Set the columns and rows for the list

The first thing we’ll do to customize our new widget is to edit the name. At the top of the settings list on the General menu, you’ll find an empty data field tagged Widget Title.

Input a title that reflects the content that the widget will feature. In this case, we have Trending News as the title. You can also adjust the title size by selecting a Title Tag. 

The options go from H1, with the largest font, down through H2, H3, H4, and so on. Usually, these options also represent the section’s hierarchy from Main Title (H1) to subheaders (H2), secondary headers (H3), and so on.

Next, toggle on the Mark First Post as Featured option to improve the page’s aesthetics. The featured post will typically have bigger columns and hold the most catchy information for the section.

You can adjust the position of the featured post. We moved the featured post to the top by selecting the Top option under the Featured Post Position option.

Go to Featured Post Max Width to adjust how much breadth you want the featured post to cover. Adjust the size by moving the slider left-right till you get a size that suits you.

Next, scroll down the taskbar to adjust the number of rows and columns you wish you feature in this widget.

The column number setting allows you to choose how many columns to arrange your posts into.

Click the drop-down button in front of the Column Number and Row Number settings to select how many rows and columns you want for the website. You can try out different combinations until you find one that best suits you. For this example, we have two rows and two columns.

7. Set the image size and position

JetBlog allows you to customize your WordPress blog post page further by providing settings to adjust the post image size and position. You can also adjust the column sizes and meta tag lengths—among other things.

To start, go to the Post Thumbnail below the Rows Number and toggle it on. The button turns blue when enabled. Activating this setting allows you to have a small featured image next to the post title. Click the drop-down menu next to the image size to the Post Image Size setting and select a preferred size.

You can also organize how the image will appear with the post title. Go to the Post Image Position bar to select a preferred position. You can test several positions before making a choice.

Next, set the post image max width. With this setting, you can ensure the post images don’t go past the set orientation.

The following section on your editor bar allows you to limit the number of words you can feature in your blog titles and excerpts. Click on the data fields to set a value. In this sample, we have a 30-word maximum for the title and five words for the excerpt.

8. Enable Post Meta and select After Excerpt in Meta Position option

Enabling the post meta allows readers to see some extra information about the post, like the date and brief details.

To enable this option, toggle the Post Meta button to turn it on. The button will appear blue when enabled.

The Meta Position option sitting just below the post meta allows you to adjust the arrangement of the image and meta details. Click the drop-down arrow to select After Excerpt.

9. Click on Style, then Heading to set the background and color configuration

Now, go to the Style tab to explore various styling options for your blog list.

The Style tab contains numerous edit options. First, we’ll go to the Heading option to set the background and color. The image below indicates the area referred to as the heading. On the other hand, the title is the text (trending news) in the heading.

Go on Border Type. Click the drop arrow to select an option.

Next, adjust the width by increasing the value of the bottom. The value you input will depend on how thick you want the border line to be. You can also increase the thickness from either side of the line. You can ignore the right and left sides to prevent the borderline from extending beyond the header width.

In this sample, the border width is set to 2 from the bottom.

Next, adjust the border color. Click on the box tagged Border Color to choose a preferred hue.

10. Set the typography and title color parameters

Still under the Header settings, scroll down to the Title section. Click on the checkered box next to Title Color to set a color. Next, click on the typography menu to select a preferred font for your header title.

11. Change the Padding settings in the Style menu‍

Sitting just below the Typography setting, the padding tool allows you to adjust the text height and spacing, the title, and the surrounding border header.

Set the padding to 2 for the top and bottom fields. Also, adjust the margin by changing the value of the bottom field to 2. With that adjustment, you’ll create a decent gap between the title and the borderline.

And there you have it. Click on the Publish button at the bottom of the taskbar and apply these changes on the live website.

Work as an Elementor freelancer

The combination of JetBlog and Elementor page builder offers numerous possibilities when building a blog site. Besides the options we explored in this Elementor tutorial, you can use several other widgets and settings to build quality WordPress websites and blog posts.

Although these tools—Elementor and JetBlog—are simple, easy-to-use plugins, people can become overwhelmed with the extensive customization options available. As an Elementor developer, you may also want to include various blog post templates, new pages, and functionalities like social media links, subscription popups, and login forms. And on top of all this, you want to ensure an excellent user experience.

Developers can leverage the rich job market that Upwork offers. As an Elementor expert, you just need to create an Upwork account, complete your profile, and search for available WordPress Elementor jobs. Once you find work that interests you, create a proposal and apply to get Elementor jobs.

‍

Upwork is not affiliated with and does not sponsor or endorse any of the tools or services discussed in this article. These tools and services are provided only as potential options, and each reader and company should take the time needed to adequately analyse and determine the tools or services that would best fit their specific needs and situation.