The image element is a straightforward way to add visuals to your funnel or website page. Adding images that complement your content makes the page more engaging and helps visitors understand your message at a glance.

General Settings

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

Element Name

At the top of this section you'll find the element name, which is the default label for the edit option you're working on. You can keep this default name or rename it for easier identification when building your funnel page.

Image Actions

Select the redirect action you want 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:

  1. 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.
  2. Optimise Image Load: Optimising images for your website can reduce your total page load size by up to 80%. Use this toggle to enable or disable this option as needed.
  3. Alt Text: 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 colour of your image element, click on the content area you wish to adjust. Select a colour from the options provided, or enter a custom colour code to match your branding.

Styles

Under the Styles tab, you'll find additional customisation options including border-radius, visibility, custom class, and copying CSS code for later use.

Image Appearance

  1. 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.
  2. Image Radius: The Border Radius dropdown provides options to display your image in its original form, as a circle, or as an oval.
  1. Image Border: You can select the desired border type for your image.
  1. 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.

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 let you 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 text as desired, allowing you to align it to the Left, Center, Right, or justified.

Shadow

Apply box shadows to suit your design. Click the plus button to apply a default outer shadow with preset values, which can be customised further 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 lets you control how your image element is displayed, with the option to toggle visibility for desktop or mobile separately. 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 to the right of the reference number.

Animations

To add some movement to your page, select the entrance animation option.

Choose from a range of animation effects to suit your content style and audience.

To customise 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. A picture is worth a thousand words, so use them to strengthen your brand's presence and capture more leads!