We’re going to take a look at how to work with the various different mobile options inside Brizy Cloud now Brizy differs from a lot of the other builders out there and how it handles mobile and responsive layouts. So, first of all, let’s take a look at how we can actually switch between the different views to see what our design is going to look like. If we go to the bottom left hand corner we’ve got the option to switch views. If we select that we can switch between desktop tablet and mobile, let’s switch to tablet view, and you see now. This gives us a representation of what our design will look like on a tablet.

We can do the same thing again and switch over to mobile and again we get a representation of our design. So let’s go ahead and switch this back now to our desktop view. Now, when it comes to working with designs across different types of devices, Brizy works on a principle called instancing, and what that means is we can change various different parts of our design based upon different devices. Things like fonts colors, those kinds of things. So let’s say we’re happy with the design layout on our desktop.

We want to change a few little bits and pieces for basically tablets. Well, let’s go ahead and switch over to tablet view, and all we’re going to do is we’re going to take this section and we’re going to change the background color of it. So we’re going to do is come up with a section click the options and inside there we’re going to choose our background. Color. Let’s choose that now we can go ahead and create a custom color or we can use one of our global colors.

We’ll choose this sort of minty kind of color from our global color options, and you can see now the background changes accordingly. So now, when we go ahead and switch back into desktop view, you’ll see the background. Color is the same as it was originally. The white color, we switch it over into mobile view. Again it stays as that white color.

However, if we switch it back into tablet view, you can see our minty green background. Color is set inside there and that’s just the instance. In other words, when we’re working with a tablet view, the instance is slightly different. We can do the same thing when it comes to fonts. So, for example, we can select the fonts being used here, we’ll come and choose the T for typography and we’ll change something about this.

Let’s just set this to be something like heading 1, We’ll change the typography and we’ll change the line height. So now we switch back into a different view. For example, desktop you can see, the typography is back to its original format and the same goes for mobile view. However, when we switch back into tablet View the typographic changes we’ve made are in place, so you can use these options to very quickly create different design tweaks to each of the different devices. You want to display your website on now.

These are relatively simple changes, but we can do more than this with instances, let’s go ahead and scroll back up to our top section. Let’s just take this little subheading area. Let’s say we want to hide that based upon, if you’re viewing on a tablet or a mobile, let’s select it and we now have the little eye icon. Let’s select that and you see that now hides it. If we switch back to our desktop view, it’s back there if we switch over into our mobile view, it’s also still there.

So all we need to do in our mobile view is, do exactly the same thing. Select it choose the eye icon and now that’s been hidden on tablet and mobile view, but still available on the desktop. There’s one more thing left to show you when you’re working in these kind of responsive modes and that’s the way the interface changes to give you only the options you need for that particular view. So, for example, let’s go back and switch back to our desktop view. Let’s select the typography for our heading and you can see inside there we get the full complement of all of the options available.

The same goes if we select the button. All of the options are available. However, when we switch over to desktop or Talent view, we now get a streamlined set of tools. So again, let’s set that we’re heading and you can see inside there now we’ve got far less options. These are the options you can change when you’re working in one of these responsive modes, so visibility, typography alignment and so on.

The same goes if we select the button again, a more streamlined set of options and finally, the same holds true. If we’re dealing with columns, rows or sections you’ll see, we get a streamlined set of options, ones we can use in this particular responsive mode.