Building Dynamic Websites with Gutenberg and Stackable | Page Builder Summit 3.0 Talk

Hi, welcome to my talk Building Dynamic Websites with Gutenberg and Stackable. It’s great to be back here in Page Builder Summit again, and I hope you enjoy this talk and I also hope that you learn something new today! 

This talk is going to be like a tutorial video. Later on, we’ll check out our dynamic website. We’ll see how it works and what makes it dynamic. We’ll also try and build this exact same website using only Gutenberg and Stackable. Let’s start! 

So here’s what we’ll be talking about. First, I’m going to talk about the dynamic side of Gutenberg – what tools it gives us so that we can make dynamic websites. And we’ll also talk about what Stackable adds to Gutenberg and how it expands these tools so that we can make even more amazing dynamic websites. 

My name is Benjamin Intal. I’m the founder and lead developer of Stackable and I’ve been developing in WordPress since 2010. Before we begin, please note that this presentation is pre-recorded. But if you’re watching during the summit, I’ll be in the chat. So if you have any questions, just type them away in the chat window and I’ll try and answer them.

So going back to the topic of this talk, it’s Building Dynamic Websites with Gutenberg and Stackable, but before we begin with all the dynamic content stuff, let me first introduce you to Stackable. So Stackable is a plugin that’s a companion to Gutenberg. It gives you additional blocks and when you use those blocks, they can give you page builder capabilities.

So in order to build a dynamic website, let’s first answer the question. What is dynamic content? So first it’s a bit obvious, dynamic content is content that’s not static. So if you’re building a page and you added a text block inside Gutenberg and type something in there, when you hit preview, you’ll see in the front and the exact text that you typed. Now that’s called static content, dynamic content is not that. 

So second, dynamic content changes depending on the content or your visitor. So this means that when you have a new post, your front page maybe changes, or maybe when you have a returning website customer, something new is presented to them. Or maybe a person that’s a first time visitor, there’s going to be a Call to Action, asking them to register

Lastly, dynamic content references a value somewhere else. So easy examples of this, maybe the name of your website or your website tagline, since those are stored in your admin settings. 
Now let’s check out an example of a dynamic website. I have here, a home vacation rental service website. It’s kind of like a rudimentary Airbnb type of a site. It has a listing of posts, each of which is a home that you can rent out and then you can click on one and that would open up its own page that contains more details. It’s a simple site, but it has a lot of dynamic things going on, which we’ll go through one by one. 

So here’s the website. This top hero area over here is not an ordinary one. We have here some static content. This “Book A Vacation House”, but the picture, some of this text, as well as this button over here, these are all linked to the latest post or the latest house listing in the site. 

Okay, going further down below, we have here some design elements and then followed by some list of recent houses. And then you have here some nice effect when hovering over each card. Further down below you have here some logos and then a Call to Action prompting new users to register to the service. So this one over here, it’s hidden for existing users. So if you are logged in, you shouldn’t be able to see this, but since we’re a new user, we could see this and we are prompted to visit the register page.

Below it is just a simple footer and then going back up. So this one over here is linked to the latest house or the latest post. So as you can see – remember this picture, this one is the same as this one. So this is the latest post. This is the second latest and the third. So if we click on this button over here, it brings us to the page of the post.

So this one is a simple one. We have here, the featured image, the title, we have some meta-description of the house. So this one has seven rooms, it’s available anytime, it’s not pet friendly. And you have some description of the house. And then also an inquire button over here. This one is dynamic as well. So it’s tied up to a Google doc right now, but it’s prefilled with a post ID.

So let’s try it right now. I’ll open it in a new window. And then as you can see here, it’s a Google doc and then it’s prefilled with the house, the ID is 158.

Okay, going in further down, you have here a tooltip for help. So it has a link to the phone number and the email of the service itself. So this one is dynamic as well – so it pulls from a central area for the phone number and for the email address. And then next down below, these are the other listings. So you can use this to visit the next ones as well.

So this one is Rick’s Resort. Just try also, just to show the Google form is filled with another ID. So clicking this one, it shows 52. A while ago I think it showed 150 something. So that’s our dynamic website. So let’s start building this from scratch.

So we’re going to start off with this blank website. Right now it contains nothing in the front page and I have Blocksy as my theme and I have Stackable premium activated. To get started quickly, I also have a few posts ready, but these are just sample posts with a feature image ready, a title, and some description. But as you can see, the front page is blank. So now we’re going to recreate the other website, a website called Beach Houses. And we also made it a bit colored green so that to be a bit different from the other website that we’re copying.

