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

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » News & Updates

    Full Width Modern Homepage

    Published: Apr 27, 2020 · Modified: Jan 31, 2022 by Skylar · 12 Comments

    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:

    • 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 primary document settings in the block editor and toggle the "Full-width layout" checkbox:

    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)

    See the FSRI block 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

    homepage screenshot for muydelish.com

    craveablecreations.com

    veryveganish.com

    savorynothings.com

    amytreasure.com

    anasbakingchronicles.com

    livinghealthywithchocolate.com

    More

    • Modern 404
    • Private Label Rights (PLR)
    • Focus
    • Process Shots

    Reader Interactions

    Comments

    1. Jackie says

      June 11, 2020 at 5:24 pm

      Hi Skylar! I converted successfully to the modern homepage (YAY!), and I would like to convert to full width. However, I removed the "about me" block from the original homepage and cannot seem to recover it. Can you tell me how to add it back in block editor? I couldn't find the documentation in the news & updates?

      Reply
      • Skylar says

        June 11, 2020 at 7:05 pm

        Good reminder - we actually have an updated one at https://feastdesignco.com/user-profile-block/

        Reply
        • Jackie says

          June 12, 2020 at 3:09 pm

          Thank you so much! This made it very easy & I love the result!!

          Reply
    2. Misa O’Donnell says

      August 11, 2020 at 9:28 pm

      Hi, I changed my site to full width for homepage but I would like to keep my recipe posts with sidebar. Can I have full width homepage but still post with sidebar layout?

      Thank you!

      Reply
      • Skylar says

        August 12, 2020 at 3:55 am

        This is covered in the post. Please read it thoroughly.

        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.

        Reply
        • Julie says

          April 18, 2021 at 1:17 am

          I must have missed something because I cannot seem to figure out how to remove it from the homepage only. I created a page called "Home Page" and changed it to "full-width content", but it hasn't done anything. I'm assuming there's some kind of code I'm missing that makes the page actually communicate with the theme so it knows it's the home page. Is there a beginning tutorial for creating the homepage through an actual page block editor?

          Reply
          • Skylar says

            April 19, 2021 at 4:41 am

            The first link in the post goes to the actual homepage setup tutorial. This post is only for modifying the already-built homepage, to make it full-width.

            Reply
    3. Veronika Sykorova says

      January 02, 2021 at 10:37 pm

      Hi, I'm missing the full-width button. Do I have to update something or edit something? I only have default, recipe index, and landing. (posting again because I'm not sure if my last comment posted.

      Reply
      • Skylar says

        April 19, 2021 at 4:42 am

        You'll need an up-to-date version of the Feast Plugin for this - we no longer recommend or support "templates".

        Reply
    4. Olivia Parsons says

      September 01, 2021 at 1:49 pm

      Hi there, could you explain why after following all of these instructions, my modern homepage is not completely center? My logo is centered but all of the modern homepage content is slightly left adjusted. Thanks.

      Reply
    5. Kevin says

      October 28, 2021 at 4:45 pm

      Skylar,
      What's the turnaround time for the MODERN HOMEPAGE WHITE GLOVE CONVERSION?

      Reply
      • Skylar says

        October 29, 2021 at 9:52 am

        Typically 2-3 days, depending on our schedule. It's privately published by the end which means no live change to your site until you make it public, so there's no reason to try to time it. If you're looking to have it done, just purchase it and it will get done ASAP.

        https://feastdesignco.com/product/modern-homepage-white-glove-conversion/

        Reply

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    Themes

    • Feast Plugin grants access to all 5 themes
    • Not sure where to start? See the getting started guide

    Feast Plugin

    • Feast Plugin
    • Modern Homepage
    • Modern Sidebar
    • Modern Footer
    • Modern Mobile Menu
    • Modern Menu
    • Modern Recipe Index
    • Modern Categories
    • Modern 404
    • Recipe Update Checklist
    • Recipe Post Template

    Resources

    • Image optimization
    • Recipe Guidelines for Foodie Bloggers
    • How to write a recipe post
    • Page headings
    • SEO for Food Bloggers
    • Tutorials
    • Pagespeed Audit
    • Comments
    • Internal links

    more resources →

    Categories

    • Modern Recipe Index
    • Modern Categories
    • Posts per Page
    • How to use categories
    • Category pages need content
    • How to configure the category pages
    • Food blog site structure
    • Food blog page structure

    Classic themes

    The classic themes are only for hobby sites and any food blog interested in monetizing or SEO needs the Feast Plugin.

    • Foodie Pro Classic
    • Brunch Pro Classic
    • Cook'd Pro Classic
    • Cravings Pro Classic
    • Seasoned Pro Classic

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2023 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.