So erstellen Sie Verlaufshintergrundüberlagerungen mit den Hintergrundeinstellungen von Divi

Veröffentlicht: 2017-06-13

Im heutigen Tutorial werden wir die neuen und eleganten Möglichkeiten erkunden, die die neuen Divi-Hintergrunddesignfunktionen für Ihre Websites und spezieller bieten. indem Sie Hintergrundüberlagerungen mit Farbverlauf verwenden.

Mit diesem neuen Hintergrund-Update wurden dem Divi-Builder viele neue Optionen hinzugefügt, die Ihnen helfen, Ihre Anforderungen beim Entwerfen einer eigenen Website oder für einen Kunden zu erfüllen. Mit diesen neuen Optionen können Sie mit der Art und Weise, wie Ihre Website aussieht und sich anfühlt, herumspielen.

Vor der Veröffentlichung dieses Updates mussten die meisten Änderungen, die jetzt im Divi-Builder vorgenommen werden können, über benutzerdefinierten CSS-Code vorgenommen werden. Designänderungen an Ihrem Hintergrund sind jetzt einfacher denn je. Mit ein paar einfachen Klicks können Sie schöne Hintergründe für die verschiedenen Bereiche Ihrer Website erstellen.

Die Beispiele für Hintergrundüberlagerungen mit Farbverlauf

Wir haben drei Abschnitte mit einem Vorher-Nachher-Bild erstellt, die Ihnen zeigen, wie die neuen Optionen das Gesamtgefühl Ihrer Website verbessern und ihr den gewissen „je ne sais quoi“-Faktor verleihen können.

Die Heldenabteilung

So sieht der Heldenbereich aus, wenn nur ein Hintergrundbild hinzugefügt wird:

Und so sieht unser Endergebnis aus, wenn wir die Verlaufshintergrundüberlagerung zu demselben Hintergrundbild hinzugefügt haben, das im obigen Bild verwendet wird:

Der Blurb-Bereich

So sieht der Klappentext bei Verwendung eines einfarbigen Hintergrunds aus:

Und so sieht das Endergebnis aus, wenn wir die Verlaufshintergrundüberlagerung zu einem Musterhintergrund hinzugefügt haben:

Der Preisbereich

So sieht der Preisbereich aus, wenn wir eine Farbe verwenden (in einem helleren und dunkleren Ton):

Und so sieht das Endergebnis nach Verwendung der Verlaufshintergrundüberlagerung aus:

Jeder von ihnen hat unterschiedliche Einstellungen und wir zeigen Ihnen genau – und Schritt für Schritt – wie Sie diesen Look erstellen, damit Sie ihn auf Ihren eigenen Websites verwenden können.

Schritt für Schritt: Die Heldensektion

Für den ersten Abschnitt dieses Beitrags erstellen wir einen Heldenabschnitt neu. Dieses Beispiel zeigt, wie die Hintergrunddesignfunktion die im Bild verwendeten Farben ändern kann. Und obwohl wir eine Hintergrundüberlagerung mit Farbverlauf verwendet haben, sind die Änderungen, die wir vorgenommen haben, sehr subtil. Wir haben dem Bild einen dunkleren Ton in Kombination mit einem andersfarbigen Himmel hinzugefügt.

Beginnen Sie mit der Erstellung

Beginnen wir damit, eine neue Seite auf Ihrer WordPress-Website zu erstellen. Fügen Sie dieser Seite nun einen Standardabschnitt mit einer Zeile in voller Breite hinzu. Als nächstes platzieren Sie die verschiedenen Module in Ihrer Reihe. Wir haben zwei Textmodule und ein Button-Modul verwendet.

Einstellungen für das erste Textmodul

Im ersten Textmodul wird der Titel Ihres Heldenabschnitts angezeigt. Geben Sie den Text ein, der im Inhaltsfeld in der Unterkategorie Text der Registerkarte Inhalt angezeigt werden soll, und wechseln Sie zur Registerkarte Design.

Nehmen Sie auf der Registerkarte Design die folgenden Änderungen an der Unterkategorie Text vor:

Textausrichtung: Mitte
Schriftgröße des Textes: 30
Schriftfarbe des Textes: #FFFFFF

Einstellungen für das zweite Textmodul

Öffnen Sie nun das nächste Textmodul und geben Sie den Text ebenfalls in das Inhaltsfeld ein. Wechseln Sie als Nächstes zur Registerkarte Design und nehmen Sie die folgenden Änderungen an der Unterkategorie Text vor:

Textausrichtung: Mitte
Schriftgröße des Textes: 16
Schriftfarbe des Textes: #FFFFFF

