Working with Container Block

Container blocks is used to build website layouts, organize content and spacing. This guide will help you to: - Get familiar with Container Block - Adjust width, height and spacing - Align content as you wanted

Insert a Container Block

Container block is located in "Sidebar" > "Element". To insert a new Container block, you can: - Click on Container block. It will be placed next to the selected block, or at the end of your website if no block was selected - Drag the Container block, and drop at where you want it to be inserted

Adjust width, height

When selecting a block (by left click on it), it will show the selection area and size handlers. To adjust width/height, you can either: - Click and drag the "Size handler" to adjust its width and height - Or update the width/height value at the toolbar

Size handle in selection area
Size handle in selection area
Width and Height on Toolbar
Width and Height on Toolbar

Adjust spacing

Spacing can be used to create balance in the layout. There are inner spacing (called Padding) and outer spacing (called Margin)

Inner spacing and outer spacing
Inner spacing and outer spacing
Spacing on Toolbar
Spacing on Toolbar

To adjust spacing, first, select the block. Then click on "Spacing" on the Toolbar, and adjust the slider. Or enter the value to update spacing

Both type of spacing also have seperate option for top, bottom, left and right settings. They are all enabled by default. To disable a setting, click on the setting option arrow (you will see the arrow grey out).

Tip: To disable all setting options, move cursor next to the arrow, until you see the background color appear, and left click on it

Align content and the Container

There are 3 alignment options 

- Content alignment, use to align content to top, bottom, left, center, ect...adjust space evently - Content direction, use to align the direction to horizontal (by default) or vertical - Container alignment, use to align the container itself to left, right, or centered (horizontally)

Alignment options on Toolbar
Alignment options on Toolbar

Here is how the container blocks in sample template can be organized

What's next?

Learn about text blockLearn about image block

Start building your website

Get started for FREE!
Terms of UsePrivacy Policy

© 2019 Saltar.com. All rights reserved.