Image

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.

Spacing Option

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 (left, right, top, or bottom) depending on the selected toggle bar.
• Margin (Top and Bottom): Adjust the top or bottom margin of your content by toggling the corresponding bars.

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.

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.

Align

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

Image Option

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

To optimize image load, simply toggle it off. It comes with a warning, if you are sure you want to turn it off click "Ok"

📌Note: Optimizing images for your website can reduce your total page load side by up to 80%.

Width and Height (PX)

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

Alt Text

Ensure you add alt text for SEO purposes by providing a brief description of the image.

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.
• Open Popup: A preset popup will be displayed.
• Go to Website URL: Users will be redirected to the configured website. You can also choose whether the URL should open in a new tab.
• 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 funnel or website step.
• 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.

Animations

Choose from a variety of animation effects tailored to your content style and audience preferences. Options include:

• Entrance Fade: Introduce elements with a subtle fade effect.
• Entrance Slide: Elements slide in from different directions.
• Entrance Bounce: Add a playful, bouncing effect.
• Entrance Flip: introduce your image with a dynamic flipping motion.
• Entrance Rotate: Elements enter with a rotating motion.
• Entrance Zoom: Elements appear with a zooming effect.
• Loop Animations: Apply continuous effects to keep elements in motion.

Advanced Settings

Under the Advanced Settings 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.

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 or inner types, and adjust parameters such as X value, Y value, Blur, Spread, and Color.

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

You can enhance your image by adding a border shadow. To do this, select the border shadow dropdown and choose between the drop shadow and inner shadow options.

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 to see how it appears on different devices.

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.