How To Display Full Width Images To Separate Twenty Seventeen Home Page Content

Add images to the home page that separate content areas.

Video demonstrating full width image separators on home page.

Where and how to add the images:

The home page in the above video is created using multiple pages.

Select how many images and content sections under the images you want. You can have up to 4.

Then, create a new page for each section.

The featured image of the page is the large full-width image you see in the video above, and the content of the page appears below that image.

Repeat this for the number of images and content sections you want.

You can now add the front page sections here…

In WordPress Admin > Appearance > Customise > Theme Options.

Share this:

Subscribe for updates

Enter your email address below. I’ll send you updates & news to your email address. You can unsubscribe at any time.





10 responses to “How To Display Full Width Images To Separate Twenty Seventeen Home Page Content”

  1. Henrik avatar


    I dont see the differens to the original theme start page, what am I missing?

    Actually Im searching a way to display only full witdh images in the Front Page Section – without article/post bloc/content. Just be able to scroll down some pics.

    I´ve seen the effect on story-telling themes, like aesoptheme novella. The link is just to highlight the effect I´m looking for – scrolling photos in the end av the page, without any content/bloc/text.

    I´ve made two photos at the end of my site´s start page,, with the same text: “Drive carefully” – and it is this text and its white bloc background I want to hide.

    I put the code
    “.panel-content {
    display: none
    … and then EVERY text/bloc disappeared – but I just want to hide “panel6” and “panel7” (ids).

    Any ideas?

    1. Bharat Karavadra avatar

      This is to display the front page panels as per the default theme. This tutorial was written very early when the beta of Twenty Seventeen theme was launched and I cannot recall now but the panels may not have been set in the default installation, hence this tutorial.
      With regards to removing individual text block panel content with the white background, these panels do not seem to have unique identifiers and so yes removing one will remove all of them and I am not sure how to achieve what you want without a major redevelopment of the how the front page content panels are displayed. I suggest putting your requirement up as a project on a site such as upwork.

      1. Henrik avatar

        Ok, thanks!

  2. Travis avatar

    so how do you do it?

    1. Bharat Karavadra avatar

      Hello Travis,
      The instructions were written under the heading ‘Where and how to add the images:’
      I have just re-written them to clarify what to do.

  3. Matthew Blackburn avatar
    Matthew Blackburn

    Good day,

    I want to overlay text on the panel images that feature in the 2017 theme

    1. Bharat Karavadra avatar

      Hello Matthew, that would take quite a bit of custom coding where you would have to defined where the text is entered and saved in page for it to appear on the page’s featured image. You can set this as a project to a freelancer on a site such as In the meantime putting text onto the image itself using image processing software such as Photoshop may create the desired effect.

  4. Scott avatar

    Hey, loving the twenty seventeen tutorials.

    Expanding on this, how would you go about making the front page a masonry style grid of latest blog posts, using the featured image and post title, no excerpt?

    1. Bharat Karavadra avatar

      Hello Scott,
      Creating a masonry layout to Twenty Seventeen or any other theme that does not have a masonry layout option built into it requires considerable coding. You may find a plugin that creates a masonry layout at in the WordPress plugin repository here.

      1. Scott avatar

        Thanks Bharat, I figured that after I posted and reading further into it.

        How about setting the front page hero image as the feature image of the latest post?
        Then when you click onto any post the hero image is the feature image of that particular post?

Leave a Reply

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