Image Blocks Follow

Blocks with images can be found in most drawers, but are primarily located in Photos & Videos.

blocks_images.jpg

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 customization.

imageblocks_editimage.jpg

Edit Image

imageblocks_editimagestage.jpg

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.

imageblocks_cropimage.jpg

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.

imageblocks_seo.jpg

At the bottom of the editor are your SEO options. Click Add Image SEO to optimize 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 ten 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.

 

Edit Link

imageblocks_editlink.jpg

Create a hyperlink from your image by choosing Edit Link from the toolbar. This will launch your linking options.

buttonstyle_createhyperlink.jpg

You can choose from:

  • Internal (links to pages within your website)
  • External (a page on another site)
  • Email
  • Phone (create a clickable phone number link, great for use on smartphones)
  • Lightbox (launches a fullscreen version of your image)

Edit Frame

imageblocks.editframe.jpg

Click Edit Frame to add a decorative border around your image like shadows, "tape" or "paper."

Alignment

imageblocks_alignment.jpg

Click Alignment to align your image left, center, or right within the block column.

Move Content

imageblocks_movecontent.jpg

To place your image elsewhere in the block, click Move.

imageblocks_movecontentdrop.jpg

Green plus signs will appear showing where you can drop the image. Click Cancel if you decide not to move your image.

Remove Content

Click the Remove Content (trash icon) to delete the image.

imageblocks_removecontent.jpg

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.

imageblocks_addcontent.jpg

Re-size

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.

imageblocks_resize.jpg