Her Exclusive Homepage

This tutorial will cover how to setup the Homepage for the Her Exclusive theme.

>> Front Page 1 – Welcome

1. Add the Background Image

If you haven’t done so yet, please add your Background Image first. Click on Appearance >> Customize >> Front Page Background Images. Next, click “Change Image”, click on an image of choice, then click “Choose Image” (bottom right). Click “Publish”.

2. Add the Widget

Click on Appearance >> Widgets. Next click on “Custom HTML” and choose “Front Page 1” from the dropdown options. Copy the code below then paste it into the Custom HTML widget.

Change this info to your info:

  • Welcome – leave this be or change it to something else.
  • Message Here – change this to your own message.
  • Button – change http://www.StudioMommy.com/ to your own link. If you do not want to use a button… delete line 4 in the code.
  • Click It – leave this be or change it to your own words.

Save your changes when done.

>> Front Page 2 – Photo Slider & Call to Action Boxes

1. Add Widget with Slider

If you are not there please click on Appearance >> Widgets. Next click on “Custom HTML” then choose “Front Page 2” from the dropdown options. Give it a Title, add some Content (like a testimonial), then click “Save”.

Next we need to add the photo slider (this is optional). Please follow this tutorial to create the slider. Then come back to this page when you have added the slider. Take note of the slider code (soliloquy) below in the picture.

You will also notice some HTML codes (in green). This is what they mean.

  • <em> and </em>  – make your words italic
  • <strong> and </strong> – make your words bold 
  •  <br> – creates space between your words and the slider

2. Call to Action Boxes

Next are the 4 call to action boxes that show below the slider. Please note that you do not have to use all 4 boxes. You can add 1, 2, 3, or 4 boxes.

Click “Custom HTML” then choose “Front Page 2” from the dropdown options. Copy the code in the box below and paste it in the widget.

Pink Box

Change this info to your own:

  • View the – leave this be or change it to your own words
  • Blog – leave this be or change it to your own words. To create a “Blog Page” follow this tutorial.
  • Button – change http://www.StudioMommy.com/ to your link
  • Show Me – leave this be or change it to your own words

Black Box

To add a black box. Copy the code below and paste it into another “Custom HTML” widget.

To create a category page please follow this tutorial.

Grey Box

To add a grey box. Copy the code below and paste it into another “Custom HTML” widget.

To create a portfolio page please refer back to Her Exclusive Setup Guide.

>> Front Page 3 – Logos

This widget section showcases the 4 logos siting side by side in the grey background. This section will take a little bit of prep work. The first thing to do is install the Image Widget plugin. Click on Plugins >> Add New. In the search box type in Image Widget. Click “Install Now” then “Activate”.

Prep Your Logos

Your logos will need to be .png with a transparent background and be the same size. This will help keep your logos evenly spaced and sized. The demo site logos are 500px in width and 200px in height. I also made the logos all black but that is totally up to you.

Add Blank Widget

Once your logos are ready click on Appearance >> Widgets. Click on “Custom HTML” then choose “Front Page 3” from the dropdown menu. You do not need to add anything in this widget unless you want to. Leave it blank.

Add Your Logos

Next, click on “Image Widget” and choose “Front Page 3” from the dropdown options. Click “Select an Image”, click on the logo of choice, then click “Insert into Widget”.

Delete the “Title” and change “Align” to Center. Save your changes then repeat these steps to add another logo. You can add 1, 2, 3, or 4 logos.

>> Front Page 4 – Profile Photo and About Message

Image Widget

Install the Image Widget first if you haven’t done so yet. Please see Front Page 3 above on how to install the Image Widget.

Blank Widget

Click on Appearance >> Widgets. Click on “Custom HTML” then choose “Front Page 4” from the dropdown options. You do not need to add anything in this widget. Leave it blank.

Profile Photo

Next click on “Image Widget” an choose “Front Page 4” from the dropdown options. Click “Select an Image”, choose your profile image, then click “Insert into Widget”. Delete the “Title” and change “Align” to Center. The Image size in the demo site is 450px in width.

About Message

Click on “Custom HTML” then choose “Front Page 4” from the dropdown options. Copy the code below then paste it in to the widget.

Change this info to your own:

  • Hi There! – leave this be or change it to your words
  • Your Message Here – change this to your welcome/about message
  • Button – change this http://www.StudioMommy.com to your link or delete line 4 in the code if you do not want to use a button
  • Read More – leave this be or change it to your words

>> Front Page 5 – Background Image

This is the image section above the blog posts, shown on the demo site. You can choose any image you want to use and also add content if you like.

1. Add the Background Image

If you haven’t done so yet, you will first need to add your Background Image. Please click on Appearance >> Customize >> Front Page Background Images. Next, click “Change Image” under Featured Section 5 Image, click on an image of choice, then click “Choose Image” (bottom right). Click “Publish”.

2. Add the Widget

The image will not appear until you add a widget. Click on Appearance >> Widgets. Next click on “Custom HTML” and choose “Front Page 5” from the dropdown options. You can leave this widget blank (as shown on the demo site) or add content to it.

>> Front Page 6 – Blog Posts

If you are not there yet… you will need to be in Appearance >> Widgets.

1. Add the ‘what’s new on the blog’

Click on “Custom HTML” then choose “Front Page 6” from the dropdown options. Copy the code below and paste it into that widget. Click “Save” when done.

2. Add Genesis Featured Posts

Click on “Genesis – Featured Posts” then choose “Front Page 6”. Fill in the information as shown below. Click “Save” when done.

3. Add ‘More From The Blog’ Button

Click on “Custom HTML” then choose “Front Page 6”. Copy the code below and paste it into that widget. Change “StudioMommy” to your own Blog Link. Click “Save” when done.