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.