How to Put Text Next to an Image in Carrd

This is a short and simple tutorial on how to put text next to an image in Carrd. I will show you easy ways to place an Carrd image and text side by side, with the image or text on either side. The tutorial also covers how to optimize the layout for mobile screens.

You can start by logging in to your Carrd account, or simply access the publicly available editor without signing in. From the dashboard, choose the site you want to edit, select a template, or start from scratch.

Text Below or Above the Image without Container

You can start by adding an image to the page. Click the plus icon in the top-right corner and select Image. An Image element will appear on the page.

1. Click on the Image element and use the left menu to add your image. You can also adjust other parameters, change its design, or add animations using the icons at the top of the left menu.
2. To add text above or below the image, first click on the Image element. Then click the plus icon in the top-right menu and select Text.
3. You now have a new Text element that you can position above or below your image. Click on the Text element to access its settings in the left menu. To change the text alignment, click the Brush icon at the top of the left menu and scroll down to Alignment. You can choose left, center, or right alignment depending on your design.
4. To move the text from above the image to below it, or vice versa, simply use drag and drop.
5. You can also switch to mobile view by clicking the mobile icon in the top-right corner. Click on the Image element and adjust its alignment and size to control how it appears on mobile screens. Do the same for the Text element.
6. Mobile settings are available in the left menu under the Brush icon. Scroll down to the mobile settings. By default, the layout is set to Auto, but you can switch it to Manual to customize the size and positioning of your elements for mobile screens.

Text on the Left, Right, Below, Above with Container

If you want to organize your content in a cleaner and more structured way, it is a good idea to use Carrd Containers. They are also useful for customizing your layout for mobile screens.

1. Once you are logged in and inside the Carrd editor, start by adding a new Container to the page. Go to the top-right menu, click the plus icon, and select Container.
2. Click on the Container. In the left menu, you can change the Container type from Default to Columns. This will create two columns, but you can add more, up to five columns. You can also change the Container’s design, appearance, content alignment, and spacing by clicking the Brush icon at the top of the left menu.
3. You can now add content to each column. Go to the top-right menu, click the plus icon, and select Image. The Image element will appear on the page. If it is not in the column you want, simply drag and drop it into the correct column.
4. Do the same with the Text element. Go to the top-right menu, click the plus icon, and select Text. You can drag and drop the text above or below the image within the same column.
5. If you want the text to appear to the left or right of the image, place the image and text in separate columns within the Container. For example, put the image in the first column and the text in the second column. You can then adjust the column widths, spacing, and alignment to create the layout you want.

How to Stack Image and Text on Mobile for Container

If you are using a Container to organize your images and text, you can customize its mobile settings as follows:

1. Switch to mobile view by clicking the mobile icon in the top-right corner.
2. Click on the Container, then access the left menu and click the Brush icon at the top.
3. Scroll down to Mobile. You can leave the setting on Auto or switch it to Manual to customize the layout.
4. You can then customize the Layout:
5. Default means that the columns will remain next to each other. This may not look great on smaller mobile screens, especially if you have an image and text in separate columns.
6. Stack changes the layout to a vertical order, placing one column below the other. The size of the content, such as images and text, will adjust accordingly.
7. Stack Reverse also stacks the columns vertically but reverses their order. This is useful when you want to change which column appears first on mobile without changing the desktop layout.
8. You can also customize the mobile padding, gutters, margins, alignment, and the alignment and spacing of the content within each column.

Carrd Tip: For the most control over placing text next to an image, use a Container with Columns. You can place the image in one column and the text in another, then customize the layout separately for desktop and mobile.

How to Add Text to an Image via Gallery Element

There is also another simple way to add text to your images using the Carrd Gallery element. However, this option has some limitations. Gallery captions can only appear below the image or over the image itself — at the top, bottom, or center, or across the full image with a background behind the text.

1. Start by adding a Gallery element from the top-right menu.
2. Click on the Gallery element and use the left menu to add one or more images. You can also add a caption to each image. This caption is the text that will appear below or over the image.
3. Then click the Brush icon at the top of the left menu. Under Appearance, find the Captions settings.
4. Here, you can choose how the caption is displayed: Below, Bottom, Top, Center, or Full.
5. You can also change the caption’s visibility. For example, it can be always visible or appear only when you hover over the image.
6. At the bottom of the settings, you will find the mobile options. Here, you can control the caption’s mobile visibility by setting it to Always Visible, Hidden, or Auto.

Conclusion

Adding text next to or around an image in Carrd is simple once you understand how to use Images, Containers, and the Gallery element. Containers give you the most flexibility when you want to create side-by-side image and text layouts, while Gallery captions are useful for adding short text directly to images.

For the best results, always check your layout in mobile view and adjust the settings if needed. With these options, you can create clean image-and-text layouts without using custom code.