Home Page Setup

Overview

Summit’s home page is made up of the following Builder module’s:

  • Navigation – Alternate style, “Navigation with Logo”
  • HTML – Alternate style, “Background Image”
  • Widget – Alternate style, “Remove Widget Titles”
  • Content – no sidebar used
  • HTML – Alternate style, “Large Text Blue Background”
  • Widget – Alternate style, “Dark Widgets”
  • Footer

Setting up the home page modules

Navigation Module

  1. Select the alternate style “Navigation with Logo”.
  2. Make sure you have at least one menu created (go to Appearance > Menus to create a menu).
  3. If you haven’t already, save your layout, and go Appearance > Customize.
  4. In the Customizer, you can upload a logo to replace the site title and tagline.

HTML Module

Select the alternate style “Background Image”.

HTML content added to this module for the demo:

<h2>Let us help you climb farther and higher.</h2>
We believe providing our customers with the highest quality climbing gear at the lowest prices is the best way to help them achieve their climbing goals. The more money you have left after buying your gear means you can visit those climbing spots you always wanted to.

<a class="btn" href="/store/">Shop Our Store</a>

To change the background image of the module use the following CSS in your child theme’s style.css file:

.background-image-html-background-wrapper {
    background-image: url('path-to-your-image.jpg');
}

If you want to have a different background image for other layouts using an HTML module with this alternate style selected use more a more specific selector in your CSS such as the builder ID of your module like below:

#builder-module-5512fffc74fed-background-wrapper {
    background-image: url('path-to-your-image.jpg');
}

Note: please change the specific module’s ID to match your site, rather than copying the above ID as it is specific to each site.

Widget Bar Module

  1. Select the alternate style, “Remove Titles”.
  2. Note: We’ve used images for the icons in this demo. You could also use dashicons for the icons, as they have been included in this particular theme. You can view a reference of the various icons available here.
  3. For the individual widgets, we used Builder’s “Widget Content” feature to create simple widgets with our content. Here is the HTML that was used in the Widget Content editor:
    <img class="alignnone size-full wp-image-69" src="http://demos.ithemes.com/summit/files/2015/05/alaska-icon.png" alt="alaska-icon" width="64" height="64" />
    <h4 class="widget-title">Alaska Climbing Tours</h4>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><a class="it-summit-cta-link" href="#">Learn More</a>
  4. Once you’ve created the number of Widget Content widgets that you’d like, you can add these to your widget area(s) by adding widgets as you normally do, and selecting the appropriate Widget Content widget.

Content Module

For the layout your home page is using select the extenstion, “Summit Featured Posts”. Doing this will replace the content area on the page with the latest post or the sticky post with a large featured image to the left side and the title and post excerpt with a link on the right. If your posts do not have a featured image this feature will not work correctly.

HTML Module

  1. Select the alternate style “Large Text Blue Background”

HTML content added to this module for the demo:

<p>Climb mountains not so the world can see you, but so you can see the world.</p>
<p style="font-size: 14px; text-align: center;">David Mccullough Jr.</p>

Of course, edit the content to make it your own!

Widget Bar Module

  1. Select the alternate style “Dark Widgets”.
  2. Configure the number of widgets and their content as you see fit.

Footer Module

No specialized instructions.

You did it!

Now you should have a layout that mimics the home page seen in this demo, but with your own content and any unique styles you’ve assigned. Take this knowledge and apply it to building other various layouts for your site!

If you need even further help, we have a vast library of tutorials, as well as an amazing training website over at iThemes Training.