A Carrd image gallery tutorial can help you learn how to use the Gallery element in Carrd. The element is often used for portfolio pages, photography, and other visual projects. It lets you create a gallery layout without complicated code. Besides galleries, you can also create carousels, which let visitors move through Carrd images from left to right.
How to Create a Gallery in Carrd
Working with the Carrd Gallery element is easy. Follow these steps to create and customize your gallery.
Add the Gallery Element
Start by logging into your Carrd account. You can also practice in the free Carrd editor, but keep in mind that you need an account if you want to save your site.
From your dashboard, start from scratch or choose an existing site or template.
In the editor, click the first Plus icon in the top-right corner and choose the Gallery element. Click the element to open its settings in the left menu, where you can add images and adjust the gallery.
Add Images to Your Carrd Gallery
In the left menu, you will see the basic Gallery settings at the top. This is where you can add your images. Below the first image, click Add to add another image and continue until you have all the images you want in your gallery.
Click the first image and select Upload to add your image. Depending on the available options, you can also add a caption, alt text, URL links, size, and image position.
The position options include center, top left, top, top right, bottom right, bottom, bottom left, and left.
If you have access to Carrd’s advanced settings, you can also use an On Click action for additional functionality.
Customize Your Carrd Gallery
Below the gallery images, you will find the Mode field. You can leave it on the default setting or change it to Lightbox.
The default mode displays your images as a static gallery. Lightbox adds an enlarged image view when visitors click on an image. You can choose between a light or dark color scheme for the lightbox background.
The lightbox settings include options such as navigation, mobile controls, captions, optimization, deferred loading, and image protection.
I recommend enabling Optimize and Defer Loading when appropriate. These options can help reduce the impact of images on your page loading performance, especially when your gallery contains several images.
Adjust the Gallery Appearance
To customize the visual appearance of your gallery, click the Brush icon in the top-left menu. This opens the Appearance settings.
Here you can adjust settings for the Gallery, Images, and Captions.
Gallery settings include:
- Style: Default, Fit, Fixed, or Full. Fit lets you choose the gallery width and fits the images within it, while Fixed creates columns. Full displays the images at their full size.
- Width
- Spacing
- Margins
- Alignment: Auto, Center, Left, or Right
You can also adjust the gallery for mobile devices. By default, the mobile layout is set to Auto, but you can manually change the style, spacing, and margins.
To preview these changes, switch to mobile view using the mobile icon in the top-right menu.
Image settings include:
- Size
- Corner rounding
- Border
- Shadow
- Mobile settings
Caption settings include:
- Style: None, Below the Image, Bottom, Top, Center, or Full. Below places the caption below the image. Full, Bottom, Top, and Center display the caption over the image with a background. You can adjust the background blur and choose when the caption is visible: on hover, when not hovered, or always.
- Full places the caption in the center of the image with a blurred background.
- Color
- Margins
- Font
- Size
- Weight
- Line spacing
- Letter spacing
- Appearance, including normal, uppercase, lowercase, or small caps
- Alignment
- Shadow
- Mobile settings
Add Animations and Advanced Settings
The third icon in the top menu gives you access to animation settings. You can add animations such as On Visible or On Hover, depending on the element and your Carrd plan.
Additional options are available through the fourth icon in the top menu. Some of these advanced settings require a Carrd plan that includes them and may be more useful if you are comfortable working with HTML and CSS.
How to Create a Carrd Image Carousel
If you want your images to slide horizontally instead of displaying them as a standard gallery, you need to use a different solution. Carrd does not have a traditional image carousel as a built-in Gallery option. You can create one using a plugin or custom code.
Option 1: Use a Carrd Carousel Plugin
The easiest option is to use a third-party Carrd carousel plugin. These plugins add a ready-made slider that you can embed into your Carrd site without having to build the carousel from scratch.
Most carousel plugins require Carrd Pro Standard or a higher plan, because you need access to the Embed element. The exact setup depends on the plugin you choose, so follow its installation instructions and paste the provided code into your Carrd Embed element.
This is the simplest option if you want a working carousel but do not want to write the code yourself.
Option 2: Build a Carousel with Custom Code
Another option is to create your own image carousel using HTML, CSS, and JavaScript. You can add the code through Carrd’s Embed element and customize the carousel to match your website.
I won’t go into the custom-code setup in this tutorial, as it requires more advanced knowledge than the native Carrd Gallery element. If you know some HTML, CSS, or JavaScript, you can also experiment with creating your own carousel or use an AI tool to help you generate and adapt the code.
Quick Tip: Use a gallery when you want visitors to browse several images in a compact layout. A carousel is better when you want to display one image at a time and let visitors move through the images using navigation controls.
Carrd Gallery vs. Image Grid: Which Should You Use?
A Carrd Gallery is a good choice when you want to display a larger collection of images without building the layout yourself. It works particularly well for photography portfolios, project pages, and other visual-heavy websites. If you only need a few images, individual Image elements can give you more control over their exact placement and styling.
For example, you can arrange individual images next to each other to create a simple image grid. If you want to try this approach, see my tutorial on How to Put Images Side by Side in Carrd, where I show you how to create this type of layout step by step.
| Carrd Gallery | Image Grid / Individual Images | |
|---|---|---|
| Best for | Photography, portfolios, visual projects | Editorial pages, simple layouts |
| Number of images | Larger collections | Smaller collections |
| Layout | Ready-made gallery layouts with light-box | More manual control, no light-box |
| Image control | Gallery-wide settings | More control over individual images |
| Setup | Faster for multiple images | Better when you need a custom layout |
How to Make a Carrd Gallery Look Better
Here are some tips how to make your gallery look better. Don’t forget to check any changes on mobile view as well.
Keep Image Sizes Consistent
- Use images with similar dimensions or aspect ratios if you want a clean and balanced gallery.
- If your photos have very different proportions, consider cropping or resizing them before uploading.
- Consistent image proportions work particularly well for standard grid layouts.
Create an Asymmetrical Image Grid
- Combine images with different widths to create a more dynamic composition.
- Use Containers and individual Image elements to control the size and position of each image.
- Try placing a large image next to a smaller one, then adding a full-width image underneath.
- This layout works well for photography portfolios, editorial pages, and creative projects.
- Unlike a standard gallery, this approach gives you more control over the composition of individual images.
Try a Masonry-Style Layout
- A masonry layout arranges images with different heights while keeping them aligned in columns.
- It is often associated with Pinterest-style image grids.
- Do not confuse it with an asymmetrical grid, where you deliberately control the width and position of individual images.
- You can create masonry-style effects in Carrd using custom code or a suitable plugin if you want images to automatically arrange themselves based on their dimensions.
Leave Enough Space Between Images
- Use consistent spacing between images to keep the gallery visually organized.
- Larger gaps can work well for minimalist or editorial designs.
- Avoid very small gaps if you want each image to have more visual space.
Use High-Quality Images Without Slowing Down Your Site
- Resize images before uploading them if they are much larger than the space where they will appear.
- Enable Optimize and Defer Loading when appropriate.
- Avoid adding unnecessary images, especially on pages that already contain a lot of visual content.
Match the Gallery to Your Website Style
- Use a regular grid for a clean and structured look.
- Choose an asymmetrical or mosaic-style layout for a more editorial feel.
- Use different image proportions when you want the gallery to feel more dynamic.
- Keep captions, borders, corner rounding, and spacing consistent with the rest of your website.
Carrd Gallery Not Working? Common Problems
Images are not showing: If an image appears blank, blurry, or fails to load after publishing, try uploading it again. Also check the image file size and make sure the image was uploaded correctly.
Images look blurry: Carrd can optimize images when they are uploaded, which can affect their appearance. Try checking the Optimize setting and make sure your images are not being displayed much larger than their intended size. Some users also report better results after adjusting image dimensions rather than relying only on scaling.
The gallery looks wrong on mobile: Images can look cropped, blurry, or differently spaced on smaller screens. Check the gallery’s mobile settings and preview the published site on an actual phone, not only in the Carrd editor. Manual mobile settings can help in some cases, but Auto may work better for others.
The gallery is too small: If changing the gallery size does not make it wider, check the width of the page and any Container around the Gallery element. The parent Container can limit how much space the gallery can use.
Lightbox is not working on mobile: If you use the Lightbox mode, check that its mobile option is enabled separately. The mobile lightbox setting can be turned off even when the main Lightbox option is enabled.
Carrd Gallery Templates
If you want to build a visual portfolio in Carrd without creating every section from scratch, a Carrd gallery template can give you a ready-made starting point.
My Photography Portfolio template Four Elements is designed not only for photographers, but also for visual artists, designers, illustrators, and other creatives who want to showcase their work. It includes three separate gallery sections that can be used for different types of projects or collections.
You can replace the demo images with your own work and customize each gallery to fit your needs. You can also duplicate a gallery section if you need more space for additional projects or want to create another image collection.
This makes the template flexible for different types of visual portfolios. You can use the existing galleries as they are, rearrange them, or duplicate and adapt them to your own content.
Final Thoughts
A gallery is a useful element for many types of websites, especially portfolios, creative projects, and image-heavy pages. It is worth experimenting with different layouts, image proportions, spacing, and captions to find what works best for your content. If you are not sure how to structure your gallery, look at other websites and online design resources for inspiration. You can then adapt ideas you like to your own Carrd layout and visual style. Don’t be afraid to experiment, as even small changes can make a gallery feel completely different.