Verwenden von Hover-Textschatten zum Erstellen interaktiver Inhalte mit Divi

Es kann schwierig sein, Ihre Website von ähnlichen Websites abzuheben, aber wenn Sie es einmal geschafft haben, ist es fast immer die Mühe und das Denken wert, das darin steckt. Damit Sie sich inspirieren lassen können, zeigen wir Ihnen, wie Sie beim Erstellen von Websites mit Divi interaktive Inhalte erstellen.

Das Beispiel, das wir in diesem Tutorial neu erstellen, funktioniert besonders gut für jede About-Seite, an der Sie arbeiten. Mit den integrierten Textschattenoptionen von Divi können Sie Fakten oder Unternehmensinformationen beim Hover teilen. Wir stellen außerdem sicher, dass diese Hover-Effekte nicht auf kleinere Bildschirmgrößen angewendet werden, damit die Informationen und das mobile Erlebnis nicht verloren gehen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis, das Sie erwarten können.

Desktop

Handy, Mobiltelefon

Wir stellen sicher, dass all diese Hover-Interaktionen nicht auf kleineren Bildschirmgrößen zutreffen. Während wir denselben Abschnitt und dieselben Module verwenden, erhalten wir stattdessen das folgende einfache Ergebnis:

Sich nähern

• Das Beispiel, das wir neu erstellen werden, eignet sich hervorragend für ungefähre Seiten, aber Sie können es mit jedem 5- oder 6-stelligen Wort zum Laufen bringen (passen Sie es an die Spaltenstruktur an).
• Jedem der Zeichen wird ein individuelles Textmodul gewidmet
• Wir verwenden eine Zeile mit einer ausreichenden Anzahl von Spalten, um die verschiedenen Zeichen des Wortes zu verbinden und sie so erscheinen zu lassen, als wären sie im selben Modul erstellt worden
• Standardmäßig passen wir die Textfarbe des Textmoduls an die Hintergrundfarbe des Abschnitts an
• Um sicherzustellen, dass das Zeichen lesbar bleibt, wenden wir auch einen weißen Textschatten auf das Zeichen an
• Sobald Sie mit der Maus über das Zeichen fahren, verschwindet der Textschatten und die Textfarbe ändert sich, was Ihnen das Gefühl gibt, dass der Text sich füllt
• Während du mit der Maus über einen Charakter fährst, werden auch einige zusätzliche Informationen angezeigt
• Auf kleineren Bildschirmgrößen sind die Unternehmensfakten und/oder -informationen von Anfang an da

Beginnen wir mit der Neuerstellung!

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Öffnen Sie eine neue oder vorhandene Seite und fügen Sie einen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #03008d

Abstand

Gehen Sie dann zu den Abstandseinstellungen des Abschnitts und fügen Sie benutzerdefinierte obere und untere Polster hinzu.

• Obere Polsterung: 50px
• Untere Polsterung: 50px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden.

Größe

Gehen Sie dann zu den Größeneinstellungen und lassen Sie die Zeile die gesamte Breite des Bildschirms einnehmen. Dies ist ein wichtiger Schritt, da wir damit die Entfernung mithilfe von Ansichtsfenstereinheiten manuell bestimmen können.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Im vorherigen Schritt haben wir alle Standardgrößeneinstellungen entfernt, die mit einer neuen Zeile geliefert werden. Wir müssen jedoch manuell einige Auffüllungen hinzufügen. Hier verwenden wir Viewport-Einheiten, um sicherzustellen, dass das Ergebnis bei allen Desktop-Bildschirmgrößen gleich bleibt.

• Linke Polsterung: 9vw (Desktop), 5vw (Tablet & Telefon)
• Rechte Polsterung: 5vw (Tablet & Telefon)

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Sobald Sie mit dem Ändern der Zeileneinstellungen fertig sind, können Sie fortfahren und das erste Textmodul zu Spalte 1 hinzufügen. Fügen Sie das erste Zeichen als Absatztext und den Inhalt, der beim Mauszeiger erscheinen soll, als Listentext hinzu.

Standardtexteinstellungen

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Standardeinstellungen für den Absatztext. Stellen Sie sicher, dass Sie sowohl für den Text als auch für den Abschnittshintergrund dieselbe Farbe verwenden.

• Schriftstärke des Textes: Ultra Bold
• Textfarbe: #03008d
• Textgröße: 27vw (Desktop), 0vw (Tablet & Telefon)
• Textzeilenhöhe: 1.1em
• Stärke der Textschattenunschärfe: 0,01em
• Textschattenfarbe: #ffffff
• Textausrichtung: Links

Hover-Texteinstellungen

Um den schönen Schwebeeffekt zu erzeugen, müssen wir diese Absatztexteinstellungen beim Schweben ändern. Beachten Sie, wie wir jetzt eine vollständig transparente Textschattenfarbe verwenden, um sie verschwinden zu lassen.

• Textfarbe: #ffffff
• Textschattenfarbe: rgba(255,255,255,0)

