Charlotte - Website Homepage Setup
This tutorial will only apply if you are using the WEBSITE version of the Charlotte theme. For the BLOG homepage setup instructions, click here.
Before You Begin
You'll need to configure your Reading settings before you start setting up your homepage.
- 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.
The Charlotte homepage has eight widget areas:
- Front Page 1: Slider and overlay
- Front Page 2: Three featured image boxes
- Front Page 3: Newsletter
- Front Page 4: Image and About Charlotte
- Front Page 5: Three service boxes
- Front Page 6: Featured products widget
- Front Page 7: Testimonial slider
- Front Page 8: Featured blog posts and category menu
Below we'll go over what is inside each of these widget areas. If you imported your widgets, all of the homepage widgets will already be set up for you, so all you'll need to do is fill in your own details! Easy peasy.
The front page widget areas in this theme are super customizable. You can move widgets to different areas, add new widgets, remove ones you don't need, etc. The possibilities are endless!
A note about Flexible Widgets: all the Front Page widget areas are "flexible widget areas" EXCEPT Front Page 1 and Front Page 8. Flexible widget areas adapt to the number of widgets inside the area and display the content accordingly. For example, two widgets inside a flexible widget area will display in two columns; three widgets will display in three columns; and so on.
Front Page 1
Front Page 1 displays an image slider with a text box overlay. You'll first need to configure your slider:
- Install and activate MetaSlider.
- Go to the MetaSlider tab at bottom left of your dashboard.
- Create a new slider, select your images, and configure your settings as shown in the screenshot below.
Now, it's time to add your slider and overlay to the Front Page 1 widget area.
- Go to Appearance > Widgets.
- Drag the MetaSlider widget into the Front Page 1 widget area. Select name of the the slider you created. Save.
- Drag a Custom HTML widget into the Front Page 1 widget area. Add the following code snippet to the box. Fill in your own headings, button link, and button text. Save.
<div class="overlay"> <h4>Introducing Charlotte</h4> <h5>A Pretty & Pink WordPress theme</h5> <a class="button" href="LINK TO A PAGE">Learn More</a> </div>
Front Page 2
Repeat the same configuration for the other two widgets.
Front Page 3
Configure the Genesis eNews Extended widget following this tutorial.
Front Page 4
Image size in the demo is 1100x840px.
Front Page 5
"Our Services" title:
First Service Box:
Second Service Box:
Third Service Box:
Front Page 6
This section uses the WooCommerce Products widget. The widget will only be available if you have WooCommerce installed.
Front Page 7
Click here for instructions on creating your own testimonials.
Front Page 8
Create a new navigation menu at Wordpress > Appearance > Menus (we recommend that it contain 3 to 6 post categories). Select the menu in the Front Page 8 widget area.
Replace the link following href=" with the link to your blog. You can either link to your main blog page, or the second page of your blog to mimic a "continuation" of posts. Feel free to change the More Posts text to something else.