Clover - Homepage Options

The first homepage section (Front Page 1) in the Clover theme has several widget options. Each widget has multiple configurations and opportunities to customize. We'll go everything below!

  1. Full Width Background Image + CTA (shown in the Clover website demo)
  2. Post Carousel (shown in the Clover blog demo)
  3. Featured Posts
  4. Featured Pages and/or Categories
Options #3 and #4 can also be used in any Front Page widget area, in addition to Front Page 1!

Full Width Image + CTA

To set a background image in Front Page 1, go to Appearance > Customize > Clover Theme Settings > Front Page > Front Page 1 Background Image.

Important note: If you do not want to use this configuration in Front Page 1 (full width background image + CTA widget), you'll most likely want to remove the background image from Front Page 1. Follow the same steps above, and click Remove under Front Page 1 Background Image.

To add the CTA widget, go to Appearance > Widgets and drag a 17th Ave - CTA Widget into Front Page 1. There are countless combinations and ways you can configure this widget. Here are some ideas!

To configure: add Intro Text, Sub Heading, and one button. Set alignment to Center and check the box to add the overlay.  If desired, increase the Intro Text font size to 60px at Appearance > Customize > Clover Theme Settings > Front Page > Front Page 1 Intro Text.

To configure: add Intro Text, Main Heading, and two buttons. Set alignment to Right.

To configure: add Main Heading, Paragraph Text, and one button. Set alignment to Center.

To configure: add Intro Text, Main Heading, Sub Heading, and 2 buttons. Set alignment to Left.

Post Carousel

There are 3 display options for the Post Carousel widget:

Image on Left, Content on Right

To configure: add a 17th Ave - Post Carousel widget to Front Page 1.

Image on Right, Content on Left

To configure: add a 17th Ave - Post Carousel widget to Front Page 1. Set the Entry Content Alignment to Left.

Centered Image, Content on Top

To configure: add a 17th Ave - Post Carousel widget to Front Page 1. Set the Entry Content Alignment to Center.

Customizing the Carousel

There are lots of ways you can customize the Post Carousel widget!

  • Select a specific category of posts to display.
  • Change the parameter by which posts are displayed (most recent, alphabetical, by comment count, etc).
  • Display or hide the entry content/excerpt.
  • Edit the post info with different Genesis shortcodes.

Disable Arrow Navigation

If you'd like to disable the arrows in the carousel, click here and copy the code. Paste the code at Appearance > Customize > Additional CSS.

Featured Posts

The Featured Posts widget can display 2, 3, or 4 columns. You can select any image size, display or hide the excerpt, display, hide, or customize the entry meta (date, category, etc), and more.

2 Columns

To configure: add a 17th Ave - Featured Posts widget to Front Page 1. Under Number of Posts to Show, type 2. Under Content Type, select No Content.

3 Columns

To configure: add a 17th Ave - Featured Posts widget to Front Page 1. Under Number of Posts to Show, type 3 . Under Image Size, select featured-square. Under Content Type, select No Content.

4 Columns

To configure: add a 17th Ave - Featured Posts widget to Front Page 1. Under Number of Posts to Show, type 4. Under Image Size, select featured-long. Content Type, select  No Content.

Featured Pages or Categories

Before you begin, make sure the Genesis Featured Page Advanced plugin is installed and active on your site.

The Featured Page widgets will display in 3 columns, and have 4 different display styles:

For all configurations

Go to Appearance > Widgets. Drag three Genesis Featured Page Advanced widgets into Front Page 1 or the Front Page widget area of your choice. In the Title field, add the title you'd like to display (i.e. "The Shop"). You can select what page you'd like to link to, image size, and several other settings. The screenshots below all show the featured-long image size, but you can use any image size/shape!

Title Below, with Accent Line

To select this display style, go to Appearance > Customize > Clover Theme Settings > Front Page > Featured Page Display Style > select "Title below image (with line)."

Title Below, no line

To select this display style,  go to Appearance > Customize > Clover Theme Settings > Front Page > Featured Page Display Style > select "Title below image (no line)."

Title on Top, Caps Font

To select this display style,  go to Appearance > Customize > Clover Theme Settings > Front Page > Featured Page Display Style > select "Title on top of image (caps font)."

Title on Top, Serif Font

To select this display style,  go to Appearance > Customize > Clover Theme Settings > Front Page > Featured Page Display Style > select "Title on top of image (serif font)."