Tuesday, November 2, 2021
As A Manager, How Much Praise Is Too Much?
When Productivity Starts to Sink, Check for These 7 Meeting Killers
4 Critical Steps to Manage Employee Conflict and Improve Morale
The Facebook Whistleblower, Frances Haugen, Spoke Publicly for the First Time. What She Had to Say to Mark Zuckerberg
Amazon CEO Andy Jassey Just Taught Every CEO a Powerful Leadership Lesson. Here's What You Can Learn From Him
Southwest Handles a Twitter Mob over "Let's Go Brandon" Pilot Correctly
How 3 Dog Trainers Teamed Up to Get Veterans Free Service Dogs
4 Red Flags That Actually Prove You're Smarter Than You Think, Backed by Science
3 Areas to Focus on in Early 2022 to Start the New Year Off Right
Small Businesses Are Making Serious Sales on TikTok, Thanks to a New Feature
What to Look for When Auditing Your Google Ads Account
Researchers Just Compiled the Ultimate Playlist of Songs That Will Give You Chills
How to Identify a Top Performer in Your Business
Want To Turn Uncertainty Into Opportunity? Here's How
Your Workers Are Telling You It's Time to Rethink How You Hire
Why, and How, to Build a Strong IT Infrastructure
Create a WordPress Under Construction Page
In a recent tutorial, I showed you how to create a coming soon page in WordPress. The primary purpose of a coming soon page is to let people know that you plan to launch a product or service soon. In this tutorial, you'll learn how to create an under construction page in WordPress.
You might be thinking that a coming soon page and an under construction page are not very different. Well, you would be right. They both indicate that something will be ready for you to use soon. However, there is a subtle difference and that's why we will approach this problem a bit differently here.
A coming soon page can be about a product, event, company or a whole website. However, it doesn't make as much sense to create an under construction page for an event or a company. An under construction page can be about your whole website being under construction or it can just refer to some section of a website that you are actively working on or maintaining.
In this tutorial I'll teach you how to create a WordPress under construction or maintenance page that lets users access other parts of the website. You will, of course, be able to show the under construction notice for the whole website as well.
Here is a preview of the final result of our Under Construction page that lets users know that we are currently creating a Menu Generator for them so affected parts of the website will be inaccessible for some time.
Finding the Right Plugin and Initial Planning
The first step would be to find the right plugin. We are looking for something that will let us have complete control over the textual content of the page. It should also give us reasonable flexibility regarding the visual appearance like setting a background color, font family or logo. Two more features that I would like in the plugin include the ability to restrict or allow access to a specific set of pages and to be able to use CSS to modify the page in more powerful and unique ways. The plugin that met all these requirements for me was the Maintenance plugin.
I would highly recommend that you take a similar approach when searching for plugins. Make a list of features that you want and then actively filter out plugins which don't meet your criteria. This will save you a lot of time instead of using the first plugin you find right away and then discovering that it doesn't do exactly what you want.
Keeping Users Informed
We will be adding a section to our under construction page to let users know what we are planning to do. This could include things like interesting features or a possible release date. You can also provide them links to some other posts on the website where they could read more about it.
Provide Easy Ways to Connect
Now that people visiting the under construction page know what you are doing, it makes sense to let them know that they can be part of the process. We will be including links to some social media accounts on the page to allow everyone to contact us.
Create a WordPress Under Construction Page
We will begin creating our under construction page by installing the free maintenance plugin. Once you have installed and activated the plugin it will show up in the navigation menu on the admin dashboard. You can see the current status of the plugin from the admin toolbar.
Once the maintenance mode is turned on with this plugin, try visiting any page on your website either in a private window or after logging out from the current session. It should show you a generic maintenance page similar to the image below.
We will now start modifying this page so that the text says something like under construction etc. among other things.
Changing the Text
Lets begin by changing the text that we show to users. Click on the Maintenance is On link in the admin toolbar to directly open the plugin settings page. You can also select Maintenance from the navigation menu in the admin dashboard to go to the settings page.
Change the page title to "Menu Generator" is Under Construction and the headline to Creating the Best "Menu Generator" Tool for You. Now put the following HTML in the Description field.
<section class="main-content">
<p>We know that creating navigation menus for your website can be tricky. So, we are creating an awesome menu generator for you.</p>
<p>Here are some articles for you to read while we are building the Menu Generator.</p>
<ul>
<li><a href="/navigation-menu-types/">Different types of navigation menus.</a></li>
<li><a href="/navigation-and-accessibility/">Navigation menus and accessibility.</a></li>
<li><a href="/mega-menu-tips/">Tips for building a mega menu.</a></li>
</ul>
</section>
Your plugin settings page should now look like the following image. Please note that the HTML for the Description field goes under the Text tab. This allows us to write the content for the page in HTML so that we can target specific elements later using CSS rules.
Click on the Save Changes button and hit Preview to see the updated version of our under construction page. It should look similar to the image below.
Updating Images and UI Colors
Now it is time to make some changes to the visual appearance of our under construction page. We will begin with the images. If you scroll down a little bit on the plugin settings page, you will find an option to upload a logo as well as a background image.
First, click on the Upload Logo button and choose your website logo from the media library. After that, click on the Upload Background button and pick an image that you like the best. I have used this User Experience illustration from Reshot.
Did you notice a lock icon in the previous preview images of our construction page? Clicking on the lock icon open a login form that you can use to log in to the website and see all the restricted pages hidden by the plugin.
You can set a new background color for the login form on the plugin settings. There is also an option to change the color of the font. We will leave them all at their default values but change the Font Family from Open Sans to Yanone Kaffeesatz.
Click the Save Changes button and the construction page should now look similar to the following image.
Adding Custom CSS
Our under construction page is now starting to take shape but there are a few things that I would like to change. There isn't enough contrast between the logo and the background so we will add a white background along with some borders using CSS.
The font size seems too small for the main content as well. So, we will be increasing the font size and make some other changes like adding a translucent black background. We will also change the alignment of the text to left. All this can be done with the help of following CSS rules.
div.logo-box img {
background: white;
border-bottom: 10px solid black;
border-top: 10px solid red;
padding: 10px 0;
border-radius: 30% 70% 70% 30% / 30% 70% 40% 70%;
}
section.main-content {
font-size: 1.8rem;
width: 800px;
margin: 0 auto;
background: #00000024;
padding: 50px;
text-align: left;
box-shadow: 0 0 4px #000000a6;
}
section.main-content ul {
list-style: none;
line-height: 1.5;
}
body.maintenance section.main-content p {
font-size: 1.8rem;
margin-bottom: 2rem;
}
.site-content h2.heading {
font-size: 3.8rem;
margin-bottom: 3rem;
}
footer {
font-size: 1.8rem;
}
You need to paste all these CSS rules in the Custom CSS section on the plugin settings page. Now, click on the Save Changes button and the under construction page should start looking like the image below.
Allowing Access to Certain Pages
The under construction page of our Menu Generator links to three different posts on our website. It wouldn't make much sense if clicking on those links redirects the users back to the under construction page.
We can solve this problem by excluding some pages from being under maintenance mode in the plugin settings. This will make these pages accessible to all our visitors. Scroll to the bottom of the settings page and enter the name of published posts that you want the public to access under Posts.
Final Thoughts
In this tutorial, you learned how to create an under construction page for a website using a free plugin. We began by updating the text in order to provide users all the necessary information about our under construction page. Then we added a relevant background image as well as the website logo so that nothing looks out of place. Finally, we used custom CSS rules to make changes to the visual appearance of the logo as well as other text on the page.
You might have noticed that the page currently contains no contact information for visitors. This has been left out as an exercise for you. Try to follow the steps listed in the tutorial and add a link to the Contact Us page inside the main content.
Microsoft Just Dethroned Apple as the World's Most Valuable Company With a Brilliant Strategy: Be Boring
WooCommerce vs Shopify: Which One is Right for You?
In one of our previous posts, we compared WordPress and Shopify to help you figure out which might be better choice for you to set up your own online store. We separately covered different factors like cost, extensibility, support and customization etc. to see how both these platforms stacked against each other.
In this article, we will do a similar comparison for WooCommerce and Shopify. The primary difference here is that WooCommerce is simply a plugin for WordPress. This will make our comparison a bit more specific and accurate when discussing the following aspects:
You can also jump directly to the end of the article to find out Which One is Best for You?
WooCommerce vs Shopify: The Basic Difference
Lets begin the discussion by starting with the main difference between these two platforms that sets up the stage for the rest of the comparison.
Shopify is a full-fledged platform that will handle everything from hosting, security, payment and inventory management for you. It is a closed system that is designed to make your experience of setting up an online store hassle free and beginner friendly.
You probably already know that WordPress is a general purpose open-source CMS which you can extend to create almost all kinds of websites. WooCommerce is one of the many WordPress plugins that extends its functionality. The primary purpose of WooCommerce is to help you sell things using a WordPress-based website.
Basically, WooCommerce and Shopify are similar in the sense that they both focus on eCommerce. However, they are different in the way they address this problem. Shopify is a comparatively closed system that tries to do things on your behalf while WooCommerce requires a more hands-on approach.
WooCommerce vs Shopify: Required Time and Effort
The sole purpose of the Shopify platform is to help people sell things online and they try their best to make the whole process as quick, simple and beginner-friendly as possible. This means that you will have to spend very little time thinking about things that are not directly related to selling. You don't have to worry about picking a domain name registrar or do any research about web hosting providers among other things.
WooCommerce is also meant to help you sell things online but it is an open-source WordPress plugin. It is not meant to take care of everything for you. The primary aim here is to let you have the freedom to do whatever you want.
Things will be a bit easier if you already have a WordPress-based website set up. This is because it means that you don't have to start from the very beginning by registering a domain etc. However, you will still need to take care of things like updates, security, backups, and website design.
You should consider using Shopify if you are an absolute beginner or have little technical know-how related to web development. This will make sure that you are up and running very quickly without having to spend a lot of time learning the absolute basics of things that aren't directly related to your business.
WooCommerce vs Shopify: Design Choices
The UI of your eCommerce store can have a huge impact on the number of sales. Everything else being equal, people are more likely to buy products from an easy to navigate website that shows them all the information they need about a product. All this essentially comes down to picking a theme that fits well with your plan regarding the overall content of the website.
There are around 80 different themes listed on the Shopify website and hundreds more on ThemeForest that you can use while creating your online store. Some of these themes are free while others are paid.
WooCommerce is primarily concerned with the backend functionality that allows you to sell things online while leaving the design aspect up to you or other theme developers. It will usually work fine with a lot of themes provided they are following the standard practices and recommendations. You can search for a term like eCommerce and pick one of over 500 free themes to install.
While this might not always be true but you will notice that the Shopify themes usually have a more polished and professional layout compared to free WordPress eCommerce themes. However, WooCommerce is pretty popular so it is easy to find a lot of premium themes that are designed with WooCommerce integration in mind.
I will have to call this one a tie because both Shopify and WooCommerce have plenty of themes available for you to use.
WooCommerce vs Shopify: Accepting Payments
All online stores need to accept payments from their users. There are many important things that need to be kept in mind here. Any payment method that you use has to meet two requirements: it should be secure and it should be available to your customers.
Both Shopify and WooCommerce come with their own integrated payment systems called Shopify Payments and WooCommerce payments respectively. Both of them are powered by Stripe. Also, it is not a problem if you don't want to use these built-in payment solutions. Both these platforms allow you to integrate 3rd party payment gateways.
The only major difference between these two is that while WooCommerce doesn't charge any extra fee when you integrate a 3rd-party payment gateway, Shopify will takes its own cut over and above the default processing charge of the 3rd-party gateway.
This might not be a huge deal for some store owners but it can have a huge impact on the others. The costs will add up if you have high sales volume and most of your users prefer to pay using a 3rd party payment gateway instead of Shopify payments.
The extra fee charged by Shopify for using a 3rd party payment gateway makes WooCommerce =the winner of this round.
WooCommerce vs Shopify: Scalability
Everyone wants their business to scale up and reach new heights. One of the worst things that can happen when your business starts to take off is that your whole setup comes crashing down because it can't take on the additional load. This causes damage to both your revenue and your reputation.
Scalability problems can happen either due to inadequate hardware or unoptimized software. Hardware-related problems can be resolved quickly by simply upgrading your hardware. However, figuring out exactly what piece of software is causing optimization issues can be a bit tricky. In fact, what might seem like lack of hardware resources could actually turn out to be software optimization problem.
As I have mentioned earlier, WooCommerce is open-source and it gives you the freedom to integrate all kinds of 3rd-party plugins and themes in your store. This means that you could have scalability issues due to a 3rd-party plugin or theme that are not fault of either WooCommerce or your web host.
Shopify, on the other hand, handles all the technical details behind the scene. You don't have to worry about monitoring your resource usage to see whether the RAM or CPU needs an upgrade. You are also less likely to run into any software optimization issues because there is a dedicated team of developers working constantly to keep everything running smoothly.
I would like to emphasize here that the above discussion does not mean that you will definitely run into problem when scaling your business on WooCommerce. I am just saying that you will need to be a lot more careful about it when using WooCommerce. All you have to do in case of Shopify is simply buy a bigger plan.
The winner for scalability is Shopify primarily due to its hassle-free experience for scaling up your business.
WooCommerce vs Shopify: Cost of Setting Up the Store
How much money you spend while setting up your online store and to keep it running depends on a number of factors. These costs are a bit easier to calculate for Shopify but they will still differ from one business to another.
You pay a monthly fee when you set up a store with Shopify. This will cover things like hosting and a SSL certificate. You can also buy your own custom domain name for a fixed annual cost. A basic Shopify plan costs $29 per month and a top-level domain name will usually cost less than $14 per year. Additional optional costs that you will incur include the purchase of premium themes. There is also a variable cost due to transaction fees that Shopify expects you to pay for successfully placed orders.
Costs are a bit harder to estimate with WooCommerce. WooCommerce itself is free to use, just like WordPress. However, you will still need to purchase a domain name and a hosting account. One thing that can keep costs down in WooCommerce is its open-source nature. A lot of people develop free plugins and themes that can act as alternatives to premium options with some compromise in functionality or features.
WooCommerce will definitely be a cheaper option if you don't mind looking around for free or cheaper alternatives to premium plugins and themes. However, the costs can add up quickly if you are not careful.
Which One is Best for You?
Creating an online store is an involved process and requires you to take a variety of factors into consideration. Here's a summary of the factors we've discussed in this post:
| Consideration | Winner |
|---|---|
| required time and effort | Shopify |
| design choices | tie |
| accepting payments | WooCommerce |
| scalability | Shopify |
| cost of setting up the store | WooCommerce |
All you have to do now is figure out the importance you give to each of these factors when setting up your online store.
Shopify is a good option for creating an online store if you are looking for something that doesn't require much technical know-how and can be set up relatively quickly.
WooCommerce is ideal for people who want more control over every aspect of their store. Setting up an online store using WooCommerce takes time and effort but it can save you money in the long run.
I will also recommend that you take a look at my other post that compares Shopify with WordPress. Some of the points mentioned in that article are relevant here as well.
