The Section Block is suitable for displaying the site content in various layout forms. You can add different contents/blocks to your site in each layout.
Once you insert the Block, you will get two options, i.e., Settings and Advanced. These are to make changes to your block design. Let’s explore one by one below:
Block Settings #
The settings consist of four options, as listed below:
General #
It provides the following four customization options for Section Block. These are listed below:
Vertical Alignments – It sets the vertical alignments for the Section Block. You can set the alignments as Baseline, Top, Middle, and Bottom.
Container – It lets you set the container length as Stretched or Contained.
Width: The option allows keeping the block’s width according to the site requirements. Moreover, you can also set the width for various devices (Desktop, Tablet, and Mobile).
Column Gap – You can adjust the column gap length between the chosen layout.
Height – It allows setting up the height of the entire block to be Min Height, Default, and Fit to Screen.
Background #
The option allows you to set the image as a background for the section block. You can select the background image from the Local PC or an External Source. Moreover, you can set a different background image on Normal and Hover modes.
While selecting the image either from the Local PC or an external source, you get the following four options:
- Position – It allows the position of the background image to be Center, Bottom, Left, Right, etc. Moreover, you can also set the image position on different devices (Desktop, Tablet, and Mobile).
- Size – In this section, you can choose the display size of the background image to be either Cover, Contain, Auto, etc. Moreover, you can also set the different display sizes on various devices (Desktop, Tablet, and Mobile).
- Repeat – The option allows you to repeat the background image either Vertically, Horizontally, No-Repeat, etc. Moreover, you can also set the repeat option to display differently on various devices (Desktop, Tablet, and Mobile).
- Attachment – It helps the background image attachment to be either Default, Fixed, or Scrolled.
Color – The option allows adding the background color for the section block.
Border #
Inside the section, you can find the customization option for the column border. The options are listed below:
Type – You can set the border type as Solid, Dotted, Dashed, Double, etc. Moreover, select the border type to be None if you do not want to add any borders for the section block.
When you select none, you will be given the following option:
Radius – It allows you to fix the radius value to make the round corners for the column border.
Box Shadow – When you enable the Box Shadow option, you will get the following customization options:
- Color – It allows you to select the appropriate box-shadow color for the section block.
- Horizontal-X – It displays the box shadows in the horizontal position.
- Horizontal-Y – It displays the box shadows in the vertical position.
- Blur – You can set up the blur value of the box shadows appearing.
- Spread – The shadow’s spread value represents the distance to expand or contract a shadow in all directions. You can change the spread value according to the site’s requirements.
- Position – You can set the position of the box shadows as Inset or Outline.
However, if you select the border type to be other than none, two more options will be added. The option is listed below:
- Border Color – It allows you to choose the appropriate border color for the section block.
- Size – It provides the option to select the border size.
Overlay #
The overlay allows you to add the image or color over the block surface. When you enable overlay, it provides the following two options:
- Background – It allows you to upload the background image as an overlay effect for the section block. Moreover, the image can be uploaded from the Local PC or an External Source.
- Color – You can select the appropriate color for adding the overlay effect to your site.
Block Advanced #
The section consists of three customization options for the Block.
Advanced #
The advanced sections come with the following four options.
Block Margin #
Inside the Advanced > Block Margin section, you can add the Block Margin values to all four sides of the block.
According to the site requirement, you can assign a specific margin value to the block and units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).
Block Padding #
Inside the Advanced > Block Padding section, you can add the Block Padding values to all four sides of the block.
According to the site requirement, you can assign a specific padding value to the block and units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).
Z-Index #
It allows you to set the priority of the section block according to the site requirement.
CSS ID #
You can also add the specific CSS ID to make changes in the specific section of the block.
Responsive #
It allows setting up the social icon to be responsive on various devices and comes with the following options:
Column Reverse Tablet
MobileResponsive
Hide on Desktop
Hide on Tablet
Hide on Mobile
You can make the changes to your site requirements.
CSS #
It allows you to add a CSS class to your Section block, letting you write custom CSS to style this particular block.
For example, if you want to change the height of the section, you can add a class, such as section-height, to the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:
.mzb-section.section-height{
height:75px;
}Upon adding the code, it will make the changes only to this particular block/section and not others.
