Audrey - Homepage Setup

Before You Begin

We HIGHLY recommend importing the widgets for your theme. Importing the widgets will make theme setup go significantly faster, and you can skip most of this tutorial (it's the longest one!).

Configure Reading Settings

For the homepage to display like the demo, make sure that your reading settings are configured correctly:

Go to WordPress > Settings > Reading.
Under Your Homepage Displays, select "a static page."
For the Homepage, select the Home page. (If you don't have a Home page, go to WordPress > Pages > Add New and create a blank page titled Home)
For the Posts page, select the Blog page.(If you don't have a Blog page, go to WordPress > Pages > Add New and create a blank page titled Blog)
Save changes.

Homepage Overview

The Audrey homepage has ten widget areas located at Appearance > Widgets:

Front Page 1: Image + intro section
Front Page 2: "Choose Your Own Adventure" boxes
Front Page 3: About section
Front Page 4: "Get to Know Us" text section
Front Page 5: "Latest in the Shop" WooCommerce products widget
Front Page 6: "What They're Saying" testimonial widget
Front Page 7: "Recent Work" portfolio widget
Front Page 8: "Featured In" section
Front Page 9: "New on the Blog" featured posts
Front Page 10: Not utilized in the demo, but can be used for additional widgets

Below, we'll go over what is inside each widget area. If you imported the demo widgets, all of the homepage widgets will already be set up for you. All you'll need to do is fill in your own details in a few areas! Easy peasy.

The front page widget areas in Audrey are super customizable. You can move widgets into different areas, add new widgets, remove ones you don't need, etc. The possibilities are endless!

Front Page 1

If you'd like to copy/paste this:

<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>

Be sure to replace the demo link with your own link. If you do not want the button to be white, remove the word white on the last line. The button color will then match the default button color set for your site.

Front Page 1 has lots of customization opportunities! Click here for details.

Front Page 2

Front Page 2 has four widgets:

Custom HTML Widget: This widget is solely for the "Choose Your Own Adventure" title. There is no code or text inside the Custom HTML content box, although you could add wording if you wanted to!
Custom HTML Widget: "Our Services" box
Custom HTML Widget: "Visit the Shop" box
Custom HTML Widget: "The Journal" box

The code for each "Choose Your Own Adventure" box is the same, with the icon and wording changed.

If you'd like to copy/paste the code:

<a href="LINK TO A PAGE"><div class="home-box">
	<div class="box-content">
	<ion-icon name="desktop-outline"></ion-icon>
	<h3>
		Our Services
	</h3>
	<a class="button" href="LINK TO A PAGE">
		Let's work together
	</a>
</div>
</div>
</a>

Changing the Icons

The icons in the Choose Your Own Adventure section use an icon library called Ionicons. Here's how to change the icons:

1. Go to https://ionicons.com. Search or browse for the icon you want to use and click on it.

2. A window will pop up at the bottom of the page. Click your cursor on the "Web Component Code." The code will automatically be copied to your clipboard.

3. Go to your WordPress dashboard > Appearance > Widgets > Front Page 2. Open the Custom HTML widget that contains the icon you want to change. Replace the current icon code with your new icon code. Save.

Front Page 3

If you'd like to copy/paste:

<div class="home-about">
	<h4>
		Meet the Designer
	</h4>
	<h3>
		Hello, I'm Audrey
	</h3>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non turpis pellentesque magna elementum porttitor. Donec consectetur ligula et diam laoreet, sit amet posuere nisl euismod. Pellentesque ac elementum ante. Quisque eget tempus dolor. Cras vitae facilisis urna. Cras a leo porttitor, accumsan neque eget, aliquet augue. Curabitur sollicitudin mi nec metus commodo convallis et et neque. In lacinia ex in varius cursus.
	</p>
	<a class="button" href="http://demo.17thavenuedesigns.net/audrey/about-me">Learn More</a>
</div>

Here's what you can change here:

"Meet the Designer"
"Hello, I'm Audrey"
All of the text between <p> and </p>
"Learn More" button text
And be sure to replace the demo about page link with your own about page link!

If your image is displaying too small, click on the image inside the Image widget and select a larger display size.

Front Page 4

If you'd like to copy/paste:

<div class="philosophy">
	<h3>
		Audrey is a feminine WordPress theme designed to beautifully serve online shops, service businesses, and course creators.
	</h3>
	<a class="button white center" href="http://demo.17thavenuedesigns.net/audrey/meet-the-team/">Learn More</a>
	
</div>