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.

Subscribe for updates

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

Posted

November 1, 2016

Blog Posts

Bharat Karavadra

Tags:

twentyseventeen, wordpress

Comments

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

Henrik

September 28, 2017

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

Reply
1. Bharat Karavadra
  
  September 28, 2017
  
  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.
  
  Reply
  1. Henrik
    
    September 28, 2017
    
    Ok, thanks!
    
    Reply
Travis

February 25, 2017

so how do you do it?

Reply
1. Bharat Karavadra
  
  February 25, 2017
  
  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.
  
  Reply
Matthew Blackburn

December 20, 2016

Good day,

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

Reply
1. Bharat Karavadra
  
  December 20, 2016
  
  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.
  
  Reply
Scott

December 19, 2016

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?

Reply
1. Bharat Karavadra
  
  December 19, 2016
  
  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.
  
  Reply
  1. Scott
    
    December 19, 2016
    
    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?
    
    Reply