Is it possible to create 4 shapes (2 rectangles and 2 trapezoids) in Webflow with changing images inside them every few seconds?

Published on
September 22, 2023

Yes, it is possible to create 4 shapes with changing images inside them every few seconds in Webflow. Here is how you can achieve this:

  1. Create the shapes: Use Webflow's built-in shape divs or create custom shapes using CSS classes. For rectangles, you can either use the square div or adjust the width and height properties of a regular div. For trapezoids, you can use CSS transforms or clip-path property to achieve the shape.

    • Create a new div for each shape on your page.
    • Apply the desired shape styles using Webflow's Style panel or custom CSS.
  2. Add image elements: Inside each shape div, add an image element. You can use Webflow's native image element or custom code to add images.

    • Drag and drop the image element inside each shape div.
    • Set the image source either by uploading an image from your local machine or by using an external image URL.
    • Adjust the image dimensions and positioning as needed.
  3. Configure interactions: In order to change the images inside the shapes every few seconds, you'll need to set up interactions.

    • Select the shape div that you want to animate.
    • Open the Interactions panel and create a new animation.
    • Set the trigger for the animation to "Page load" or a specific event like "Hover" or "Scroll".
    • Add an action to change the image source of the image element inside the shape to the desired image.
    • Set a timed delay for each image change using the "After a delay" option.
    • Repeat these steps for each shape and image combination.
  4. Preview and publish: Once you have set up the shapes and interactions, you can preview your changes in the Webflow Designer to ensure everything works as expected. If everything looks good, you can publish your site for it to go live.

By following these steps, you can create four shapes (two rectangles and two trapezoids) in Webflow with changing images inside them every few seconds, providing an engaging and dynamic visual experience for your users.

Additional questions:

  1. How can I create custom shapes in Webflow?
  2. What is Webflow's Interactions panel used for?
  3. How do I add timed delays in Webflow's interactions?