Blocks

To bring content onto your page and to start building your web page, you need a container for that, and we call that a block. To bring a block onto your page, you simply click here on this option that says start building your page. You have the option here to create your own from scratch or to use any of the pre-made ones that you can then in the end just swap out your content, images, fonts, and colors to make it your own. This is the Block Manager, and at the top, you will see we have the option to go to Blocks, Layouts, which are pre-made, complete websites, Saved Blocks, as well as global blocks. From the Block Manager on the left, you will see we have a few options here. We have two kits that you can choose from. Kit number one and then Kit two. They can be used interchangeably. Under that, you have styles. If you want to have a light style or if you want to have a dark option, you can also mix these two. Categories is a great way to filter through the blocks to find those that you need for the specific purpose.

At the top of a page, we usually start with a hero, and you can select the dark option to see how these versions will look when they are dark. Then you have features, contact areas. If you're looking for images, you select gallery, and there are many more, from footers, headers, testimonials, the works, a great way to filter through it. To bring a new block onto your page, let's start here with a hero, all you need to do is find the block that suits your need and then select it, and it will automatically propagate onto your page. To remove a block, go to the options at the top right-hand corner of the block, select it, and you can select delete. Let's bring in an empty one. Start building your page and click here on create your own. This is going to give us the container of the block, but with no content, no images, nada. Go to the options toolbar And you will see we have a few options here. Working from the right, the first one is the delete option, which we just saw earlier. Click on delete, it removes the block. Let's bring it back.

Next to that is the duplicate option. If you've worked on a block and you need to duplicate it, use the same style, you simply click here on duplicate and you will see now we have two blocks. We can delete this one. Next to that, you have settings. And this is where you're going to control the width of the block, the canvas, as well as styling options such as padding, margins, and the effects. Right next to that is the save block function. This is useful if you want to reuse a block later and you have done a really good job at designing one and you want to keep that, then you will save it and it will appear in the block manager. Next to the save block is where we get to colors, where you can apply background colors as well as borders. And in the case, if you want to add an image or a video or even a map to the background of the block, you select background. I can select image here, grab the image I want to upload, and I'll remove the overlay color so that we can see it. On the very far left are a number of options that makes the blog feature really special.

That is the option to make it a global blog, to turn it into membership, to use it for multilingual websites, or to create a blog slider. All of these are covered in other video support tutorials. To bring in content within your block, you click here on the plus in the middle, and this opens the elements drawer. You can bring in other layout structure elements like columns and rows, and then you can bring in content like text or images by simply click, hold, and dragging it onto the page. As you hover at the top of the block, you will see a blue bar appears, and the same at the bottom. This is the padding that is applied at the top and the bottom. You can increase or decrease this spacing on screen by click, hold, and drag when you are within that padding area. This makes it very easy to add a little bit of space. Let's go back to the block option settings. And you will see we have the option as boxed or full. Once it is set to full, the entire canvas will stretch all the way from the left to the right.

If you put it on boxed, you also have the control to decrease the canvas area in the middle in percentage values. By default, the height of the block is set to auto. If you want to have custom control over that, you put it to custom and then control it in pixels, or you can put it in percentage. And percentage is calculated on the viewport height. If I put it here on 80%, it takes up 80% of my screen. Then you also have full height, which will always stretch from the top to the bottom of the viewport. The content allows you to take what's inside the block and space it to the top, to the middle, or to the bottom. In most cases, you probably want to leave it to the center. Let's go back and put it on Auto. And whenever it is on auto, As I drag in new elements, it will create more space at the top and the bottom to accommodate the new elements that appear on the page. A cool feature within blocks is block dividers. Access that through the options, settings, and styling, and you will find the dividers here in the sidebar on the right.

You can select from quite a number. Let's change this color to white. And you can see now we have the power to add this divider at the top. We have many kinds of dividers that you can choose from. Find something that is suitable for your website. Switch to the bottom. Let's add another one here at the bottom, and let's change that color as well.