Scrollen Sie auf derselben Registerkarte nach unten und fügen Sie "500px" zur Max. Breite in der Unterkategorie "Größe" und "2%" zum unteren Rand in der Unterkategorie "Abstand" hinzu.

Tasteneinstellungen

Öffnen Sie zu guter Letzt die Einstellungen des Button Modules. Geben Sie in der Unterkategorie Text der Registerkarte Inhalt den CTA ein, den Sie mit Ihrer Schaltfläche verknüpfen möchten, und wechseln Sie zur Registerkarte Design.

Nehmen Sie auf der Registerkarte Design die folgenden Anpassungen an der Unterkategorie Schaltfläche vor:

Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
Schaltflächentextgröße: 20
Schaltflächentextfarbe: #FFFFFF
Hintergrundfarbe der Schaltfläche: rgba(0,0,0,0)
Breite der Knopfleiste: 2
Farbe des Knopfrahmens: #FFFFFF
Knopfrandradius: 7

Öffnen Sie nun die Zeilenabschnitte und nehmen Sie in der Unterkategorie Abstände des Moduls Design die folgenden Anpassungen vor:

Höchste Marge: 15%
Untere Marge: 10%

Einstellungen für die Hintergrundüberlagerung mit Farbverlauf

Jetzt kommen wir zum lustigen Teil; Hinzufügen der Verlaufshintergrundüberlagerung zum Hintergrundbild. Fahren Sie fort und öffnen Sie die Einstellung des Abschnitts. Wechseln Sie als Nächstes zur Unterkategorie Hintergrund und fügen Sie zunächst den Farbverlaufshintergrund hinzu.

Für das von uns erstellte Beispiel haben wir die folgenden Einstellungen verwendet:

Erste Farbe: #3730ff
Zweite Farbe: #e02b20
Verlaufstyp: Linear
Verlaufsrichtung: 272deg
Startposition: 40%
Endposition: 100%

Gehen Sie nun zur Registerkarte Hintergrundbild und fügen Sie Ihr Wunschbild hinzu. Wir haben bewusst ein Bild gewählt, das den Himmel enthält, um den gewünschten Effekt zu verstärken.

Scrollen Sie nun auf derselben Registerkarte nach unten. Zentrieren Sie das Hintergrundbild und aktivieren Sie die Option Multiplizieren im Dropdown-Menü Hintergrundbild überblenden. Sie haben auch viele andere Optionen, die Ihnen helfen können, genau das gewünschte Ergebnis zu erzielen.

Und da hast du das Endergebnis:

Schritt für Schritt: Der Blurb-Bereich

Das zweite Beispiel, das wir Ihnen zeigen werden, ist der Klappentext. Wir wollen den Fokus auf den Inhalt des Klappentextes legen, deshalb haben wir uns nicht für einen geschäftigen Hintergrund, sondern für einen Musterhintergrund entschieden.

Das in diesem Beispiel verwendete Hintergrundmuster stammt von Toptal. Sie können die Muster herunterladen, die Sie für alle möglichen Zwecke verwenden möchten – auch für kommerzielle Zwecke. Vergessen Sie nur nicht, sie in der Quelle Ihrer Website anzugeben, wie in ihren FAQ beschrieben.

Wir haben auch die Klappensymbole leicht transparent gemacht, damit die Verlaufsfarben durchscheinen. Obwohl jeder der Klappentexte die gleichen Einstellungen hat, ist die Farbe, die durch die Symbole kommt, leicht unterschiedlich und entspricht den von uns verwendeten Verlaufsfarben.

Beginnen Sie mit der Erstellung

Beginnen Sie mit dem Hinzufügen eines Standardabschnitts zu einer neuen Seite oder einer vorhandenen Seite. In diesem Abschnitt benötigen wir eine Zeile mit drei Spalten.

Fahren Sie fort, indem Sie in der ersten Spalte der Zeile ein Blurb-Modul hinzufügen. Wir verwenden in jeder Spalte die gleichen Einstellungen für das Klappenmodul. Deshalb müssen wir das Klappenmodul nur einmal erstellen und für die beiden anderen Spalten klonen.

Blurb-Einstellungen

Öffnen Sie die Einstellungen des Blurb-Moduls und geben Sie den Titel und den Inhalt in der Unterkategorie Text der Registerkarte Inhalt ein. Wechseln Sie zur Registerkarte Design und nehmen Sie die folgenden Anpassungen an der Unterkategorie Bild & Symbol vor:

Symbolfarbe: rgba(255,255,255,0.36)
Kreissymbol: Ja
Kreisfarbe: rgba(255,255,255,0)
Kreisrahmen anzeigen: Ja
Kreisrandfarbe: rgba(255,255,255,0.36)
Bild-/Symbolplatzierung: Oben
Symbolschriftgröße verwenden: Ja
Symbolschriftgröße: 96px

