Audrey - Front Page 1 options

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

• Left image / right heading – this is the default
• Full-width image slider with overlay (plus lots of display options for the overlay!)
• Full-width image slider with no overlay
• Blog post 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">

Post Slider

1. Install and activate 17th Avenue Post 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: