Overview

Images are essential for breaking up text, showcasing your work, and establishing your brand's credibility. The Image Widget is your flexible tool for placing stunning visuals on your site and making them functional.

This widget empowers you to turn static pictures into active parts of your lead funnel:

• Drive Action: Link an image to a specific action—such as opening a pop-up, navigating to a service page, or starting a file download—turning your visuals into conversion buttons.

• Boost SEO: Easily add Alternative Text to every image, ensuring search engines can read and index your pictures, improving your site's visibility.

• Customize Appearance: Fine-tune the image's dimensions, add borders and shadows, and control the surrounding spacing to match your professional design aesthetic.

Guide

Add a button widget onto your responsive website. To learn more about adding widgets to your website, see Adding Widgets.

Once the widget has been placed, the Content Editor appears. Click the Replace button to select an image. Choose between the existing stock photos in the Photo Gallery or add your own images using the + Upload button.

From here, you can:

1. Select the folder with images you want to use
2. Press the + Upload button to upload your own image
3. Switch to the Full View for more image choice options

See the Image picker article for more information on the image picker.

Image options

The image options are divided into two Editors - the Content Editor and the Design Editor.

Content Editor

The Content Editor controls the content of the image - In this tab, you can:

• Replace the image - Change the graphic of the image widget.
• Edit the image - Change image properties by using the Photo Editor.
• Link the image - Images can be linked to other pages and URLs, popups, anchors, email addresses and downloadable files. When a visitor clicks on the image, they will be taken to the link.
• Add Alternative Text - Enables search engines to recognize image content. Use this text to describe the image.
• Add a Tooltip - Text shown when a visitor hovers over an image.
• Add a Caption - Text shown below the image.
• Add an Alternate image on hover - Changes the image when the user mouses over the image.

Design Editor

The design tab is displayed in one window but is divided into four predefined sections - Layout, Style, Animation, and Spacing.

Layout

Use the layout section to scale the image to the size you would like. Just click and drag the slider.

Style

Use the style section to add other effects to your image such as:

• Border style, color and width
• Corner radius
• Shadow

Animation

Use the Animation section to load the image on the page in fun and visually appealing ways

• Trigger - This determines when the animation begins
  • Upon the page loading (Entrance)
  • When the user scrolls to the image on the page (Scroll)
• Animation - These are all the fun animations you can choose from

Spacing

Use the spacing section to control the space of the widget relative to other widgets around it. You can edit the:

• Margin - this is the outer spacing, indicating the numbers on the outer section of the spacing square.
• Padding - this is the inner spacing, indicating the numbers on the inner section of the spacing square.

Global Images 

You can also make content and design changes to your image widgets using the global image design. Changing global elements will change all image widgets to have a consistent design. Any changes to specific individual image widgets will be saved.

Considerations

When uploading photos to use in your Website, make sure to get permission to use photos coming from photographers, businesses, and other third parties.  

Remember that using the image widget does not change the background picture. Instead, it adds a picture onto a row or column.