Audrey - Front Page 1 options

The first homepage section in the Audrey theme has several unique display options:

  • Full-width image slider with overlay (plus lots of display options for the overlay!)
  • Full-width image slider with no overlay
  • Blog post slider (Genesis Responsive Slider)
  • 3 featured blog posts

Full-Width Image Slider

To use the full-width image slider option:

1. Install and activate the MetaSlider plugin.

2. Go to the MetaSlider tab in your dashboard. 

3. At the top of the page, click "New" to create a new slider.

4. Click "Add Slide" to select the images you would like to display in the slider.

5. Configure the slider settings as shown:

6. Save the slider.

7. Go to Appearance > Widgets. Open the Front Page 1 widget area. If there are any widgets inside, remove them.

8. Find the MetaSlider widget on the left side of the widgets page. Drag it into Front Page 1.

9. Select the slider you created, and then save.

10. At this point, you'll have a full-width image slider with no overlay on your site. If you want to add an overlay, follow the instructions below.

Full-Width Image Slider: Overlay Options

"Overlay", in this context, means a text box that sits on top of an image slider. There are multiple overlay options that you can use. Here is a full list:

  • White background overlay – center aligned
  • White background overlay – left aligned
  • White background overlay – right aligned
  • White background + border overlay – center aligned
  • White background + border overlay – left aligned
  • White background + border overlay – right aligned
  • No background – center aligned
  • No background – left aligned
  • No background – right aligned

Here are some example screenshots:

White background overlay - center aligned

No background overlay - left aligned

Full-Width Image Slider: Adding the Overlay

Before you begin, we need to add a bit of CSS code to your site:

1. Click here and copy the code.

2. Go to WordPress > Appearance > Customize > Additional CSS.

3. Paste the code in the box and click Publish to save.

Now onto adding the overlay...

Go to Appearance > Widgets. Drag a Custom HTML widget into Front Page 1, below the MetaSlider widget. Add the following HTML code snippet to the widget.

The overlay is created with a simple HTML snippet:

<div class="overlay">
<h4>
	Introducing Audrey
</h4>

<h3>
	A thoughtfully crafted
	<br/>
	WordPress theme
</h3>

<a class="button white" href="http://demo.17thavenuedesigns.net/audrey/services/">Learn More</a>
</div>

This is the "base" of ALL the overlay options. This base code will display a centered overlay with no background.

To use the different overlay options, you'll just add additional classes following "overlay" on the first line. Classes tell the overlay how it should display. The available classes are:

  • background (adds a semi-transparent background)
  • border (adds a border)
  • left (aligns the overlay left)
  • right (aligns the overlay right)

For example, if you wanted your overlay to be left aligned with a background and border, your first line would look like this:

<div class="overlay background border left">

(Note: The order of the classes does not matter).

If you wanted your overlay to be right aligned with no background, your first line would look like this:

<div class="overlay right">

Genesis Responsive Slider

Genesis Responsive Slider can add a blog post slider to your homepage:

1. Install and activate Genesis Responsive Slider.

2. Go to Appearance > Widgets. Open the  Front Page 1 widget area. If there are any widgets inside, remove them.

3. Drag a Genesis Responsive Slider widget into the Front Page 1 widget area. That's it!

Some tips about the post slider:

  • By default, the slider will display your most recent posts. If you would like to individually choose which posts display in the slider, click here for instructions.
  • The slider is pre-configured to display as shown above. To change the slider settings, go to Genesis > Slider Settings.
  • For your images to display in the slider, you must have featured images set for your posts. Featured images for the slider should be a landscape image at least 2000x800px in size.

3 Featured Blog Posts

  1. Go to Appearance > Widgets.
  2. Drag a Genesis Featured Posts widget into the Front Page 1 widget area.
  3. Configure settings as shown below. You can choose to display 3, 6, or 9 blog posts (under "Number of Posts to Show").
  4. Click here and copy the code. Paste the code at Appearance > Customize > Additional CSS.

Optional: If you'd like to display an excerpt and read more button beneath each post, select Content Type > Show Content Limit. Add your desired number of characters in the "Limit Content to" box.