Need a landing page or coming soon page? Don’t bother with plugins, just use a regular page.
I was shopping around this morning for one of those fancy pants Coming Soon landing page plugins with a slick countdown timer and all that. But I also wanted to be able to style the page a bit and ideally put in a sign up form or button for the newsletter. I found one that almost did it but then I needed the pro version. Yeah, OK, but I need this thing for a matter of days. Aha, the deceivingly simple Members Only plugin and a bit of conditional CSS to the rescue.
Here’s how I did it.
- Created page in WP.
- Chose the full-width layout for the page (below post area, Canvas Custom Settings –> General Settings –> Layout) to hide any sidebars.
- Entered copy and buttons, quotes and whatnot into my page.
- Created a simple WOO Shortcode button for my MailChimp newsletter sign-up form. Could also have done the embed code if I wanted the form right there on the page, but I keep having trouble with the actual subscribe button showing up. I think it’s a Javascript conflict …
- In Members Only settings, chose that page as the one non-users would be redirected to.
- Then the trickier bit. This is optional, but I wanted the page to be narrower the the site. I checked the ID of the page (it was ID 2) and then used the code below to make the content only 450 pixels wide. (CSS below)
- I didn’t want the navigation to show up so I hid that as well, again, just for this page. (CSS below)
- Did some styling in Canvas with fonts and chose the full-width header and footer. Love those.
- Hmm, done.
Hide the navigation on a certain page:
.page-id-2 #nav-container { display: none; }
Make the header (really just the site title in this case) and the content area narrower:
.page-id-2 #content, .page-id-2 #header { width: 450px; }
Bonus Brownie Points
- Site isn’t actually hidden or “closed off” from Google Analytics so you can still see if you’re getting some traffic and bots like Pingdom still work.
- The header will change as you work on the site behind the scenes. If you don’t want this to happen, you could change even more in the conditional CSS. So people will see progress (new logo? new background?). Again, if you don’t want this, don’t do it this way.
- You get to edit a page in WP instead of some HTML editor you get from your Coming Soon plugin.
Not bad for 20 minutes, right?
[…] WOO Canvas Landing Page (Sep 13) […]