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.
When editing the image element on your funnel page, most adjustments can be made in the General Settings section located to the left.
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.
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.
To change the background colour of your image element, click on the content area you wish to adjust. You can then select a colour from the provided options or enter a custom colour code to match your branding.
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.
You can adjust the positioning of your text as desired, allowing you to align it to the Left, Center, Right, or Justified.
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.
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%.
Specify the width and height of the image by entering your desired dimensions in the designated fields.
Ensure you add alt text for SEO purposes by providing a brief description of the image.
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.
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.
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.
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 customised 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 Colour.
The Border Radius dropdown provides options to display your image in its original form, as a circle, or as an oval.
You can select the desired border type for your image.
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.
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.
Enter or paste your custom class code in the provided field.
To copy a CSS selector, click the "copy" icon located to the right of the reference number.
