Line

Use the Line Element to bring a design element to your page or just to create separation. From the Add Element drawer on the left, we grab the Line Element, hold, and drop it where you want it to go. To interact with it, select, click on the Line again, and you will see that you have these handlebars on the left and right that allows you for easy resizing of the width on the page. More control, you go to the options toolbar and select the settings and you have the width here to 100% or down all the way to what is required. If you want full control over the pixels, you can put it on pixels. Just take note that percentage is always good for responsive design as it will respond with the size of the screen. Let's have a look at what the line element can do for you. Let's go to Style. And under Type, you have a number of styles that you can choose from, dashed lines, dotted lines, double lines. And as you scroll down here, you're going You see there are some stylistic ones as well that can bring a little bit of flair.


And once you choose any of these, you have a few more options here that appear at the bottom. The weight will determine the thickness of the style you are working with. The amount is a stretch, and then you also have height. When you work with the normal line, the one at the top, you work only with height, and this can create a little bit of thickness, again, for your styling needs. I I will align this one to the left and then just click again on it, drag it a little bit down, go to the height, and now I've increased this little bit of a design element separation on my page. There's more to the line element. In fact, there's two things more, and that is that you can add text or an icon within the line. I'll decrease the height a little bit, and then let's select text. Once that happens, you see that we have text that Here is in the middle. If you select text here from the drop-down box, you will see that you can align it to the left and then to the right. Then you have a leader. The spacing here will be the distance between the line and the text.


Change out the text is exactly how you would do with any other text in the builder. You select it and type in your new text. Now I'll go ahead and I will increase this again. And for this instance, I will put it on the left. As simple as that. And you will have separate control once you bring in these other styles for color changes to the text, to the line, and in some cases, you may even add a shadow. The final one is font. This will give you the option to use a font. I'll put it in the middle. I'll switch out the font. Look at that. A great separator with a design element for your next Valentine's design.