Make section container visible and manageable

Cwicly lets you set globally the max-width of the container inside a section and always centers it. In my case, I set the container max-width to 1260px.

However, there are times when you need to add an element inside the section BUT outside the container. Here is an example: Dropbox Capture

It would be great if the container was visible in the builder as well to be able to manage it. Here is an example of how Bricks Builder does it Dropbox Capture

While the end result is still doable, you would have to set that particular section width and max-width to 100%, then add the elements you want outside the div, and wrap all elements that you want boxed up in a div.

I will be happy to provide more feedback if needed, and thanks for such a great tool as Cwicly.

Indeed this is really needed.
There has been a lot of discussions about sections technical solution with Bricks (mainly because of the buggy implementation in Oxygen!) and they finally implemented like this.
It is a game changer… So much flexibility.

(We have to admit their full customizable section/container/block/div system is awesome!)

1 Like

Glad to see you here. @yankiara

1 Like

My current workaround is to create my section by using separated DIVs then apply the default classes for section and wrapper cc-sct and cc-wrapper.

Same for you, mate!

So, no conflict with these classes when styling each div with id or class?
Sorry can’t test right now, my free try just expired!
I’ll check that later tonight.

1 Like

These default classes benefit you from the global styling you have set. When you want to do something else with the section’s wrapper, just add other global classes for your other styling so you won’t have any conflicts.

1 Like

Perfect, let’s make it a reusable, then :wink:

1 Like

Just noted that GB is decoupling the inner from the outer container, or at least providing the option to do so (even per individual block basis), in their newest version.
I think a container is equivalent to Cwicly’s section in its core functionality.

Not very familiar with GB, so hopefully I didn’t get it wrong.
But it also seems, previously one didn’t have any control about the inner container, which is very different with Cwicly.

As stated multiple times before, I’m very neutral to this topic, that’s the reason I don’t add anything anymore, and of course as always, respect the decision of the team.
Just wanted to share that info here.

1 Like

Yes. I’ve just watched a video about the Generate Blocks by WpTuts. That’s a good addition for us to add a custom section. We don’t need to add the default CSS classes to it manually every time we build a custom section that needs an inner wrapper that is manageable. And more control over it.

I am coming from Bricks and it is confusing that in cwicly I edit the section to apply flexbox but it’s actually setting the flexbox on the .cc-wrapper in wrapper

I would rather have the option to just see the entire DOM

For Cwicly’s section, when we add a global class to the section, it applies to the parent div. We can’t add any classes to the inner div of the section. I hope the inner section is visible and manageable, too, just like Bricks.

Anyway, my current workaround is to create them using the DIV block. 1 is for the main div, and another div is for the inner div.

You still can use global classes on section blocks to target the inner container by using Relative Styling within a global class or the recently introduced custom CSS functionality for global classes @jornes.

If I’m not mistaken it’s been kind of confirmed that this feature request will happen in one or another way.

1 Like

Hi Marius,

It’s nice to hear that.

I’d love to know how. Any video or guide for this?

  1. Create a global class
  2. Create a Relative Style inside the global class: .globalclass .cc-wrapper
  3. Enter the Relative Styling editing panel
  4. Apply your rules

Hope that helps.

Thanks, @Marius

I’ll try it out to see if the efficiency is reasonable.

Thanks, @Marius
I’ve tested this workaround, and I like it. :blush: