Cwicly Sections – How They Work and Why They Matter

In this tutorial, Grant Ambrose will explain to you the difference between Cwicly sections compared to other page builders. Understanding how sections work in Cwicly is vital for efficient and effective website building. This post will help you understand the nuances of Cwicly sections and how to use them effectively.

Understanding Cwicly Sections

Sections in Cwicly may work differently than what you’re used to if you’ve used other page builders. In Cwicly, sections utilize a ‘CC-wrapper’ class. This class is not directly exposed in the Cwicly editor, which can be a bit confusing if you’re coming from a builder that does expose the inner wrapper, like Bricks Builder.

<section>
  <div class="cc-wrapper">
    <!-- Your content goes here -->
  </div>
</section>

The ‘CC-wrapper’ class is automatically added to the inner div of a section. This is important to know as it affects how you style your sections.

Global Styles and Section Defaults

Cwicly provides a way to set global styles, which are styles that apply to all elements of a certain type. For sections, you can set default styles that apply to the inner wrapper of all sections. These defaults can be accessed and modified through the ‘Global Styles’ settings in Cwicly.

To access the global styles:

1. Go to Cwicly settings.
2. Navigate to ‘Global Styles’.
3. Scroll down to ‘Section Defaults’.

Here, you can set default values for properties like padding and max-width. These values are applied to the inner wrapper of all sections.

Building Sections in Cwicly

Building a section in Cwicly involves adding a section block and then adding content blocks within it. You can also add a div block within a section to create more complex layouts.

Here’s a basic example of how to build a section:

1. Add a section block.
2. Within the section block, add a heading block and a text block.
3. To create a more complex layout, add a div block within the section block.
4. Within the div block, add two button blocks.

Remember, the CSS classes you add to a section can affect its behavior. For instance, if you add a CSS class to a section and then set the display property to flex, the flex property will be applied to the inner wrapper of the section, not the section itself.

Using BEM Methodology with Cwicly Sections

BEM (Block Element Modifier) is a popular methodology for naming CSS classes. It can be used effectively with Cwicly sections. However, it’s important to note that using CSS classes on sections in Cwicly behaves differently than in other page builders.

Here’s an example of how to apply BEM methodology when naming CSS classes in Cwicly:

1. Add a CSS class to a section (e.g., ‘main-hero’).
2. Add a CSS class to a heading within the section (e.g., ‘main-hero__heading’).
3. Add a CSS class to a text block within the section (e.g., ‘main-hero__text’).

Relative Styling and Global Class Selector

Cwicly offers two features that can help you style the inner wrapper of a section: relative styling and the global class selector.

• Relative styling allows you to add styles to a specific element relative to another element. For instance, you can add styles to the inner wrapper of a section relative to the section itself.
• The global class selector allows you to target the inner wrapper of a section directly. You can use it to add styles to the inner wrapper that are not affected by the styles of the section itself.

Creating Utility Classes for Sections

Creating utility classes can speed up your development process. A utility class is a CSS class that applies a specific set of styles. You can create utility classes for common styles and apply them to sections as needed.

For example, you might create a utility class that removes the top padding from a section:

1. First, select the section you want to apply the utility class to.
2. In the block inspector on the right side, click on the ‘+’ button next to the ‘CSS Classes’ field to add a new class.
3. In the ‘Add New Class’ dialog box, type the name of your utility class. For this example, we’ll name it ‘no-top-padding’.
4. Click ‘Create’ to create the class.

Now, you have created a utility class, but it doesn’t do anything yet. Let’s add some styles to it.

5. With the ‘no-top-padding’ class selected in the ‘CSS Classes’ field, go to the ‘Design’ tab in the block inspector.
6. Under the ‘Margin & Padding’ section, set the ‘Padding Top’ value to ‘0’. This will remove the top padding from any section that the ‘no-top-padding’ class is applied to.

Now, you have a utility class that removes the top padding from a section. You can apply this class to any section in your Cwicly site to remove its top padding.

Applying the Utility Class to a Section

1. Select the section you want to apply the utility class to.
2. In the block inspector on the right side, click on the ‘+’ button next to the ‘CSS Classes’ field.
3. In the ‘Add Existing Class’ dialog box, type the name of your utility class (‘no-top-padding’) and select it from the dropdown list.
4. Click ‘Add’ to apply the class to the section.

Now, the selected section should have no top padding. You can repeat these steps to apply the ‘no-top-padding’ class to any section in your Cwicly site.

Remember, utility classes are a powerful tool for making your Cwicly site development more efficient. By creating utility classes for common styles, you can quickly apply those styles to multiple elements without having to manually adjust their properties each time.

Common Pitfalls and What Not to Do

When working with sections in Cwicly, it’s important to avoid certain common mistakes. One such mistake is trying to add a div element inside a section. This is not necessary in Cwicly and can make your code more complicated than it needs to be.

Additional Resources

For more information on working with Cwicly, consider checking out the following resources:

• Cwicly Documentation
• Cwicly Community Forum