Text

The most important content on your page will be text, and that is done with the text element. There is one element called text. This element creates both your headings as well as paragraph, and it's done by selecting a style under topography, and that is done within global styling. So remember, you want to do a heading, text element. If you want to do a paragraph, text element. Let's bring in a new element to see how comes in by default. Click, hold, and drag, and drop it wherever you see a thick gray line, and it goes onto your page the way you want it. Select it to interact with it, and it comes in with some placeholder text as well. To change out the text. You simply select it or you can hit Control A, Command A on your keyboard to select all and bring in your own text. As with any other editor, you have all text editing features here. Let's do alignment first. You can to the center, to the right, or to the left. You can also set the text in bold, italics, underline, strike through, and put it in uppercase. Text can also be linked.

The entire element can be linked to a URL, another block on the page, a download file, or create a pop-up, or you can select just part of the text and only link that part. Whenever you are doing this styling, you do not need to select all the text. You can simply just put the cursor anywhere inside that text. For that, we can go to topography. And if I change that from any of these fonts that we have here, you will see that it applies to all of the text. That's also for the size, line height, letter spacing, as well as the weight. If you have pre-making Made styles, you can select that from under topography. You'll note that the text element comes in by default, set to the paragraph topography. To change this out, you will go to your styling and change out the paragraph default here within the global styling. Colors allow you to change the color of the text, and you can also bring a shadow and even apply a mask if you're creating big, bold headings. The text element has a super powerful feature that's a little bit hidden, but something that you will definitely use, especially if you're using a lot of text and working with paragraphs.

You would think that if you want to create many paragraphs under each other, you need to bring in a text element each and every time, copy the paragraph and that, and create a nice paragraph structure like this, but not necessary. Let's delete these three first. And we go to this text element, put it in bold. And like before, any changes we make, you know that we just need to put the cursor there and it will apply to all of the text. The magic starts happening the moment you press Enter or Return on your keyboard, which effectively creates a new paragraph. And by creating a new paragraph, you create a separate text element which can be styled separately as well. Select the top one again. Remember, there's a line break over here. Put your cursor anywhere in the top two lines and let's put it on bold. Note that only this sentence became bold and not this one, because the element actually sees this as a separate element within this element. Let's choose the one at the bottom. Select bold, and you see only this one is applied. Once you have created paragraphs and you want to apply any of these styles to all of them, you do need to select all of the text.

You can do that with a shortcut key like control A, command A. And now when I select B for bold, you will see all the text is affected. This also applies to other settings. Let's go to Color. First, select this top line. We go to color and choose the blue, and you will see it only affects the top line. If you want to change all the text color at the same time, select them all and change out their color. Another feature opens up for you when you are creating these paragraphs. Let's enter and create two more lines. I'll just make this a capital T and this one also. Now we can create lists. Select all the text and from the options toolbar, select next to our alignment for list. The first time you click it, it will give you a numbered list, and the second time you click it, it will give you bullets. The third time, it will revert back to no lists. Create designs that look very intricate, just like this one, but actually took very little work to accomplish. If you need some more inspiration, Simply go to the pre-made blocks and have a look at all the feature blocks there on what you can do with text elements.

A final cool feature within text is the Gap Above and Gap Below feature. Let me show you how that works. We bring in a new text element. And what I will do is copy this text. I'll press Enter within it, paste it again, and again. So we have four paragraphs there. And with the Gap above or Gap below feature, we can truly create paragraph layouts. Select all the text and then go to the settings in the toolbar and you can set the Gap above here in pixels, and you can also add a Gabelow. Great ways to structure your text and add some space and easily create good-looking paragraphs. Also, remember that when you're working with your headings, go to the settings and set your HTML tag over here. You can set this independently from the text element. But by default, whatever you are using over here under topography, heading one will be assigned to H1, heading two, H2, and so on. But you can delink that from it if you want this H1 heading to actually be an H2. Before we exit this tutorial, remember to always go and check on your tablet and mobile displays at how text will look.

That's crucial, especially for your headings. Text gives you the following settings that you can use when you're making responsive design that will not affect the other displays. That is your topography as well as your alignment.