Section
Last updated
Last updated
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.
There are two ways of adding a section, from the Quick Inserter or the Block 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.
Find the Block Inserter and select or search for the Cwicly Section block.
Click to add.
By default, the Cwicly Section is made up of two elements, an outer wrapper, or Section wrapper, and an inner container.
The Cwicly Section has a semantic <section> tab.
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.
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.
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.
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.
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.
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.
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> 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>.
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.
In the Dashboard, open the Settings panel.
Find Deprecated.
Toggle off Deprecated Section Layout.
