• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Custom Mobile Responsive Landing Page Template With Widgets

This post includes all the code which creates a landing page template you can use with any StudioPress theme.

The template includes 4 widgets however you don’t need to use all or any of them.

widgets

Here’s what it looks like with some simple text and 2 e-News extended widgets using the new Lifestyle theme.

widgetized landing page

You can also add content to the beginning of your landing page using the WordPress editor.

Register for full access

So Where Does The Code Go?

  1. The first code block goes in a new file named custom_landing.php which you upload to your child themes root directory.
  2. The 2nd code block goes at the end of your child themes functions.php file
  3. And the 3rd code block is all CSS which goes in your child themes style.css file.

I’ve included CSS for the Genesis e-News Extended widget which you can easily remove if not using the widget.

Note: The CSS code should be pasted before the Media Queries near the end of your child themes style.css file.

I’ve also kept the responsive design CSS to the absolute minimal however you can easily add your own values for padding and margins if needed.

More Ways To Create Landing Pages

  • How To Create a Custom Landing Page Template For Genesis

Reader Interactions

Comments

  1. Karissa says

    September 4, 2014 at 3:09 pm

    Arrg I done all this but the widgets are not showing up.

    What is wrong? I’m using the Going Green 2.0 theme.

    Log in to Reply
    • Brad Dalton says

      September 4, 2014 at 3:13 pm

      Looks fine to me Karissa.

      Try clearing your browser cache.

      The code generates exactly what you see in the screen shot on this post.

      As i don’t have access to your admin screens and PHP code, its impossible to tell why it may not be working for you but at my end it looks fine.

      Log in to Reply
  2. sam says

    October 22, 2013 at 1:51 pm

    Hi Brad, this is a great tutorial. I also followed your one on how to clone a page to make a custom page.

    Couple of queries,

    1. I am trying to clone the home page of my child theme to use as a custom inner page – did this following your other article – worked like a treat thanks

    2. Trying to now clone the home page into a landing page and im hitting a few issues. I understand that they both follow different processes – but is there any reason why this is not feasible? Of course its way easier to clone a home page and get it working….:)

    In fact all I really want to do is style my new custom page (cloned from home page) to look like a default genesis landing page. – see default landing page code below. I cant see anything in CSS & cant work out where its styling is coming from

    3. Out of interest, does cloning the home page have any negative impact on a site – it all seems to be working okay

    Many Thanks

    Log in to Reply
    • Brad Dalton says

      October 22, 2013 at 2:37 pm

      Hello Sam

      2. It may have something to do with the body class. If you want to keep the same styling as your home page, remove the body class otherwise change it to a unique class and add your new styles.

      You will also need to name it home.php.

      3. No.

      Log in to Reply
  3. Zimbrul says

    October 10, 2013 at 10:18 am

    I think all Studiopress’ themes should come up with such Landing page rather than the standard simple page with just text.

    Log in to Reply
    • Brad Dalton says

      October 10, 2013 at 10:21 am

      Thought the same thing myself many moons ago and then realized they have Premise so it might not be a good strategy.

      Log in to Reply
  4. Jeb says

    October 10, 2013 at 7:41 am

    Hi Brad, thanks for this.
    I followed up accordingly but how do I activate the landing page? Normally I should create new page and then choose from the template “landing page”, right? I can’t find anything over there.
    Thanks

    Log in to Reply
    • Brad Dalton says

      October 10, 2013 at 7:55 am

      Hello Jeb

      Did you upload the file to your your child themes root directory?

      Then you can simply select it under the Page Attributes in the drop down menu.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.