Sridhar Katakam

Genesis and WordPress Tutorials

Side by side images Landing page with centered widget areas in Genesis

by 4 Comments

In this article we shall create a custom page template in Genesis with two background images in two full height columns with a widget area centered in each.

Side-by-Side-Landing-Page

At smaller widths we will make the images appear in rows instead of columns.

side-by-side-landing-page-smaller-screens

Step 1

Add the following in child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • I updated the css and I had to add the width and margin to get it to go full screen. Thanks again for the great tutorial.
    html, .side-by-side-page,
    .side-by-side-page .site-container,
    .side-by-side-page .entry-content {
    height: 100%;
    width:100%;
    margin: 0 !important;
    }

    Reply

  • Hi Sridhar,
    How can I add this landing page in Altitude Pro? I’ve tried to change the static front page with a custom page having the side-by-side template and it doesn’t work. Any suggestions?
    Thanks.

    Reply
    • >