Section

The section Block generates an HTML section element with various customizations based on the values of the section object passed to the template. This section generates Bootstrap Columns and be adjusted based on the column section of each block

The general idea behind Section blocks is that you can add any content in here, but follow Semantic HTML.

The section's tag name is either section or the section.html_tag in the Advanced Tab fields if you have it set. The Advanced Tab fields also add an ID attribute and CSS Classes that you specify. You can also adjust the Bootstrap container type as well in this tab.

You can set a background to a section by going under the Background Image Tab.

You can also adjust the spacing before and after using the switches from section.disable_top_spacing, and section.disable_bottom_spacing respectfully.

The section element contains a row element with a class attribute set to row-cols-lg- followed by the length of section.columns and is dynamically set by the number of column blocks, as well as additional classes to set the row's direction on mobile devices based on the value of section.reverse_columns_on_mobile.

For each column block in section.columns, the template generates a Bootstrap Column and adds spacing unless column.disable_bottom_spacing is true, as well as additional classes based on the values of column.position, and column.width. The Bootstrap Column will contain content that depends on which column block you add.

Section Column Blocks

You can view more about each column block by browsing each block below:

• Content Column Block

• Buttons Column Block

• Image Column Block

• Posts Column Block

• Events Column Block

• Products Column Block

• Form Column Block

Files Used

The following files are used to display this content

• section.yaml which is used in the builder.yaml blueprint file

• general_options/advanced_fields.yaml file

• general_options/section_header.yaml file

• builder/sections/section.htm partial file