Georgia Lou Studios

Welcome to the Help Center!

Home Page Hero Setup | Bel Canto

Follow

 * Make sure you have created a static home page first: see this article.

** If you are new to using widgets, see this Intro to Widgets video.

*** For information on the different Genesis and Theme widgets, see these articles: Genesis Widget Setup & Theme Widgets.

 

The Bel Canto Genesis theme comes with a built-in hero header area that is set up using Customizer settings.

The Hero header for the static home page is separate from the hero header for the blog page. See the Blog Hero Area Setup | Bel Canto article for home page directions.

 

Style options

There are 3 style options for the Hero Header:

1. Hero Style 1 - Title + caption + button

2. Hero Style 2 - Title + caption + eNews email subscribe form

3. Hero Style 3 - Use any widget

You can also Hide Hero Area or use a slider widget in the Full Width Slider widget area.

 

Step 1: Choose Hero Header Layout

  1. Open the Customizer by going to Appearance > Customize.
  2. Find the Home Page Settings panel and click to open it.1.png
  3. Find the Home Page Hero Area section and click to open it.2.png
  4. Under the Hero Area Layout section, tick the bubble next to the layout of your choice.3.png
  5. Click Save & Publish to save your changes.

Step 2: Hero Area Settings (Style 1 & 2)

This will walk you through setting up the heading, caption & button (Style 1).

  1. In the Customizer, go back to the Home Page Settings panel (click back arrow at top).4.png
  2. Click on the Hero Settings section to open the options section.
  3. To add your own header image, click the Change Image or Add Image button.5.png
  4. A Select Image box will appear. Choose an image from your Media Library or upload from your computer.
  5. Once you have selected an image, click the Choose image button.2017-03-13_10-05-43.png
  6. Hero Header Title - Type your text into the Hero 1 & Hero 2 Header Text field.7.png
  7. Hero Text Title - Type your caption text into the Hero 1 & Hero 2 Text field.8.png
  8. Hero Button Text (Hero Style 1 only) - Type the text for your button into the Hero 1 Button Text field under the Hero Button Settings section.
  9. Hero Button Link (Hero Style 1 only) - Add your hero button link (easiest way is to copy and paste!) Hero 1 Button Link field under the Hero Buttons Setting section.10.png
  10. Click the Save & Publish button to save your changes.

Step 3: Add Newsletter Form (Style 2)

This will walk you through setting up the signup form (Style 2)

  1. On the Dashboard, go to Appearance > Widgets.
  2. In the right column, find the Home Page Hero 2 & 3 widget area. Click the arrow to expand the widget area.11.png
  3. Under the Available Widgets section on the left, find the Genesis - eNews Extended widget.6.png
  4. Click on the widget.
  5. A list of widget areas will appear. Select the Home Page Hero 2 & 3 area.13.png
  6. Click the Add widget button.14.png
  7. The widget will appear in the Home Page Hero 2 & 3 widget area on the right.
  8. Set up the Genesis - eNews Extended widget according to the directions in the Newsletter Signup Form Setup | Bel Canto article.
  9. NOTE: Leave the Title & Text widget fields empty for Hero Style 2.
  10. NOTE 2: Hero Style 2 accepts an email field and first name field only.
  11. Save your widget settings.

Step 4: Overlay Layout Settings

This section covers how to change the position of the Hero Overlay.

  1. Under the Home Page Settings, find the Hero Layout Settings section. Click to open it.15.png
  2. Text Align - This setting aligns the overlay left, right or none (center). Choose your option from the drop down.16.png
  3. Caption/Widget Area Vertical Align - This setting aligns the overlay top, middle or bottom vertically. Choose your option from the drop down.17.png
  4. Hero Caption Width - % - This setting allows you to set the width of the overlay. Set in % width. Enter the # for your chosen % width. Default is 50%.18.png
  5. Click the Save & Publish button to save your changes.

Step 5: Hero Style 3 Settings

This covers setup of the Hero Style 3 hero header with widget area.

  1. On the Dashboard, go to Appearance > Widgets.
  2. In the right column, find the Home Page Hero 2 & 3 widget area. Click the arrow to expand the widget area.11.png
  3. From the left side Available widgets area, drag and drop the widget of your choice into this widget area.
  4. Setup your widget of choice and save settings.
Was this article helpful?
0 out of 0 found this helpful

Comments

Powered by Zendesk