Section

The section block is one of the most important parts in the structure and layout of a webpage. Sections contain related inner blocks and divide the webpage into readable and fluid content.

By default, when adding a Cwicly Section a container block is automatically inserted inside.

When updating from a version prior to 1.2.9.8, Cwicly will automatically toggle on the Deprecated section layout and deprecated button styles.

So if you want to reveal the section container, you need to access the Deprecate settings and toggle off.

Add

There are two ways of adding a section, from the Quick Inserter or the Block inserter.

Quick Inserter

Find the Section block in the Quick Inserter and click to insert.

To visualise the Quick Inserter you need to enable it. Quick Inserter.

Block Inserter

Find the Block Inserter and select or search for the Cwicly Section block.
Click to add.

Structure

Outer Section wrapper and Inner Container

By default, the Cwicly Section is made up of two elements, an outer wrapper, or Section wrapper, and an inner container.

Outer Section wrapper

The Cwicly Section has a semantic <section> tab.

Inner Container

The inner container defines the website content width and is centered on the page.

Some content such as backgrounds and images can break out of the container width but most content will be inside.

Inner Container defaults

A .cc-cntr class is added by default and applies a maximum width of 1366px.

This will not necessarily be apparent on small screen sizes.

Global Settings

You can apply your own section and container settings globally from the Block Inspector.

Open the Block Inspector and open Global Styles.
Open the Elements tab and Block tab.

Section

Open the Section tab and click the "+" sign to open the Section settings panel.

Click to open the Section settings you wish to apply.

Customise as required.

Container

In the Block tab, open the Container tab.
Click the "+" icon to add Container settings.

Click the Container field to open the Container settings.

Customise the Global container settings as required.
For instance, you can modify the Max Width as required.

Add CSS class to section

From Global Styles, you can add a CSS class to add specific styles to a section.

In the Block tab of the Elements tab of the Global Styles tab, open the Section tab.

Click the "+" sign to add a new class and input a meaningful section name and class name.

Style as required. In this example we are adding a black background.

Select the specific section to which you wish to apply the black background styles.
Click the "+" sign to add a class.

Find the class you created in the panel.

Press enter. The black background will be applied to the designated section.

Add CSS class to container

From Global Styles, you can add a CSS class to add specific styles to a container.

In the Block tab of the Elements tab of the Global Styles tab, open the Container tab.

Click the "+" sign to add a new class.

Input a meaningful container name and class name.
Style as required, in this case we have given it a black background.

Select the Container to which you wish to apply the class and styles you have created.
Click the "+" sign to add a class.

Find the class you created in the Classes modal and click "Enter" to apply.

Section VS. Div

<section> means that the content inside is grouped (relates to a single theme), and should appear as an entry in an outline of the page. Basically, it is used to group elements together, pertaining to the same theme.

The <section> element is appropriate only if the element’s contents would be listed explicitly in the document’s outline. (i.e. Front Page, About, Pricing...)

<div>does not convey any meaning, aside from any found in its class and title attributes.

When an element is needed only for styling purposes or as a convenience, it is encouraged to use the <div> element instead of<section>.