Image Optimization In the Site Builder

In this article, we’ll go over how to toggle your images for optimization in Funnels and Websites.

Activating Image Optimization

• Navigate to Sites on the left and access either the funnel or the website tabs at the top.
• Click to edit any funnel or website of your choice. Choose the Image element from the list of elements on the left-hand side, or select an existing image element from your page.

• Under the element settings (on the right-hand side) toggle image optimization. 

Please Note: There is also a toggle for this in funnel settings, keep in mind that the element in the builder will override these settings. You can enable or disable this by default though.

Entrance and Hover Animations for Images and Buttons

Enhance your content with dynamic visual effects, making your presentations and online materials more engaging and interactive.

How to Use:

1. Select or add the image or button you wish to animate within the builder.
2. Navigate to the animations tab in the style editor.
3. Pick from various entrance, hover, and loop animations such as fade, slide, bounce, rotate, and zoom.
4. View the effect directly on the builder page.
5. Save your changes and publish the page.

FAQs

Q1: What is image optimization and why is it important?

• Answer: Image optimization reduces the file size of images without significantly affecting their quality. This is crucial for faster page load times, which improves user experience and can positively impact SEO rankings.

Q2: How do I know if my images are optimized?

• Answer: After enabling image optimization in the element settings, you can check the file size of your images in your site’s backend or use online tools to verify that the images are compressed effectively.

Q3: Can I override the image optimization setting at the individual image level?

• Answer: Yes, you can enable or disable image optimization for individual images using the settings in the image element. This setting will override the default optimization settings applied at the funnel or website level.

Q4: What types of animations can I apply to my images and buttons?

• Answer: You can apply a variety of animations including Entrance (Fade, Slide, Bounce, Rotate, Zoom), Hover (Zoom, Color Change), and Loop animations to enhance interactivity and visual appeal.

Q5: Will the animations work on all devices and screen sizes?

• Answer: Yes, the animations are designed to be responsive and should work seamlessly across all devices and screen sizes.

Q6: How do I preview animations before publishing?

• Answer: In the site builder, you can view the animations in real-time by selecting the animation options and checking the effect directly on the builder page.

Q7: Can I apply multiple animations to the same image or button?

• Answer: Yes, you can combine different types of animations for a more dynamic effect. For example, you might use an entrance animation along with hover effects.

Q8: What should I do if my image animations are not displaying correctly?

• Answer: Ensure that you have selected the correct animation options and saved your changes. If issues persist, check for conflicts with other design elements or consult the platform’s support resources.

Q9: How do I test image optimization and animations before going live?

• Answer: Use the preview function in the site builder to test both image optimization and animations. You can also activate test modes for payment settings if applicable to ensure everything functions as expected before publishing.