Scrollen Sie auf derselben Registerkarte nach unten und setzen Sie die Textausrichtung in der Unterkategorie Text auf 'Mitte'.

Scrollen Sie weiter und öffnen Sie die Unterkategorie Kopfzeilentext. Fahren Sie fort und verwenden Sie die folgenden Einstellungen:

Header-Schriftgröße: 18
Kopfzeilentextfarbe: #FFFFFF
Höhe der Kopfzeile: 1em

Jetzt müssen Sie nur noch die Unterkategorie Textkörper ändern. Stellen Sie sicher, dass die folgenden Einstellungen gelten:

Schriftgröße des Körpers: 14
Textkörperfarbe: #FFFFFF
Körperlinienhöhe: 1.5em

Vergessen Sie nicht, das Blurb-Modul zweimal zu klonen, in die anderen beiden verbleibenden Spalten zu platzieren und den Inhalt entsprechend zu ändern.

Zeileneinstellungen

Öffnen Sie die Zeileneinstellungen und wechseln Sie auf der Registerkarte Design zur Unterkategorie Abstand. Das einzige, was Sie tun müssen, ist, den oberen und unteren Rand auf '5%' zu ändern.

Einstellungen für die Hintergrundüberlagerung mit Farbverlauf

Zu guter Letzt fügen wir das Hintergrundbild mit der Verlaufsüberlagerung hinzu. Öffnen Sie die Einstellungen Ihres Abschnitts und gehen Sie zur Unterkategorie Hintergrund der Registerkarte Inhalt.

Nehmen Sie als Nächstes die folgenden Änderungen an der Farbverlaufsoption vor:

Erste Farbe: #52009b
Zweite Farbe: #0edeed
Verlaufstyp: Radial
Radiale Richtung: Rechts
Startposition: 28%
Endposition: 100%

Gehen Sie zur Hintergrundoption, laden Sie das gewünschte Muster hoch und nehmen Sie die folgenden Änderungen vor:

Position des Hintergrundbilds: Mitte
Hintergrundbild wiederholen: Wiederholen (je nach Muster)
Hintergrundbild-Mischung: Multiplizieren

Das ist es! Sie sollten nun das folgende beeindruckende Ergebnis haben:

Schritt für Schritt: Der Preisbereich

Das letzte Beispiel dieses Beitrags ist der Preisbereich. In diesem Abschnitt wollten wir Ihnen zeigen, dass Sie den Verlaufshintergrund überall verwenden können. Es ist nicht nur für die Verwendung in Abschnitten, sondern auch für Spalten gedacht. Wir werden nur den Verlaufshintergrund für zwei der Spalten verwenden und eine Verlaufshintergrundüberlagerung für die zweite Spalte erstellen.

Der Grund, warum wir dies tun, ist, das vorgestellte Preispaket hervorzuheben. Wir verwenden intensivere Farben als in den anderen beiden Spalten und fügen auch einen Musterhintergrund hinzu. Diese beiden Dinge zusammen erhöhen die Chancen, Menschen für Ihr empfohlenes Preispaket zu gewinnen, für das Sie am meisten werben möchten.

Beginnen Sie mit der Erstellung

Beginnen Sie mit dem Hinzufügen eines neuen Standardabschnitts zu einer neuen oder vorhandenen Seite auf Ihrer Website. Der Abschnitt benötigt eine Zeile mit drei Spalten. Die von uns verwendeten Module sind für jede Spalte gleich und enthalten dieselben Einstellungen. Deshalb werden wir sie für die erste Spalte erstellen und sie anschließend in die anderen beiden Spalten klonen.

Einstellungen für das erste Textmodul

Fügen Sie in der ersten Spalte ein neues Textmodul hinzu, fügen Sie die Art des Preispakets in das Inhaltsfeld in der Unterkategorie Text der Registerkarte Inhalt ein und wechseln Sie zur Registerkarte Design.

Wenden Sie die folgenden Änderungen an der Unterkategorie Text der Registerkarte Design an:

Textausrichtung: Mitte
Schriftgröße des Textes: 24
Schriftfarbe des Textes: #FFFFFF
Textzeilenhöhe: 1.5em

Scrollen Sie auf derselben Registerkarte nach unten und nehmen Sie die folgenden Änderungen an der Unterkategorie Abstand vor:

Oberer Rand: 50px
Unterer Rand: 20px

Einstellungen für das zweite Textmodul

