July 13, 2023

Leverage the Cwicly Grid Editor for Unique Layouts

Play Video

Let’s create unique layouts with the Cwicly Grid Editor. This tutorial by Grant Ambrose will show a fresh approach to building your next WordPress website. Stand out from the crowd and provide a unique user experience. With the Grid Editor in Cwicly, you can achieve this with ease.
Cwicly Grid Editor for Unique Layouts

Understanding the Cwicly Interface

Before we start creating our layout, let’s familiarize ourselves with the Cwicly interface. Cwicly offers a unique interface that is easy to navigate. One of its standout features is the Navigator. This tool provides a visual representation of your layout, making it easier to manage your blocks.

In Cwicly, you have the option to use either the list view or the block editor. However, for this post, we will be focusing on the block editor. The block editor in Cwicly is unique because it offers its own blocks, which are denoted by the Cwicly logo. These blocks offer more customization options compared to other blocks.

Building with the Cwicly Grid Editor

Now that we are a bit familiar with the interface, let’s start building our layout. Here’s a simple, easy-to-follow guide:

  1. Add a section
    In Cwicly, you can do this by clicking on the ‘+’ icon and selecting ‘Section’.
  2. Add columns to the section
    To do this, click on the ‘+’ icon inside the section and select ‘Columns’.
  3. Add more columns
    Cwicly uses CSS grid to manage its layout. This means that we can easily add more columns to our layout. To do this, click on the ‘Columns’ parent and then on the ‘Grid Editor’. Here, you can add as many columns as you need by clicking on ‘Add Column’.
  4. Adjust column size
    Once you have added your columns, you can adjust their size by setting fractions in the grid editor. This allows you to divide your layout into equal parts, providing a balanced look.

Adding Content to the Grid

With our grid set up, we can now start adding content.

  1. Insert content
    In Cwicly, you can add content to your grid by right-clicking on a column and selecting ‘Insert’. From here, you can add a variety of content, including headings, paragraphs, and buttons.
  2. Apply Global CSS classes
    One of the great features of Cwicly is the ability to apply Global CSS classes to your elements. This allows you to easily manage the style of your elements across your entire layout.
  3. Adjust element properties
    Finally, you can adjust the properties of your elements, such as the heading level and column gaps, to fine-tune your layout.

Creating Responsive Layouts with the Grid Editor

A key aspect of modern web design is ensuring that your layout is responsive. This means that it should look good on all device sizes, from desktops to tablets and mobile phones.

With the Cwicly Grid Editor, you can easily adjust your layout for different device sizes. To do this, simply select the parent item and go to the ‘Primary’ tab. From here, you can adjust the fractions for each device size, ensuring that your layout looks great on all devices.

Finalizing and Publishing the Layout

Once you are happy with your layout, it’s time to publish it. In Cwicly, you can do this by clicking on ‘Publish’. Once published, you can view your layout on the front end to see how it looks.

Additional Resources

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

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.
Leverage the Cwicly Grid Editor for Unique Layouts
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.