During the last decade, reading a magazine used to mean subscribing to any magazine company and get the printed editions every week or month. But with the rise of the online world, digital magazines are now part of everyday life. With the ubiquitous Smartphone, everyone can access these digital magazines, which gives aspiring business ventures every reason to start a Digital Magazine of their own. If you are also wondering about launching your own Digital Magazine or turning your Blogging Website into a Digital Magazine, we are here to show you how you can create a Magazine Homepage with Elementor.
We are going to use Elementor and Post Elements from the Essential Addons bundle to create a wonderful Digital Magazine Website. If you are wondering, wouldn’t having Templates be of great help. Well, you will need developers and custom codes to make it usable whereas you can easily create a Digital Magazine by yourself using Elementor Blocks and Essential Addons. You will find out how in a minute. But before we get right into the creation process, let’s see some examples of Digital Magazine Website.
Digital Magazine Examples
The reason we are observing some Digital Magazines before diving into creating one is just to have the mental image. Having a clear picture of what you want will help to get there faster. Moreover, we will also be trying to scan the Websites and figure out the layout and its components. We will need your help to do that. Let’s start!
In the above screenshot, you can see the HomePage of TheTechJournal, one of the leading Digital Magazines that writes about Tech. With one glance you can identify a Header Bar at the very top, which contains all the Blog Post Categories. And below that, you can see a section that contains Recent Posts. And right below that, you can see a Post Section that contains all the Cryptocurrency blog. So we can see, they are dividing sections first using a Latest Published criteria and then a Blog Post Category criteria. Let’s look at another example.
In the above screenshot, you can see Mashable, which is another popular Digital Magazine covering a wide range of news. You can see the similarities between TheTechJournal and Mashable. Both the websites have a Header section that contains all the Blog Categories. Below that you can see three columns. Interestingly the column size increases from left to right, the left one is the smallest and the rightmost one being the largest. A very witty way to highlight content don’t you think? Let’s look at another example.
In the above, you can see the Home page of The Verge. This Digital Magazine stands out because it uses a distinct font color across its Home Page. This Pinkish color is used on almost every post. At a single glance, you can see the pinkish font color being used to highlight eh author name as well as the Column Headers.
If we look at the post-layout breakdown, we can see nothing very complicated. If you visit their website you can see a sober linear distribution of blog content separated by using a full-width content section.
We will look at one last example- Tech Crunch. The layout of this leading Website is different from other prominent ones because of two reasons. The website uses a Sidebar instead of a Top Bar Menu. But it includes all the blog categories on the menu. The other thing is, it uses varying column sizes. And to differentiate the columns we can see one of them includes the Blog Feature image and the other one includes only the Title and the excerpt.
Take Away!
Let’s sum up the things we have observed so far.
- A Header Containing All The Blog Categories.
- A Latest Blog Section.
- A Category Specific Blog Section.
- Linear Blog Post Layout.
Did we miss anything? If we did, do let us know in the Comment Section. Now that we have identified what we want, we are confident that you have generated a mental image of what you want in your Digital Magazine Homepage. Let’s get started.
How To Make Dynamic Page in WordPress
Now the first thing we need to do is create a new page which we will later use as the Home Page. Shoot up your WordPress Dashboard and create a new page.
Creating a Header Containing All the Blog Categories
First, open your WordPress Dashboard and navigate to Post>>Categories. From there you can add as many categories as you wish. After you have created the Categories, you need to open the Customization tab and assign the categories to the Main Menu of your Website. Do make sure to assign the Main Menu as the Top Bar Menu. Otherwise, it will not be visible at the top.
Now you might want to have a look at the Header you just created. But before we do that, we are going to create a new page and name it Home Page. Afterward, open the Elementor Editor. You should be able to see the Menu you just created at the top of your Home Page. However, you can also include this as the Side Bar Menu. In that case, make sure you specify the location of the menu as SideBar.
We have used native WordPress functionalities for creating a Menu that holds all the Post Categories you have on your Website. However, once you get a hang of Elementor, you can create both Headers and Footers from within the Elementor Editor. Moreover, Elementor comes with several Header Templates to make the work easier.
Now that we know how to create a Menu containing all the Categories on your Website lets move on to the next thing we want to teach you, and that is how to create a Blog Post section that will contain all the Latest Blogs on your Website.
A Latest Blog Section
To create a Recent Blog posts section, we are going to use the EA Post Grid element that comes with the Free version of Essential Addons. In the Elementor sidebar search for EA Post Grid and drop it inside the Elementor Editor. After that, you need to specify only two things and ignore one thing. You need to specify the criteria for Order and Order by to Date and Ascending/Descending. That’s it. After you are done doing hit open preview and you will see all your recent blog posts listed inside the section. Now the thing that you need to ignore is the category section because we are going to use it to create the next section which is a Category Specific Blog Section.
A Category Specific Blog Section.
We are going to use the Category feature of the EA Post Grid element. From the Category field simply type in the Category name and it should auto fill. Now do remember to add a new section for this new EA Post Grid Block. As our previous EA Post Grid has 4 columns we are going to have only 2 columns for this new Grid. You need to specify that from the Layout Settings tab.
Linear Blog Post Layout.
Now before we create a Linear Blog Post layout lets have a look at what we have created. But before that, we need to add two Header elements to our Page. We need to place a Header element right at the top of the EA Post Grid. Now visit your Websites’ home and you should be able to see a Top Menu containing all the Categories, below that you will see a Recent Blog Post Section and right below that you will find a Two-Column Category Specific Grid.
To create a Linear Blog Post layout we are going to use the EA Post Timeline element. To increase the length of the Timeline all you need to do is increase the Number of Posts.
Styling
Remember how The Verge uses a different color for Author Names? We are going to highlight the Title of each of the Blog posts instead using a different color. Scroll up to the first EA Post Grid and navigate to the Style Tab. From the Color and Typography tab pick a distinct color. If you want to use the same color for all the EA Post Grid and Timeline on your Homepage simply copy the Color code so that you can get the same color for all the Titles easily.
By now you should get the idea that it’s all about using the Post elements and creating a nice arrangement for them. Now before we wrap up, we want to show you how you can create a variety of post with the grid layout. By that, we are referring to columns that use the feature image and the ones that don’t place these two alternate columns will help you put emphasis on certain blogs. The way you do it very simple. Open EA Post Grid and navigate to Layout Settings, toggle off the show image option and that should be it.
Wrapping Up- How To Start an Online Magazine For Free
By now you should know how to create one of those fancy Digital Magazines Homepage you see online. We have already shown you examples of Digital Magazines such as TheTechJournal, Mashabale and The Verge. If you believe you are all prepared to create a similar Magazine Website on your own, don’t let the idea of spending money stop you. There is nothing more heartbreaking than not being able to start something due to money problems.
That’s why we have made the tutorial using only those plugins that have both Free and Pro Version. Yes! Both Elementor and Essential Addons for Elementor have a Free version that you can use to start Magazine Website today. After you start generating enough revenue to sustain the Website, we encourage you to get the Pro version. Naturally, once your website starts getting traction, you will need some extra hand as support. Luckily, both the plugins have 24/7 support. Also, we don’t need to remind the plethora of templates and premium features you will get with the PRO version.
