Interaktive Team Mitglied Section in Elementor erstellen: Eine Schritt-für-Schritt-Anleitung
SHARE
Verbessere das Nutzererlebnis deiner Website mit interaktiven Hover Effekten
In der heutigen digitalen Welt reicht es nicht mehr aus, nur statische Webdesigns zu verwenden. Interaktive Elemente wie Hover-Animationen verwandeln einfache Webseiten-Interaktionen in eindrucksvolle Erlebnisse. Diese Anleitung zeigt, wie du mit Elementor Pro eine ansprechende Team-Sektion mit eleganten Hover-Effekten erstellst.
Das Endergebnis: Was wir bauen
Unsere Team-Sektion wird ein modernes und interaktives Design haben, bei dem jedes Teammitglied in einem kreisförmigen Container angezeigt wird. Beim Hover über ein Bild passiert folgendes:
- Eine sanfte Skalierungsanimation des Bildes
- Eine dunkle Überlagerung erscheint fließend
- Der Name und die Position des Teammitglieds werden in weißer Schrift sichtbar
- Social-Media-Icons erleichtern die Kontaktaufnahme
- Ein dezenter Schatteneffekt sorgt für optische Tiefe
Mobile-First Überlegungen
Das Design ist speziell für mobile Nutzer optimiert:
- Kreise als Indikatoren zeigen, wo getippt werden kann
- Animationen, die Touch-Gesten statt Hover verwenden
- Intelligente Interaktionsmechanik: Kreise verschwinden nach der ersten Berührung
- Durchgängige Funktionalität auf allen Geräten
Grundvoraussetzungen für die Umsetzung
Vor dem Start benötigst du:
- Elementor Pro (Advanced Plan)
- Grundkenntnisse in der Arbeit mit Containern
- Quadratische Teammitglied-Bilder
- Die Möglichkeit, benutzerdefiniertes CSS zu integrieren
Struktur der wichtigsten Komponenten
Das Design besteht aus mehreren verschachtelten Containern:
1. Hauptsektion (Main Section Container)
- Vertikales Full-Width-Layout
- Höhe: 100vh
- Zentrierte Inhaltsausrichtung
2. Karten-Container (Card Container)
- 33 % Breite für ein dreispaltiges Layout
- Abgerundete Kanten für kreisförmige Darstellung
- Benutzerdefinierte Hover-Effekte
3. Inhaltselemente (Content Elements)
- Teammitglied-Bild
- Overlay-Container
- Name und Positionstext
- Social-Media-Icons
- Klick-Indikatoren für Mobilgeräte
CSS-Umsetzung
Die Animation basiert auf folgenden wichtigen CSS-Eigenschaften:
- transform: scale() für das Vergrößern des Bildes
- opacity-Übergänge für die Overlay-Effekte
- position: absolute zur Positionierung der Overlays
- Benutzerdefinierte Klassen für Hover-Zustände
- Mobile-spezifische Animationsklassen
Techniken zur mobilen Optimierung
Um eine reibungslose Leistung auf Mobilgeräten sicherzustellen:
1. Anpassung des responsiven Layouts
- Umstellung auf ein vertikales Spaltenlayout für kleinere Bildschirme
- Anpassung von Abständen und Padding
- Erhöhte Touch-Flächen für eine benutzerfreundliche Interaktion
2. Interaktive Elemente
- Klick-Hinweise durch kleine Kreis-Indikatoren
- JavaScript-gestützte Touch-Interaktionen
- Weiche Statusübergänge für ein flüssiges Erlebnis
Best Practices und Tipps
Für eine optimale Umsetzung:
- Einheitliche Container-Namenskonventionen verwenden
- Elemente in der richtigen Reihenfolge stapeln
- Die Animationen auf verschiedenen Geräten testen
- Sicherstellen, dass Farbkontraste barrierefrei sind
- Bildgrößen optimieren, um die Ladezeiten gering zu halten
Hover-Animationen müssen nicht kompliziert sein. Mit Elementor Pro und einer durchdachten Struktur kannst du professionelle, interaktive Effekte erstellen, die die Nutzererfahrung verbessern und der Team-Sektion deiner Website ein modernes, ansprechendes Design verleihen.
Hinweise zur Umsetzung
- Erstelle immer ein Backup deiner Website, bevor du benutzerdefinierten Code hinzufügst
- Teste die Animationen in verschiedenen Browsern
- Berücksichtige die Ladeleistung, wenn du Animationen einfügst
- Stelle sicher, dass alle interaktiven Elemente per Tastatur zugänglich sind
- Halte das Design konsistent mit dem restlichen Stil deiner Website
Durch diese Anleitung kannst du eine hochwertige Hover-Animation umsetzen, die auf allen Geräten reibungslos funktioniert. So erhöhst du das Nutzererlebnis und sorgst dafür, dass Besucher länger auf deiner Website verweilen.
1. Desktop Version
CSS Code
.hover-container {
aspect-ratio: 1/1;
}
.round-image:hover .hover-content {
opacity: 1;
transform: translate(-50%, -50%) scale(1) !important; /* Endgröße: 1 (sichtbar) */
}
.hover-content {
transform: translate(-50%, -50%) scale(0) !important; /* Startgröße: 0 (unsichtbar) */
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease !important;
text-align: center;
pointer-events: none;
transition: box-shadow 0.3s ease-in-out !important; /* Sanfte Übergänge */
}
.image {
overflow: hidden;
border-radius: 50%;
aspect-ratio: 1/1;
}
.image:hover .hover-content {
pointer-events: all;
}
2. Mobile-Version mit Klick-Animation
CSS Code für die mobile Version
/* Position the animated circle in the center */
.click-hint-circles {
position: absolute;
top: 25%;
left: 25%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
/* Base circles */
.click-hint-circles .circle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3); /* Circle color */
animation: pulse 1.5s infinite ease-in-out;
}
/* Animation for the pulsing effect */
@keyframes pulse {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
/* Different delays for the circles to pulse in sequence */
.click-hint-circles .circle:nth-child(1) {
animation-delay: 0s;
}
.click-hint-circles .circle:nth-child(2) {
animation-delay: 0.5s;
}
.click-hint-circles .circle:nth-child(3) {
animation-delay: 1s;
}
/* Class to hide the circles after a click */
.click-hint-circles.hide {
display: none; /* Hides the circles */
}
/* Media Query: Show circles only on mobile devices */
@media (min-width: 768px) {
.click-hint-circles {
display: none; /* Hides the circles on larger screens */
}
}
JavaScript Code für die mobile Version
<script>
// Select all round-image containers
const roundImages = document.querySelectorAll('.round-image');
// Add a click event listener to each round-image container
roundImages.forEach(function(image) {
image.addEventListener('click', function() {
const clickHintCircles = this.querySelector('.click-hint-circles'); // Find the circles
if (clickHintCircles) {
clickHintCircles.classList.add('hide'); // Hide the circles after the click
}
});
});
</script>
