Homepage Setup (Widget Areas) [Kickstart Pro]
This section will explain how to setup the Kickstart Pro homepage features like the demo website.
In this article
Background Image (single image)
To add a single background image go to Appearance > Background from the WordPress menu.
The background image should automatically adjust to fill the available space though you may find the effect better if the image you use in the first place is of similar proportions (the demo site image is 1400 x 937 pixels, for example).
Add a message box
To add text drag a Text widget to the Home Top widget area and enter the text (or basic HTML) you wish to use. Click Save when you're happy. The following is an example you can use:
Add a featured-link class to the p tag immediately before the a tag to show a styled, link box. The rest of the box will appear on a white background so it’s distinct from the background image behind it.
Image Slider (multiple images)
You can add multiple images as a slideshow to the homepage with the free Genesis Responsive Slider plugin.
If you’ve not already got the Genesis Responsive Slider plugin installed:
- Choose Plugins > Add New from the WordPress menu
- Choose Search and search for the Genesis Responsive Slider
- You should see the Genesis Responsive Slider plugin by StudioPress
- Click Install Now and then Activate on the following page.
Once you've installed the plugin:
- Go to Genesis > Slider Settings from the WordPress menu
- Here you'll find a long list of configuration options, but don't worry, there's only a few key ones:
- Decide if you want to feature pages / posts in the slider area
- The image that appears in the slider comes from the Featured Image associated with that post or page
- The text box above the image comes from the post or page, (we recommend using the Excerpt box for this so you can separate the post or page content, you can use the same HTML for the Excerpt as shown in 'Add a message box' above)
- If you only want to use the slider for presentation purposes and not actually link the slides anywhere you can create a series of pages with the image and text that you want to use and simply check the "Do not link Slider image to Post/Page" option on the Slider Settings page.
- Choose your slider width and height, although the slider images will stretch to fill the available space, we recommend 1400 x 560 pixels as a good starting size
- (If you want to explore the Genesis Responsive Slider in more detail we recommend this great tutorial by Philip Gledhill)
Homepage: News Feed
Uses Genesis – Featured Posts widget.
From the Appearance > Widgets page simply drag this widget into the Home Top (News Row) widget area and configure the widget as you wish.
Tip: If you wish to match the design of the demo homepage as closely as possible it is recommend you only show one article at a time in this space. You may also wish to limit the number of characters showed in the teaser text after the headline as follows, if you wish to keep it on a single line (see box)
Homepage Intro & Contact Row (Home Row #1)
Left Hand Intro Text
From Appearance > Widgets in WordPress, drag a Text Widget into the Home Row #2 (Left) widget area.
A Gravity Forms widget (from the premium Gravity Forms plugin) is used. Install Gravity Forms via Plugins > Add New > Upload and drag a Widget instance into the Home Row #1 Right widget area. You can use any other contact forms plugin, but we have made special integrations for this excellent forms plugin.
Homepage: Pricing (Home Row #2)
Text Widget into Home Row #2
If you wish to follow the demo layout / content, you can copy the HTML below as a template, make whatever adjustments you need, then drag the Text widget into the Home Row #2 widget area, paste your code and Save.
Homepage: About (Home Row #3)
About Us Intro:
Drag a Text Widget into Home Row #3 (Left) and use the basic HTML you need to create your own intro.
User Profiles Columns
The Genesis – User Profile widget is used for the user profiles (and photos). Images are automatically pulled from the free Gravatar service, based on the Gravatar image that is associated with the user’s email address.
The Simple Social Icons widget is used for the social icons underneath each profile. This is powered by the Simple Social Icons plugin which you should install and activate first.
In our demo these widgets are used in the Home Row #3 (Right #1) and Home Row #3 (Right #2) widgets areas.
Homepage: In the Press (Home Row #4)
Uses Genesis Featured Posts Widget
The image thumbnails are set as follows (there must be a Featured Image associated with the post for it to show):
In the demo, the excerpt/’teaser’ text limit is set as follows:
Homepage: Testimonials (Home Row #5)
The testimonials are created and displayed via the (free) Testimonials by Woothemes plugin, you should first install and activate this if you wish to create the same effect. Once activated testimonials can be created under Testimonials from the WordPress menu. Testimonials can then be displayed by dragging a Testimonials widget into the appropriate widget area and configuring as you wish.
The top text – ‘Social Proof’ – is displayed via a Text widget
Homepage: Features (Home Row #6)
This is displayed via a Text widget.
To include the list with the ‘star’ style bullet points simply add a class of featured to the <ul> tag, example HTML below:
Homepage: Video (Home Row #7)
This is displayed via a Text widget.
The video is displayed via some HTML which you can copy and paste for the video you want to use on the Vimeo website (look for the Share option next to a video). You can also do the same with YouTube videos (look for Share > Embed option):
Here is the Vimeo example we're using:
To follow the demo site layout, install and activate the Genesis eNews Extended plugin.
You can then drag the Genesis eNews Extended widget into the Home Row Newsletter widget area and configure it how you wish, so you can link it to popular enewsletter subscription services such as MailChimp and Aweber.
To configure the Genesis eNews Extended widget to work with your particular provider (e.g. MailChimp) please see our general Genesis eNews Extended plugin setup instructions.