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.

Bharat Karavadra

About Bharat Karavadra

"I research and share leading-edge information, tools and exercises to help people transform and heal their life situations."

10 Comments

  • Henrik says:

    Hi!

    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, http://bagarbil.com, 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?
    thanks!
    /Per

    • Per,
      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.

  • Travis says:

    so how do you do it?

  • Matthew Blackburn says:

    Good day,

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

    • 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 upwork.com. In the meantime putting text onto the image itself using image processing software such as Photoshop may create the desired effect.

  • Scott says:

    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?

    • 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.

      • Scott says:

        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?

Comment, ask or share something...

Do NOT follow this link or you will be banned from the site!