Switcher

Before we look at how to work with the switcher element, let's have an idea exactly of what the switcher element is all about. Here I have a very standard pricing table that we often see on a web page, but we can switch this up to something that you've also seen before, and that is a toggle option. Now I have this switcher or the toggle at the top, and I can jump between these two pricing options. And that is what the switcher element is all about. Back in the builder and a quick word about the switcher element. Let's bring it in first from the add element. And under essentials, we go down and we find the switcher over here. Click, hold, and drag and drop it where you want it to go. As it comes in, It's actually very unassuming. What is important to understand about the switcher element is that it is a container element. It brings functionality in that it can switch between different content, but how that content is built out is exactly the same like we've been doing in the builder from the beginning. There is no rocket science here. Under tab one, there is currently an icon by default, but I can bring in any element over here and I can build out complex structures here, like bring in columns, put text in those columns, put columns within columns.

The world is your oyster in how you want to build that out. Then if I go to tab two, I simply click on it, select it, and again, I can go ahead and style it out with loads of options in how I want it to look. How to build out the content? That's up to you. But let's have a look then at the functionality of the switcher. Let's have a look at how we style this out. The switcher toggles between two options. By default, it's called tab one and tab two. Select the text inside and you can call this option number one, and this one is option number two. You'll note that it's a little bit squashed. Go to the settings, and over here you have the width in pixels for your switcher. Next to the settings, you have control over the colors for the background text as well as the active parts. So if we select background and I go to pink, you will see it's the background of the switcher. And then the text, if I put it on yellow, is the text of the background. You can also add a border. Let's put a yellow border as well, which we don't really see.

Let's make it a little a bit bigger at five pixels. And you can add a shadow. Click again on background, and this time we select the active part. This is the switch that we are currently observing this content. Let's make the background white And then for the text, let's make that blue. If you select T for text, here you have your normal topography settings. Let's choose a different font. Let's put it on something a little bit more darker, like bold, and we can increase the size. Space. Decrease the letter spacing, and I'll just put it back on something like medium. Much better. Then when we go over to the switcher options itself, we have the option to go between two styles. Before that, let's just look at what the spacing is all about for this specific style. As I increase the spacing, you will see it adds space between the switcher and the content. A nice way for a little bit of separation. You also have the option to bring in icons, and this will be done on a switch-by-switch base. Select this one, bring it an icon, and let's increase the width a little bit to accommodate the extra content that we've brought in.

Select the switcher options, and let's go for the second style, which gives you a basic toggle switch with the text on the left and the right. To interact with it, do not click on the switch. The switch will just toggle between the left and the right options. Click on the text. I'll first change the color because the text is not working at this moment. And for the border, I will just remove it from the color picker, select none. Go back to the options. Again, we have the spacing that gives you that gap between the switcher and the content, and then you can add icons as well. What you will note, though, is that the icons and the text that we added for the previous style does not appear here. I have to change the text here separately, so I'll call this one another version, one, and another version, two. If I then go to the options of the switcher and I select the first style, you will see that the text and the icons are kept over from the first style, and the second style is independently. Apart from this, if you go to the bounding box options in the top right corner of the element, you will see that you have settings, the normal padding, margins, as well as duplicate and delete.

If we switch over to responsive design, let's first go to tablet, select the switcher, and you will see that you have here responsive design over the spacing between the switcher and the content, and that you have more control over the position of the icon. You can put it at the top on the side, and you can increase the size and as well as the spacing. This is also available in the desktop option the moment you have selected an icon. With the responsive design, you can set these independently. If I put it on the right here and I go to tablet, you will see it's still on the left. I can put it here at the top. And if I check again at desktop, they are still on the right.