So let’s start and go ahead click the edit button. Also, I have some custom fields turned on over here. By default, those are disabled in Gutenberg, but if you want to turn them on, you can go ahead and click the options button > preferences. Head over to panels, and then you can turn it on over here. We’re going to use that later on.

So now let’s try and create first, the first part, this one. So this one is a featured image of the latest post and this one over here, it’s the title of the latest post. And this one directs to the URL of the latest post. Let’s start of by adding a columns block. So this one is a native columns block and the Stackable blocks, you can identify them since they have this reddish icon.

So let’s go ahead and add a Stackable block. So let’s make this tall first – 700. Let’s also add the background, so now it’s gray. And now let’s add an image. So if you want to add images, you can just click on this and then pick an image from your media library. But for us, since we want to make this a dynamic image –  that’s attached to the latest post, we can click on this dynamic field button over here.

So for our purposes, we want this to be the image of the latest, very latest post. So we have here a bunch of fields, but for this one, we need the featured image and you can also choose the image size. For now, choose full. And as you can see, now we have the featured image here.

Next let’s try and achieve the design of this one. So over here you have some white space followed by the picture on the right. So to achieve this kind of effect. We can add a gradient and then change the location of the gradient and make the gradient abrupt. So let’s put that to the other side, but it’s a bit transparent, so let’s change the tint strength. 

So now let’s add the text. So let’s add a heading so you can choose the native heading, but for now we’re going to choose the Stackable heading. So it says Book A Beach House. We’re going to make it bigger. And the next let’s add some texts, but let’s refer first to the other design.

So over here we have this static string and then followed by the title of the post. So we can do that by typing the static string here, and then to add the dynamic content, you can see also the button over here, click it, and then look for the latest post. And now we can add the post title. You can also turn this on to make it to a link, but for now let’s just display it as is.

So next let’s add the button. So let’s first see what the button looks like. So it says Learn More and when you hover over it, it becomes a bit gray. So let’s try and do that – Learn more. And for now let’s make it green and when you hover over it, nothing happens. So if we want to achieve the darkening effect, we can click on this button to change the hover state, let’s make it to hover, and then pick a darker color. So there, as you can see it became black. And then if you go back to the normal state, you can see it’s now back to green, and if you hover your mouse over it, it changes color. 

Okay, now let’s put the link. So let’s click on the link panel and now you can see also the dynamic fields button. Let’s just click it. Same thing. Let’s go to the latest post, the first latest post, and then now the post URL –  click apply. And now this one links to the post. 

Now what’s left is let’s try and align the content. Now let’s look what this feels like in the front end. So now it’s a bit centered and then the one we’re trying to copy it’s full width. So let’s try and change that.

And this one, the content goes to the side – let’s change that as well. In the columns, you can change the content width to be in the center, wide or full, so let’s make it centered. There, okay it’s close.

Next, let’s do this design element over here. So these are what you call Icon boxes in Stackable. There’s something that you can drag at the bottom of every block. So this is the bottom margin of the blocks, and you can drag this to change it easily and you can hold shift down if you want it to stop at eight pixel increments. So let’s add this as 96. 

And let’s add an icon box. So let’s refer back. So we need three columns. So what we need to do, if you want to put this inside a column, you can just click on the transform and then click on columns. And what that did is it added the icon box block inside columns. So now, if you want more columns, you can just slide it here. So now, if I want three columns, I’ll just drag this and now I have three columns.

One good trick with Stackable is that you notice if I slide this slider, I get new blank columns. But we have this button over here that you can toggle on and if you have this turned on any new columns that you create would duplicate the last column. So it’s one way to duplicate your content easily. For now, let’s just leave it as is. Let’s check it out in the front end first.

So next, we have our listings. Let’s add our subtitle over here and our title first. So in Stackable, you have a subtitle block, let’s add that. And next we have our heading, which says Our Listings. Our theme adds some margin at the top of the heading. So let’s remove that and then we can make the text bigger. These two are not together like in this website, so we can remove the margin here. Okay. Oh, these are too close. So what we can do is add more margins here also.

Okay, so next, what you need to add are these latest posts. So what we can do is we can use one of the latest blocks in WordPress called query loop. So what this block does is it creates a loop of posts in such a way that you can design just one and it would apply the design on the other posts inside the loop.

