Möchten Sie einen Hintergrundverlauf haben? Divi das ändert sich beim Schweben?
Beim Erstellen von Websites geht es darum, sicherzustellen, dass jedes Detail korrekt ist. Wenn Sie auf die kleinen Details Ihres Designs achten, wird die Qualität Ihres Designs schnell steigen Website.
Mit den neuen Hover-Optionen von Divi, können Sie ganz einfach kleine Interaktionen auf Ihrem hinzufügen Website. Hover-Optionen gelten für fast alle Designparameter. Sie können beispielsweise einen Verlaufshintergrund beim Hovern indirekt ändern, um einen schönen Übergang zu schaffen.
Genau das zeigen wir Ihnen in diesem Tutorial. Neben dem Verlaufsübergang erstellen wir auch ein atemberaubendes Designbeispiel von Grund auf, das Sie für jede Art von Design verwenden können Website die du erschaffst.
Lassen Sie uns gehen!
Übersicht
Bevor wir in das Tutorial eintauchen, werfen wir einen Blick auf das Endergebnis.
Beginnen wir mit dem Designen mit Divi
Siehe auch: Divi: So erstellen Sie einen ansprechenden Akkordeon-Schieberegler
Abschnitt 1 hinzufügen
Abstand
Als erstes müssen Sie eine neue Seite erstellen oder eine vorhandene öffnen und ihr einen neuen regulären Abschnitt hinzufügen. Öffnen Sie die Einstellungen und fügen Sie benutzerdefinierte obere und untere Ränder hinzu.
- Polsterung (oben und unten): 100px
Zeile 1 hinzufügen
Struktur der Spalte
Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Standardhintergrundfarbe (Desktop) von Spalte 1
Öffnen Sie, ohne noch Module hinzuzufügen, die Zeileneinstellungen und fügen Sie die folgende Standardhintergrundfarbe zu Spalte 1 hinzu:
- Hintergrund (Desktop): #e7ffa0
Hintergrundfarbe von Spalte 1 beim Hover
Ändern Sie diese Hintergrundfarbe beim Hover.
- Hintergrund: #00020c
Spalte 1 Hintergrundgradient
Fügen Sie Spalte 1 außerdem eine Hintergrundfarbe mit Farbverlauf hinzu. Beachten Sie, dass wir eine vollständig transparente Farbe verwenden. Diese Farbe lässt die Hintergrundfarbe durchscheinen, die sich wiederum beim Hover ändert.
- Farbe 1 (20%): rgba(255,255,255,0)
- Farbe 2 (100%): rgba(16,0,201,0.8)
- Verlaufstyp: Linear
- Steigungsrichtung: 50 Grad
Hintergrundfarbe der Spalte 2
Fügen Sie Spalte 2 auch eine Hintergrundfarbe hinzu.
- Hintergrund: #ffffff
Sizing
Dann gehen Sie auf die Registerkarte Design und ändern Sie die Größeneinstellungen in der Option Größe.
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Rinnenbreite: 1
- Breite: 2000px
Abstand
Fahren Sie fort, indem Sie benutzerdefinierte Auffüllwerte in den Abstandseinstellungen hinzufügen.
- Polsterung (oben und unten): 0px
Abstand (Spalte 2)
- Polsterung (oben und unten): 6vw (Desktop), 120px (Tablet und Telefon)
- Polsterung (links und rechts): 5vw (Desktop), 80px (Tablet), 50px (Telefon)
Box Schatten
Und geben Sie der Reihe auch einen subtilen Kastenschatten.
- Box-Schattenunschärfe-Stärke: 100px
- Feldschatten-Ausbreitungsstärke: -10px
Übergänge
Abschließend erstellen wir einen glatten Hintergrundübergang mit Farbverlauf, indem wir die Übergangsdauer auf der Registerkarte erhöhen Fortgeschrittener.
- Übergangsdauer: 1100 ms
Fügen Sie Spalte 1 ein Bildmodul hinzu
Laden Sie ein Bild hoch
Es ist Zeit, Module hinzuzufügen! Fügen Sie der ersten Spalte ein Bildmodul hinzu.
Verlaufshintergrund
Gehen Sie zu den Hintergrundeinstellungen dieses Bildmoduls und fügen Sie einen Hintergrund mit Farbverlauf hinzu. Wir verwenden wieder eine vollständig transparente Farbe, damit die anderen Farben durchscheinen können.
- Farbe 1 (57%): rgba(50,217,255,0.66)
- Farbe 2 (100%): rgba(255,255,255,0)
- Verlaufstyp: Kreisförmig
- Verlaufsposition: Oben
Abstand
Als nächstes fügen Sie dem Modul eine benutzerdefinierte obere Polsterung hinzu.
- Polsterung (oben): 14vw
Textbaustein zu Spalte 2 hinzufügen
Inhalt hinzufügen
Kommen wir zur zweiten Spalte! Das erste Modul, das wir benötigen, ist ein Textmodul für den Titel. Fahren Sie fort und fügen Sie ein hinzu Inhalt Titel der Wahl.
Einstellungen für den Kopfzeilentext
Gehen Sie als Nächstes zu den Einstellungen für den Kopfzeilentext und nehmen Sie einige Änderungen vor.
- Schrift: Abril Fatface
- Textfarbe: #000000
- Textgröße: 4 vw (Desktop), 60 px (Tablet), 40 px (Telefon)
Fügen Sie Spalte 2 einen zweiten Textbaustein hinzu
Inhalt hinzufügen
Das zweite Modul, das wir benötigen, ist ein weiteres Textmodul. Fügen Sie etwas hinzu Inhalt nach Wahl.
Texteinstellungen
Gehen Sie als Nächstes zu den Texteinstellungen und ändern Sie die Textausrichtung.
- Textausrichtung: Blocksatz
Sizing
Passen Sie auch die Breite in den Größeneinstellungen an.
- Breite: 73 % (Desktop), 100 % (Tablet und Telefon)
Abstand
Fügen Sie schließlich benutzerdefinierte obere und untere Ränder zum Modul hinzu, um Leerzeichen zu erstellen.
- Rand (oben und unten): 2,5 vw (Desktop), 50 px (Tablet und Telefon)
Button-Modul zu Spalte 2 hinzufügen
Fügen Sie eine Beschreibung
Das dritte und letzte Modul, das wir in der zweiten Spalte benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.
Tasteneinstellungen
Ändern Sie dann die Schaltflächeneinstellungen.
- Benutzerdefinierte Stile für Schaltfläche verwenden: JA
- Schaltflächentextgröße: 1,2 vw (Desktop), 14 px (Tablet und Telefon)
- Schaltflächentextfarbe: #ffffff
- Verlaufsstopps 1 (0 %): #9ea6ff
- Gradient Stops 2 (100%): rgba(16,0,201,0.8)
- Lenkung: 78 Grad
- Rahmenbreite der Schaltfläche: 0 Pixel
- Randradius: 30px
- Buchstabenabstand: -1px
- Schriftstärke: Ultra Bold
- Schriftstil: TT -(Großbuchstaben)
Abstand
Fügen Sie auch benutzerdefinierte Füllwerte hinzu.
- Polsterung (oben und unten): 10px
- Polsterung (links und rechts): 40px
Box Schatten
Und wenden Sie einen subtilen Kastenschatten auf die Schaltfläche an.
- Feld-Schattenunschärfe-Stärke: 40px
Lesen Sie auch: So passen Sie das Modul „Countdown-Timer“ mit einem GIF an
Abschnitt 2 hinzufügen
Abstand
Nachdem wir den ersten Abschnitt abgeschlossen haben, gehen wir zum nächsten über. Fügen Sie einen neuen regulären Abschnitt mit den folgenden benutzerdefinierten Auffüllwerten hinzu:
- Polsterung (oben und unten): 100px
Fügen Sie eine Zeile zu zwei Spalten hinzu
Struktur der Spalte
Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Hintergrund von Spalte 1
Öffnen Sie, ohne noch Module hinzuzufügen, die Zeileneinstellungen und fügen Sie der Spalte 1 die folgende Hintergrundfarbe hinzu:
- Hintergrund: #ffffff
Spalte 2 Hintergrund (Desktop)
Fügen Sie Spalte 2 die folgende Hintergrundfarbe hinzu.
- Hintergrund (Desktop): #ffffff
Hintergrundfarbe von Spalte 2 beim Hover
Und ändern Sie diese Hintergrundfarbe beim Hover.
- Hintergrund (Hover): #3d02ff
2-Spalten-Hintergrund mit Farbverlauf
Fügen Sie der Spalte auch einen Hintergrund mit Farbverlauf hinzu.
- Gradientenstopps 1 (20 %): rgba (255,255,255,0)
- Verlaufsstopps 2 (100 %): #ff7700
Sizing
Gehen Sie als Nächstes zu den Größeneinstellungen und nehmen Sie einige Änderungen vor.
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Rinnenbreite: 1
- Breite: 2000px
Abstand (Zeile)
Fahren Sie fort, indem Sie benutzerdefinierte Auffüllwerte in den Abstandseinstellungen hinzufügen.
- Polsterung (oben und unten): 0px
Abstand (Spalte 1)
Ändern Sie die Abstandseinstellungen für Spalte 1
- Polsterung (oben und unten): 6vw (Desktop), 120px (Tablet und Telefon)
- Polsterung (links und rechts): 5vw (Desktop), 80px (Tablet), 50px (Telefon)
Box Schatten
Fügen Sie dieser Reihe auch einen subtilen Kastenschatten hinzu.
- Feld-Schattenunschärfe-Stärke: 100px
- Feldschatten-Ausbreitungsstärke: -10px
Übergänge
Erstellen Sie schließlich einen fließenden Übergang, indem Sie die Übergangsdauer auf der Registerkarte erhöhen Fortgeschrittener.
- Übergangsdauer: 1100 ms
Module der Linie 1 duplizieren
Da wir bereits alle Module haben, die wir im vorherigen Abschnitt benötigen, sparen wir Zeit, indem wir sie klonen.
Platzieren Sie Duplikate in den Spalten von Zeile 2
Und platzieren Sie die Duplikate wie folgt in der neuen Zeile:
Inhalt bearbeiten
Stellen Sie sicher, dass Sie die ändern Inhalt Ihrer Module.
Ändern Sie den Verlaufshintergrund der Schaltfläche
Ändern Sie auch den Hintergrundverlauf der Schaltfläche.
- Gradient stoppt 0 %: #ff653f
- Farbverlauf stoppt 100 %: #0066ff
- Richtung: 39 Grad
Bild ändern
Ersetzen Sie das Bild.
Ändern Sie den Hintergrundverlauf
Ändern Sie abschließend den Hintergrundverlauf des Bildmoduls.
- Gradient stoppt 0%: rgba(0,2,12,0.66)
- Gradient stoppt 57%: rgba(255,255,255,0)
Übersicht
Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Endergebnis.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In diesem Artikel haben wir Ihnen gezeigt, wie Sie einen Verlaufshintergrund beim Schweben ändern können Divi. Wir haben auch ein großartiges Beispiel von Grund auf erstellt, das diesen Ansatz nutzt.
Es steht Ihnen frei, das Design und die Grafik für jede Art von Website zu verwenden, die Sie erstellen.
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.
...
