Unlike tagDiv Composer, Elementor is not designed specifically to create an online magazine. Elementor has no native widgets to display posts in a grid style like tagDiv Composer. In tagDiv Composer, you have over 10 Big Grid shortcodes to display the articles on your website in several grid styles. If you want to create an online magazine with Elementor and want to add some grid elements to display your articles, you can use the JetBlog add-on.
JetBlog is a premium Elementor add-on (which costs $19 per year) that is designed specifically to create an online magazine and the similar site types. It is part of Jet Plugins family, a set of Elementor add-ons developed by Crocoblock. JetBlog comes with the following widgets:
- Video Playlist: To create video playlists (support YouTube and Vimeo)
- Posts Pagination: To add post pagination
- Posts Navigation: To add post navigation
- Ticker: To add a news ticker
- Post Tiles: To display posts in a grid style. You can choose from 9 different grid styles
- Smart Posts List: To display articles in a list style.
In this article, we will demonstrate how to create the homepage of an online magazine with JetBlog. Here is the example of the homepage we are going to create.
In addition to JetBlog, you also need Elementor Pro (optional) to display articles in a list style. Or, you can also use the JetBlog’s Smart Posts List widget to display the articles in a list style.
Preparation
Before getting started, make sure you have upgraded your Elementor to the pro version (read the difference between Elementor Free vs Elementor Pro) and have installed and activated the JetBlog add-on as well. You can get JetBlog on the official site of Crocoblock. Alternatively, you can also get JetBlog with a one-time purchase option in the Jupiter X theme bundle.
Once you are ready, create a new page (Pages -> Add New) and edit it with Elementor.
If you are totally new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.
Start Creating the Homepage
The homepage we are creating consists of three sections.
Section 1
We use this section to place the following widgets:
- Smart Posts Tiles (JetBlog)
- Divider (Elementor)
- Posts (Elementor Pro)
Smart Posts Tiles Widget
Add a new section by clicking the plus button on the canvas area and select the one-column structure. Add the Smart Posts Tiles widget to the section you have just created by dragging it from the left panel.
Go to the left panel to customize the widget. First off, open the General option block under the Content tab. Select your preferred grid layout and set the height as well as the width of the main box.
From this option block, you can also set the image size, show/hide the post terms, set the excerpt length, show/hide the post meta, show/hide the post author, show/hide the post date, and show/hide the post comments.
Next, open the Query & Controls option block to filter the articles. By default, the widget displays the last articles on your website. You can use the custom query to display articles by categories or tags. You can also manually select the articles by entering the post IDs.
You can also open the Custom Fields option block to add custom fields. We don’t use custom fields in this example.
Next, open the Style tab to style up the widget. Here are the key styling option blocks you can open:
- Box
You can open this block to set the space between boxes/tiles in the grid. You can also set the padding, border radius, and box overlay.
- Content
You can open this block to set the color of the content title, hover color, typography (font family, font size, font style, and so on), the color of post title of the main box, the color of the post excerpt, content alignment, and so on.
- Meta
You can open this block to customize the look of the meta such as text color, typography, icon size, gaps between icons, alignment, padding, margin, and so on.
You can open other styling options blocks according to the options you set on the Content tab.
Divider Widget
We will use this widget to add a separator between the grid element (the Smart Posts Tiles widget) and the Posts widget. Drag the Divider widget and place it right beneath the Smart Posts Tiles widget. Add a text element from the Divider block under the Content tab. You can add any text such as “featured stories”, “curated stories” or any text you like.
From this block, you can also set the width of the divider, divider style, and the alignment.
Once done setting the basic option, go to the Style tab to style up the divider. You can set the color, thickness (weight), and gap on the Divider block.
To customize the text of the divider, you can open the Text block. Here, you can set the text color, position, typography, and spacing.
Posts Widget
Add the Posts widget by dragging it from the left panel to the canvas area. Place it right beneath the Divider widget.
Open the Layout block under the Content tab on the left panel to set the skin, column, posts per page, image position, and so on.
Here are the setting options we use:
- Skin: Classic
- Number of columns: 3
- Posts per page: 3
- Image position: Top
- Masonry: Off
- Image size: Full
- Image ratio: 0.55
- Image width: 100 %
- Metadata: Author, date
Once done with the Layout block, open the Query block to filter the articles. By default, Posts widget displays the latest articles on your website. You can filter the articles by categories, tags, authors, and so on. If you want to filter the articles by categories, for instance, select Term on the Include By field and enter your preferred categories.
You can order the articles by date, title, or randomly. If you want to enable the pagination, you can open the Pagination block.
Once done with the Content tab, you can go to the Style tab to the style up the Posts widget. Here are the key styling option blocks you can open according to the options you set on the Content tab.
- Layout
You can open this block to set the space between columns, space between rows, and content alignment.
- Box
Box refers to the container of each post. You can open this block to set the border width of the containers, border radius, border color, content padding, background color, and box shadow.
- Image
You can open this block to set the border radius of the featured image of each post. You can also set the spacing between the featured image and the content. You can also apply CSS filters if you want to.
Section 2
We use this section to place the following widgets in two different columns:
- Divider (Elementor)
- Posts (Elementor Pro)
- Image (Elementor)
Before adding the widgets, add a new section first. Select the two-column structure and set the width of the columns with the comparison of about 68:32%.
First Column (The Left One)
Add the Divider widget to the first column on the section you have just added above. On the Divider block under the Content tab, select the divider style you like and set the width to about 25%. Set the alignment to left and add the text element. You can add a text such as “latest stories”, “latest news”, and so on.
Go to the Style tab to style up the divider. Open the Divider block to set the divider color, thickness (weight), and gap.
Open the Text block to customize the text such as text color, typography, position, and spacing.
Add the Posts widget and place it right beneath the Divider widget. Go to the Layout block under the Content tab to set the basic setting options. The following are the basic settings we use.
- Skin: Classic
- Number of columns: 1
- Posts per page: 5
- Image position: Left
- Masonry: Off
- Image size: Full
- Image ratio: 0.55
- Image width: 40 %
- Excerpt length: 25
- Metadata: Author, date
You can open the Query block if you want to use a custom query as we have covered in section 1 above. Open the Pagination block to enable the pagination. We have covered how to add pagination in the previous article. You can read it to learn more. Once done setting the basic options, go to the Style tab to style up the Posts widget as you have done in section 1.
Second Column (The Right One)
Add the Image widget and place it to the second column. Actually, the Image widget spot is designed to display a 300×600 ad banner. You can replace this widget with the HTML widget to display a 300×600 ad banner once your website is ready to publish and you have an ad banner ready. On the site development phase, you can temporarily use the Image widget to demonstrate the ad banner. Prepare an image with a dimension of 300×600 px to be used on this spot.
Once done with the Image widget, add the Divider widget and place it right beneath the Image widget. On the Divider block under the Content tab, select a divider style you like, set the thickness (width) to about 65%, set the alignment, and add a text you like.
Go to the Style tab to style up the divider. You can set the color of the divider, thickness, and the gap on the Divider block. While to set the text color and typography, you can open the Text block.
Next, add the Posts widget and place it right beneath the Divider widget. Go to the Layout block under the Content tab to set the basic setting options. Here are the settings we use:
- Skin: Classic
- Number of columns: 2
- Posts per page: 4
- Image position: Top
- Masonry: Off
- Image size: Full
- Image ratio: 0.55
- Image width: 100 %
- Excerpt length: Off
- Metadata: Off
Open the Query block to filter the articles as you have done on the other Posts widgets above. Once done, go to the Style tab to style up the widget.
Go to the Advanced tab if you want to make some advanced options. In this example, we set the left padding to 45 to make the Posts widget has the same vertical alignment as the Image widget.
Section 3
We use this section to place the Divider and the Video Playlist widget.
Add a new section by clicking the plus icon on the canvas area. Select the one-column structure. Once the section is ready, add the Video Playlist widget.
There are two ways to create a playlist with the JetBlog’s Video Playlist widget. First, you can embed a playlist on your YouTube account. We have a separate article that covers this. You can read it to learn more. Second, you can create a new playlist by adding the videos you want to add to the playlist.
To create a new playlist, you simply paste the video URLs on the Items block under the Content tab. Click ADD ITEM to add a new video.
Open the Settings block to set the playlist height, thumbnails orientation, thumbnails position, and so on.
Go to the Style tab to style up the playlist. You can read our previous article to learn more about how to create a YouTube playlist in Elementor using JetBlog.
Until here, you have done creating an online magazine homepage in Elementor using JetBlog. You can play around to learn more about the JetBlog add-on. Click the PUBLISH button to publish your homepage.
Once the page is published, make sure to set it as the homepage on your WordPress site once your website is completely ready. To do so, go to Settings -> Reading.
On the Your homepage displays section, select the A static page option and select the homepage you have just created on the Homepage dropdown menu.