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.
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:
- Add a section
In Cwicly, you can do this by clicking on the ‘+’ icon and selecting ‘Section’. - Add columns to the section
To do this, click on the ‘+’ icon inside the section and select ‘Columns’. - 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’. - 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.
- 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. - 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. - 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:
