Visual Element

Incorporating images into your webpage or sales funnel offers a streamlined way to enhance the design and overall user interaction. By using well-placed visuals that align with your message, you can create a more visually appealing site that grabs the visitor’s attention and communicates your ideas effectively.

Customization Settings

When you're modifying the image element on your page, most configurations are accessible through the General Settings panel located on the left side of the editor.

Element Label

At the top of the General Settings section, you’ll see the element name, which serves as the default label for the specific part you’re editing. You can keep this name or change it to something more descriptive to simplify navigation as you build your page.

Adjusting Spacing

In the General Settings, you can fine-tune the spacing around your image.

• Padding: Control the distance between the image and the content around it by adjusting the left, right, top, or bottom padding.

• Margin: Customize the space between the image and its surrounding elements, either at the top or bottom.

Background Color

To alter the background color of your image, click on the content block you wish to edit. You can then pick a color from the available options or input a specific color code that matches your branding guidelines.

Transparency

Adjust the transparency of your image's background by selecting from None, Light, Half, or Heavy opacity options, depending on the level of fade you need.

Alignment Options

Position your image or text according to your preference, whether that's aligning to the left, center, right, or using full justification.

Image Upload

To add an image, click the image icon to access your media storage. From there, upload your file and double-click on it to place it into the editing area.

Image Optimization

You can toggle off image optimization if necessary, but a warning will pop up before you proceed. Image optimization can reduce the overall load time of your webpage by as much as 80%.

Setting Dimensions

You have the option to input specific width and height values (in pixels) for your image.

Alt Text for SEO

To improve SEO, add a brief description of the image in the Alt Text field.

Image Actions

Choose what happens when someone clicks on your image. Actions can include:

• None: Clicking the image won’t trigger anything.

• Open Popup: Displays a preset popup window.

• Go to URL: Redirects visitors to another website, with the option to open the URL in a new tab.

• Hide or Show Elements: You can specify which elements should appear or disappear when the image is clicked.

• Scroll to Element: Automatically scrolls the page to a selected element.

• Call or SMS: Initiates a phone call or SMS message to a pre-configured number.

• Email: Opens the user’s email client with the designated email address.

Animation Options

Animate your image with several entry effects, such as:

• Fade, Slide, or Bounce: These add movement as the image enters the viewport.

• Flip or Rotate: More dynamic effects for a bold entrance.

• Zoom: Makes the image appear with a zoom-in effect.

• Loop Animations: Continuous motion for more engaging visuals.

Advanced Customization

The Advanced Settings tab offers more options for customizing the image, including border-radius, visibility controls, and the ability to add custom classes or copy CSS code for later use.

Shadows

Apply shadow effects to enhance the depth of your image. You can choose from outer or inner shadows and customize factors such as shadow size, spread, and color.

Image Border and Radius

You can modify the image border, selecting from different styles, and adjust the border-radius to display your image as a square, circle, or oval.

Visibility Controls

Manage the visibility of the image on desktop and mobile devices using the Visibility section. You can preview the changes across device types using the icons in the funnel builder.

Custom Class & CSS Selector

Enter your custom class code in the provided field or copy the CSS selector for future use by clicking the copy icon.