This is another simple tutorial about working with images in Carrd. I will show you how to make any image on your page clickable, what types of links you can use, and how to link an image to a specific section or scroll point. The tutorial also covers how to optimize clickable images for mobile screens.
How to Add a Link to an Image in Carrd
Before you start adding links to Carrd images, you need to be logged in to your Carrd account. However, you can also use the free editor if you don’t need to save your project.
After logging in or accessing the free editor, choose the site where you want to add a clickable image. You can also choose a ready-made template or start from scratch.
To add an image, go to the top-right menu, click the plus icon, and select Image.
A new Image element will be added to your page. Click on it to open its settings in the left menu.
Here, you can add your image, set a title, add alternative text, and enter a URL. Carrd supports several types of links:
HTTPS – Use this to link the image to an external website.
Email – Opens the visitor’s default email client and allows them to send an email.
Phone – Lets visitors call a phone number. You can also use it for SMS or a Skype username.
Browser – Allows actions such as going back, going forward, scrolling to the top, printing the page, or doing nothing.
Section – Links the image to a specific section of your Carrd site. For example, you can create clickable images for your About and Contact sections. When a visitor clicks an image, the corresponding section will appear. You can learn more about this feature in my Carrd Sections tutorial.
Scroll Point – Similar to a Section link, but it takes visitors to a specific point on the current page. For example, you could create an image menu at the top of your page with links to About, Services, and Contact and use scroll points to take visitors directly to each topic.
Clipboard – Allows visitors to copy specific text by clicking the image. This can be useful for discount or promo codes that visitors need to copy and paste into another field.
Choosing an Image for Your Link
You can use different image formats for clickable images, including JPG and PNG. PNG can be especially useful if you want to create a custom button-like image instead of using a standard button or icon.
This can be particularly useful for artists, illustrators, and designers who want to create their own visual buttons or custom call-to-action graphics.
How to Customize the Design and Appearance of a Clickable Image
After adding a link to your image, you can customize its appearance to match the design of your Carrd site. Click the Brush icon at the top of the left menu to access the image’s design and appearance settings.
Depending on the effect you want, you can change the image shape from a standard rectangle to a circle. You can also adjust its alignment, position, width, height, border, and shadow.
You can use these settings to make a clickable image look more like a button, create a circular profile or category image, or simply make it fit better with the rest of your page.
Carrd also allows you to add animations to your image. You can use an animation that plays when the image becomes visible on the screen or add a different effect that activates when a visitor hovers over the image.
A hover animation can be particularly useful for clickable images because it gives visitors a visual indication that the image is interactive.
How to Make an Image Open in a New Tab
Carrd also lets you make a clickable image open its link in a new browser tab. To do this, add ||blank after the URL in the Image element’s link field.
For example:
If you enter an incorrect URL, it won’t be saved, and the field’s border will turn red. When the URL is valid, the field’s border will turn green.
When a visitor clicks the image, the linked page will open in a new browser tab instead of replacing your current Carrd page.
This is particularly useful when linking to external websites because visitors can easily return to your Carrd site after opening the link.
Quick Tip: Make Your Image More Than Just Clickable
You can use clickable images for more than external links. In Carrd, an image can link to another website, a section, a scroll point, an email address, or even copy text to the clipboard. You can also add
||blankafter a URL to open the link in a new browser tab.
Clickable Images for Affiliate Links
You can also use clickable images for affiliate links. Simply paste your affiliate URL into the URL field of the Image element, just like you would with any other external link.
Affiliate links from platforms such as travel affiliate networks, e-commerce programs, and other affiliate services can work with Carrd. You can use the tracking or shortened affiliate URL provided by the affiliate platform; it does not have to be a traditional long URL or a deep link.
However, Carrd does not allow thin affiliate sites. This means you should not create a site with little or no original content that exists primarily to send visitors to other websites through affiliate links. Carrd specifically recommends providing original content, useful information, and meaningful value to visitors rather than building pages mainly for affiliate revenue.
For example, on a travel website, you could use clickable images to link to hotels, tours, flights, or other travel services through your affiliate programs. The important part is that the page provides useful information or original content around those recommendations instead of consisting mainly of affiliate links.
You should also clearly disclose your affiliate relationships where required by applicable laws and the rules of the affiliate program you are using.
How to Optimize Clickable Images for Mobile
Clickable images should also look and work well on smaller screens. Switch to mobile view by clicking the mobile icon in the top-right corner of the Carrd editor.
Click on your Image element and use the left menu to adjust its mobile settings. Click on the Brush icon on top. Now you scroll down to Mobile Settings and change the image size, position, and margins.
If you are using a Container with your clickable image, you can also customize the Container’s mobile layout. You can leave it on Auto or switch to Manual for more control over the image’s size and positioning.
Always test your clickable images in mobile view before publishing. Make sure they are large enough to see and easy to tap without accidentally clicking another element.
Conclusion
Making an image clickable in Carrd is a simple way to turn images into useful navigation or call-to-action elements. You can link images to external websites, other Carrd pages, sections, scroll points, email addresses, phone numbers, or even use them for affiliate links.
You can also customize the image’s shape, size, alignment, appearance, and animations to make it fit your design and clearly indicate that it is clickable. Don’t forget to check how your clickable images look on mobile before publishing your site.