Clover [Genesis] - Website Homepage Setup

Clover Website Homepage

Before You Begin

We strongly recommend importing the demo for your theme. Importing the demo, particularly the widgets, will make setting up your homepage much easier! All of the widgets shown below will be automatically imported and pre-configured, and then it's up to you to insert your own text and images.

Configure Reading Settings

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

  1. If you did not import the demo content: Go to Pages > Add New and create a blank page titled Home. Set the layout for this page to full-width. Create another blank page titled Blog (leave the layout set to default, unless you'd like a full-width blog page).
  2. Go to WordPress > Settings > Reading.
  3. Under Your Homepage Displays, select "a static page."
  4. For the Home page, select the Home page.
  5. For the Posts page, select the Blog page.
  6. Save changes.

Homepage Overview

The Clover Website Homepage has ten widget areas:

  • Front Page 1: Image background + intro section
  • Front Page 2: CTA section
  • Front Page 3: About section
  • Front Page 4: 3 featured page images
  • Front Page 5: Newsletter signup widget
  • Front Page 6: WooCommerce products widget
  • Front Page 7: 3 service boxes
  • Front Page 8: Testimonials widget
  • Front Page 9: Featured posts
  • Front Page 10: Not utilized in the demo, but can be used for additional widgets

The Widgets page is located at Appearance > Widgets. Below, we'll go over what is inside each widget area. If you imported the demo, all of the homepage widgets will already be set up for you. 

The front page widget areas in Clover 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

A few tips for this section:

  • The 17th Ave - CTA Widget has several fields so you can really make this widget your own. Try adding text into the Intro Text or Sub Heading fields!
  • You can change the alignment of the text in the "Text Alignment" drop-down menu: Left, Center, or Right alignment.
  • A second button is also available, which will display to the right of the first button.
  • When adding the Buttons URLs, be sure to include http:// or https:// at the beginning of each link.
  • In Front Page 1, you can check the "Add Background Overlay?" box, which will add a semi-transparent box behind your widget. 

Front Page 1 Background Image

Go to Appearance > Customize > Clover Theme Settings > Front Page. You can upload two background images:

  • Front Page 1 - on desktop/full size computers
  • Front Page 1 - on mobile devices (tablets and phones)

The mobile background is optional. If you don't select a mobile background, the desktop image will display on mobile.

If you'd like to forego an image and use a solid color background instead, click Remove on the Front Page 1 images. Then to change the background color, go to Appearance > Customize > Clover Theme Colors > Front Page > Front Page 1 Background Color.

Front Page 2

Front Page 3

The image size in the demo is 1000x1250px. If your selected image in the image widget is displaying smaller than expected, click here.

Front Page 4

There are also alternate display styles for the Genesis Featured Page widget. To change the style, go to Appearance > Customize > Clover Theme Settings > Front Page > Featured Page Style. There are four style options you can choose from:

Front Page 5

To connect the Genesis eNews Extended to your mailing list provider, visit this tutorial.

Front Page 6

This section uses the WooCommerce Products widget. The Products widget will only be available if you have WooCommerce installed.

Front Page 7

The Custom HTML widget just serves as a title for this section. You're welcome to place text in the Content box if you'd like text to display above the service boxes.

FontAwesome Icons

The 17th Ave - Service Box widget supports icons from FontAwesome, an icon library containing over 1,600 free icons, plus thousands more premium icons. It's super easy to add these icons to your website!

1. Go to FontAwesome.com and click "Icons" at the top of the website.

2. You can browse the full list of icons, sort/filter icons on the left, or search for a specific icon.

3. When you find an icon you'd like to use, click on the icon. You'll be taken to a page for that individual icon, which looks like this:

4. Click on the HTML code right above the icon image (always starts with <iFontAwesome Icon Code" box. Recommend only using one icon per widget.

Front Page 8

For instructions on adding client testimonials to your website, click here.

Front Page 9

There are lots of ways you can customize this widget!

  • Select a specific category of posts to display.
  • Change the number of posts, which will automatically change the number of columns. 2 posts = 2 columns, 3 posts = 3 columns, 4 posts = columns. We recommend a maximum of 4 posts (4 columns).
  • Use a different featured image size.
  • Display or hide the entry content/excerpt.
  • Edit the post info with different Genesis shortcodes.
  • Display a custom button that can link anywhere on your website (some ideas could be the blog page, category index page, or a specific category page).