Fügen Sie der gleichen Spalte ein weiteres Textmodul hinzu. Notieren Sie den Preis des Pakets im Inhaltsfeld in der Unterkategorie Text der Registerkarte Inhalt und wechseln Sie zur Registerkarte Design.

Nehmen Sie auf der Registerkarte Design die folgenden Anpassungen vor:

Textausrichtung: Mitte
Schriftgröße des Textes: 82px
Schriftfarbe des Textes: #FFFFFF
Textzeilenhöhe: 1.1em

Scrollen Sie auf derselben Registerkarte nach unten und fügen Sie am unteren Rand "10px" hinzu.

Einstellungen für das dritte Textmodul

Fügen Sie für unser letztes Textmodul den Text zum Inhaltsfeld in der Unterkategorie Text der Registerkarte Inhalt hinzu. Wechseln Sie dann zur Registerkarte Design und nehmen Sie die folgenden Änderungen an der Unterkategorie Text vor:

Textausrichtung: Mitte
Schriftgröße des Textes: 16
Schriftfarbe des Textes: #FFFFFF
Textzeilenhöhe: 1.1em

Scrollen Sie auf derselben Registerkarte nach unten und fügen Sie am unteren Rand in der Unterkategorie "Abstand" "33px" hinzu.

Tasteneinstellungen

Das nächste Modul, das wir dieser Spalte hinzufügen, ist das Schaltflächenmodul. Geben Sie den CTA ein, der im Inhaltsfeld in der Unterkategorie Text der Registerkarte Inhalt angezeigt werden soll, und wechseln Sie zur Registerkarte Design.

Setzen Sie auf der Registerkarte Design die Schaltflächenausrichtung in der Unterkategorie Ausrichtung auf 'Mitte' und nehmen Sie die folgenden Änderungen an der Unterkategorie Schaltfläche vor:

Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
Schaltflächentextgröße: 13
Schaltflächentextfarbe: #FFFFFF
Schaltflächenhintergrundfarbe: rgba(255,255,255,0.11)
Breite der Knopfleiste: 2
Farbe des Knopfrahmens: #FFFFFF
Knopfrandradius: 4
Tasten-Buchstaben-Abstand: 1

Teilereinstellungen

Schließlich fügen wir der Spalte einen Teiler hinzu, um Platz zu schaffen. Wählen Sie auf der Registerkarte "Inhalt" die Option "Teiler nicht anzeigen" und gehen Sie zur Registerkarte "Design", wo Sie "25px" in das Höhenfeld eingeben.

Nachdem wir alle Module hinzugefügt haben, stellen Sie sicher, dass Sie sie klonen und auch in die anderen Spalten einfügen.

Einstellungen für die Hintergrundüberlagerung mit Farbverlauf

In diesem Beispiel verwenden wir zwei verschiedene Hintergrundeinstellungen für die verschiedenen Spalten. Die erste und die letzte Spalte sind gleich und die zweite etwas anders.

Gehen Sie zu den Zeileneinstellungen und wenden Sie die folgenden Änderungen an der Farbverlaufsoption der ersten und dritten Spalte in der Unterkategorie Hintergrund der Registerkarte Inhalt an:

Erste Farbe: rgba(10.122.178.0.57)
Zweite Farbe: rgba(142,0,142,0.47)
Spalte 1 Verlaufstyp: Radial
Spalte 1 Radialrichtung: Oben links
Spalte 1 Startposition: 0
Spalte 1 Endposition: 100 %

Gehen Sie als Nächstes zu Spalte 2 und nehmen Sie die folgenden Änderungen an der Farbverlaufsoption vor:

Erste Farbe: #0a7ab2
Zweite Farbe: #8e008e
Spalte 2 Gradiententyp: Linear
Spalte 2 Gradientenrichtung: 180deg
Spalte 2 Startposition: 0
Spalte 2 Endposition: 100

Gehen Sie zur Option Hintergrundbild, laden Sie das Hintergrundbild hoch und ändern Sie die Einstellungen:

Spalte 2 Position des Hintergrundbilds: Oben links
Spalte 2 Hintergrundbild wiederholen: Wiederholen
Spalte 2 Hintergrundbild-Mischung: Multiplizieren

Abschließende Gedanken

Die Beispiele, die wir Ihnen in diesem Blogbeitrag gezeigt haben, sind nur ein Bruchteil der Ergebnisse, die Sie mit den neuen Hintergrunddesignfunktionen erzielen können. In den kommenden Beiträgen werden wir auf jeden Fall auch andere Beispiele behandeln, die Ihnen helfen, großartige Designs für die von Ihnen erstellten Websites zu erstellen. Wenn Sie Fragen, Kommentare oder Vorschläge haben; Hinterlasse einen Kommentar im Kommentarbereich unten!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!