Rowan - Homepage Setup
STEP 1: CONFIGURE PAGES
If you imported the demo content, the Home and Blog pages will have already been set up for you, so you can skip step 1.
1. In your Wordpress dashboard, go to Pages > Add New. Name the page “Home.” Scroll down and find Layout Settings. Select the Full-Width layout (the rightmost option) and then publish the page. Add another new page and name it “Blog” and publish the page.
2. Go to Wordpress > Settings > Reading. Under Front Page Displays, choose “a static page.”
3. For the Posts Page, choose the “Blog” page you created. For the Front Page, choose the “Home” page you created. Save changes.
STEP 2: IMAGE SLIDER
The Rowan slider uses images sized 1030 x 650px. For best results, we recommend that you crop your slider images to this size before uploading them (you can do this in Photoshop or a free program like Pixlr).
1. Install and activate the
plugin. Once installed, click the Meta Slider tab in the left column of your dashboard.
2. Click the “+” to create a new slider.
3. Upload your images.
4. Configure your settings as seen here:
5. Once your slider is created and saved, go to Wordpress > Appearance > Widgets.
6. Drag the Meta Slider widget into the
Home Slider widget area. Select the slider you created, and then hit Save.
STEP 3: Custom Text Area
1. Go to Appearance > Widgets.
2. Drag a Custom HTML widget into the
Home - Top widget area. Paste the following code:
<div>capturing your <em>special day...</em></div>
3. You can change the "capturing your special day" text to whatever you would like. Just keep all of your text between <div class=”home-title”> and </div>. If you want some of your text to be italic, put it between <em> and </em>.
STEP 4: Page Buttons
1. First, resize/crop three images for the buttons to 325 x 210px exactly. The easiest way to do this is to first resize the photo to 325px with relative height, and then crop to 210px height. This method will ensure your images aren’t stretched or distorted, and can be done in Photoshop or a free online program like Pixlr.
2. Upload your three images into your Media Library at Media > Add New. After your images are uploaded, leave the tab open.
3. Open your Wordpress dashboard in a new tab. Go to Appearance > Widgets.
4. To set up your first button, drag a Custom HTML widget into your
Home - Middle Left widget area. Paste the following code in the text box:
<div> <a href="URL/LINK TO PAGE"> <img src="IMAGE FILE URL"> <div> BUTTON TEXT HERE </div></a></div>
5. Once pasted, leave the tab open and go back to your uploaded images page (step 2). Click “Edit” on the first image you would like to use. On the next page, copy the File URL.
6. Return to your Widgets page tab. Paste the File URL to replace IMAGE FILE URL.
8. Replace BUTTON TEXT with what you want the button to say.
9. Here is an example of how a “Gallery” button would look:
<div> <a href="http://demo.17thavenuedesigns.com/rowan/gallery/"> <img src="http://demo.17thavenuedesigns.com/rowan/wp-content/uploads/2015/09/image.jpg"> <div> Gallery </div></div>
10. Repeat steps 1-3 for the other two buttons. The second button should be placed in the
Home - Middle Center widget area, and the third button in the
Home - Middle Right widget area.
STEP 5: Latest Posts
1. Go to Appearance > Widgets and drag the Genesis - Featured Posts widget into the
Home - Bottom widget area.
2. Configure the widget as follows, then save.