Skip to main content

Editing Image Properties

Discover how to can modify images in Knak emails and landing pages

Updated over a week ago

Step 1. Place an image content block into your email or landing page

To get your image into Knak drag in an image block into your column:

Image with red arrow showing the path to dragging an image block into an empty column

Step 2. Add an image to your image block

You can either paste in the image URL or load and image to/from the Knak image library by clicking the "browse" button:

Empty image block with red boxes around browse buttons and image url input field

Step 3. Once the image has been inserted you can adjust the image attributes on the right side menu

Below are the attributes you can adjust for your images

Image attributes section with the edit button in a red box

Edit

To edit your image using our built in image editor. To access this click the "edit" button on the right side menu.

Editing image pop up with the crop tab open

And you can also add text directly into your images. You can customize the font style, text color, and text size from this page and create multiple text boxes by clicking "add text." If you need to delete a text box, select the text box by clicking it, and pressing the trash icon to remove that text box.

Editing image pop up with the text attributes tab open

And don't forget to press save when you're done applying your changes!

Add an image url token

The "Use image URL token" toggle allows you to use tokens in image URLs that will be replaced with actual values after synchronization with your marketing automation platform. When you enable this toggle you can add a merge tag to this input field.

You will need to create the merge tag under the Integrations section in the admin page. After the merge tag is created, you can use the following syntax to input the tag into the image link field: {{!tagname!}} For example, if you had a merge tag named "Company Industry" you would add {{!Company Industry!}} in this field.

Image attributes section with use image url token toggled on and {{!Company Industry!}} token being used


The image you select becomes a placeholder that's only used for display purposes in the builder, then after syncing your email/landing page, the token will be replaced with the actual image URL value.

Alternate Text

Add alternate text to your images to increase accessibility for your customers. Alt text enables screen readers to describe image content to visually impaired users, making digital content accessible to everyone. Additionally, Alt text provides value to users when images don't load, which can happen for various reasons including: images being turned off by default, corporate filters blocking images, large images failing to load, or weak cell service preventing image loading.

Changing the alignment for the image (with center alignment for desktop and left alignment for mobile)

And if you don't know what to add, try our Knak AI Suggestions to populate your Alt text! Learn more about our Knak AI Assistants in this help document.

Align

Change image alignment (left, center or right) on desktop and mobile view. In this section you can also add some pop to your images and on buttons with a hover affect. When a recipient hovers their mouse over the image it will invert the colors. Great for clickable images.

Image was set with responsive alignment values - center aligned for desktop and left aligned for mobile

Image Width

This will be set to auto by default which will scale the image to fit the available space on the recipients screen. You can also set responsive options to change image width based on if the customer is viewing the email on a computer screen or a mobile screen:

Responsive values set for image width - full width set for desktop and auto set for mobile

Background images

The Knak editor is capable of utilizing a background image behind other content like text and buttons. Meaning no more baking buttons and text into inflexible and uneditable flat files. To add a background image, go to the section attributes and expand the "background" drop down menu. From here you will see the option to add an image link or browse your Knak image library to apply a background image:

Setting a background image under the section attributes > background section

Add a clickable link to your image

Expand the dropdown menu for "link type" to select type of link you would like to configure: Open to Webpage, Open in App, Send Email, Send SMS, or Make Call.

Adding a link to your image to make it clickable


Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com

Did this answer your question?