Why Your Website Images Do More Than Look Good

Images on your website are not just decoration — they are one of the fastest ways to build credibility, guide visitors toward action, and get found in search results. A professional, well-placed image tells potential customers what you do before they read a single word. When your visuals are optimized and linked to the right destinations, they become active parts of your lead funnel, not just filler.

The Image Widget in your website builder lets you place, style, and connect images anywhere on your site. Use the Image Widget to:

• Turn images into conversion buttons — Link any image to a service page, a pop-up form, a downloadable file, or any URL, so visitors can take action directly from your visuals.

• Improve your search engine visibility — Add Alternative Text to every image so search engines can read and index your pictures, helping more customers find your business online.

• Match your professional brand — Control dimensions, borders, shadows, spacing, and hover effects to make every image look intentional and on-brand.

• Create a consistent look across your site — Use the Global Image design settings to apply a uniform style to all image widgets at once, saving you time when making site-wide updates.

How to Add an Image to Your Website

To add an Image Widget to your website, open your website builder and navigate to the page where you want to place an image. Drag the Image Widget from the widget panel onto the row or column where you want the image to appear. The Image Widget adds a picture inside a specific row or column — it does not change or replace the background image of a section. To learn how to add widgets to your website in general, see How to Add Widgets to Your Website.

Once you place the Image Widget, the Content Editor panel opens automatically on the left side of your screen. Click the Replace button to select an image. The image picker opens, showing a library of available stock photos organized in folders, along with an option to upload your own images.

The screenshot above shows the image picker panel. On the left side of the panel, a list of folders organizes available images by category. The center of the panel displays a grid of thumbnail previews for the images inside the selected folder. In the top right corner of the panel, the + Upload button lets you add your own images from your device. A Full View toggle is also available to expand the image grid for more browsing options. The image picker does not include video files or documents — only image files can be selected here.

From the image picker, you can:

1. Click a folder on the left side of the panel to browse images in that category.

2. Click the + Upload button in the top right corner to upload an image from your device.

3. Click the Full View toggle to expand the image grid and see more options at once.

For detailed instructions on navigating and managing your image library, see How to Use the Image Picker.

How to Customize Your Image Widget

After placing and selecting an image, you can customize how the image looks and behaves using two editor panels: the Content Editor and the Design Editor. Click the Content tab or the Design tab at the top of the left-side panel to switch between the two editors.

Content Editor: Control What Your Image Does

The screenshot above shows the Content Editor panel. The panel displays the following options from top to bottom: Replace to swap the current image, Edit to open the Photo Editor, Link to connect the image to a destination, Alternative Text to add SEO-friendly image description text, Tooltip to add hover text, Caption to add text below the image, and Alternate image on hover to swap the image when a visitor mouses over it. The Content Editor does not include spacing or border controls — those are found in the Design Editor.

Use the Content Editor to control the following:

• Replace the image — Click Replace to open the image picker and swap the current image for a different one.

• Edit the image — Click Edit to open the Photo Editor, where you can crop, adjust brightness, apply filters, and make other image-level changes.

• Link the image — Click Link to connect the image to a destination. Visitors who click the image will be taken to the linked destination. You can link an image to another page on your site, an external URL, a pop-up, a section anchor, an email address, or a downloadable file.

• Add Alternative Text — Click the Alternative Text field and type a description of the image. Search engines use Alternative Text to read and index your image, which improves your site's visibility in search results. Describe what is shown in the image in plain language.

• Add a Tooltip — Click the Tooltip field and type the text you want visitors to see when they hover their cursor over the image.

• Add a Caption — Click the Caption field and type the text you want displayed directly below the image on your website.

• Add an Alternate image on hover — Click Alternate image on hover and select a second image. The alternate image will appear when a visitor moves their cursor over the original image.

Design Editor: Control How Your Image Looks

The screenshot above shows the Design Editor panel. The panel is divided into four collapsible sections displayed as labeled rows: Layout, Style, Animation, and Spacing. Click any section label to expand or collapse the controls for that section. The Design Editor does not include image linking or text overlay options — those are found in the Content Editor.

Layout: Resize Your Image

The screenshot above shows the Layout section of the Design Editor. A single horizontal slider control is displayed. Dragging the slider to the right increases the image width, and dragging it to the left decreases the image width. The Layout section does not include height controls, border settings, or spacing adjustments — those are in the Style and Spacing sections.

