Minimalism – Homepage set up

In this article
To arrange your front page content, activate all the required plugins first (the notification usually appear after you activate this theme).

Create a Blank Page

  1. Go to your Dashboard > Pages > Add New Page
  2. Name your new page which you can recognize as your front page. In this demo I name it as “Front page” so it’s easier to identify.
  3. Find ‘Page attributes’ on your right side panel, then search under “Templates” and choose “Front page” from the drop down option.
  4. Publish the page
  5. After you create the front page, create another new page for your Blog page. Name it “Blog“
  6. Publish the page
  7. Go to your blog setting : Settings > Reading
  8. Choose Your homepage displays : a Static page
    • Homepage : Front page (the page you created before)
    • Blog : Blog (the blog page you have created)
  9. Save the setting

Front Page Widgets

Go to Appearance > Widget or Appearance > Customize (if you need visual) to re-arrange your website front page widgets.

Structure

Front Page 1 – Image widget

  1. To add the image, go to Appearance > Customize > Front page setting

  2. Click “Change image” or “Upload image” to a new image / replace the current image. The size has to be 1400px x 650px or larger.
  3. After uploading the image, click Publish.
  4. Go back to Appearance > Customize > Widget > find “Front page widget 1“
  5. Add widget and choose Custom HTML widget from the list
  6. Copy and paste this code bellow to your custom HTML widget.
<h2>
    <em>Your Title Here</em>
</h2>

<p>
    Your short description here
</p>

<a class="button" href="link-to-page">Button text</a>

Front Page 2 – 3 Images Widget

  1. Install and activate the Image Widget plugin from the recommended plugin
  2. Go to Appearance > Customize > Widgets or Appearance > Widgets
  3. Under Front Page 2 widget area, add 3 items of “Images widget“

Front Page 3 – Welcome / About Page

  1. Go to Appearance > Customize > Widget > find “Front page widget 3”
  2. Add Image widget, follow the instruction (crop your image to 1:1 resolution to get rounded image)
  3. Add Custom HTML widget. Copy and paste this code bellow to your custom HTML widget.
<h2>
	Welcome title	
</h2>
<p>
	Your short description here
</p>
<a class="button" href="link-to-page">Button text</a>

Front Page 4 – Subscribe Box

Follow this tutorial to set up the subscription box.

To change the background color box of this front page widget, go to Appearance > Customize > Front page setting > Subscribe box in front page

Front page 5 – Shop my style / Display Products

This widget is optional. Remove unwanted widgets if it’s not needed. You can use this widget area to display your affiliate items or your shop products (you can sell items using Woocommerce plugin).

Displaying affiliate links

If you don’t have affiliate links you can skip this widget. To add shop the look widget, you need to get the copy from your affiliate company and paste the code to WordPress widget.

Copy the code from your affiliate program and use Custom HTML widget to paste the code.

Display Shop Products

To display products from your shop, you must activate the Woocommerce plugin first and then add products to your shop.

Add a Custom HTML widget to this area. Copy and paste the code below. It will display 4 products of your latest items.

Front Page 6 – Testimonial Slider

  1. Add and activate “Strong Testimonials” plugin (Plugins > Add New or install from the recommendation plugins notification on your wordpress dashboard)
  2. After the plugin is activated, Add a new testimonial (Testimonials > Add new). The testimonial title can be empty. Add your testimonial text under the text area. For the author, scroll down the page, add the author under ” Client details : Full name” and then save.
  3. To display the testimonial as a slideshow, go to Testimonials > Views < Add New (if it’s your first time displaying the testimonials), check the setting according to your needs, especiallu the one in red boxes, and select MODE : Slideshow. Copy the SHORTCODE.
  4. Go to Appearance > Widgets and add “CUSTOM HTML” widget to Front page 6 widget area.
  5. Fill the field with the testimonials shortcode.

Front page 7 – Latest Blog Post

  1. Add Genesis Featured Posts to “Front page 6” panel (maximum 4 blog posts)
  2. Follow this setting bellow :
<div class="link-to-blog">
	<a class="moreblog" href="link-to-blog-page">View  Blog</a>
</div>