How to setup Maintenance / Coming soon mode on Wordpress with a free plugin (Elementor)

hey and welcome back to living with pixels in this video I want to show you how you can set up a coming soon page for your website inside of WordPress in a really easy way you can also use this technique for a website that is under construction or under maintenance I use this technique myself on almost every website that I deliver for a client because it looks really professional and it also has a functional reason because if your website is under construction you don't want the visitors to visit the pages that you're working on you want every visitor to be redirected to the coming soon page because otherwise they will see pages that are not finished yet this technique works for existing websites and for new websites and is completely free to do in order to achieve this you need two things one you need a plugin that returns all the visitors back to the coming soon page and you need a way to create that page that looks something like this so luckily Elementor is here and Elementor has both of these features built in for free and if you have the pro version of Elementor you can of course also do this so I'm here on a website where I want to set up the coming soon page because right now it looks like this and I'm still developing this website and now anybody can access the website and see this which is not really professional and it will take a few weeks to transform this into at the design that I created as or here you can see the design that I created in Adobe XD so in the next couple of weeks I will be transforming this design into a real website so let's set up the coming soon page so I'm here inside of the dashboard of WordPress and the first thing that you want to do is install a mentor if you've not installed Elementor yet it's a free plugin you can download it on a live one pixel comm slash links and then it's over here get elemental for free you will get a zip file and you need to upload this zip file here under plugins so if you go to install plugins you can click on add new and here you can upload the plug-in choose the zip file that you've downloaded off that page and click on Install Now and now you have elements or insult on your website so now you have this step over here and if you don't go to tools you can see the maintenance mount tab over here so if you click on the tab you will see a few options Elementor offer two options one is the coming soon option and one is the maintenance option the difference between those two is that a coming soon option is good for SEO so if you put it on coming soon your website will still be indexed by Google so people can still find you for Google and if you don't want that so let's say you want a minimum amount of traffic on the website when the website is under construction that you put it on maintenance mode because then the search engines will not index your website so for this website I'm gonna put it a coming soon but this will only work if we create a template so what we need to do is we need to create a coming soon template and design the page if we want so I click on create now and now I can give it a name so I'm gonna give it a name coming soon one for example and I'm gonna click on publish and now you will see this button edible Elementor so I'm gonna click on the button and now the fullscreen elements are at a terrible open and I don't need to the footer and the header on the coming soon page so first I will set it up as a full-screen page so I'll go to element or canvas then you will see no food or know how to just Elementor then you will have a full page design so now let's create a coming soon page real quick so what I'm gonna do is I'm gonna create just one big section like this I'm gonna give it a little bit of height so for desktop I'm gonna put it at 800 that's good enough for now I want to give it a background so I'm gonna upload an image here so click on the image and I want to upload an image on this website I only have two logos so let's say that we want this picture as the background I'm just gonna drag in a picture like this click on insert now let's change a few settings over here I always put it on center and no repeats and I also want to add a background overlay because I'm gonna put text over this image so click on classic and if you want to create a black overlay just make sure you or you have black selected like this and then the opacity you can change that over here so let's say I want to put it like this now I just want to put it a logo and a text so I'm gonna drag in a heading like this so I clicked only nine dots I dragged in a heading align that in the middle gonna type in coming soon over here I'm gonna change the color to whites like this and now also going to add logo so go back to the nine dots drag in an image like this click on the image again and now I want to drag in the logo boom go to stell make that a lot smaller so select this with like this that looks alright and you can of course add a lot of things with this page but right now this is good enough for the tutorial the only thing that you want to do is check it for tablet and mobile so if you click on tablet for now I want to adjust the height because 800 pixels is a little bit too high on a tablet so just click on your main section go back to layout and then change the minimum height to something a little bit different maybe 600 on tablet and for mobile change that to 500 or maybe a little bit bigger you can see that the logo now is really small so you can also change the logo size like this on mobile and this is good enough for now so I'm gonna click on update now I want to go back to the tools and now I'm gonna click on refresh so just click on the refresh icon over here or click on common error control error and now you can select a template because we have just created that template if you now click on choose template you can see that the coming soon template is over here that we've just created so I'm gonna click on coming soon right now and I'm gonna put the maintenance mount on coming soon and now let's go to the website right now as you can see it's still the homepage doesn't look very professional we're gonna go back to tools and we're gonna save the changes so if I click on save the changes as you can see now the maintenance mode is on and if I go back to the website and I click on refresh we are still gonna see the normal website because we are locked in but now if you go into incognito so for anybody else that is not logged in and they will go to a website you will see that we will get the coming soon page no matter to what page we go so even if we type in slash home we will be redirected to the coming soon page the only thing that I don't like is that you see this coming someone tags over here so how you can change that is like this you go back to the inside of WordPress and then you go to templates go to saved templates and what I want to do now is change the title over here so if I click on quick edit and then I can just delete the one like this click on update and check if it's changed so refresh this page and as you can see right now this looks a lot better so now anybody who will visit this website will get this page that's all I want to show for this video if you want more videos like this check out my channel or leave a comment below on what you want to see in the next video and then I want to thank you for watching [Music] [Music]

Channel: Rino de Boer

Views: 87,287

Keywords: livingwithpixels, living with pixels, wordpress maintenance mode, wordpress maintenance mode without plugin, wordpress maintenance tutorial, wordpress maintenance, wordpress maintenance plugin, elementor coming soon, elementor maintenance mode, wordpress maintenance service, wordpress under construction plugin, wordpress under construction, wordpress coming soon, coming soon wordpress plugin, coming soon wordpress theme free, how to create a coming soon page

Id: 6xtqDddVoa4

Length: 7min 37sec (457 seconds)

Published: Wed Mar 25 2020