Button

The button element is that element that draws the attention of your visitor and a call to action. Let's bring in a button and make this a true call to action blog. I'll go to add elements and grab my button and I'll drop it in the place where I want it to appear. To interact with it, select the button. The first thing we can do is to change the text. Like most text elements within the builder, select the text and type your own text. You have control then for the text over the topography, the font, the size, and later spacing. While we are busy with styling, let's have a look at the colors. You have a color for the background, the text, add a border, and even a shadow if you wanted to be a little bit separated from the background. That's also cool if you're working with hover effect. So for a background, it's always good to have a little bit of a difference for the hover so that when people interact with it, it really gives them that visual indication that this is a clickable element. Next to the colors, here are all the links that you can add to the button.

Many other elements and containers within the builder contain the same link functions. The button is just that pre-styled element where you know this is a button and you don't have to do your own styling and set up. But just remember that all these links, you can get it in a column, You can get it in an icon, and you can even get it in text. Same goes for images and a few other elements. Let's go back to our button and then look at the options. You have the URL where you're going to add your link, and then you can activate it as a new tab or make it nofollow. Also, you can link it to another block on the same page. Currently, I only have this one block, but if I were to bring in any other block, I can anchor it to that block. Let's go to this one. And you will see under block, we have both of these. And if I select this one in future, when people click on this one, it will bring them to the second block. And then you have the option to create a pop-up as well as bring in a downloadable file.

The button settings you access on the left from the options toolbar. You have a few presets for the size. You can go small, medium, large. And then you have control over custom width and height if you have something else in mind that the presets cannot give you. Choose between a fill and outline or no fill, and you can go for presets in terms of corners, sharp corners, a pill effect, and then your custom settings. Add an icon, which you can place on the left or the right, and you can also change the size of the icons with a custom-size setting as well as the spacing between the text and the icon. And the icon naturally brings from the library, you can choose between outlined icons or glyphs. Align to the right, left or center, and from the settings, you have styling as well as effects. Little hidden feature happens the moment you duplicate the button. Duplicating the button puts two buttons adjacent to each other. This makes it very easy to create multiple buttons in line adjacent to each other. If, though, you wanted two buttons, but you wanted them on top of each other and not adjacent, you simply click and hold on the button that you want to move and drag it out of the inline into a new area.

As always, let's go have a look at how this will work on a tablet. Interact with the button, and you see that you still have a few settings in terms of size, topography, as well as the alignment, which allows you to make sure that this button will display properly on the various devices.