If I were to do a rough estimate, I’d say approximately 99% of the themes available for use on Edublogs and CampusPress are designed to display your most recent blog posts on your home page. That is because historically blogs have been used as personal logs that get updated frequently, and bloggers wanted to display their most recent and most relevant logs first.
Today, more and more people — including educators — are using blogging platforms to set up more traditional websites. Because of that, more people want a traditional home page rather than a feed of their most recent blog posts on their front page. The good news is that setting up an inviting welcome page has become a lot easier.
In this post, I’ll give you a brief overview on how to set up your blog to use a static home page in place of the default blog feed, and we’ll explore two relatively new tools that you can use to create a really stunning welcome page for your site.
Creating A Static Home Page
You can find detailed instructions (with images) on how to set your blog to use a static home page in our Help Pages, but I’ll give you the quick version here:
- Go to Pages > Add New and create a new page.
- Title the page something like Home, Welcome, Front Page, etc.
- Publish the page. (Don’t worry about adding any content yet; we’ll come back to that.)
- Now, go to Settings > Reading.
- Select the option for Static Front Page and choose your newly created page.
- Save those changes.
That’s it. Now your blog will be set to use your newly created page as your home page instead of the default blog feed. Now, we just have to go back and make that page look amazing.
In order to do that, I am going to introduce to two tools that CampusPress (and Edublogs Pro) users can activate on their sites — the Live Shortcodes Plugin and Divi Builder Plugin.
Live Shortcodes Plugin
The Live Shortcodes plugin lets you add some really cool features to your page. You’ll find full instructions on activating and using the plugin in our Support Pages. The Support page also includes descriptions of each of the features that can be added with the Live Shortcodes plugin:
- Latest Posts
- Reader Content
- My Class Blog list
- My Class Recent Posts
Since all of the descriptions and instructions you need to start using the Live Shortcodes plugin are already on our Support page, I won’t include that here. Click through to the support page to learn how to set up and use the Live Shortcodes plugin. Today I’m going to demonstrate how to spice up an average-looking welcome page using this plugin.
Let’s begin by taking a look at a sample Welcome page I have set up. This is a very, very basic page that contains some class rules, parent information, and information about the class blog. You don’t have to read through the whole page, but I do want to call your attention to the mention of the contact form and the Parent Information PDF in the Parent Information section. Also, at the bottom, you see I have asked the parents to visit the class blog page.
In the next screenshot, I’m going to show you how we can use Live Shortcodes to make this information more inviting and interactive.
You’ll see below that I have added a few different dividers to break up the sections of text and give the page a little more visual interest. In most cases, you’d likely use the same style divider throughout the page, but I wanted to show you some of the different styles available.
Instead of the ordered list, I have used an accordion in to display my class rules. Each accordion box expands when clicked to display the full explanation of the rule. I have also added buttons parents can use to access the contact form and the Parent Information PDF.
Finally, at the bottom, I have used the Latest Posts shortode to add the three most recent blog posts to the page. Adding the blog posts here gives you the best of both worlds. You can have a nice static welcome page, but still retain the ability to share your latest news on youe front page too.
Overall, this page design is still pretty basic, but you can see how much more attractive and interactive your pages can become just by adding a few shortcodes. Breaking up large areas of text with visual elements like dividers, accordions, tabs, and toggles not only makes your page look nicer, but it also helps readers more easily digest and comprehend large amounts of text.
If you have a lot of information you want to share on your Welcome page, then using these shortcodes will definitely help your parents and students get through it without getting overwhelmed.
Divi Builder Plugin
The Live Shortcodes plugin is a great way to add some cool features to your page, but if you are looking for a truly awesome tool that will let you design a fully-customized welcome page, then what you want is the Divi Builder.
Just like the Live Shortcodes plugin, documentation for the Divi Builder Plugin can be found in our support pages so I won’t repeat that here. I will give you a quick overview of what the Divi builder is and what you can do with it.
The Divi builder allows you to build pages using a simple drag-and-drop style interface. You first add a section to your page. You then add rows to that section. You can choose a specific layout for each row, and then add specific modules to build your page. Here is a screenshot of the builder so you can visualize what all of that looks like.
In the screenshot, you can see there is one Section added to my page. The Section is denoted by the blue menu bar on the left. The options in the Section menu allow you to (from top to bottom) edit the section settings, duplicate the section, and delete the section.
Within that Section, I have added two Rows. Both of these are noted by the green menu boxes. The icons in the green boxes allow you to (from top to bottom) edit the row settings, duplicate the row, change the column layout, and delete the row.
You’ll see that in the top row I chose to use a two-column layout, and the bottom row uses a four-column layout. All that’s left to do now is insert the modules I want to use. Clicking on any of the individual module boxes opens up the scrollable menu so I can choose which one to use.
Once I choose a module, each one has its own settings and options. For more detailed information on setting up your page layout and using specific modules, you can refer to the Divi plugin documentation.
For the purposes of this post, I’ll now show you how I took the information from my basic Welcome page above and created a new custom layout for the page using a few Divi modules. I’ll go one section at a time showing you how each section is laid out and what the live version looks like.
First, I added the welcome row. In this first row I added a text module for my header, a slider module to add an image, another text module for the welcome text, and a tabs module to display my class rules.
Here is how it looks on the live page.
I then used two rows to add my Parent Information section. I used two rows so that I could have two single column modules followed by two modules that were placed in a 2/ 3 – 1/3 column layout.
The single column modules were used to add a divider and the parent information text. The smaller modules were used to add a contact form directly to the welcome page and to add a call to action box that links to my Parent Info PDF.
Here’s the live view of that section.
Note: I chose to use most of the default settings for the modules I added to my page, but everything in these modules is customizable — fonts, font size, font color, background colors, border colors, etc.
The final section of my page I set up using a 1/3 – 2/3 column layout. I added a text module with the class blog description to the 1/3 area along with a sidebar module.
The sidebar modules let you display whichever widgets you have added to a specific sidebar. I have my module set to display the main sidebar where I have added the Subscribe By Email widget and the Recent Posts widget.
You can modify which widgets show up in the sidebar module by either selecting to display a different sidebar area or by editing the widgets for your selected sidebar in Appearance > Widgets.
The 2/3 column is being used to display my recent blog posts.
Here is the live view.
And here’s a view of the page as a whole so you can see what it all looks like together.
Live Shortcodes vs Divi Builder: Which One Is Right For Me?
The answer really depends on how much customizing you want to do on your page. If you are happy using a single-column layout throughout the entire page and just want the ability to add a few custom elements to your page, then I’d suggest looking at the Live Shortcode options first.
I’d suggest testing out the Divi Builder if you want to be able to use different layouts and be able to switch from a single column to multiple columns and back again.
Divi Builder also has a larger selection of modules you can use to build you page, and the advanced design settings for each module will give you a lot more control over how your finished page looks.
Overall, both tools are great for customizing your pages. I’d recommend the Live Shortcodes for someone looking to make some simple customizations to their page and Divi Builder for anyone looking to break free from the default page template and create a truly unique page design.