Generally speaking, I would not recommend users inject CSS into their WordPress install, but instead,…
Sometimes, you may have to take your site down for a little, while you perform some routine maintenance. Or, you might want to put up a simple Coming Soon landing page to inform users about your site. In both cases, the Coming Soon plugin lets you set up a unique and branded landing page very quickly.
What’s It Do?
Coming Soon allows you to set up a simple landing page that users will be directed to when visiting any page on your site. The plugin has two modes, “Coming Soon” and “Maintenance.” The design and front-end of your site will look exactly the same in both cases. The only difference is the “Coming Soon” page will be open to search engines, while Maintenance mode will inform search engines that your site is temporarily down. In both cases, you can completely customize the look of your homepage just by selecting a few options. You can add a background image, change text and link color, add a personal message using a WYSIWYG editor, and if you want extra customizations, add your own CSS or JS. The outputted page is completely responsive (if enabled) and mobile friendly by default. After you enable Coming Soon, users will be greeted with your custom landing page no matter where they enter the site, until you decide to remove it. Logged in administrators, however, will still be able to view a site like normal.
How’s It Work?
After you install and activate the plugin, you can go to Settings -> Coming Soon to set it up. If you want to turn on the landing page, select either “Enable Coming Soon Mode” or “Enable Maintenance Mode.” The former will leave your site open to search engines, the latter will temporarily close it off. Of course, you may want to actually set up your page before enabling it.
In the “Page Settings” menu you can actually define the content of your site. First, upload your logo or select it from the media library. I recommend using a transparent PNG so that it doesn’t clash with whatever background you select. Then, enter your title for the page (something like “We’ll be right back!” should work). This title will be shown at the top of your landing page, right under the logo. Next, you can specify the actual message of the page using the provided WYSIWYG editor. You can make it as long as you want, and add links, images or anything you can add to normal WordPress post, but try to keep things short and sweet.
The “Header” section allows you to add a couple of back-end features. For instance, you can upload a custom favicon (the tiny image shown in the browser tab), a special SEO Title and Description if you are in Coming Soon Mode, and your analytics code, which the plugin will automatically drop into the header of your landing page if you want to track views. Click “Save All Changes.”
The Design tab allows you to specify the exact design of your page. Though the layout is basically the same for every page, text centred vertically and horizontally, you can specify other options. In the “Background” section, you can choose to either pick a color with the color selector or upload a custom image. If you do upload an image, you can choose whether it repeats, whether it should act responsively (scale according to screen size), and choose it’s position and attachment CSS properties. In the “Content” section you can choose a default width for your centred content. Keep in mind though, that since the page will act responsively, this acts more as a max-width then an absolute. You can also check the “Enable Well” box to put the text on top of a white box if the background makes your text illegible.
The “Text” section has a few different color picker options for text color, link color and headline color, which will be used for your title and any heading tags you use. You can also select which font you want to use from a drop-down menu of web safe fonts. If you want to use a custom font that you don’t see there, you’ll need to add that in the “Custom CSS” box just below this. In here, you can type any CSS you want to add to your page to make it more customized. It may be useful to look at a preview of the page and view source to get a sense of how the HTML is structured, but there are plenty of classes to hook into.
At any point, you can click the “Live Preview” tab to see what your page will actually look like in a full screen view. Once you enable the either Coming Soon or Maintenance mode then any users coming to your site will automatically see that page instead of your normal site. However, if you are a logged in administrator, you will still be able to see your site just like normal. So, the plugin adds a bright red bar to the top right of your admin bar that says “Coming Soon Active” so you know when it is switched on and off.
Costs, Caveats, Etc.
Coming Soon is free, but there is a premium version available which adds a lot more features, such as the ability to add third-party email support like MailChimp, custom sliders, more personalized designs, social icons, and access features. If you find a need for more functionality, I recommend checking it out. Overall, the plugin keeps everything simple, lightweight, and easy to use.
If you are having a problem with the plugin, visit the support forums to get help from the plugin’s developer.