Genesis Sandbox Featured Content Widget is a great plugin that is similar to the built-in Genesis - Featured Posts or Page widget, but on steroids.
In this tutorial I show how Featured images of 8 Posts from a specific category can be shown in a 4 x 2 grid with the Post's title and excerpt/content appearing on hover. Even though the plugin's widget includes support for column classes of Genesis we are going to use :nth-of-type CSS instead to display the entries in columns so that we can precisely control how many columns appear at various screen widths for the responsiveness.
Screencast (no voice):
We are going to:
- register Home Featured widget area
- display this widget area below the header on front page
- define a custom 'home-featured' image size handle
- wrap the output of Post title and content/excerpt in a custom div
- use a 'equal heights' JS file to ensure that all the Posts in Home Featured widget area have equal height
- add CSS to absolutely position the title and content/excerpt custom div relative to each entry
The tutorial is written for Genesis Sample child theme and should work with other themes with some modifications.
Install and activate Genesis Sandbox Featured Content Widget if you haven't already.
Create a file named say, sk-set-gsfc-height.js in child theme's js directory (create js directory if not existing) having the following code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.