Full Width Modern Homepage

Tweet Print Email Like

This is a transition guide to go from the Modern Homepage to a full-width Modern Homepage. To get the Modern Homepage set up, either follow the:

Modern Homepage (complete guide)
Simple Modern Homepage

Once set up, you can convert it to full-width if you'd like. Note:

there's no SEO boost to using a full width homepage vs. with a sidebar
roughly 80% of pageviews are on mobile devices, so this is not an important change
this is purely for visual styling and is entirely a personal preference

Jump to:

Demo sites
Convert the Homepage
Removing the sidebar
Changing number of columns
Examples

Demo sites

The demo sites all use the standard "Modern Homepage" with the sidebar, and have a "full width" version of the Modern Homepage at:

Convert the Homepage

IMPORTANT: Do not remove the sidebar site-wide. Use the block editor to remove the sidebar from only the homepage.

Removing the sidebar from the homepage removes important internal links, that you have to then include back into the Full Width Modern Homepage.

The most common sidebar elements are:

the user profile (already included in the Modern Homepage)
trending recipes (already included in the Modern Homepage)
search bar (already included in the Modern Homepage)

We do not recommend any sort of Instagram widget.

To change from content + sidebar to full width, go into the Genesis sidebar in the block editor and change from "default layout" to "Full Width Content":

IMPORTANT: Do not remove the sidebar site-wide. Use the block editor to remove the sidebar from only the homepage.

Changing number of columns

While the default layout uses a 720px width, the full width layout uses 1080px.

The reason that 1080px is chosen, is so that we can gracefully design for both mobile (360px) and desktop (3x 360px = 1080px), keeping a simple 3:1 ratio in mind.

Rather than use the 4-wide (desktop) to 2-wide (mobile) with the content + sidebar, our full width design will use 6-wide (desktop) to 2-wide (mobile)

fsri list_class="feast-desktop-grid-sixth" limit="6"

See the FSRI Shortcode page for a full list of attributes.

This leverages the default thumbnail sizes we have registered:

1080 / 6 = 180px
720 / 4 = 180px
360 / 2 = 180px

This helps to ensure that you're properly managing server bandwidth and helping minimize the reader's bandwidth usage on mobile devices.

note: with retina-quality images available in the srcset, browsers will likely load 360px width images for 180px specified widths - this is expected behavior