Drag and Drop Editor: Add Image

<< Set up Layout Introduction Add Text>>

 

Watch a Video on Adding an Image

Written Instructions

Click on the Image Only or Text and Image block within the editor.  The right side menu will change menu options pertaining to that particular selected block.  If you select a Text and Image block, you will see text edit options below the Select Image button in the side bar.  Click the Select Image button in the sidebar to open the Image Manager.

NOTE: If you’ve used the image manager in the Block Editor, you will not see the images you upload to that image manager here. The reason for this is because in this editor you may rename or move images or folders without changing the source URL of that image.

This is how the Image Manager looks when you first open it within the Drag and Drop Email Template Editor. It has a three column layout.

In the first column, you can add and arrange folders to keep your image files organized.  Add new folders in the bottom left corner using the + New Folder button. Folders can be nested inside of other folders as well.

In the middle column, you can browse your computer for image files and upload them.  Click Upload an Image, or drag and drop your image files into the designated field.  You can select image files either one at a time, or select multiple image files at once and upload them simultaneously.

Use the Search bar to find an image file that you’d like to insert into your template.  Type in the key word of the image file name and press Enter on your keyboard to query the results.

Select the desired image that you’d like to insert into the template.  When selected in the Image Manager, a preview of the image file will appear in the third column.  This will show you data about the image file, and you can also edit the image by selecting the Edit button in the top right corner of the column.

Choose an image and press OK, this will insert the image into your template.  You also may choose to Edit the image before inserting it into the template. When you edit the image, it will actually keep the original image file and save a new copy with the updates.

Once the image is inserted you can replace the image, add a hyperlink, or edit the image.

Right below those options is the Image Alternate Text box. Add text here for anyone who is unable to see the image on their device.

If you click the Style tab at the top of the Edit Content pane, the following items will display:

dnd-image-style-pane

Alignment adjusts the alignment of the image within its block, Edge to Edge will remove the padding surrounding the image so that it is flush with the edges of the block, and Background Color will set a background color for the block that the image is placed in.

koala-edge-to-edge-off

koala-edge-to-edge-on


Feature Added: 5.0
Feature Updated: 8.1.0
ClickDimensions Version Need: 5.0
<< Set up Layout Introduction Add Text>>