So right now, in our query loop, we have a title, the content, and the read more link. And as you can see, it’s repeated three times. So if I change this block and add some text, as you can see it’s repeated to the other posts as well. So this is a very good feature if you want to display multiple posts and without repeating your designs again and again. So you just have to design the first post and the design would be carried out to the other posts.

So for this one, since it’s laid vertically, we can change it to a grid. Next to achieve this look, what we can do is either build it from scratch – we can use a column, add an image, add the title, text and then button individually. Or if you want to make things easier, Stackable has some pre-made blocks. So this one looks like a card, so we can use the card block of Stackable over here.

And you have different looks, so let’s choose the default. So this by itself just displays static content. So if you preview this, it just shows the same text again and again – it doesn’t follow the posts. So what we need to do is use the dynamic content. So let’s remove this first and then for the picture we’re going to go to image and then the same thing as with above, we can use the dynamic fields button. 

Since were inside the query loop, we can use the dynamic source as a current post. So what this one does is it targets the current post in the loop. So if we choose here featured image and let’s make it smaller, it will display the featured images of the posts. 

So it’s a bit blurry, let’s just change it to large. Okay. Now next, you can make this the current post and let’s use the title. We can also make it a link.

Next into the design, it doesn’t have a subtitle. It just has the excerpt and the button. So let’s remove this one. And then for this one, let’s change it to the excerpt. It’s a bit long, we can make it shorter. And for the button, we can make it also linked to the post. And then let’s change the color too, and make it dark on hover. Let’s check it out, looks the same.

Okay next! So if you notice over here, whenever I hover my mouse over a card, it gets a bit of shadow. So we can do that as well. So let’s select each card and then you can change the shadow of the card here. But by default, we wanted to have the normal shadow, but then on hover, we wanted to have a darker shadow.

Okay, it works. Next, let’s create this area of logos. So it’s just a bunch of images all in grayscale and in columns.

So let’s add some columns. You started off with one column first, let’s add an image.

Let’s use this picture. So it’s very big, let’s adjust it later but for now it’s color purple. And then this one they’re grayscale so let’s try and adjust it right now. In Stackable, we have image filters so we can set it to grayscale and also we can make it brighter. But in this case, this one becomes white. So let’s just make it more transparent.

Now let’s select our columns. Let’s do the same thing we did before – to duplicate. Let’s make sure this is turned on, let’s say five logos, and then we can click on each one and then just change the logo. So since I duplicated the columns, I also get the same effects carried over to the other duplicated columns. 

So I can just change the picture and then we also get the filters and the opacity. There, so we’re still missing – they’re not center aligned. We can also change the column gap to make this a bit smaller.

Okay! So the next part is this one –  Register Now to Book a House. So again, let’s just make a column. And then let’s make it dark and full width, and then we add some heading, what does it say? Register Now to Book a House.

Let’s try and change the color. Okay. And then let’s add a button. And for this one, since we have a dark colored background, so make it white and I think we also have an effect so let’s apply it too.

Now let’s center all the content. And maybe let’s also add some alignment – some paddings I mean. I think these are too close together, so let’s add more paddling, more margin. Probably on the top as well.

Okay! So another thing is we only want this one to appear for new users. So in Stackable, so let’s click this one first and in Stackable, you have conditional display. So what this one does is that you can show or hide this whole block, depending on the condition that you specify. So we have a bunch of conditions over here, ranging from login status, the role of the user, date, some custom PHP, conditional tags, post meta, and even data about the post.

So for now, since we only want this register call to action to appear for people who are not yet logged in or who are not yet users just choose login status and let’s show it only to logged out users. So let’s see what that looks like.

Okay. So now we can’t see it. However, since we’re just editing it, let’s add another condition so that it would appear for us – role administrator. So now this block would appear for logged out users or for administrators. Let’s see if it worked, okay, so this is our final page. Just try it out.

So this one is the latest post and this one goes to this post and then we also have a listing with each of these buttons going to their respective posts. We also have some subtle hover animations over here. Then we have some logos and we have this call to action to only show up for logged out users.

Okay! Next, let’s design what’s inside. So let’s check our reference. So in this one, you can see the featured image, the title, some metadata, the content, and a button that redirects to our Google form with the post ID filled up, some help information and another listing that shows other posts, which isn’t the current one.

So let’s also build this one. Right now, what we have is the featured image, the title, and then the content, and these are all specified by the theme. So let’s try and edit this. So this is what it looks like. So there’s two ways to approach this. The first one is using reusable blocks. So let’s go back.

