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:
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:
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
Edit
To edit your image using our built in image editor. To access this click the "edit" button on the right side menu.
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.
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.
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.
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 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:
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:
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.
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com