The image element provides a convenient way to incorporate visuals into your funnel or website page, enhancing the overall user experience. By integrating images that complement your content, you can create a more engaging and aesthetically pleasing site, capturing the attention of visitors and effectively conveying your message.

General Settings #

When editing the image element on your funnel page, most adjustments can be made in the General Settings section located to the left.

Element Name #

At the top of this section, you will find the element name, which is the default designation for the edit option you are working on. You have the option to retain this default name or to rename it for easier identification when building out your funnel page.

Image Actions #

Select the desired redirect action for your image from the dropdown menu. Options include:

• None: Clicking the image will not prompt any actions.
• Download File: Upload or select a file from your media library to be downloaded upon clicking.
• Hide Element: Specify the elements that should be hidden when the image is selected.
• Show Element: Specify the elements to be displayed when the image is selected.
• Scroll to Element: Select the element to which the page should scroll when the image is selected.
• Step: Choose the step the image should display when clicked.
• Next Step: Redirects to the next step in the funnel or on the website.
• Call: Initiates a call to the selected number when the image is clicked.
• SMS: Initiates an SMS message to the configured number.
• Email Address: Initiates an email to the configured address.

Image #

This lets you manage the main aspects of the image. It is divided into:

• Image: Clicking on the image icon directs you to the storage page, where you can upload your desired image. Once uploaded, double-click the image to load it into the editor’s space.
• Optimize Image Load: Optimizing images for your website can reduce your total page load size by up to 80%. With this toggle, you can enable or disable this option according to your preferences.
• Alt Text: Ensure you add alt text for SEO purposes by providing a brief description of the image.

Size #

Specify the width and height of the image by entering your desired dimensions in the designated fields.

Background Color #

To change the background color of your image element, click on the content area you wish to adjust. You can then select a color from the provided options or enter a custom color code to match your branding.

Styles #

Under the Styles tab, you have additional customization options such as adding border-radius, adjusting visibility, adding a custom class, and copying the CSS code for later use.

Image Appearance #

• Opacity: You can control the degree to which your text or content fades within each element box. The opacity options range from None, Light, and Half, to Heavy fade.
• Image Radius: The Border Radius dropdown provides options to display your image in its original form, as a circle, or as an oval.
• Image Border: You can select the desired border type for your image.
• Image Shadow: Enhance your image by adding a border shadow. Select the border shadow dropdown and choose between the drop shadow and inner shadow options.

Spacing Options #

The spacing options in the General Settings section allow you to adjust the padding and margins for your image content.

• Padding (Left, Right, Top, and Bottom): These four toggle bars enable you to move the content in the specified direction depending on the selected toggle bar.
• Margin (Top and Bottom): Adjust the top or bottom margin of your content by toggling the corresponding bars.

Align #

You can adjust the positioning of your content as desired, allowing you to align it to the Left, Center, Right, or justified.

Shadow #

Apply box shadows to fit your design needs. Click the plus button to apply a default outer shadow with preset values, which can be further customized with specific settings. Add multiple shadows by clicking the plus button, allowing for more intricate designs. Modify each shadow by selecting between outer and inner types, and adjust parameters such as X value, Y value, Blur, Spread, and Color.

Visibility #

The Visibility section allows you to control the display of your image element, allowing you to toggle its visibility for either desktop or mobile devices according to your requirements. You can preview your changes using the desktop and mobile options in the top left corner of the funnel builder.

Custom Class #

Enter or paste your custom class code in the provided field.

CSS Selector #

To copy a CSS selector, click the “copy” icon located to the right of the reference number.

Animations #

To add a splash of movement to your page, select the entrance animation option. Choose from a variety of animation effects tailored to your content style and audience preferences. To customize the animation details, click Adjust Animation. This lets you modify the scale, duration, delay, and easing motion of your animation.

Use this element to add more visual interest to your pages. They say a picture is worth a thousand words, so use them to increase your brand’s presence and capture many leads!

Frequently Asked Questions #

How do I add an image to my page? #

Click the image icon to open the storage page, upload your image, then double-click it to load it into the editor’s space.

Can I make an image clickable? #

Yes. Use Image Actions to set behavior such as downloading a file, scrolling to an element, calling, texting, emailing, or moving to a funnel step.

Why should I add alt text? #

Alt text provides a brief description of the image for SEO purposes and improves accessibility.

How do I display an image as a circle? #

Use the Image Radius dropdown under Image Appearance and select the circle or oval option.

How can I reduce image impact on page load? #

Enable Optimize Image Load, which can reduce total page load size by up to 80% without losing quality.

Can I show an image only on desktop or mobile? #

Yes. Use the Visibility section to toggle the image element for desktop only, mobile only, or both.