Adding a custom block
Weblium editor allows you to create your site with the help of pre-designed blocks that contain a set of elements. If none of our ready-made options in the gallery meets your needs, you can select an empty custom block to build your layout from scratch.
Check our quick video guide on how to work with empty custom block:
For that, hover over the page in the editor and click the "Add Block" icon:
Navigate to the Blank tab in our gallery and choose Custom block:
Once you've added the custom block to your site, you need to fill it with elements. Elements are the basic building components of each block — for example, gallery, heading, accordion, list, etc.
Firstly, hover over the custom block, click on the "plus" sign and choose the needed element from the pop-up window:
Tip: To learn how you can further manage the elements in the block, view the Managing elements in a block article.
If you're planning to add several elements to the block — for example, image, text and buttons — it will be more convenient for you to place them in separate columns. This way, you can adjust the position of each element or change the size of its placeholder.
Firstly, hover over a particular column and add a new one by clicking on the "plus" sign near it:
You can adjust the width of the columns using the dividers that are placed next to them. To do this, hover over the empty space between the columns, click on the divider and drag it to the needed direction:
You can also delete or duplicate each column by clicking on the three dots in the top right corner:
To access the settings of a column, hover over it and click on the "gear" in the top right corner:
In the Layout tab you can change the gap between the columns in the block, the alignment of the elements in this column, set the paddings between the edges of the column and the element in it, or change its style — define whether rounded corners will be applied to the column:
Important: The paddings or style parameters can be applied only if a background is applied.
To access the settings of a column, hover over it and click on the "gear" in the top right corner:
Navigate to the Background tab in the settings and add color or image background to the column:
When you set a photo as a background of the column, you will see more customization options — e.g., applying filter or color correction:
Tip: To proceed with customizing your block, check the Changing the design of a block article.
Check our quick video guide on how to work with empty custom block:
Adding a custom block to your site
For that, hover over the page in the editor and click the "Add Block" icon:
Navigate to the Blank tab in our gallery and choose Custom block:
Adding elements to a custom block
Once you've added the custom block to your site, you need to fill it with elements. Elements are the basic building components of each block — for example, gallery, heading, accordion, list, etc.
Firstly, hover over the custom block, click on the "plus" sign and choose the needed element from the pop-up window:
Tip: To learn how you can further manage the elements in the block, view the Managing elements in a block article.
Adding columns to a custom block
If you're planning to add several elements to the block — for example, image, text and buttons — it will be more convenient for you to place them in separate columns. This way, you can adjust the position of each element or change the size of its placeholder.
Firstly, hover over a particular column and add a new one by clicking on the "plus" sign near it:
You can adjust the width of the columns using the dividers that are placed next to them. To do this, hover over the empty space between the columns, click on the divider and drag it to the needed direction:
You can also delete or duplicate each column by clicking on the three dots in the top right corner:
Changing the layout of a column
To access the settings of a column, hover over it and click on the "gear" in the top right corner:
In the Layout tab you can change the gap between the columns in the block, the alignment of the elements in this column, set the paddings between the edges of the column and the element in it, or change its style — define whether rounded corners will be applied to the column:
Important: The paddings or style parameters can be applied only if a background is applied.
Changing the background of a column
To access the settings of a column, hover over it and click on the "gear" in the top right corner:
Navigate to the Background tab in the settings and add color or image background to the column:
When you set a photo as a background of the column, you will see more customization options — e.g., applying filter or color correction:
Tip: To proceed with customizing your block, check the Changing the design of a block article.
Updated on: 12/05/2023
Thank you!