Blocks with images can be found in most drawers, but are primarily located in Photos & Videos.
Once you drag your block into place, double-click the placeholder image to launch the image editor, or click Edit Image from the toolbar to begin customisation.
First, replace the placeholder image.
Click Select A Different Image to choose from:
- Stock Images and Stock Icons: enter a keyword to find pre-selected stock images and icons that are most suitable for your website.
- My Images: select from images you have already uploaded, or click Upload File to upload more images. You can also filter to image files you previously uploaded for use on print products, such as business cards, flyers and signage.
Once you have selected the image you want to use, you'll return to the image editor where you can crop the image to the portion you want to display on your website.
Choose from pre-selected aspect ratios or do a custom crop. The controls to the right of your cropping options allow you to rotate the image clockwise or counter-clockwise.
At the bottom of the editor are your SEO options. Click Add Image SEO to optimise your image for search engines.
- Use the Alt Text Attribute to describe the images for search engines like Google. It is recommended that you keep your description under 10 words.
- Use the Title Attribute to add a tool-tip when your site's visitors hover on the image.
Click Save Changes when you are done.
NOTE: The Builder supports .jpg, .png and .gif (static and animated) files. The recommended size limit per file is 10MB. Animated gifs will not animate if used as a background.
Create a hyperlink from your image by choosing Edit Link from the toolbar. This will launch your linking options.
You can choose from:
- Internal (links to pages within your website)
- External (a page on another site)
- Phone (creates a clickable phone number link, great for use on smartphones)
- Lightbox (launches a full-screen version of your image)
Click Edit Frame to add a decorative border around your image like shadows, 'tape' or 'paper'.
Click Alignment to align your image to the left, centre or right within the block column.
To place your image elsewhere in the block, click Move.
Green plus signs will appear showing where you can drop the image. Click Cancel if you decide not to move your image.
Click Remove Content (trash icon) to delete the image.
You can replace it with another element by clicking the green Add Content button that appears. This can be anything from text, a button, a video or a new image element.
To re-size your image, hover on the image and click the handle that appears in the lower-right corner. Drag the corner back and forth to increase or decrease the size of the image.