Website under construction or maintenance with Elementor PRO – Tutorial No. 03
Tutorial Hosting
Tutorial: Creating a "Website Under Construction" Page with Elementor
In this tutorial, we will explore a special feature of Elementor that allows us to put the website under construction or in maintenance mode until it is complete. Before we dive into the video course on Elementor PRO, I will show you how to enable the "Website Under Construction" or "Maintenance" feature. There are many plugins available that can do this, but it’s always better to avoid overloading the site. In this video, we will use Elementor directly, which will allow us to customize the page as we want.
Step 1: Accessing the Maintenance Mode Options
From the Elementor menu, click on "Tools" and then navigate to the "Maintenance Mode" tab. As you can see, among the available options under "Select a mode", we have the ability to put the site in "Coming Soon" or "Maintenance" mode. The first option is useful when we are building the site, while the "Maintenance" mode" allows us to temporarily take the site offline, perhaps because we are performing updates. In our case, we will choose the "Coming Soon" mode.
Step 2: Creating a Template for the Maintenance Page
Another interesting option that Elementor offers is called "Who can access". Through this feature, we can decide who can view the site normally while it is in maintenance mode or under construction. Perfect! Now let’s move on to creating a template that will appear to users who connect to the site when the "Coming Soon" mode is active. To create a new one, simply click on the "Create one" button. In the button. In the title field, we will add a name, I will write "Website Under Construction", and then click the "Publish" button. Then, I will click the "Edit with Elementor" button. This is the page that will appear, but to personalize it as we want, the first thing we need to do is click on the settings icon at the bottom and choose "Elementor Canvas" under "Layout" page. This will allow us to work on a completely blank page.
Step 3: Customizing the Template
Now, we have two options to create this page: using one of the many templates provided by Elementor PRO or creating a completely new one. In this tutorial, I will show you how to customize a ready-made template, and when you have acquired the necessary knowledge, you will be able to create a new one. To import one of the available templates, simply click on the "+" Add template button. In our case, we need a template for a website under construction, so in the search box, I will type "Comic soon". Perfect! Let’s choose the first one and click "Insert". To modify the text, simply click on it and in the menu on the left, we can write a title, for example "Website Under Construction", then insert a tag, such as "
", which allows me to go to a new line, and then write "We will be online soon". Good!
Step 4: Customizing the Countdown Block
Let’s go to the "Countdown" block and click on it. In its menu, on the left, we can set the publication date, for example. To customize the text from English to Italian, we can enable "Show label" and "Custom label" and all these options. In these fields, we will write "days", "hours", "minutes", and "seconds". Perfect! The last section can be customized as you like, but in my case, I will cancel it. I will position myself above and click the "Delete section" button.
Step 5: Customizing the Background
Let’s customize the background. To do this, we will select the structure by clicking on the "Edit section" button, then go to the "Style" section, and as you can see, there is an image that we can replace by clicking on it. In my case, I will not use an image as a background, but I will use a gradient of color, so I will cancel it, then go to the "Background overlay" section, and in the primary color, I will choose blue and in the secondary color, I will choose green. Perfect! Let’s save the changes by clicking on the "Update" button and now we will return to the WordPress dashboard by clicking on the menu and then on the "Back to dashboard" button. Then, I will go to Elementor > Tools, enter the Maintenance Mode, and choose "Website Under Construction". Let’s save the changes and now you will notice that a red label has appeared at the top indicating that the maintenance mode is active.
Conclusion
Now, let’s test it in action by disconnecting from administrator and going to the site. From this moment on, all users who connect to your site will see this page. If something is not clear, please leave a comment below. To stay updated on future videos, subscribe to the channel. If you need targeted advice on your website made with WordPress, visit our website at impararewp.it
