🖼 Creating an Image Juxtaposition Display in H5P on WordPress

Welcome everyone! Today, we’re going to create an Image Juxtaposition display using H5P on WordPress. This tool allows you to compare two images side-by-side, where you can reveal differences between two states of an object or location. A great example of this would be showing before and after images of a place, like the transformation of Abu Dhabi over time.

🚀 Installing the Juxtaposition Module

1. Start by accessing H5P in WordPress:
   • Go to your WordPress dashboard.
   • Navigate to the H5P content area and create a new activity.
2. Search for “Image Juxtaposition”:
   • If it’s not already installed, you can click the “Get” button to install it.
   • Once installed, select Image Juxtaposition to begin creating the activity.

---

👀 Preview the Activity

Once you’ve added everything, preview your display:

1. You should see the two images side-by-side, with the slider positioned at 50% by default.
2. Hovering over the images will display the descriptions.
3. Use the slider to reveal the difference between the two images, showing the transformation of Abu Dhabi over 50 years!

---

💡 Use Cases for Image Juxtaposition

The Image Juxtaposition feature is perfect for various use cases:

1. Historical Comparison:

• Show how a city, landmark, or landscape has changed over time, like the transformation of Abu Dhabi or New York City.

2. Product Evolution:

• Compare before and after images of a product’s design changes (e.g., the evolution of a car model or smartphone).

3. Scientific Studies:

• Compare before and after states of an experiment or natural process, like comparing the effect of deforestation on a forest or the progress of a medical condition.

---

🎯 Final Thoughts

Creating an Image Juxtaposition activity in H5P is a powerful way to engage your audience with a visual, interactive experience. Whether for educational purposes, marketing, or simply to showcase the transformation of an object or place, this tool is a great way to highlight change over time.

Would you like more examples or tips for customizing this further? Let me know, and I’d be happy to help!

---

✅ Key Takeaways:

• Use H5P’s Image Juxtaposition feature to compare before-and-after images.
• Customize the slider’s position and color for the best user experience.
• Add the activity to WordPress using the shortcode block for easy embedding.

I hope this guide helps you get started with your own image juxtaposition displays!

---

📢 Want more interactive content tutorials?

👉 Subscribe to Ed-Hermit on YouTube for weekly deep dives into H5P, WordPress, and other education technology for building engaging digital content: youtube.com/@edu-hermit

Got questions or creative ways you’re using H5P? Drop them in the comments—I’d love to hear what you’re building!