Wie zeigt man Sprecherinfos beim Hover?

Möchtest du deine Event-Website mit interaktiven Elementen erweitern – z. B. einem Sprechertext, der beim Überfahren des Bildes erscheint? Hier findest du eine Schritt-für-Schritt-Anleitung.

Schritt 1: Abschnitt für Sprecher hinzufügen

Gehe zu Website > Liste der Seiten und wähle die Unterseite aus, die du bearbeiten möchtest.

Füge einen Abschnitt aus der Gruppe Speaker hinzu – wie im folgenden Beispiel gezeigt: Redner

Schritt 2: Element-ID konfigurieren

Füge dem Abschnitt eine eindeutige Element-ID hinzu, damit sich Stil und Funktion gezielt auf diesen Abschnitt beziehen. Redner ID

Schritt 3: Sprecherbeschreibung einfügen

  1. Suche im HTML-Code das < img >-Element, das das Sprecherbild darstellt Redner HTML

  2. Direkt unter jedem Bild fügst du ein < div >-Element mit der Klasse hover-description ein, das den Beschreibungstext enthält:

    <div class="hover-description">
  DEIN TEXT HIER
</div>

    Das sollte so aussehen wie auf dem Screenshot unten: Screenshot

Schritt 4: Weitere Sprecher hinzufügen

Wenn du mehr als drei Sprecher einfügen möchtest, nutze die Option Duplizieren, um eine weitere Zeile zu erzeugen. Denke daran, Bild und Beschreibungstext jeweils anzupassen. Duplizierung

Schritt 5: Styling in CSS

  1. Gehe zu Einstellungen > Für Entwickler > custom.css.
  2. Füge folgenden CSS-Code ein, um die Beschreibung beim Überfahren des Bildes sichtbar zu machen:
#speakers .column {
    position: relative;
}

#speakers .column img {
    display: block;
    width: 100%;
    height: auto;
}

.hover-description {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 15px;
    text-align:left;
    box-sizing: border-box;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

#speakers .column:hover .hover-description {
    opacity: 1;
    pointer-events: auto; 
}

Oto tłumaczenie na język niemiecki:

Schritt 6: Änderungen speichern und testen

  1. Speichern Sie alle Änderungen im System.
  2. Gehen Sie auf die Seite, auf der Sie die Änderungen vorgenommen haben.
  3. Wenn Sie mit der Maus über das Foto des/der Referenten/in fahren, sollte seine/ihre Beschreibung eingeblendet werden.

Auf diese Weise fügen Sie Ihrer Website ein attraktives, interaktives Element hinzu, das die Aufmerksamkeit der Besucher auf sich zieht.