October 5, 2023

Set Up Cwicly Nested Components – A Walkthrough

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

Cwicly Nested Components are a powerful feature that allows you to create more organized and efficient WordPress posts. This walkthrough will show you how to set up nested components using Cwicly.

Why Nested Components?

Nested components can make your life easier by allowing you to:

  • Organize your content more efficiently
  • Make global changes easily
  • Create more dynamic and interactive posts

Setting Up a Basic Pro-Con Component

  1. Open the Cwicly Navigator and remove all components except one.
  2. Click on the remaining component and go to Modifier to access inner blocks.
  3. Copy the inner blocks and paste them outside of the component.
  4. Remove the original component and rename the new one to “Pro-Con.”

Adding Styles to the Pro-Con Component

  1. Navigate to the design tab of your component.
  2. Add a new style and name it “Pro.”
  3. Add another style and name it “Con.”
  4. Select the “Pro” style and set the background color to light green.
  5. Select the “Con” style and set the background color to red.

Creating a Nested Component

  1. Wrap your Pro-Con component in a new div and name it “Pros-Cons.”
  2. Insert a heading and a paragraph inside the “Pros-Cons” div.
  3. Right-click on the “Pros-Cons” div and create a new component.

Adding Inner Blocks to the Nested Component

  1. Click on the “Pros-Cons” component and go to Modifier.
  2. Search for the Inner Blocks element and insert it into your component.
  3. Drag the Pro-Con component into the Inner Blocks element.

Saving as a Local Pattern (Optional)

  1. Go to Appearance > Editor > Patterns.
  2. Click “Add New” and paste your nested component.
  3. Publish the pattern.

Conclusion of Cwicly Nested Components

Setting up Cwicly Nested Components can streamline your WordPress post creation process. By following these steps, you can efficiently organize your content and make global changes with ease.

Required Resources

Cwicly Logo
Free Options
Credit to Grant Ambrose
With a focus on Bricks Builder, WooCommerce, and other essential tools, Grant provides in-depth tutorials that are easy to follow and packed with valuable insights. Whether you're a business owner, a developer, or a designer, you'll find a wealth of knowledge on this channel that can help you optimize your WordPress website, enhance its functionality, and improve your sales process.
Set Up Cwicly Nested Components – A Walkthrough
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.