From Static to Interactive
Scroll down⭣
With our new "Hotspots" content element, you can turn your images and graphics into engaging experiences. This feature lets you create interactive areas that display extra information when hovered over, clicked, or tapped on smartphones.
Welcome to the new era of interactive content!
Team Pageflow
Whether you want to make your city map more dynamic, tell the stories of protagonists, showcase products in an engaging way, or deliver educational content interactively—Hotspots offer countless possibilities to add depth and enhance user engagement.
Let’s explore the world of Hotspots together and discover how you can leverage this versatile feature!
What are hotspots?
Hotspots are interactive areas within images or graphics that display additional information on hover, tap, or click. These areas can optionally show a "tooltip" containing text, images, or links to further content. Hotspots enhance your content by adding engaging and informative elements without making the image appear cluttered.
Variants
1. Mouseover and Tap: The tooltip appears as soon as you hover over the active area with your mouse or tap on it on a smartphone.
Try it here ⭣
2. Pan and Zoom When you click or tap on a hotspot, the marked image area is zoomed in. The zoom intensity can be adjusted in the editor using a slider.
3. Pan and Zoom only on smartphones A sensible solution for mobile devices when a motif is too detailed to be displayed clearly without zooming.
Image and Placement
You can use the same image for both the desktop and smartphone versions, as long as the dimensions and motifs work for both aspect ratios.
Your input formats, like all images, will be converted to WebP, ensuring that PNGs and GIFs retain their transparency.
Mobile Hotspots
If the image or individual motifs are too small on a smartphone, a separate portrait-oriented image can be used to improve the visibility and placement of the hotspots on smartphones. We’ll show examples of this further along.
Creating Areas
The active area around the hotspot indicator can be created as a rectangle or polygon. A hotspot is activated on hover at the boundaries of this marked area.
Precision
The outlines and indicators of an area can be freely moved by dragging. For precise alignment, individual points on the image can be fine-tuned on the X and Y axes by entering percentage values.
The polygon feature is particularly helpful for closely positioned motifs that need to be clearly separated. This ensures that only the exact area within the marked region responds to a hover or tap.
Active Images
For each hotspot, you can use an "active image" that differs from the original. This allows you to create graphic effects that highlight specific areas and draw users' attention.
In the previously shown Hotspots element, four variations of the original image were created, each highlighting one of the four people in color while the rest of the image remains in grayscale. Here are all the variations for comparison:
Swipe through to see the examples ⭣
How to Use Hotspots Effectively
Enhance Usability Hotspots make it easy for your users to quickly and intuitively find relevant information. Whether it's product details, descriptions of historical events, or team member introductions, hotspots ensure that important information doesn't go unnoticed.
Create Interactive Learning Experiences In e-learning environments, hotspots help break down complex topics and make them easier to understand. Through interactive graphics and images, learners can explore on their own and actively engage with the material.
Improve Data Visualization With hotspots, you can present data in a visually appealing way. Interactive charts and infographics make it easier for users to interpret data and identify patterns. This is particularly useful in fields like finance, science, and market research.
Increase Content Interactivity Interactive content captures your audience’s attention and boosts engagement. In marketing campaigns, annual reports, or feature stories, hotspots help keep users on your site longer and encourage them to explore your offerings more deeply.
Examples
Now that you know how Hotspots can transform your content into immersive, interactive experiences, it's time to see them in action. Below are a variety of examples showcasing the versatility and power of Hotspots. Enjoy!
Introducing the Chic Essentials for the Modern Man
Classic Leather Watch: Perfect for any setting, this watch's sleek design and premium leather strap make it a must-have accessory for the discerning gentleman. Whether at the office or a weekend getaway, its elegance never goes unnoticed.
Vintage Leather Boots: Step out in style with these rugged yet refined leather boots. Built for durability and comfort, they are the ideal companion for your daily adventures or an evening out.
Premium Leather Belt: Complete your look with our high-quality leather belt. Its sturdy buckle and rich brown tone ensure it pairs seamlessly with any outfit, adding a touch of sophistication.
Soft Cotton Crew Neck Sweater: Embrace comfort without compromising on style. This soft cotton sweater, in a versatile light grey, is perfect for layering and offers a cozy fit for those cooler days.
Classic Round Sunglasses: Protect your eyes with flair. Our classic round sunglasses not only offer excellent UV protection but also come with a stylish leather case, making them a practical and fashionable addition to your accessory collection.
Tailored Checkered Trousers: Experience the perfect blend of comfort and elegance with our tailored checkered trousers. Crafted from high-quality fabric, they are ideal for both professional and casual wear, ensuring you always make a polished impression.
QUIZTIME
What do you think are the average monthly expenses of an American household?
Milestones in the History of Space Exploration
Space exploration has always been a frontier of human ingenuity and ambition. The journey to understand and explore the vast cosmos is punctuated by remarkable milestones that have propelled humanity into the space age.
- Image: NASA
Sight Seeing in Melbourne
Welcome to Melbourne, a city full of diversity and charm! Start your exploration in the Docklands, a modern harbor district with impressive architecture. Stroll across the artistic Webb Bridge and enjoy the view of the Yarra River.
Immerse yourself in the Melbourne Aquarium and discover the underwater world with sharks, turtles, and colorful fish. Next, visit the Arts Centre Melbourne with its iconic architecture and a variety of theater and art exhibitions.
Visit the Shrine of Remembrance, an impressive memorial with breathtaking views of the city. End your day at the Melbourne Museum where you can delve into the history and culture of Australia.
Melbourne offers the perfect blend of culture, history, and modern architecture – a must-visit for every traveler!
Melbourne is a city full of contrasts – from modern harbor districts to cultural centers to historical monuments. These tourist attractions offer a wonderful insight into what makes Melbourne so special. Plan your visit and let yourself be enchanted by the diversity and charm of this unique city!
the Beach Crew
From left to right, there's Amy, Janet, Melissa, and Jules. Each of them has a unique story and a special connection to this tranquil place.
Amy is the calm and thoughtful one of the group. She finds inspiration in the waves and often comes here to think and recharge.
Janet is all about the simple joys of life. Her radiant smile and love for sunsets make her the heart of the group, always reminding everyone to appreciate the moment.
Melissa is the adventurous spirit, always ready to explore new places. The beach is her playground, where she can let loose and have fun with her closest friends.
Jules is the laid-back, introspective guy who feels most at home by the sea. He comes here to escape the busyness of life and find his inner peace.
Click on the Hotspot links and dive into their stories ⭣
Jules
Jules had always been drawn to the sea. The rhythm of the waves, the smell of salt in the air, and the gentle sway of the palm trees felt like home to him. This beach, with its golden sands and rustic huts, was his sanctuary.
Today, Jules was taking a break from his usual routine. Wearing his comfortable hoodie, his identification badge still around his neck, he walked along the beach, enjoying the warmth of the setting sun on his face. The evening breeze ruffled his hair, and he smiled, lost in memories of simpler times.
The sun dipped lower, casting a golden hue over everything. Jules paused to take in the scene—families laughing, children building sandcastles, and the distant hum of a local band. He knew he’d soon have to return to his responsibilities, but for now, he was content to just be Jules, enjoying the peace this place always brought him.
Janet
Janet felt at home by the sea. The beach was her refuge, where she could escape the pressures of her busy life and find a sense of peace. As the sun began to set, painting the sky with soft hues of orange and pink, she walked along the shore, her wide-brimmed hat shielding her from the fading light.
The evening breeze was gentle, carrying the scent of saltwater and the sounds of laughter from families enjoying the day. Janet paused by the water's edge, letting the cool waves touch her feet. Here, she could let go of her worries and simply enjoy the moment.
As the sun dipped below the horizon, Janet took a deep breath, savoring the tranquility. She knew that tomorrow would bring new challenges, but for now, she was content. With a final glance at the sky, she turned back toward the beach huts, feeling refreshed and ready to face whatever lay ahead.
Conclusion
Hotspots offer an exciting way to elevate your content by making it interactive, informative, and engaging, also on smartphones.
Whether you’re looking to enhance user experiences, simplify complex data, or drive deeper engagement, Hotspots give you the flexibility and creativity to achieve your goals.
With these examples and tips, you’re now ready to start transforming your static visuals into dynamic, interactive content that will capture attention and amaze your audience.
FIND OUT MORE