Image

Pictures are worth a thousand words. Use images to help set a tone to your site, show your personality, and display what your business has to offer. Learn to create a beautifully designed website page by adding images.

In this article:


Add an Image block

To add an Image block:

  • Click the section you want to edit or create a new one.
  • In the sidebar, select Add Content.
  • From the list, select Image.
  • Your newly created Image block will generate at the bottom of the section.
  • Click Save to keep your changes:

image1

To remove Images:

  • In your Page, hover over the existing Image and click Edit.
  • In the sidebar, scroll to the bottom to click Delete This Block.
  • Click Save to keep your changes:

Customize your Image block:

In an Image block, customize the width of the block, select the image displayed, adjust the Image Width, add an Image Alt Attribute, and select an Image Action.

Width of the Block

  • In your Page, hover over the existing Image you want to edit and click Edit.
  • Navigate to the sidebar and select the number of columns to adjust the width of the Image:

imagewidthflow

Select Image

Select the Image displayed in the block:

  • In your Page, click the Image block to access the editor.
  • In the sidebar, click Select Image.
  • From the dropdown menu, click Upload a New File or Select a Recent File to select the image.
  • Click Save to keep your changes:

imageupload

Image Width

Customize the Image width by entering the number into the Image Width field.

imagewidth2

Tip:
The image width must be in the format 10px or simply 10. Leaving the Image Width blank will keep the default width.

Image Alt Attribute

Add an image alt attribute for SEO and if the image cannot be displayed.

Image Action

Selecting an Image Action triggers an action after the image is clicked. The Image Action can be used to:

  • Lead a visitor to a custom Landing Page
  • Lead to a sale by going to a Checkout Page
  • Encourage your audience to download a file
  • Lead to any website page with a URL link
  • Open a Two-Step Optin Popup
  • And act as an anchor link to lead to a section of the page

Configure your Image Action:

  • In your Page, click the Image block to access the editor.
  • In the sidebar, locate the Image Action header.
  • Click open the dropdown menu and select the action you want initiated when the Image is clicked.
  • In the field below, specify the location or file if applicable.
  • Click Save to keep your changes:

imageaction


Block Settings

To adjust the look and feel of the Image block, configure your Block Settings.

Configure your Block Settings:

  • Hover over the block you want to customize and click Edit.
  • Configure your Block Settings in the sidebar.
  • Click Save to keep your changes:

Background

Select a background color, adjust the Border radius to create a rounded or squared border, and select the Box Shadow size.

Desktop Layout

Configure the layout of the Block displayed on a Desktop device. Hide the block, adjust the Text Alignment, customize the padding inside and outside the Block, remove the padding altogether, and adjust the placement of the block.

Mobile Layout

Configure the layout of the Block displayed on a Mobile device by choosing to hide or display the block, adjust the Text Alignment, and customize the padding inside and outside the Block.

Overlay

Customize your Image to show an Overlay on Hover, enable or disable overlay on mobile devices, select an Overlay Background and Text Color, and edit the Overlay Text.

Enabling Show Overlay on Hover will display the overlay when a visitor overs over the Image.

Animations

Create visual effects by configuring the animations settings for the block. Select the type, direction, delay, and duration of your animation.

Time Reveal

The Time Reveal setting allows you to offset the time before the content in a block is revealed after a visitor enters the page.

Contact support or access our 24/7 Live Chat:

Contact Support Live Chat

Previous Article

Form

Next Article

Multi-Video Launch

Need Help? Chat With Us Now!