So the way to do this is, we can create a reusable block for this one. And let’s always prepend it before the content over here. And then for the bottom part, this one, since this always appears across all the posts, we can also make this bottom half into a reusable block and then also put that at the bottom of every post.

So that’s one way to do it. The other way to do it is through Full Site Editing, which I’ll show later. But for now, we need some custom fields.

So for the custom fields we have rooms, availability, and is it pet friendly. Let’s enter a new name, let’s put rooms, and then for this one, it’s a guard house – so let’s put one. Add another custom field, availability – everyday. Add another one, pet friendly and let’s make it, yes. So those are our custom fields.

So right now, since I added the custom fields, if we preview in the front end, you can’t see anything. It’s just the same image, title, and content. So to make the custom fields appear, what we can do is create some texts. Let’s make this a subtitle – so why subtitle? Because subtitles have some pre, some styling already applied to them.

And next let’s add the custom field. So I’ll choose the current post and at the bottom you see here the custom fields that we just created a while ago. And then let’s style it – let’s say it’s a normal text instead of subtitle, and then let’s make it bigger and let’s make it bold as well.

So let’s try and copy the style of this one. So this one, we have three columns and some containers, so let’s select both. Let’s put them inside columns and then while inside the column, select the column first or another easier way to select the columns is here. Let’s add a container and we can just repeat this. Oh let’s center everything, and then the next one is availability and then let’s change the data and then let’s change content – availability. 

I have one here. I have another here. There! And the next one is- is it Pet Friendly. There! Let’s see what this looks like.

Okay so next below the content, we have here an Inquire Now button that goes to the Google doc and it has some prefilled data. So how we achieve this prefilled data is that when you click on it, the button goes to this URL, but with the post ID appended to the end. So let’s copy this one and let’s try and do that.

So a button – Inquire Now. Let’s make it green, with the same hover effect, put the link. Just choose the post ID but now we can add a custom format since if we hit apply, what’s going to happen is the button will link to the post ID, which is in this case 191 here. So it will go to slash 191.

So we don’t want that. What we want to do is add the custom format so that we can use our URL and then using the percentage S we can put in the post ID. So hit apply, and now let’s check it out. Now, if we look at the URL of the button, let’s open this in a new window. You’ll see the URL here. Oops. But in the end we have the post ID.

Okay. So the other parts are, we have this one over here – Any Questions About This Listing? Let’s copy it. So let’s make a column so that we can have a container. You have a heading, let’s make it yeah H2 and then let’s add a container. So by default, the container is already white and it has a subtle shadow.
Okay. Next, you want this text over here – Contact us at this number and or email us there. For now let’s move downward so Our Newest Listings. Let’s add another heading here and then for this one, we can achieve this same design using what we did before by using a query loop. But another alternative is to use Stackable’s blog posts block.

So this one gives you a few design options. This one is called portfolio design. It’s already a pre-built design, you can remove some of the stuff since in our reference, we have just the title with the label view House, so we can remove the other items. Let’s keep the Title, remove the Category, Excerpt, Meta. The Read More Link, you can make it to View House. And then since it displays three, I can make it only display two at a time and then two columns. Let’s remove the extra paragraph.

Okay, oh, there’s one mistake. This one shows itself so we currently are in the Old Lifeguard House, but Our Newest Listings area over here also shows itself. So to remove that, let’s head back to the posts and then in Query we can hide the current posts from the list. So if you check this, it hides itself, the current post. So let’s try it out, there!

Okay. So we’re done with one post. However, it will be very tedious if you carry it over to the other posts. Since the other posts look like this, they still look the same. So one way to carry over the design to the other posts is by converting this one into reusable blocks. So let’s name this House Information. That turns it into a reusable block. And now let’s get these blocks over here and let’s convert them into reusable blocks as well. So let’s name these House Footer.

Okay so since those two are reusable blocks, let’s save this. Let’s go ahead and edit the other posts. So the Old Lifeguard House has the correct format, but the Beach Villa let’s check it out. It still has the normal looking post. So to carry over the design from the other one, you can add here the reusable blocks that we just created.

So House Information goes up top. It doesn’t contain anything yet since we didn’t put any custom fields yet. So you can make this part easier by using other plugins like ACF, but for now let’s just type it in.

So this one, let’s say the Beach Villa has four rooms. It’s available on the weekends and it’s not pet friendly. Okay. So it won’t update. It will update when we go back to the page and let’s refresh the editor.

