Responsive Design

A very important aspect of building a web page is making sure that it is responsive, and that means it looks good on desktop, tablet, and mobile. And the builder comes equipped with a number of features to help you with that. The first of that being the different responsive development modules. By default, we get into the desktop version, which is where you're going to design everything. But then you go and check it over in the sidebar on the left, and you select tablet and mobile to view it on these devices. This is how it's going to look on tablet, and this is for mobile. Let's quickly talk about what it actually means when you go to these responsive views, and I'll select this heading that I've created here at the top. And then from here, we go to tablet. When I selected this time, you will see that I have a reduced context toolbar, and this allows you to only change the things that you are allowed to change within the tablet and for mobile. Same when I go down to mobile, when I select it, you will see again that we have this reduced toolbar.

And these three displays work independently of each other. So what you can change in tablet and mobile will not affect the other displays at all. This will also depend on which element you are working with. If I select a button and I go to tablet, you will see that we have different features here depending on what element we have selected. In this case, let's make a few changes so you can understand how it will work. I will go to the text and I will reduce it to 16. Let's do the same for this button. We reduce that also to 16. And then let's go for this button and we also go to the size and make the width a little bit smaller. And same for this one. And you can see immediately the two buttons now fit nicely next to each other. And that is what responsive design is all about. Another great feature, though, is what you get when you're working with columns. I have these two columns here, and they are spaced at 50% on the left and 50% on the right. Dropping down to the tablet display, maybe my image can be a little bit smaller.

This is where the column responsiveness really plays an important role. Grab the handle bar in the middle and drag it to the left. And now I can go and grab the handle bar for the column on the right and drag it all the way and free up a lot of real estate. Again, here with the column, I have the settings like putting it in the center of the alignment within that column. And go back to desktop and you will see that we still have the same arrangement that we had on desktop. The columns also play a different role once you go into mobile, which is stacked. Now, stacked is very standard. When we work in mobile display, it just looks much better. But there could be the opportunity where you would like these columns to fit next to each other, and then you do the same. You grab the handlebar and you make these guys fit in next to each other. In this case, definitely It's basically not going to work. I'll undo that, Control Z, Command Z, two times to get back to where we were. What I would like to do here, though, is to change the order of these columns, reverse them so that I have my nice big heading at the top and then the image at the bottom.

With the two columns that are adjacent or any amount of columns that are adjacent to each other within the responsive display, go to the settings, and then you will see you have the reverse columns option here. Select that, and it reverses it. Great. Go again to tablet, still in the right order, same as on desktop. Let's go back to mobile. The next one in the toolbox is to disable certain elements to display on the various displays. In this case, I've decided that this image here is not suitable for the display on my mobile device. I'm just going to remove it so to free up space again on the mobile device. I can select the image or I can select a column. Column. In both cases, you're going to see this little eye icon on the left that appears in the Context Toolbar. Because this is housed inside the column, I will select a column. And now when I select this, it will hide the element. It's not gone, it's just not shown. And if I go up to my tablet, you see it's still there. And same for desktop. Now, after a while, I decide that actually I want to bring that image back, but you can see we cannot see it here at the moment.

To interact with it, go to the toolbar in the bottom right corner, and you will see you have this option here to show hidden elements. When I select that, that element that we have hidden, which is effectively the column, displays, but it displays in a blurred fashion. And that shows us that this element is actually hidden. If I want to bring it back, select again the element, and now you will see we can just uncheck that one, and it's brought back to life. If you go to desktop view for any element or even the block, you simply go to settings and then styling, advanced, and here you have the option to show on desktop. It is blurred, telling us that it will not display when on desktop, but if we go to tablet, it's still nicely there, and the same for mobile. These tools give you all the flexibility you need in your responsive design.