Carrd Tutorial: How to Add Effects in a Multi Column Container in Carrd

Thumbnail image for "Tutorials" article

Table of contents

Enhancing the visual appeal of your website is crucial for engaging your audience, and one effective way to achieve this is by adding effects to multi-column containers in Carrd. 

Multi-column containers allow you to organize content efficiently and aesthetically, making your site more dynamic and visually interesting.

This guide will walk you through the process of adding effects to multi-column containers in Carrd. You’ll learn how to apply animations, shadows, gradients, and other visual enhancements that can bring your content to life.

Creating a sub-section

First things first we are going to create a sub-section where we will add our multi column container.

The first few steps will be similar to a previous guide we made about adding containers.

1) Add Container: Click the "+" button and select "Container" from the menu.

Image: Click the + button
Image: Select container

2) Click on Text: Type your preferred text.

Image: Click on text
Image: Edit the content of text

3) Select the Container:

Image: Select the container

4) Change the style: By selecting “Section T” style (we made this in a previous guide) it will appear smaller making it a sub-section.

Image:  Change the style

Adding a multi column container

Same as before

1) Add Container: Click the "+" button and select "Container" from the menu.

Image:  Click the + button
Image:  Select container

2) Select Columns:

Image: Select columns type

3) Click Add: The default columns are 2, but for this example we will add 4, so click add 2 times.

Image:  Click add

4) Add images and captions: Based from our previous guide.

Image  Add images and captions

5) Edit the image. We will add changes such as: Width, Rounding and Drop shadow.

Image: Drag the width slider
Image: Drag the corner rounding slider
Image: Add a drop shadow
Image: Tweek the drop shadow settings

These are the “Drop shadow” settings we added.

Adding Effects

We will now show you a neat trick you can use to visually enhance your site.

1) Add a code:

Image:  Click the + button
Image: Select embed

2) Change style: Since this is a CSS code we use this style.

Image: Change CSS style to hidden
Image: Change CSS style to head

3) Write the code: Each image has a unique ID, you can change it from here.

Image: Unique image ID

For this code we will need the exact ID of the images that we will modify, once we find them write this code.

Image: Write the code

This will make the images pop-out when you hover your mouse over it.

Conclusion

Adding effects to multi column containers in Carrd is a powerful way to increase the visual impact of your website. Following this guide, you have learned how to use animations, shadows, gradients, and other enhancements that make your content more dynamic and interesting.

Not only do these effects improve the aesthetics of your site, but they also help highlight key features and create a more interactive user experience.With these tools, you can create a visually appealing and functional website.

Have fun experimenting and editing the look of your site!