Möchten Sie Schatten- und Hover-Effekte in verwenden Divi erschaffen Inhalt Interaktiv und stechen Sie hervor Website ?
Stellen Sie sicher, dass Ihre Website Es kann schwierig sein, sich von ähnlichen Websites abzuheben. Aber sobald Sie dort angekommen sind, ist es fast immer die Mühe und die Gedanken wert, die in sie geflossen sind.
Wir zeigen Ihnen, wie es geht Inhalt interaktiv beim Erstellen von Websites mit Divi.
Lassen Sie uns gehen!
Übersicht
Bevor wir in dieses Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis, das Sie erwarten können.
Desktop-Computer
Mobil
Beginnen wir die Umsetzung mit Divi!
Siehe auch: Divi: So erstellen Sie ein sich drehendes Radmenü beim Hoverl
Einen neuen Abschnitt hinzufügen
Hintergrundfarbe
Erstellen Sie eine neue Seite oder öffnen Sie eine vorhandene und fügen Sie einen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.
- Hintergrund: #03006d
Abstand
Gehen Sie dann zu den Abschnittsabstandseinstellungen und ändern Sie wie folgt:
- Polsterung (oben und unten): 50px
Fügen Sie eine neue Zeile hinzu
Struktur der Spalte
Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden.
Sizing
Gehen Sie dann zu den Größeneinstellungen und lassen Sie die Linie die gesamte Breite des Bildschirms ausfüllen.
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Rinnenbreite: 1
- Breite: 100 %
Abstand
Lassen Sie uns auch die folgenden Abstandseinstellungen ändern:
- Polsterung (rechts): 9vw (Desktop), 5vw (Tablet und Telefon)
- Polsterung (rechts): 5vw (Tablet und Telefon)
Fügen Sie in Spalte 1 einen Textbaustein hinzu
Inhalt hinzufügen
Wenn Sie mit der Bearbeitung der Zeileneinstellungen fertig sind, fügen Sie das erste Textmodul zu Spalte 1 hinzu.
Fügen Sie das erste Zeichen als Absatztext hinzu. Dann ist die Inhalt dass Sie als Listentext erscheinen möchten.
Texteinstellungen (Desktop)
Dann gehen Sie auf die Registerkarte Designund ändern Sie die Standardabsatztexteinstellungen. Stellen Sie sicher, dass Sie für Abschnittstext und -hintergrund dieselbe Farbe verwenden.
- Schriftstärke: Ultra Bold
- Textfarbe: #03006d
- Textgröße: 27vw (Desktop), 0vw (Tablet und Telefon)
- Zeilenhöhe: 1,1 cm
- Textschatten: Siehe Aufnahme
- Stärke der Schattenunschärfe: 0,01em
- Schattenfarbe: #ffffff
- Textausrichtung: Links
Hovertext-Einstellungen
Um den schönen Hover-Effekt zu erzeugen, müssen wir diese Hover-Absatztexteinstellungen ändern.
- Textfarbe (Hover): #ffffff
- Schattenfarbe (Hover): rgba (255,255,255,0)
Listeneinstellungen (Desktop)
Fahren Sie fort, indem Sie zu den Eintragseinstellungen gehen.
- Schriftstärke: Leicht
- Listentextfarbe: #ffffff
- Listentextgröße: 0 Pixel (Desktop), 18 Pixel (Tablet und Telefon)
- Stilposition: Kreis
- Position des ungeordneten Listenstils: Außerhalb
- Ungeordneter Listenelementeinzug: 0px
Texteinstellungen beim Hover auflisten (Hover)
Wir möchten, dass der Listentext beim Hover angezeigt wird. Aus diesem Grund werden wir die Größe des Textes beim Hover ändern.
- Textgröße der ungeordneten Liste (Hover): 18px
Abstand
Fahren Sie fort, indem Sie zu den Modulabstandseinstellungen gehen und dort ebenfalls einige Änderungen vornehmen.
- Rand (unten): 50px (Tablet und Telefon)
- Rand (rechts): -4vw (Desktop), 0vw (Tablet und Telefon)
Klonen Sie den Textbaustein 4 Mal und platzieren Sie Duplikate in den verbleibenden Spalten
Nachdem wir das erste Modul in Spalte 1 geändert haben, klonen Sie das Modul viermal. Platzieren Sie dann jedes der Duplikate in den verbleibenden Spalten. Wir werden jedes der Duplikate so ändern, dass es unseren Wünschen entspricht.
Ändern Sie den Textbaustein in Spalte 2
Inhalt bearbeiten
Öffnen Sie das Duplikat in Spalte 2 und bearbeiten Sie den Inhalt.
Abstand ändern
Gehen Sie als Nächstes zu den Abstandseinstellungen und ändern Sie die benutzerdefinierten Randwerte.
- Rand (unten): 50px (Tablet und Telefon)
- Rand (links und rechts): -2vw (Desktop), 0vw (Tablet und Telefon)
- Rechter Rand: -2vw (Desktop), 0vw (Tablet und Telefon)
Ändern Sie den Textbaustein in Spalte 3
Inhalt bearbeiten
Ändern Sie auch den Inhalt des Duplikats in Spalte 3.
Abstand ändern
Mit Abstandseinstellungen im Design-Tab.
- Rand (links): 2,5 vw
- Rand (rechts): 1,5 vw
Ändern Sie den Textbaustein in Spalte 4
Inhalt bearbeiten
Fahren Sie fort, indem Sie die Textbaustein-Einstellungen in Spalte 4 öffnen und dort ebenfalls den Inhalt bearbeiten.
Abstand ändern
Gehen Sie als Nächstes zur Registerkarte Design und ändern Sie die benutzerdefinierten Randwerte in den Abstandseinstellungen.
- Rand (links): -6vw
- Rand (rechts): 2vw
Ändern Sie den Textbaustein in Spalte 5
Inhalt
Machen Sie Platz für das letzte Duplikat. Bearbeiten Sie den Inhalt im Inhaltsbereich.
Abstand ändern
Mit benutzerdefinierten Abstandseinstellungen.
- Rand (links): -7vw
- Rand (rechts): 3vw
Übersicht
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
Lesen Sie auch: Divi : So passen Sie die Warenkorb- und Suchsymbole des Moduls „Fullwidth Menu“ an
Büro
Mobil
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Wir wissen, wie wichtig es ist, sicherzustellen, dass Ihr Website hebt sich von anderen Websites ab. Mit den integrierten Optionen von Divi können Sie so kreativ sein, wie Sie möchten.
Dieser Artikel ist ein Beispiel dafür, wie Sie interaktive Hover-Inhalte erstellen können.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
