How to Create a Photo Feature Header with the Layers Content Widget

How To  Tutorials  Last Updated: Time to Read: 3 minutes

Difficulty: Easy

This tutorial walks you through how to use the Content Widget with background images and a full width layout to create a feature header on your page, using columns to setup custom meta or subheadings. These headers are exceedingly popular on blog sites like Medium and boast high-definition, colorful backgrounds with large title text. It shows you how to use the Advanced option padding control to better position column elements within the full width layout, a technique you can carry over to several other adaptations. If you are new to CSS customization, see the following primer  How to Customize Your Site With CSS

content-widget-featureheader

Choose a high-resolution image that is not too busy and has a consistent color grade through the center. This allows the text to show up best. For best results, use an image at least 1930px wide and 800px tall.

  1. Edit or create a new Layers page and Edit Layout to enter the Customizer
  2. Click on your page’s Body panel and click +ADD AWIDGET and click Content
  3. Edit the Title “Our Services” and add your page title. In the Description below it, edit as desired. Between 1-3 sentences is best, keep it short!
  4. Click  Layout in the design bar on the right, and choose Full Width
  5. Click  Text in the design bar and choose the Centered option, Large size and a color that will show up over your image.
  6. Click Background and choose a background color that matches the dominant color in your image. Click Choose Image to upload or select your image.
    • Use Background Position to adjust your image if needed
    • Check the Stretch option to allow the image to set itself to the max width of the viewer’s browser window.
  7. In the first Column:
    • Edit the Title and enter your name
    • Remove the default excerpt and type “Follow Me” or your desired link text
    • Highlight your text and click the link icon in the editor toolbar. Add your URL and check the Open in New Tab box. You may also bold or italicize if desired.
    • Click the Featured Image button in the Column options bar (second from left) and upload or select an avatar image no larger than 48×48 and choose the Round image ratio.
    • Click the Image Align option in the Column options bar (third from left) and choose the top option for Image Left, text right
    • Click the Text option in the Column options bar (fourth from left) and choose the left alignment, Small size. Adjust the color here if desired.
    • Click the Columns option in the Column option bar and choose 3 of 12
  8. In the second Column:
    • Remove the Title and Excerpt
    • Add a Button Link and Button Text to link to your post, or use an anchor to jump to the next content widget containing the body.
    • Click the Columns option in the Column option bar and choose 6 of 12
  9. In the third Column:
    • Remove the Title
    • Enter some meta into the Excerpt field such as time to read, date posted, or a shortcode for displaying tweets, comments etc.
    • Click the Columns option in the Column option bar and choose 3 of 12
  10. Click the Advanced button on the design bar to the right and enter the following for the Padding controls:
    • Top: 200
    • Right: 30
    • Bottom:
    • Left: 30

Voila!

If you need to spruce up the title to make it bolder and larger, you can create a Custom Class and add some styling for this widget using the Advanced option

To bold and enlarge the title:

  1. Click the Advanced button on the design bar to the right and enter featured-header  into the Custom Class field
  2. Copy and paste the following into the Custom CSS box:

Our demo uses Julius Sans One for Headings and Buttons, and Noto Sans for the Body. You may change fonts under the main customizer menu in Site Settings  > Fonts