Standardeinstellungen für Listentext

Fahren Sie fort, indem Sie zu den Listentexteinstellungen gehen. Ein wichtiger Teil dieser Einstellungen besteht darin, sicherzustellen, dass die Textgröße auf dem Desktop '0px' beträgt, aber '18px' als Textgröße für kleinere Bildschirmgrößen hinzuzufügen. Dadurch wird sichergestellt, dass der Listentext auf kleineren Bildschirmgrößen angezeigt wird, jedoch nicht auf dem Desktop, ohne dass der Mauszeiger darüber bewegt wird.

• Schriftstärke der ungeordneten Liste: Leicht
• Textfarbe der ungeordneten Liste: #ffffff
• Textgröße der ungeordneten Liste: 0px (Desktop), 18px (Tablet & Telefon)
• Schattenfarbe des ungeordneten Listentextes: rgba(255,255,255,0)
• Ungeordneter Listenstiltyp: Kreis
• Position des ungeordneten Listenstils: Außerhalb
• Einzug der ungeordneten Listenelemente: 0px

Hover-Listentexteinstellungen

Wir möchten, dass der Listentext beim Hover angezeigt wird. Aus diesem Grund ändern wir die Textgröße beim Hover. Stellen Sie sicher, dass die Textgröße, die Sie beim Hover verwenden, der Textgröße entspricht, die Sie auf kleineren Bildschirmgrößen verwenden. Dadurch wird sichergestellt, dass bei kleineren Bildschirmgrößen kein Hover-Effekt auftritt.

• Textgröße der ungeordneten Liste: 18px

Abstand

Fahren Sie fort, indem Sie zu den Abstandseinstellungen des Moduls gehen und auch dort einige Änderungen vornehmen.

• Unterer Rand: 50px (Tablet & Telefon)
• Rechter Rand: -4vw (Desktop), 0vw (Tablet & Telefon)

Textmodul 4-mal klonen & Duplikate in verbleibende Spalten platzieren

Nachdem wir das erste Modul in Spalte 1 geändert haben, können wir das Modul viermal klonen und jedes der Duplikate in die verbleibenden Spalten einfügen. In den nächsten Schritten werden wir jedes der Duplikate so ändern, dass es mit dem neuen Charakter übereinstimmt.

Textmodul in Spalte 2 ändern

Inhalt ändern

Öffnen Sie das Duplikat in Spalte 2 und ändern Sie den Inhalt.

Abstand ändern

Gehen Sie dann zu den Abstandseinstellungen und ändern Sie die benutzerdefinierten Randwerte.

• Unterer Rand: 50px (Tablet & Telefon)
• Linker Rand: -2vw (Desktop), 0vw (Tablet & Telefon)
• Rechter Rand: -2vw (Desktop), 0vw (Tablet & Telefon)

Textmodul in Spalte 3 ändern

Inhalt ändern

Ändern Sie auch den Inhalt des Duplikats in Spalte 3.

Abstand ändern

Zusammen mit den Abstandseinstellungen auf der Registerkarte Design.

• Unterer Rand: 50px (Tablet & Telefon)
• Linker Rand: -5.5vw (Desktop), 0vw (Tablet & Telefon)
• Rechter Rand: 1,5 vw (Desktop), 0 vw (Tablet & Telefon)

Textmodul in Spalte 4 ändern

Inhalt ändern

Fahren Sie fort, indem Sie das Textmodul in Spalte 4 öffnen und auch hier den Inhalt ändern.

Abstand ändern

Gehen Sie dann zur Registerkarte Design und ändern Sie die benutzerdefinierten Randwerte in den Abstandseinstellungen.

• Unterer Rand: 50px
• Linker Rand: -6vw (Desktop), 0vw (Tablet & Telefon)
• Rechter Rand: 2vw (Desktop), 0vw (Tablet & Telefon)

Textmodul in Spalte 5 ändern

Inhalt ändern

Weiter zum letzten Duplikat. Ändern Sie den Inhalt im Inhaltsfeld.

Abstand ändern

Zusammen mit den benutzerdefinierten Abstandseinstellungen.

• Unterer Rand: 50px
• Linker Rand: -7vw (Desktop), 0vw (Tablet & Telefon)
• Rechter Rand: 3vw (Desktop), 0vw (Tablet & Telefon)

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

Wir wissen, wie wichtig es ist, Ihre Website von anderen Websites abzuheben. Mit den integrierten Optionen von Divi können Sie so kreativ werden, wie Sie möchten. Dieser Beitrag ist ein Beispiel dafür, wie Sie interaktive Inhalte beim Hover erstellen und gleichzeitig sicherstellen können, dass auf kleineren Bildschirmgrößen alles unkompliziert bleibt. Sie können das Beispiel, das wir neu erstellt haben, für jede About-Seite verwenden, an der Sie gerade arbeiten. Es ist eine großartige Möglichkeit, einige Fakten und zusätzliche Informationen über Ihr Unternehmen zu teilen, während Sie mit Ihren Besuchern interagieren. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!