Documentation
HomeForumHelp
  • About Cwicly
  • Beginner's Guide
    • Install Cwicly
    • Getting Started
      • Overview
      • Settings
    • Edit and Manage your Site
    • The WordPress Dashboard
    • The Dashboard Menu
    • Site Editor
    • Create your Front Page
      • Front Page
      • Header
        • Header Template Part
        • Structure
      • Footer
        • Footer Template Part
        • Structure
  • ⚡Cwicly
    • Block ID
    • Breakpoints
    • Class
      • Global/Block Classes
    • Cloud Design Library
      • Create an Account
      • Overview of the Cloud Dashboard
      • Editor: Cloud Library
        • Access from the Editor
        • Add a Library
        • Switch between Libraries
        • Default Library
        • Download Library
        • Remove Library
        • Categories
          • All
          • Popular
          • Button
          • Composition
          • Decorative
          • Interactive
          • Layout
          • Media
          • Menu
          • Social
      • Design Blocks: Cloud Library
        • Search for a Design Block
        • Refresh
        • Add Design Block
        • Save Design to Library
        • Remove Design Block
      • Library Globals
        • Library: Global Styles
          • Library: Add Styles
          • Installation: Add Styles
          • Library: Style Settings
        • Library: Global Classes
          • Library: Add Classes
          • Installation: Add Classes
          • Library: Class Settings
        • Library: Global Stylesheets
          • Library: Add Stylesheet
          • Installation: Add Stylesheet
          • Library: Stylesheet Settings
        • Library: External Classes
          • Library: Add External Classes
          • Installation: Add External Classes
          • Library: External Classes Settings
      • Community Library
        • Save to Community Library
        • Download from Community Library
        • Remove from Community Library
        • Set Community as default
    • Colour Picker
      • Gradient Builder
    • Components
      • Components Library
      • Components Folders
      • Settings
      • Component Properties Modal
      • Properties (Add)
        • Text Property
        • Rich Text Property
        • List Property
        • Link Property
        • Image Property
        • Gallery Property
        • Video Property
        • Icon Property
        • Colour Property
        • Toggle Property
        • Number Property
        • Class Property
        • ID Property
        • Options Property
        • Conditions Property
        • Visibility Property
        • CSS Text Property
    • Copy/Paste
      • Block Styles
      • Classes & IDs
      • Dynamic Preview
      • Global Styles
      • Global Classes & Stylesheets
      • Blocks
    • CSS Grid
    • Dynamic Inserter
    • Font Manager
    • Navigator
    • Quick Inserter
    • Scaling
    • Smart Inserter
    • Span
    • Tag
  • ⛵Tailwind
    • Getting Started
      • About
      • Activate
      • Copy/Paste
      • Enable editing mode
      • Apply a Class
      • Pseudo state Management
      • Automatically Sync
        • Breakpoints
        • Colours
      • Shells
      • Custom Tailwind Configuration
      • Import Tailwind Plugins
  • 🖌️Themer
    • Themer
      • Templates
      • Parts
      • Fragments
    • Role Editor
      • User Role
      • Gutenberg Editor
      • Global Block Behaviour
      • Block Toolbar
      • Miscellaneous
      • Components
      • Code Block
      • Blocks
      • Post Types
      • Force iFrame
      • Client Canvas View
      • Help
      • User
  • 🌐Global Styles
    • Global Styles
      • Global Colours
        • Folders
        • Colour tab
        • Palette tab
        • Modifiers tab
          • Opacity
          • Lighten
          • Darken
          • Saturate
          • Desaturate
          • Spin
      • Dark Mode
      • Global Gradients
      • Global Typography
      • Global Block Typography
      • Theme Elements
      • Global Settings
        • Defaults
        • Backend
      • Remove Gutenberg Global Styles
    • Global Classes & Stylesheets
      • Global Classes
      • Global Stylesheets
      • External Classes
  • 🎨Design
    • Background
      • Background Colors
      • Background Source
      • Sizing & Positioning
      • Styling
    • Typography
      • Typography
      • Rem conversion
      • Global Typography
      • Text Align
      • Font Family
      • Font Size
      • Font Weight
      • Spacing
      • Line Height
      • Style
      • Decoration
      • Transform
      • White Space
      • Overflow Wrap
      • Word Break
      • Word Spacing
      • Axes
      • Text Colour
      • Link Colour
    • Fluid Values
    • Layout
      • Display
      • Visual
      • Position
    • Sizing
      • Height
      • Width
    • Margin & Padding
    • Borders
      • Border
      • Shadows
      • Outline
    • Effects
      • General
      • Transitions
      • Animations
      • Filters
      • Text Shadow
      • Tilter
      • Separators
    • Transforms
    • Pseudo Classes/Elements
    • Relative Styling
  • 🎓Advanced
    • Custom CSS
    • Quick Code
    • Scrolling
      • Animate On Scroll
      • Scroll Direction
    • Attributes
    • Tooltip
      • Source
      • Theme
        • Custom Theme
  • 👆Interactions
    • Visibility Conditions
      • Blocks
      • Themer
    • Link
      • Link Source
      • Link Action
    • Interactions
      • Trigger
      • Actions
    • Hover Animation
    • Dynamic Slider
      • Settings Tab
  • 🖥️Editor
    • Inserter Panel
    • Quick Insert
    • Block Inspector
    • Primary Tab
    • Design Tab
    • Advanced Tab
    • Responsive Selector
  • 🔧Blocks
    • Accordions
    • Accordion
      • Basics
      • Settings
      • Colours
      • Layout
      • Typography
      • Margin and Padding
    • Button
      • Add
      • Icon
    • Code
      • Enable/Disable
      • Add
      • Languages
      • Settings
    • Columns
      • Basics
      • Add
      • Settings
      • Grid Editor
        • Auto Grid
        • Auto Template
    • Column
    • Container
    • Div
    • Filter
      • Basics
      • Filter Editor
      • Create a Filter
      • Style a Filter (example)
    • Fragment
    • Gallery
      • Filter
      • Source
      • Settings
      • Text
      • Image Style
    • Heading
    • Hook
    • Icon
    • Image
      • Source
      • Size
      • Settings
      • Hover Animation
    • Input
      • Input Settings
    • List
      • List Types
      • Settings
      • Icon
    • Maps
      • Settings
      • Size
      • Style
      • Overlay Layout
      • Colours
    • Menu
      • Settings
      • Main Menu
      • Sub Menu
      • Items
    • Modal
      • Modal Style
      • Settings
      • Trigger
      • Animation
    • Nav
      • Nav Block Settings and Styles
      • Nav Items Block
      • Nav Dropdown Block
      • Nav Link
      • Custom Dropdown Block
      • Nav Menu
    • Post Content
    • Paragraph
    • Popover
    • Query
      • Query Settings
      • Query Editor
        • Posts
        • Terms
        • Users
        • Comments
    • Query Template
      • Layout
      • Grid editor
    • Repeater
      • Nested Repeater
    • Section
    • Slider
      • Settings
      • Navigation
      • Dots
    • Slide
    • Styler
    • SVG Block
    • Tab List
      • Tab
    • Tab Contents
      • Tab Content
    • Taxonomy Terms
    • Video
      • Source
      • Settings
      • Div Overlay
  • ⚙️Settings
    • Settings
    • License
    • Icon Collections
    • Font Sets
    • Google Maps API
    • Advanced Settings
    • Regeneration
    • WooCommerce
  • 🛒WooCommerce
    • Archive Page
    • Attributes
      • Colour Type
      • Image Type
    • Cart
    • Product Variations
    • Create a Product Type
      • Simple
      • Variable
        • Create Attributes
      • Grouped
      • External
    • Build a Single Product Page
    • Dynamic Content
    • Link
  • 🗃️Miscellaneous
    • Blocks Specifics
    • Icon Selector
    • Trailing Slash
    • Units
      • Default Units
    • Code Snippets
    • Shortcuts
    • Actions
    • Filters
    • Browser Console
  • 🔗Resources
    • Changelog
    • Roadmap
    • Forum
Powered by GitBook
On this page
  • Add
  • Quick Inserter
  • Block Inserter
  • Structure
  • Outer Section wrapper and Inner Container
  • Outer Section wrapper
  • Inner Container
  • Inner Container defaults
  • Global Settings
  • Section
  • Container
  • Add CSS class to section
  • Add CSS class to container
  • Section VS. Div
  • Deprecate Settings

Was this helpful?

  1. Blocks

Section

Last updated 1 year ago

Was this helpful?

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.

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>.

Deprecate Settings

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.

To visualise the Quick Inserter you need to enable it.

🔧
Quick Inserter.