Full Width Modern Homepage

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
• 💬 Comments

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:

• Foodie Pro Full Width Modern Homepage
• Brunch Pro Full Width Modern Homepage
• Cook'd Pro Full Width Modern Homepage
• Cravings Pro Full Width Modern Homepage
• Seasoned Pro Full Width Modern Homepage

Convert the Homepage

Removing the sidebar

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

Examples

muydelish.com

craveablecreations.com

veryveganish.com

savorynothings.com

amytreasure.com