Mia [Genesis] - Alternate Front Page 1 options

By default, the Mia theme displays three Featured Page widgets in the first homepage section (Front Page 1). But there are lots of other things you could put there instead! Below we'll show you how to implement the following widgets in Front Page 1:

  1. Blog post slider (content width)
  2. Blog post slider (full width)
  3. Traditional slider (content width)
  4. Traditional slider (full width)
  5. Three featured blog posts with titles on top
  6. Three featured blog posts with titles below
  7. Single featured post
  8. 2 featured page widgets
  9. 4 featured page widgets

Before You Begin

Make sure that your Front Page 1 widget area is empty before adding any new widgets to it.

1. Blog Post Slider (Content Width)

  1. Install and activate the 17th Avenue Post Slider plugin.
  2. Go to Appearance > Widgets and drag a Genesis Responsive Slider widget into the Front Page 1 widget area.
  3. Click here and copy the code. Go to Appearance > Customize > Additional CSS and paste the code. Click Publish to save.

2. Blog Post Slider (Full Width)

  1. Install and activate the 17th Avenue Post Slider plugin.
  2. Go to Appearance > Widgets and drag a Genesis Responsive Slider widget into the Front Page 1 widget area.
  3. Click here and copy the code. Go to Appearance > Customize > Additional CSS and paste the code. Click Publish to save.
  4. Go to Genesis > Slider Settings. Under Display Settings, set the Maximum Width to 2000 and the Maximum Height to 700.

3. Traditional Slider (Content Width)

A "traditional" slider is a slider that is not post-based. The images in a traditional slider are selected by you and don't change often.

  1. Install and activate the MetaSlider plugin.
  2. Go to the Meta Slider tab in your dashboard and create a new slider. Set the width to 1280px and any height you'd like. Upload your images and then publish the slider.
  3. Go to Appearance > Widgets and drag a Meta Slider widget into the Front Page 1 widget area.

4. Traditional Slider (Full Width)

  1. Install and activate the MetaSlider plugin.
  2. Go to the Meta Slider tab in your dashboard and create a new slider. Set the width to 2000px and any height you'd like. Upload your images and then publish the slider.
  3. Click here and copy the code. Go to Appearance > Customize > Additional CSS and paste the code. Click Publish to save.
  4. Go to Appearance > Widgets and drag a Meta Slider widget into the Front Page 1 widget area.

5. Three Featured Blog Posts with Titles on Top

1. Go to Appearance > Widgets. Drag a Genesis Featured Posts widget into the Front Page 1 widget area.

2. Configure the widget settings as shown below:

3. Click here and copy the code. Go to Appearance > Customize > Additional CSS and paste the code. Click Publish to save.

6. Three Featured Blog Posts with Titles Below

1. Go to Appearance > Widgets. Drag a Genesis Featured Posts widget into the Front Page 1 widget area.

2. Configure the widget settings as shown below:

3. Click here and copy the code. Go to Appearance > Customize > Additional CSS and paste the code. Click Publish to save.

7. Single Featured Post

1. Go to Appearance > Widgets. Drag a Genesis Featured Posts widget into the Front Page 1 widget area.

2. Configure the widget settings as shown below:

3. In the Show Post Info box, paste the following:

[post_date] · [post_categories before=""]

4. Click here and copy the code. Go to Appearance > Customize > Additional CSS and paste the code. Click Publish to save.

8. 2 featured page widgets

By default, the Mia Travel demo displays 3 Genesis Featured Page Advanced widgets. You can also choose to display just 2:

1. Go to Appearance > Widgets > Front Page 1.

2. Add 2 Genesis Featured Page Advanced widgets and configure as shown here. Make sure that Front Page 1 contains only 2 Genesis Featured Page Advanced widgets.

3. Click here and copy the code. Go to Appearance > Customize > Additional CSS and paste the code. Click Publish to save.

9. 4 featured page widgets

By default, the Mia Travel demo displays 3  Genesis Featured Page Advanced widgets. You can also choose to display 4:

1. Go to Appearance > Widgets > Front Page 1.

2. Add 4 Genesis Featured Page Advanced widgets and configure as shown here.

3. Click here and copy the code. Go to Appearance > Customize > Additional CSS and paste the code. Click Publish to save.