Your Attractive Heading
Coming up, I’m going to show you some of my favorite marketing features that people like Pat Flynn and Brian Dean use on their Web sites, the best part is to reproduce these marketing features. You don’t need to be a developer. Let’s go. What’s up with Dave here from Tropical Tools, where I show you software so you can grow your business? So what am I talking about with that intro? Well, here is the Backlund cool website. I’m sure you’ve seen this before.
If you’re not familiar with back go dotcom, you might have seen Brian’s videos on YouTube. He’s got some of the most elaborate and in-depth free content on the planet.
I believe he’s got these huge posts, the definitive guide to content marketing. You can click on it. You can read it. And these are just like mammoth post rates, seven chapters plus a bonus chapter, all totally free, like the king of blogging right here. But he does this really cool thing on his website.
Whereas I scroll down, you can see I’ve got this one post right here. How does he do this? Right. So this is actually using opt in monster, which is pretty pricey. It’s on the more expensive side of things, but it’s a really cool feature. Right. So if I want to read this post, which is going to be great and super in-depth because it’s Brian Dean, I can hit unlock now and then I have to enter in my email address to be able to get access to this tool.
So how can I reproduce something like this over on WordPress? Well, I’ll show you that. In fact, Brian is actually using WordPress for his website. Let’s also look at another WordPress website, but some more really cool features that seem like they’re custom developed. This is smart, passive income. This is Pat Flynn’s website. Of course, Pat is a huge podcast or helps a lot of people start businesses, but he’s got these really cool little cards on his website.
Right. So we can see some of his latest content and we can filter maybe I just want to see podcasts. I can do that, but just want to see guides. I can do that. I really like this approach, how things look. He’s got some other nice cards as we go down here. We’ve got this is in his LearnDash section. You can see some of his guides to maybe becoming an affiliate marketer or a business fundamentals. So I just really like this design and how it’s laid out.
So how could we reproduce this over on our website? Well, that is where Gridbuilder WP comes in. The way this works essentially is Gridbuilder WP does three things. It lets you build these little cards so you can build, you know, here’s an e-commerce demo can be for any type of post on your web. That could be a product. It could be a blog post. It could be a custom post. You can build these little cards and then that’s part one.
You build the cards, then you build the grid. So how does it display on the site? So we’re seeing, you know, how they all kind of layout and then you can add facets which are essentially ways that you can sort through the data. And that’s this information over here. So really, this is very, very similar to what we’re seeing over in the smart passive income website.
So a little sneak peak here. This is a prototype of a new website for profitable tools. I’ve been kind of looking at some of my favorite marketer’s websites and deciding which direction I want to go with profitable tools. And you can see I’ve got some of those ideas implemented here. We’ve got the little cards up here. I’ve even got one that has maybe a little content lock in it. You can see it’s going to lock in the corner. And then we’ve got some nice big cards down here for maybe the longer forum posts.
If you down here all the way to the bottom, you’re going to you have got one right here. This is a member exclusive. Got to the lock in the corner as well. So how do I accomplish this? Well, it’s all Gridbuilder WP with a few other plugins on the back end for things like custom posts and restricting content.
All right. Let me show you what to do. So, as I mentioned before, Gridbuilder WP has these three different sections, right?
We’ve got grids, cards and faucets. So I recommend starting off by building a card. First, I’m going to go ahead and click into all cards, and I’ve already got a few built out.
But what’s really nice is they include some templates for you to start with. You can start blank. In fact, I’ll make a new one right now, but it’s really, really difficult to do it this way. Right? So if you’ve got a blank card, you just got all these blank drop areas. So I find it much more usable to actually go out to their dashboard and then you can import one of their templates. So let’s just go down to import content right here.
I can browse through their demos and you can see it just pulled them all in right here. Now, one thing you know, I’m going to be kind of critiquing this as far as we go along, and it’s far from perfect, but the functionality it offers is really, really outstanding. So I’m excited to see where this product goes in the future. So I’d like to see this, you know, maybe a little bit more descriptive. These icons are all very similar.
Right. So like a gate versus Baril, I’m probably saying those names wrong. They look like the exact same thing. Right. But if you import them, they’re actually a little bit different.
So let’s just go ahead and grab one. How about I’ve used this one before.
I’m going to grab that one and import it and we’ll hit import data. All right. Now that I’ve imported that card, I can go back over to all cards and EDD right here at the top. It says new because we just imported this one and you could see kind of more of what it’s going to look like as we actually apply it to our posts. So we’ve got the author icon right here, some tags or terms to associate with the post right there.
This would be the featured image, the post title, maybe the excerpt is right here. Read more button. We have an author name and the comments number of comments are going to be right here. So this is all completely customizable. I can hit the edit button and now this is going to look very similar to what we saw before. But instead of just saying drop area, drop area, drop area, everything is kind of populated and you can modify things from there.
So if I don’t want to have the author post, which, you know, you might not want, if you’re the only author on your website, you simply click it. It’s the little trash can and then it’s gone. So on the surface, this looks very much like a, you know, kind of page.
Builder like experience, and in fact, it even has some blocks that you can drag and drop in. So. So let’s say I want to add I don’t know the comment count up in the top section, which I know you’d want to do that. I can hit the plus button and then that adds a comment count. It’s right up here.
So then I have to kind of drag it to where I want it to go. And there I’ve got in the bottom you can see it’s kind of hard to read. So then what I would probably do is open this up, go under appearance, give it a background color. Maybe we’ll make it. I don’t know what kind of a dark color. We can ask some transparency to it. And there we go. Now it’s going to look a lot better.
I can preview what this will look like by hitting the preview button right here. And then it kind of takes away all of the formatting. But what I don’t really like about this preview mode is that there’s no way to pull it in. Any sample data from an existing poster, we could see what it really looks like. There are ways to sample it, but that’s over in the grid mode. So for now, you can I just have to use your imagination and assume it’s going to look the way you want it to look, depending on the perspective or the dimensions of your featured image.
I found that that’s kind of a hit or miss type of proposition. All right. So let’s get back to some specific examples. So here is the Pascaline website with these cool little cards with different forms of content on them, how can we reproduce this? Well, back over on the website, I’ll show you how I did it. So I’ve got this one right here called Thumbnails. Now, this is actually imported from a different template. Let’s go back to the dashboard and I’ll show you which one I used.
So I started with this jade template right here. I’m going to import that again. Let’s go to cards. And here is the jade template now. And if you see both of these in the same shot, this is the one I’m using on the front end. And this is the one that comes in from the template. I really just eliminated some things. Right? I got rid of this author info. I got rid of the terms of at the top.
I even got rid of the little excerpt and then I added a background. So here is exactly how we can do that. Let’s say the gear. I kind of edit the card. I’ll start removing the items that I don’t want. Now, for me, I used 16 by nine thumbnails because I make mostly videos, so I change this media with to be a little bit bigger, I think right up there, right around 39 percent.
The next thing I did is click the gear icon right here over to appearance, down to background. And it shows kind of a greenish color. All right. We’re not seeing anything here. And that’s because I’ve got to add in some padding. So I’ll click on a gear. I kind again go over to appearance, and then I want to go down to speccing. And here I’ve got a padding section. Let’s go ahead and add, let’s say, I don’t know, 15 pixels in on the top, bottom left and right.
And here we go. This is starting to look more like what I want my final product to look like. If you look at the line card, they can have this one solid background. So let’s go back to our site and actually remove this background right here. So now I need to select the holder for this. And this is where Gridbuilder WP has this really cool interface. It’s actually a little excessive, in my opinion. It doesn’t need to be quite so elaborate.
But if I click on this little dropdown up here, you can see the card kind of rotates and I can see which layer I’m selecting. So this is the media holder. This is the thumbnail. If I wanted to overlay some information on top of that, there’s a content holder above that. Then I’ve got the section over here, which is the body holder, and you can see it kind of highlights. You probably can’t, but the gear shows up on the right hand side when I when I scroll over that.
There you go. All right. So I’m going to click on this and then I go to appearance and I’m gonna change the background color here to just be completely transparent. So I’ll select the background color, bring it down to transparent. And there you go. I’ve got that really obviously too bright of a green color, but you get the idea how easy it is to customize these cards. Now, after you have your card set up the way you want it, the next step is you build out a grid that will display your cards.
I’m going to show you how to do that. But first, I’m going to go through the brain example kind of at the same time here. So you might have to jump around. I’ll put some table content links in the description. All right. So back over on Brandon’s website, this is the main idea. We have to have a card for just our regular blog posts, and then we have to have a card that maybe has a little luck and then has some kind of content protection to it.
So the way that I’m going to approach this is by custom post type. I’m using tools that to create custom post types. But there’s lots of plugins that’ll do this for you for free. I like tools that I’ll leave a link to it in the description. But basically I’ve just got a post type setup right here where it’s called Premium’s. This will be content that’s created that you have to pay money to be able to access. Right. That’s the idea.
Or you use the Brind model and you just have to opt in. You’ll get access. How you protect it is up to you. All right. So let me walk you through the thought process here and you can get an idea of how I accomplish this. So first, I just imported one of their templates. This is the one that we got at the beginning of the video. It’s got a lot of information on it. So I ended up deleting a lot of the criteria here, like the terms and the author box and things like that.
So that is this card right here. It’s even the same. The applied template. Right. Just removed some things. I also made the entire container clickable. So to do that, I click on the edit button. When this opens up, I’m going to select the card holder, which you can see is highlighting the entire card right here. Right. So if I move this off to the side, it’s going to be this entire section is the card holder.
And then the action that I want you to take is that it will redirect you to the single post page when you click anywhere on the card. So therefore, I don’t need a read more button. If you hover over it anywhere, you can click and it’ll take you to the post that’s associated with it. All right. So after removing all of those items and changing the clickable area to be the entire card, then I just hit this little button up here to duplicate it.
And that gave me this one right here, which I renamed to Opal Premium. And all I did here was add a little icon as well as a member exclusive label. So let me show you how to do that. Well, back up here to our template that we brought in. Let’s click on this one to remove these items.
This section down here is called The Footer. So I can just check this box over here and it will remove those items for me. You can see there’s a three drop areas on top of this image, right? We’ve got one at the top, one in the middle and one on the bottom. So what I want to do, first of all, is add an icon. So I’m going to go up here to my blocks and I’m going to find the icons.
So here it is under buttons and icon blocks. Let’s go ahead and add this SVG icon and just as it right to the upper right hand corner exactly where I wanted it, actually it’s like a new. But we can of course move this around. But for now I want to change this icon. Right now it’s kind of a little paper clip looking thing. I’m going to click select icons here and this is where I can actually find a little bit of a bug inside of the software.
Now I’m in the Safari browser and I haven’t actually checked this in Chrome yet, kind of trying to avoid Chrome for other reasons.
But as I scroll down here, you can see that this is really kind of a mess.
Now, I can find icons by searching through them, but the mess doesn’t really get cleaned up. So what I want to find here is a WLOX. I mean, search for lock and you can see the icons right here.
It is possible to work with this, but it’s just not very convenient. I’m going to go with this one right here. And there we go. It’s been added the upper right hand corner. So hopefully they can fix that feature. So that works. If it does work in other browsers, you know, maybe they can fix it. So it works insofar as well. All right. The last thing I want to do with this icon is maybe change the background color to be a little bit more transparent, and then I’m going to move it a little bit away from the upper right hand corner.
So it’s got the appearance and it’s got a background color and. And it is transparent right now, but I think I making a darker color and maybe a little bit more transparent. Yes, I’m around there, looks all right to me.
Again, it’s kind of hard to tell without being able to preview without the featured image behind it. So you may have to play go back and forth a little bit after you get this published. Now, as far as moving this out of the upper right hand corner, that’s going to be a spacing is useful as click right here. It’s a spacing. And I’m going to go ahead and add a little bit more margin. This is an item right now, but I’m gonna switch it over to pixels because I think it’s a little more familiar for most people.
Oops. I don’t want to change the left margin. I want change the right margin. Let’s do this to about 35 pixels. You can see it moved over. That’s quite a bit. Welcome back here to maybe 15 pixels and from the top will do about another 15 pixels. All right. That looks pretty good to me. All right. The last thing I wanted to do for my premium card was to add in a title.
Does a member exclusive. I’ll add a title right here. You can see it showed up at the very top. So let’s go and just drag this down into this middle layer. Now, obviously, I want this centered. So let’s go over to the appearance once again and we’ll go to font and center this up again. We can give it a background color. So let’s go to your background and I’ll choose. You know, I probably want to get the exact hex code.
So these match. But for the sake of this video, we’ll just kind of match it by. All right, there we go. And I’ve got post title right in here, except I don’t want it to say post title. I wanted to just say member exclusive. So I’m going to go ahead and change the source type to be raw contents. All right. That as a little text box right here, I can add in HTML if I want, but for me, I’m just gonna go ahead and write member exclusive.
All right. That looks pretty good. I can just drag and move the size of this around if I want.
You can’t drag it kind of anywhere inside of the container. So if you do this, you’d have to center the entire container up for now. I’ll just leave it full width, but a little bit and he’d be able to do that. That’s kind of where the program starts to be. Well, you need a little bit of says Chop’s, but you know, most of this you don’t have to do so. You can do almost anything without having to code at all, even though she isn’t really coding now, is it?
All right. So we’ve got our cards built. Let’s go ahead and check out the grid section, go over to all grids and let’s go ahead and create a new grid. I’m going to call this demo grid. We’ll just work our way right down the line. Now, the next section is called Content Query. And this is just asking you, what content do you want to display in this grid? All right. So we’re going to head and choose a post types and let’s go ahead and have twelve per page and let’s see, we can do posts or we can do any other custom post type.
You can see on this website we’ve got post pages, media, so you can display images if you want to do it that way. We’ve got courses, lessons, topics because LearnDash is installed. So it’s noticing those post types. We’ve also got some of the other custom post types that I created like reviews and guides. For now, let’s go ahead and display some reviews. The other fields in this section are just for the status of the post.
Whether it’s published or not, you’ll probably only want to include published post. Then we’ve got the Post authors so you could isolate a particular author if you want. And then we can include or exclude specific posts. If you have one you don’t want to show up in your grid.
There are some taxonomy options as well as custom fields, and it does support advanced custom fields as well. If you’re wondering. So you can go ahead and add extra fields to WordPress and use it with Gridbuilder WP. All right. Moving down to the next section for media formats. This is where you can have specific layouts for certain kinds of media. So if you wanted to have, say, audio, always open a player or video play inside of the Gridbuilder WP, you click on the grid and it just plays the video and like a light box, you can definitely do that.
In fact, that’s even an option right here. Open videos and lightbox. You’ve got your thumbnail ratio right here so you can override the aspect ratio of your thumbnails so they all look consistent inside of the grid builder.
You can turn this on if you like, overwrite it and choose sixteen by nine under thumbnail sizes.
If you’re not familiar with WordPress, when you upload an image to WordPress, it’s going to resize that image to several different sizes, usually small, medium, large, which are set to specific dimensions, typically by your theme. So by default here we’re going to go with the medium, underscore a large image and that’s just fine with me. But I click this dropdown EDD there are lots of options, including up to the full resolution if you want to go that way.
Moving down the line, we have grid layout next. Now, because the cards I built are all masonry cards actually have to choose this first type here if I choose another one and then I choose which cards I want to use with this grid, it’ll actually throw an air at me. So I’m going to leave this at Masonry right now. We can change the card positions to change the card aspect. Ratios are not really going to bother with any of that stuff.
But what is interesting here is I can choose how many columns I want on a per device basis, and they give us all of the options here. So we have a desktop to a very large screen right here. Maybe I’ll have four columns there. If I switch over to a smaller screen on a laptop, I can do three columns. Maybe I’ll set the tablet when it’s in landscape mode down to the same as the laptops. We have three columns.
Switch it over to portrait mode and it can go to two columns. And then this would be the phone in kind of a landscape view will do two columns there and in portrait mode we’ll do one column. So really nice user interface for that. We can also space things differently between the different devices. So that’s going to be the space between. The cards I could have a lot of space on desktop and less space on mobile were screen real estate becomes more expensive.
Next up is Grid Carrousel. I’m not going to be covering that in this video, but essentially, instead of having a layout of cars like we’ve been looking at, we have a carousel of cards, right?
Maybe be more like a slider. We’re also going to be skipping over this grid builder section because it’s largely been surpassed by the faucet’s feature, which we’ll look at after this.
So. Again, this is just how you searched through the grid so you can kind of reduce things down to more specific content. So this has largely been replaced by using publishers, as they say up here, wienies Gutenberg, Bloks Shortcode.
You can use they have an Elementor add ons. You can use it right inside of Elementor as well.
Go ahead and skip this section for now. I feel like they could probably just start to remove this part from the plug in. It seems kind of weird to have a section called Grid Builder, which is the name of the plug in and then say, well, you don’t really need to use this part. Card style, however, is very, very important because this is where we tell Grid Builder what card we want to display it with, what type of content so we can have a default card, kind of a card that everything goes back to you if there’s nothing assigned to it specifically.
Let’s go and choose our Opelika card for this. All right. We can operate to here. But where things get really interesting is right here. Ritz’s post type cards. What this means is we can assign a card to a specific post type. So remember, I’ve got reviews which are just can be regular videos, but then we also have premium content, which is going to be something that we want people to opt in for. So to do this, I need maybe the premium POS type to show up here.
Let’s go back up to the content query and I might add another post type in here. So right now it says reviews. Let’s go and type in premium. All right. So now I’ve got both post types in the query, meaning it’s going to pull out those post types. If we go back over to our card styles, I have another option. I can assign a specific card style to premium. So around premium, I’m going to choose the premium card that I had already created a premium.
There we go. Let’s save the changes.
Now there’s a preview mode inside of the grid builder, which is a lot more useful. I can click preview up here is actually going to show me what the content looks like. So here is the premium content right at the beginning. And then these are the other Opal cards now. Right now, we have no spacing between these at all. So everything is really jampacked. I can switch through the different devices and see how the columns look.
So let’s jump back to our layout and let’s add a little bit spacing here. We’ll just do 15 pixels and let’s preview again. All right. There we go. We have a little bit of separation that looks a whole lot better. What you might not like is that these cards are all different sizes. Well, that’s fairly easy to change. You can see this one’s really small, this one’s really big, and go ahead and fit them into rows.
And let’s go and preview this. All right. There we go. Now, everything is the same size. The next section down is for animations. So by default, everything’s going to kind of ease in and have a nice, smooth transition. We can do more aggressive animations if you want. We can do a flip in. We can do a rotate in from the top. You get the idea. It’s a lot of the standard animations. They have a really nice style to them.
I think they’re nicely done. Now, if you perform a query, there will be a second where the content loads and they’ve added in a lot of really nice little loading animations for you to choose from here.
My favorite one is probably this Pacman option, right? So so as things are loading, we can have Pacman eating some pellets here. Of course, that can change the color. Obviously, Pacman is not going to be blue. Let’s make Pacman more of a yellow color. There you go. That looks pretty legit.
And finally, we have a customization section where you can add in your own sixths or JavaScript if you need to.
All right. Let’s go and see if change is here and see what this grid looks like. And then for the last part of the video, we will look at facets and how we can sort through some of this data and go ahead and add a new page. We’ll open this up with Elementor. I do have the Elementor add on installed and because that add on is installed, you can see the WP Gridbuilder elements here. Let’s go ahead and expand this.
We’ve got both grids and faucets. I’ll just go and drop the grid into my section here. This is right up at the top of the screen. Let’s add a little bit of margin. Got it down below the navigation.
Now, the next thing I need to do is choose the grid. So I’m going to use our demo grid pulls in the concept and you can see exactly what it looks like. Let’s go out and check this out on the front end. All right. So you can see as the cars load in, they have that animation I left off on. It wasn’t necessarily the one I wanted, but as a nice little feel to it, as everything loads through the page in this particular situation, with the thumbnails as busy as they are to attract clicks on YouTube, it’s kind of hard to be able to see what these tags actually read.
I definitely would remove these before using it on a site. All right, let’s talk about Faucet’s, because this is probably the easiest part of the entire application here. We’re just deciding how we want people to be able to sort through things. Let’s go and create a new fosset. I’m going to call this one demo search. Well, we’re going to do here is just add a search bar. And so let’s go over to behavior. We have five different fosset actions.
We can either filter content, we can load content, we can sort content, we can apply things and we can reset things. So right now we’re going to filter content or have a search field, get some placeholder text.
As far as the other options, we’ve got search engine down here where we can choose between WordPress and some other third party search engines, which I don’t have install right now. So we’re going to go with WordPress search.
No has to do with how hard you want your database to be queried. Right. So if you’ve got. Thousands and thousands of posts, you might want to limit the number of results that can show up because more than likely people are only going to look at the first few anyways. And it would really slow on your site to have a lot of database queries going on with thousands of items. So they’ve got a limit here of two hundred. And that’s just fine by me.
You could probably even reduce that a little bit further. For most sites, they don’t have thousands of posts. We can also turn on instant search, which I really like. So as you’re typing, you can see the results start to show up right there on the screen. All right. So back over at Elementor. Let’s go ahead and add in our fosset. I’m using Elementor here, but I want to stress that you can do this with any page builder using shortcode, or if you’re using Gutenberg, you can use their Gutenberg box.
You don’t need to use Elementor to use this plugin and choose Fosset. I’ll just drag this to the top of my grid. So this is basically to elements inside of Elementor. I’ve got the grid element and then I’ve got the fosset right here. So we’ve got our demo search up here, but we still have to assign it to search a particular grid. I’m going to go down to the demo grid. Now, this search box is going to search this grid.
Great. Let’s check it out. Let’s search for a simple feature requests. So I didn’t even press return there. I just typed in simple feature and I got two results. So we obviously found the one that’s most relevant. First, because the simple features as the very first names of the title. But I also found a story we review here that I must have said simple and features somewhere in the article. So I pulled that one in as well.
So search is working really well, but what if we want to sort by different types of content so we might have podcasts as one post type? We might have guides is another post type, we might have a blog post as another post type. How could we do that? Let’s create another fosset. Let’s go to create Fosset.
I’ll call this one demo post type and we’ll go over to behavior. This time we’re going to go with checkboxes. The data source is going to be WordPress fields and we’re going to search by post hype’s. Let’s go ahead and save this back over and Elementor we’ll add a new fosset in honors like Fassett. I’m going to choose post type and I’m going to sign this to our demo grid. And there we go.
We’ve got two different post types. We’ve got reviews as well as premium content. Let’s go ahead and update here. All right. That looks pretty good, but obviously I like this to be in line.
So if I had a lot of different post types, it would take a lot of space on the page. So let’s open up Elementor again. There’s actually an option to style that right inside of the widget. Let’s click right here.
And if I go over to the style options now to get this looking like Pat Flynn’s website, I’d have to replace these checkboxes with some icons. Definitely something you can do with a little bit of custom CSFs, but this gets us about eighty percent of the way there. So Gridbuilder WP give me the type of tool that will work with.
As creative as you are, obviously you can look at other people’s websites and try to reproduce some of their functionality as we did in this video.
But really just about anything you can dream up, you can probably squeeze Grid Builder into recreating it for you in terms of displaying posts anywhere.
In my experience using Gridbuilder WP, I did run into a few other UI glitches as an example, when I only had one grid created, I couldn’t select it inside of the Elementor widget. I had to actually add another grid, even though it was just blank before it would allow me to choose that one. And then I could go back to the first one that actually created that seem to be consistent.
Even when I tried Faucet’s I had one fosset. I had to add a second one before I could go back there. So there’s definitely some little bug in the code right now. Sounds like an easy thing that they can fix on their end. I had a really good experience with their customer service. I emailed and asked a few questions. They didn’t know at this point that I was going to be producing a YouTube video. I simply was a paying customer asking how do you accomplish a certain thing?
They wrote back with some custom code that I could use a copy and paste it in, modify it as needed. That happened all within about sixteen hours.
So given time zones, I was really impressed with their level of commitment to their customers. So assuming all of the rough edges get polished up as an example, those icons that we saw inside of the car builder, they can work out all of those details. I can really see this becoming a valuable part of my WordPress building stack. I’m going to go ahead and give Gridbuilder WP an eight point three out of ten. I think this is a great plugin that just about everyone can handle.
It’s a little on the techie side, but definitely not too bad. I hope this video’s been helpful to you. If you want to go ahead and grab a copy of Gridbuilder WP, I’ll have my affiliate link in the description. Doing so kicks back a little bit. Funds here to the channel cost you nothing extra. Do you have any questions? Comments. Make sure you leave your comment down below. Or don’t forget to check out the Facebook group.
That link will be in the description as well. I’ll see you in the next video.