Okay next, we can add the other reusable block at the bottom, the House Footer. There!

So as you can see if we preview this, since we used a lot of dynamic fields, they also worked across their reusable blocks. So this one shows the metadata of this current post and not of the other post that where we originally created the reusable block. So it inherits the post of where we’re currently displaying the reusable block.

So this displays correctly four rooms, everyday, and not pet-friendly at the bottom. They also get inherited as well. So this Inquire button now shows the ID 189. Let’s try it out, here it shows now 189. And then this one as well, got updated and it now shows Old Lifeguard House. So that’s how to carry over the design to other posts, that’s one method.

So let’s try the other method. So the other method involves creating a page template. So if your theme has full-size editing enabled, you will see this template panel over here in the post area. So what this does, it creates a new post template for your post. So let’s go ahead and move over to the other beach house that we haven’t adjusted yet.

So it just contains this. So let’s try and create a new template. So let’s name it, Test Template. There! And let’s see first what this looks like. As you can see right now, we don’t have any styles. It doesn’t look the same as it was before, because if you create a template it’s gonna give you a blank template. So it’s really a blank canvas that you can start from scratch. So it’s going to take a while to rebuild it, but I already created something that we can use.

So this one has some columns ready. It’s styled a bit more like the website already. So if you preview this in the front end, it’s gonna have the header back and the correct content alignment. So let’s go ahead and start from this instead. 

So let’s edit the template. So a while ago you’ll end up doing is to add the reusable blocks again and again, for every post that you create or for every post that you have. If you used templates, you just have to create the template and then adjust it and now all the posts that use the template will already follow the template that you created. So let’s try it out for now. So in our design, let’s go back. So we have the featured image and then the title and then the information after it. So since we already created our reusable blocks, we have here the featured image, the title, and let’s just add the reusable block over here, reusable. So this one also it’s already placed inside the template.

So here, so it’s the featured image followed by the title, followed by the House Information and then the spacer and the post content. And I’ve added also another spacer at the bottom. So let’s just place here the other reusable block that we created previously. So now we’ve created our template. If we update this and you go back, you’ll notice that our post only has the post title and its content and the featured image.

But when you do a preview in the front end, it already has the meta information already here, it’s blank because I didn’t add any yet and at the bottom you also have the Inquire Now button and the other stuff below it. And it also works with the dynamic content. So now the post ID is 183. And if you look at the bottom corner over here, you’ll see also 183 over there.

So that’s another way to carry over your designs across multiple posts. So what if let’s create a new post now.

So let’s add a featured image, let’s say this one. Let’s name this. Let’s add some dummy text, just get this from here. Then let’s add some custom fields and let’s preview it. So if you preview, it’ll look normal without the information, but if we choose the post template that we previously created the House Template and let’s do a preview, it’ll now show the meta information that we had and also the bottom part with the Inquire Now button. 

Before we publish this, let’s just save it as draft. Let’s go back and visit our front page first. What does it look like? 

So right now it shows the Old Lifeguard House at the top, but since we’re using dynamic content to display the latest house, by the time we press this publish button, this should adjust, and show the new beach house.

And at the bottom, these should also adjust and move to the right and make way to the new post. So let’s do that and let’s see if our dynamic content works. Let’s hit on publish and then let’s refresh this. 

And now, as you can see, the featured image changed. Our latest listing now says Deck Beach House. This one links to the new post. Let’s try it out! And let’s go back and as you scroll to the bottom, now everything has moved to the right and made way for our new deck house.

So now we’ve created a dynamic website using only Gutenberg and Stackable. So to recap, in order to achieve this, we got the featured image, the title and the link of the latest post to display on the top of our website.

And below we use the query loop and custom made the design and below it, we added the Register Now call to action that’s only visible to people who are logged out. And inside our pages, we also added some metadata and below we have a button that links to a Google form that has some prefilled data about the current post. And then also we have our other listings over here, which also omits the current post. 

So that’s the end of my presentation about dynamic content and Gutenberg! If you have any more questions that I wasn’t able to answer in chat, you can reach me at Benjamin@gambit.ph or @bfintal in Twitter. If you want to discuss anything related to Stackable or Gutenberg, please do join our active Facebook community.

Or if you want to learn more about the plugin, you can also visit our website at wpstackable.com. Alright, thanks for listening! I hope you enjoyed my talk and please do give Stackable a try. And if you want to reach out about anything at all, don’t hesitate to connect until next time!