In this tutorial we’ll cover how to set up the Home Welcome and Home Gallery widget areas on your site’s front page.
First, navigate to the Widgets page from your WordPress admin and note each of these widget areas:
- Home Welcome
- Home Gallery 1
- Home Gallery 2
- Home Gallery 3
- Home Gallery 4
This widget area shows near the top of the front page, just under your header and navigation.
I’m using a Text widget, but you can use whatever type of widget you want, unless it’s a slider widget. Technically you can use a slider here, but I would never ever recommend it because sliders are terrible.
Text widget areas allow you to use HTML markup, which is cool. In the demo, I’ve got a small bit of markup that includes:
- a tag for bold text
- a tag for a link
Utility Pro includes a special “button” class you can use to make your text link look like a button. To use it just add
class="button" to any
Although I doubt you want to use the same content as the Utility demo, here’s the code you can use as a starting point if you’re new to HTML.
We're breaking ground for Genesis child themes. Accessibility and internationalization aren't just a bonus, they're a must for WordPress themes moving forward.
<strong>Utility Pro has all that and then some.</strong>
<a class="button" href="https://store.carriedils.com/downloads/utility-pro" target="_blank">Buy Utility Pro Now</a>
If you’re curious about how to get the background image to show up behind this area on your site, check out this tutorial.
* I was not done noting: Be sure to click the Automatically Add Paragraphs check box for best formatting.
Home Gallery 1-4
Since each of these widget areas are configured the same way, I’ll lump them together in this step.
The Utility Pro demo uses a plain Text widget along with a shortcode provided by the Better Font Awesome plugin.
Here’s the markup I’m using in this widget:
[icon name="fa-tablet" class="fa-4x"]
Your site visitors will enjoy a great experience on a desktop, tablet, or smart phone.
Just as an FYI, you could also add a link to your icon by writing it like this:
<a href="your-link">[icon name="fa-tablet" class="fa-4x"]</a>
For a full list of available fonts you can use, check out the Font Awesome library. For detailed instructions on how you can use shortcodes to display these fonts in your theme, check out the Better Font Awesome documentation.
Pro Tip: Not planning on using all four Home Gallery widgets? No problem! If you choose to use less than four, you’ll need to change the 25% width in this section of your applicable CSS file to give you even spacing across a larger (desktop) screen: