Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 7 – Example #5 – Create a Grid of Portfolio Images

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

You just learned how to display a grid of custom posts on the Front Page of a Genesis website. And, we did that on one of our member’s sites, Design On Media but this is not actually what he wants. He just wants the images with the titles.

To make those changes we’re just going to comment out this code since that’s not what he wants. Go back to this code, paste it, save it, upload it. Obviously, I need to turn the hook back on and there we go, we’ve got our portfolio just how he wanted.

Style the Portfolio Items Using CSS

There are all kinds of things we can do here. We can style these portfolio items similarly to the way this portfolio is done. All we really need to do is apply the same CSS as is currently being applied here.

This has its own CSS class. In this case, it’s inside the “entry-header” not outside of it and the image has a class of “fancy-box”.

That’s just about the only thing we really need to do to this in order to get it to take this style. It’s a pretty straightforward process of adding this kind of grid of images and giving yourself the ability to display them in exactly the same way as the rest of the website is displayed.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment