Updated on June 26, 2017
A user recently wrote me:
I find your tutorials very helpful. I was hesitant to signup and pay the $47/month, but it's money well spent every month. Thank you!
I have a request. Can you help me or put out a tutorial to accomplish what I'm seeing here?:
It's a grid of some kind of featured content, that when moused-over, shows the title and an excerpt, with a colored overlay.
I'm using your Genesis Starter Theme combined with Beaver Builder so the clients can edit. It's not critical to accomplish this using Beaver Builder. I'm comfortable working with the functions and css files.
Any help you could provide would be very appreciated!
I'd like the post grid to appear on a Page, and it would be most helpful if they could be CPTs. I'm comfortable using Pods to accomplish this. Ideally, I'd like to replicate the technique for a "Meet the team" page and another page that shows the "Programs" that this business offers. If you could get me started with one page for one CPT, I'm certain I can replicate the technique for others.
In this tutorial we are going to:
- create a
team_membercustom post type using Pods.
- create a custom Page Template and write a custom loop to display featured image (if present, otherwise a fallback image), entry title, and excerpt for all the team members - linking to the entry's permalink. This template will be a generic one that you can easily duplicate and use it for other post types.
- write CSS to arrange the entries in a grid using Flexbox, set the title and excerpt to not be visible initially and have them smoothly slide up when the image is hovered.
We shall initially set up a simple grid like this:
When an entry is hovered:
Install and activate Pods.
Create your CPT. Enable support for featured image.
If you'd like to import the one that I have used in this example, it can be downloaded from here.
Create your CPT entries, while entering featured image (ideal size: 350 x 350) for each.
Add the following in child theme's
To view the full content, please sign up for the membership.
Already a member? Log in below or here.