Cwicly Components are a versatile way to add dynamic features to your website. This tutorial will walk you through the process of building Cwicly Components for your posts. We’ll cover everything from setting up your component to customizing its styles.
Setting Up Your Component
Initial Setup
- Navigate to
Components > Add New
. - Name it “Cwicly Card Component.”
HTML Structure
Create a simple HTML structure with a wrapper div
, an icon div
, and a text content div
.
Adding Properties
Basic Properties
- Go to
Component Settings
. - Add properties for the icon and text.
Additional Properties
Add properties for icon size and color.
Styling the Component
Base Styles
Set a background color and add a drop shadow.
Style Variants
Create two styles: one centered and one left-aligned.
Conditional Styling
Add a visibility setting for the icon.
Implementing in a Grid
- Add a section block.
- Insert a columns block.
- Place the Cwickly Card Component in each column.
Cwicly Components – Conclusion
Building Cwicly Components for your posts is a straightforward process that offers a lot of flexibility. By following this tutorial, you’ll be able to create dynamic, customizable components that can be easily integrated into any WordPress site.