How to create a Blog page with Elementor

Jupiter X has 2 main blog styles – Grid and Masonry. They can be created with Posts element in Elementor page builder. 

Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. In order to see the default Elementor Posts, you need to look for it in the Elementor knowledgebase.

It’s worth to mention that before displaying blog posts, a post itself should be created and the element configured. 

Creating a single blog post

1. From WordPress left menu, go to Posts and click on Add New.

2. Enter a title and click on Edit with Elementor button or use the default WordPress editor to add your content to a post.

3. Add needed content to your post.

4. Publish the post and check the result.

Note: If you don’t see Edit with the Elementor button in the Post editor, you need to activate it in Elementor > Settings as described in this article.
Also, make sure this page is not set as a default blog page in the WordPress Dashboard > Settings > Reading

Configuring a Single Blog Post Layout

You can change the post layout to Default template (the one with a sidebar) or Full Width template (without a sidebar). Sidebar can be added to blog posts which will then allow adding widgets to blog posts. How to add a sidebar refer to this article.

If you don’t want to have a sidebar on a post page, you need set Template in Post Attributes drop down to Full Width:

In Appearance > Customize > Blog > Blog Single you have options to set different layout for your single post and also hide/show different elements like featured image, social icons, related posts, etc. and style them.

To see all of the blog styles, you may check out “Blog” section on our Jupiter X main demo under the Blog menu item.

Creating a custom Blog Page

Note: If you set a page with Posts element to be the default blog page from Settings > Reading, none of the styles and options related to the Posts element will be applied to that page. So Posts page option in Settings > Reading should be blank.

By default, WordPress displays latest blog posts in your front page with default Jupiter X layout. The default layout is very limited and you can not use the different blog layouts as shown in our demo pages.

To be able to use the flexibility of blog pages, you need to create and configure a custom page with Posts element and make WordPress aware of the page.

To create a custom blog page:

1. Add a new page or edit an existing one.

2. Click on Edit with Elementor button.

3. From the left dashboard, search for a “Posts” element.

Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. In order to see the default Elementor Posts, you need to look for it in the Elementor knowledgebase.

4. Drag and drop the Posts element to your page.

5. A new dashboard on the left will open with the element’s settings. From the Content tab and within the Content section set the Source of the posts to Blog.

6. Edit the settings and Update the page.

Custom Blog page and Blog Archive pages are different. When creating a custom Blog page, you can add any widget in Elementor page builder, but Blog Archive page shows some posts by default. 
For example, a category page which was created in Posts > Categories and you assigned some posts to this category, so they are shown once the category page link is clicked. Such page can’t be modified in Elementor as it uses default archive template.
But there are some settings for Blog Archive pages, like categories and tags pages.

Go to Appearance > Customize > Blog > Blog Archive and there you’ll have options to set margins/paddings for blog archive pages in different devices. 

Note: If you want to show a sidebar on your Blog page and Blog Archive pages, refer to this article how to assign a sidebar globally, and read this one how to add a sidebar to a specific page.

Setting Layout for Blog Archive pages

When creating a page you have a possibility to set its layout to Full Width or Default (with sidebar). But what about archive pages, for example category pages to which you assign the posts? What if you want to set sidebar for one category, but have full width page for another? You’ve got such opportunity when creating a category or edit a category after its creation.

1. Go to Posts > Categories > Add New Category.

2. Fill in the fields and in Layout setting choose the layout for this new category. You can have a layout with sidebar or without sidebar. If you set it to Global, the setting will be applied from Appearance > Customize > Sidebar.

Note: If you forgot to select the layout while creating a category, you can change it in the category editor. Edit a category in Posts > Categories and set the Layout option to the needed setting.

Also you can set global layout for all category pages.

1. Go to Appearance > Customize > Sidebar.

2. Under the Settings tab, in Exceptions section click on Add New Exception.

3. Select Archive item and set Layout setting to the desired layout.

Note: Archive settings are applied to both Blog and Portfolio archive pages. Portfolio and Blog exceptions are related to single post pages in this setting.