How To Add Blog Section In Elementor

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 toPosts and click onAdd New.

2. Enter a title and click onEdit with Elementorbutton 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 toDefault template (the one with a sidebar) orFull 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 setTemplate inPost Attributes drop down toFull Width:

InAppearance > 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 onEdit with Elementor button.

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

4. Drag and drop thePosts element to your page.

5. A new dashboard on the left will open with the element's settings. From theContent tab and within theContent section set theSource of the posts toBlog.

6. Edit the settings andUpdate the page.

Custom Blog page andBlog 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 inPosts > 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 toAppearance > 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 toPosts > Categories > Add New Category.

2. Fill in the fields and inLayout setting choose the layout for this new category. You can have a layout with sidebar or without sidebar. If you set it toGlobal, the setting will be applied fromAppearance > 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 toAppearance > Customize > Sidebar.

2. Under theSettings tab, inExceptions section click onAdd New Exception.

3. SelectArchive item and setLayout 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.