To resize the image, click the Layout row in the Design Editor to expand the section. Click and drag the width slider left or right to scale the image to the size you want. The image scales proportionally as you drag the slider.

Style: Add Borders, Corners, and Shadows

The screenshot above shows the Style section of the Design Editor. The section displays five controls: a Border Style dropdown to choose between none, solid, dashed, or dotted borders; a Border Color swatch to set the border color; a Border Width field to set the border thickness in pixels; a Corner Radius field to round the corners of the image; and a Shadow toggle to add a drop shadow behind the image. The Style section does not include animation or spacing controls — those are in the Animation and Spacing sections.

To apply style effects to your image, click the Style row in the Design Editor to expand the section. Use the available controls to add the following effects:

• Border style, color, and width — Choose the border type, set a color, and define the thickness.

• Corner radius — Enter a value to round the corners of the image.

• Shadow — Toggle the shadow option to add a drop shadow behind the image.

Animation: Control How Your Image Enters the Page

The screenshot above shows the Animation section of the Design Editor. The section displays two controls: a Trigger dropdown that determines when the animation starts, and an Animation dropdown that lists the available animation effects to choose from. The Animation section does not control image size, borders, or spacing — those are in the Layout, Style, and Spacing sections.

To set an animation on your image, click the Animation row in the Design Editor to expand the section. Use the two controls to define the animation behavior:

• Trigger — Select when the animation begins. Choose Entrance to start the animation when the page loads, or choose Scroll to start the animation when a visitor scrolls to the image on the page.

• Animation — Select the animation effect you want to apply to the image from the dropdown list.

Spacing: Control the Space Around Your Image

The screenshot above shows the Spacing section of the Design Editor. A visual square diagram is displayed with numeric input fields on each side (top, right, bottom, and left). The outer set of fields controls the Margin — the space between the Image Widget and the other widgets around it. The inner set of fields controls the Padding — the space between the image itself and the border of the Image Widget container. The Spacing section does not control image size or visual effects — those are in the Layout and Style sections.

To adjust spacing around your image, click the Spacing row in the Design Editor to expand the section. Enter values in the top, right, bottom, and left fields for the following:

• Margin — The outer spacing between the Image Widget and the widgets positioned around it on the page.

• Padding — The inner spacing between the image and the edge of the Image Widget container.

How to Apply a Consistent Style to All Images on Your Site

The Global Image design setting lets you apply the same design style to every Image Widget across your entire website at once. When you update the global image design, all Image Widgets on every page of your site update to reflect the new style. Any design changes you make to a specific individual Image Widget are saved separately and will override the global settings for that widget only.

To access the Global Image design settings, open your website builder and navigate to the global design panel. Select Image from the list of global widget styles and make your design changes. The same Layout, Style, Animation, and Spacing controls described in the Design Editor section above are available in the global settings.

Frequently Asked Questions

What does this article cover?

This article covers how to add an Image Widget to your website, how to select and replace images using the image picker, and how to customize the content, design, and spacing of your Image Widget using the Content Editor and Design Editor. This article also covers how to apply global image styles across your entire site. This article does not cover how to change the background image of a section or row — the Image Widget places an image inside a column, not behind a section. This article does not cover how to add or manage video on your website.

Does the Image Widget change my page's background image?

No. The Image Widget places an image inside a specific row or column on your page. The Image Widget does not change or replace the background image of a section or row. To change a section's background image, use the background settings for that section directly in your website builder.

Can I link an image to an external website or a file download?

Yes. Using the Link option in the Content Editor, you can connect any image to an external URL, another page on your site, a pop-up, a section anchor, an email address, or a downloadable file. When a visitor clicks the linked image, they will be taken to the destination you specified.

What is Alternative Text and why does it matter for my website?

Alternative Text is a written description of an image that search engines use to read and index your images. Adding Alternative Text to every image on your website helps search engines understand what each image shows, which can improve your site's ranking in search results and help more customers find your business online. To add Alternative Text to an image, click the Alternative Text field in the Content Editor and type a plain-language description of what the image shows.

Can I use any image I find online in my Image Widget?

No. When uploading images to use on your website, you must have permission to use any photo that comes from a photographer, another business, or any other third party. Using images without permission may violate copyright law. Use the stock photos available in the image picker library, or upload images that you own or have a license to use.

Where can I learn more about adding widgets to my website?

For step-by-step instructions on placing any widget on your website, see How to Add Widgets to Your Website.

```