Adding Three Featured Items To Any Theme’s Homepage

How do you know a site belongs to a business or organization? Because their website has a section with three featured items all in blocks, linking to other pages.

Not sure what I’m talking about? Check out these examples:

It’s become so commonplace that it’s in danger of becoming a trope. Or maybe it already is…

But that doesn’t change the fact that everyday I talk to business owners looking for this kind of style on their WordPress.com site.

WordPress.com themes like Edin and Sela have features built in to accomplish the three featured items (using Child Pages and Widget areas, respectively.) But really you could add three items to any homepage with a bit of HTML and CSS know-how.

Start by copy-and-pasting this HTML into the body of your page:

<div class="featured-blocks-container">
<div class="featured-block">
		Put some cool stuff here!
</div>
<div class="featured-block">
		<div img src=http://placekitten.com/200/300 />
		This one has a kitten!
</div>
<div class="featured-block">
		Add a bunch of things.
		Text, images, YouTube videos, all are fair game.
</div>
</div>

Now if you just publish that page, it won’t look too fancy. Maybe something like this:

htmlOnlyBlocks
Not fancy at all.

So the next step is to add some CSS. You’ll need the WordPress.com Premium plan do this. Open up your Customizer, choose the CSS panel, and copy-and-paste this code into the text editor there:

.featured-blocks-container{
	display: flex;
	flex-wrap: wrap;
}

.featured-block{
	flex: 200px;
	margin-right: 2%;
}

Now we’re starting to get somewhere. Our blocks look like columns on bigger screens, and line up on mobile devices.

responsiveBlocks.gif

So now that we have the blocks working, we can add things like headers and YouTube embeds into that content to give it the final look.

endVersion.jpg

Any content that you want to put into those featured blocks will work just like if you had it in its own post. But now you can organize it all onto one page, with stuff before and after.

So throw this HTML in anywhere. I think it works really well on a business style homepage, but you could use this styling a lot of ways.

Did you use this code on any of your webpages? Leave a link to that page in the comments!