I recently completed a web design project for a client and this was the resulting site. It’s for a membership plug-in called imember360 – very good you should check it out.
The homepage consists of a number of horizontal sections with various things inside the sections and if you look here you can see we’ve got “The number one WordPress membership plug-in for InfusionSoft”, and then I’ve provided 8 reasons why that’s the case. And they appear here with these FontAwesome icons. Now we did this using our Genesis Club Pro plug-in which has got this FontAwesome icon functionality built-in.
If you move down the page you’ll see that I use it again here. I’ve got basically 4 columns in this case but three rows. So a total of 12. Earlier here I had four columns but only two rows and lower down the page once again, four columns and three rows and each of these clicks through to a post that goes into more detail about each other points raised by these icon areas.
And you can have this either way. You can have it where you have it clicking through to a post with more information. Or you can have it so that it’s not clickable but it’s just informative and on your home-page without having a click-through. The plug-in gives you that choice.
The colours of the icons are settable by you too. In this case for this design I took the main green feature and simply changed the tone of the green all the way through. You can have the same colour all the way. You can have black and white . You can have lots of different colours it’s just up to you. Alright I’m going to show you in this video how that was done.
The first thing you’ve got to do is find a suitable Genesis child theme. The one we used was one called “Flat Fact” which is one of ours. It’s actually based on Parallax Pro but we’ve changed it quite a lot and we’ve called that changed theme Flat Fact.
And the characteristic if you like that made it very easy to use the Genesis Club Pro plugin to do this was that Flat Fact has a number of widget areas on the homepage that are just great big empty spaces.
They’re not trying to format anything. They’re not trying to divide anything into columns of two or three they’re just one wide widget area.
So if you’ve got that you can use the plug-in very easily. I mean you can actually use it if it is divided as well into widget areas but I’m just going to go through the scenario where you’ve just got this big wide area.
And say you were looking at Centric for example, out of the box. That’s really suitable because it’s got widget areas like this which have got this one great big widget area without any attempt to turn it into columns or anything.
I don’t know about this one I’m not sure if the content is formatted like that manually or whether they’ve tried to do it for you. But whatever you do you just need to find an area like probably this one that’s just one big wide widget area. Parallax Pro is perfect. It’s got these massive widget areas that are just single areas without anyone trying to impose any structure on you. That’s what you need.
So now I’ll just go through how I did one particular section so that you can see how to do it. If I move down to this one here, this section here where I’ve got eight of these icons.
I basically wrote a post to represent each one of these. Because I chose to be able to click through to a post that expanded on each one of these.
So the first thing to do is to group these posts into a logical group, now because these were the benefits of imember360, I basically went into the dashboard and created myself a category called “benefits” and then I wrote eight posts about the benefits of the product and now they all are under the category benefits. So that’s the first thing to do.
Then in each post I simply wrote a normal post, and there it is, and gave it a title that made sense so in this case it was “imember360 is easy to use”. If you go back to the homepage though you’ll see that I’ve got “very easy to use” here so you might be wondering where did that title come from when the title of the post is something else.
That’s fine – you can call the post whatever you want. You write the post. You come down to where it’s got the excerpt and you create a nice informative excerpt that sums up the post.
Now this is the only tricky bit really. You have to fiddle with this a little bit because what I did is I wrote the excerpt. I kind of remembered that it was about this long – i.e about 75% of the total width of the box on my current screen settings. And then when I went through to the homepage you’ll notice that this is the text that appears here. Now this would have looked really bad on the homepage if each of these also hadn’t used up the same number of lines for their excerpts.
So I basically fiddled with those excerpts knowing I had you know, so many characters to play with because I knew they had to take up 5 lines on the homepage 1 2 3 4 5.
If they didn’t, I fiddled with them until they did. Simple as that. Now in terms of the titles I couldn’t have titles that wrapped so if one post had a very long title and another one had a very short one it would have made the actual layout of these icon areas all higgledy piggeldy, They wouldn’t have lined up.
In order to stop that was done in the plug-in is you provide the excerpt so that it wraps over the same number of lines for each post, that’s fair enough. You go down here to where it says Genesis Club Pro post settings, on a per post basis and what you do is you create a short title that is a summary if you like of your longer title which would probably of wrapped.
And that give you the freedom to have good SEO good, good titles that actually sum up your posts but you’re not too tied to using those same titles in your summary FontAwesome eye candy icons on the homepage. So you use the short title facility here just to give yourself a short title which will now be used in all widget areas that represent this post including the one we’re talking about now.
And then in the post icons section you simply supply the “fa” value, the class if you like, for the icon and to do that you go over to FontAwesome, you go to icons and you find the icon you want to use the let’s say I wanted to use this car click on the car and it tells you what it’s class name is and it’s fa-car. If I’d wanted to use that I’d have used fa-car. As it turns out I was using fa-child.
You can provide a title and an alt which is good for SEO and it’s also good for accessibility. And the colour of the icon you can choose a colour picker you can have anything you like. So that takes care of each of the individual font summaries sorry the individual post summaries that appear like this on the front. You can make sure these all have the same number of lines. You can make sure these only take up one or maybe two lines. I mean that lower down you’ll see that here I decided all the titles were going to be two lines long. It’s just up to you.
Now that’s that bit of it. That’s on the individual post basis. But what about dragging a widget into this widget area that will actually make all of this happen
OK so the next bit’s really easy. We’ve got our eight posts. We put them all into the same category.
We made sure the titles of the posts were as we wanted them to be and if they were too long we were able to supply short title at the bottom in the Genesis Club Pro section.
We were also at that stage able to choose the colour of the icon and the icon itself. So all of that was done.
All that remains now is that actually go into the widget area that is given by this area of the homepage which in my case is, appearance widgets and then home section 3.
And all I do is a drag in a Genesis Club post icons widget which is here. Drag one of those into here and then open it up. First thing to do is to supply a title and the title I placed came out here.
Then it’s a question of setting up all the settings. Now I wanted to show the title which basically means in my case the short title if it exists.
So that is this title here. I wanted to show the excerpt because remember I went to a lot of trouble to make sure all these excerpts existed only over 5 lines and nothing less and nothing more.
So I want to show the excerpt. I didn’t want to show content or character limit or any of these things.
I have icon size – now you can choose the size of the icon. I decided to go for triple size but you can go smaller or larger now, these are just what the widget does for you out of the box but of course if none of those sizes are good for you, you can go in with CSS and change them.
But out of the box you get to choose and I chose that size. And I wanted it all aligned in the centre. Now the icon colour I’ve got here set to black, but it’s overridden on the individual posts that represent each icon. If you remember I choose a different shade of green for each of them so that doesn’t count in this case. And the post was post.
I wanted only posts from the “benefits” category. And I wanted to show – now this is the clever bit – I’ve only dragged in one widget. But I’m able to say show me 12 posts or 8 post, or however many posts it is, and show it in rows of four, so columns of four rather, per row. So four row – ha ha – start again. Four columns per row. And I can have it ordered by date published in ascending and other types of ordering as well. So this is where I decide I’m going to get four of them per row. Now as it happens I’ve actually only got eight. So only eight show – so that’s a mistake it should say eight – I’ve put twelve.
Doesn’t matter – it obviously ran out at eight so stopped.
But that’s how you can do it. Now if you set it to three, you’ll get three per row, or two per row or even one per row. It’s up to you. We’ve set it up and it’s all responsive all out of the box. So that’s how you do it. I think that’s pretty easy.