Aktualisieren Sie Ihre Divi-Blog-Seite mit einem Hintergrund, der für das Raster-Layout entwickelt wurde

Das Erstellen eines Rasterlayouts für Ihren Blog ist eine großartige Möglichkeit, Ihre Beiträge zu organisieren. Divi macht dies mit dem Blog-Modul extrem einfach. In nur wenigen Sekunden können Sie ein funktionierendes Blog-Grid-Layout auf Ihrer Seite bereitstellen. Und Sie können die vielen Designeinstellungen sogar nutzen, um das Aussehen Ihres Blog-Rasters auf viele Arten anzupassen. Aber heute bringe ich die Dinge auf eine andere Ebene.

In diesem Tutorial zeige ich Ihnen, wie Sie mehrere Hintergrundebenen erstellen können, um Ihr dreispaltiges Blog-Raster mit einem schönen und symmetrischen Design zu umrahmen. Hoffentlich können Sie diese Designtechniken verwenden, um eine Blog-Seite zu erstellen, die garantiert beeindruckt.

Lass uns anfangen.

Abonnieren Sie unseren Youtube-Kanal

Sneak Peak des Grid-Layout-Designs

Hier ein kleiner Vorgeschmack auf das Design.

Einstieg

Alles, was Sie für dieses Tutorial benötigen, ist Divi. Sobald Sie das Divi-Theme installiert und aktiv haben, erstellen Sie eine neue Seite und geben Sie der Seite einen Titel. Stellen Sie dann den Visual Builder bereit. Wählen Sie „Choose a Premade Layout“ und laden Sie dann das Therapeuten-Blog-Seitenlayout auf Ihre Seite hoch und veröffentlichen Sie es.

Stellen Sie sicher, dass Sie mindestens 6 Blog-Posts mit Inhalten und vorgestellten Bildern haben. Wenn Sie dies nicht tun, werden die Blog-Posts nicht auf der Seite angezeigt.

Jetzt können Sie mit der Bearbeitung beginnen.

Fügen Sie dem Abschnitt die erste Hintergrundebene hinzu

Das benutzerdefinierte Design wird dem zweiten Abschnitt des Layouts hinzugefügt, der das Blog-Modul enthält. Um unsere erste Hintergrundebene zu erstellen, werden wir die Abschnittseinstellungen wie folgt gestalten:

Hintergrundfarbe: #5873dd
Benutzerdefinierte Polsterung (Desktop): 4vw oben, 4vw unten, 7vw links
Benutzerdefinierte Polsterung (Tablet): 0vw links

Der benutzerdefinierte 7vw-Links-Padding versetzt den Inhalt des Abschnitts (der Zeile) im Wesentlichen für ein einzigartiges Aussehen. Wenn Sie alles schön und zentriert für Ihr Design haben möchten, können Sie das weglassen.

Fügen Sie der Zeile die zweite und dritte Hintergrundebene hinzu

Die zweite und dritte Hintergrundebene werden erstellt, indem der gesamten Zeile eine Hintergrundfarbe und dann der Spalte innerhalb der Zeile ein Hintergrundverlauf hinzugefügt wird.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Hintergrundfarbe: rgba(255,255,255,0.3)
Spalte 1 Hintergrundfarbe links: rgba(255,255,255,0.0)
Spalte 1 Hintergrundfarbe rechts: rgba(255,255,255,0.3)
Spaltenverlaufsrichtung: 90deg
Säulenstartposition: Säulenstartposition: 33,3%
Spaltenendposition: 0%

Beachten Sie, dass ich eine weiße Farbe mit 30 % Deckkraft verwende, um einen einheitlichen Grad an weißen Überlagerungsfarben zu erstellen, die den blauen Hintergrund des Abschnitts durchscheinen lassen. Da sich jede Farbe überlappt, sieht der Benutzer eine um 30 % hellere Version des blauen Abschnittshintergrunds. Auf diese Weise müssen Sie, wenn Sie jemals das Farbschema des Layouts ändern möchten, nur die Hintergrundfarbe des Abschnitts ändern.

Wenn Sie die Startposition des Spaltenverlaufs auf 33,3% festlegen, wird sichergestellt, dass sich der Verlauf genau zwischen der ersten und zweiten Spalte meines Blog-Rasters aufteilt. Dies wird jedoch zunächst nicht korrekt aussehen, da wir unserer Zeile unter anderem noch eine benutzerdefinierte Breite von 100% geben müssen.

Benutzerdefinierte Breite: 100%
Dachrinnenbreite: 4
Benutzerdefinierte Polsterung: 4% oben, 4% unten

Die benutzerdefinierte Auffüllung legt die Ebenen vertikal frei, um sie zum Gesamtdesign hinzuzufügen.

Einstellungen speichern.

Hinzufügen der vierten Hintergrundebene zu unserem Blog-Modul

Hier passt alles zusammen. Die vierte und letzte Ebene wird ein Hintergrundverlauf sein, der unserem Blog-Modul hinzugefügt wird. Mit dem genauen hinzugefügten Abstand wird das Blog-Modul dann perfekt an unseren Hintergrundebenen ausgerichtet. Ich werde auch ein paar Stiländerungen an den Blogkarten vornehmen, um den letzten Schliff zu verleihen.

Gehen Sie zu den Einstellungen des Blog-Moduls und aktualisieren Sie Folgendes:

Rasterkachel-Hintergrundfarbe: rgba(255,255,255,0.7)

Um den Hintergrundverlauf hinzuzufügen, können Sie zu den Zeileneinstellungen gehen und den Hintergrundverlauf von Spalte 1 kopieren und dann zu den Blog-Einstellungen zurückkehren und ihn mit den Rechtsklickoptionen einfügen.

Aktualisieren Sie dann Folgendes:

Startposition: 66,6%

Benutzerdefinierter Rand: 4 % oben, 4 % unten
Benutzerdefinierte Polsterung: 4 % oben, 4 % unten, 4 % links, 4 % rechts

Wie Sie sehen können, wird der Längenwert von 4% durchgehend verwendet, um unserem Design einen gleichen Abstand zu geben. Und hinter diesem 4%-Wert steckt mehr, als man auf den ersten Blick sieht. Wenn Sie sich erinnern, haben wir unsere Zeile auf eine benutzerdefinierte Bundstegbreite von 4 eingestellt. Wenn Sie in Divi ein Blogmodul mit einem Rasterlayout zu einer Zeile mit einer 4er Bundstegbreite hinzufügen, werden Ihre Blograsterspalten horizontal um 8% getrennt. der Marge. Wenn Sie also die 4% der linken und rechten Auffüllung zum Modul hinzufügen, wird der exakte Abstand erzeugt, den wir benötigen.

An dieser Stelle sind wir mit dem Hintergrunddesign fertig. Sehen Sie sich an, was wir bisher haben.

Jetzt müssen wir nur noch dem Blog-Modul den letzten Schliff geben.

Letzter Schliff

Aktualisieren Sie auf der Registerkarte Design der Blog-Moduleinstellungen Folgendes:

Textkörperfarbe: rgba(0,0,0,0.8)
Meta-Textfarbe: rgba(0,0,0,0.5)
Paginierung Schriftstil: Unterstreichen
Paginierungsunterstreichungsfarbe: rgba(166,221,217,0.39)
Paginierungstextfarbe: #ffffff
Paginierungstextgröße: 3vw (Desktop), 40px (Tablet), 30px (Smartphone)

Wenn Sie Ihrem Design etwas mehr Textur verleihen möchten, können Sie Ihrem Abschnitt Trennhintergründe hinzufügen.

Teiler oben: Siehe Screenshot
Teilerfarbe: rgba (88,115,221,0.5)
Teilerhöhe: 32vw
Teiler Horizontale Wiederholung: 0,3X

Teiler unten: Siehe Screenshot
Teilerfarbe: rgba (88,115,221,0.5)
Teilerhöhe: 43vw
Teiler Horizontale Wiederholung: 0,3X

Sehen Sie sich jetzt das Endergebnis an…

Sich anpassendes Design

Die Ebenen, die die Spalten des Rasters einrahmen, lassen sich bei allen Desktop-Browser-Größen perfekt skalieren.

Obwohl die Hintergrundebenen nicht für zwei Spalten auf dem Tablet und eine Spalte auf dem Smartphone angepasst werden, ist das Ergebnis immer noch sehr symmetrisch und bietet ein subtiles gebrochenes Rasterdesign, das gut funktioniert.

So sieht es auf dem Handy aus…

Abschließende Gedanken

Diese geschichtete Hintergrundtechnik ist wirklich eine Möglichkeit, den Eindruck zu erwecken, drei Spaltenhintergründe zu haben, wo es eigentlich nur eine Spalte gibt (da das Blogmodul in einer Spalte sitzt). Natürlich ist dies in benutzerdefiniertem CSS auf Blogmodulebene möglich, aber ich dachte, es wäre hilfreicher, eine kreative Lösung mit dem Divi Builder zu geben. Und Variationen des Designs können auch als Hintergrund für andere Inhalte verwendet werden.

Ich habe versucht, die Gründe für einige der in diesem Tutorial verwendeten Stylings zu erklären, aber wenn Sie Fragen haben, bin ich ganz Ohr. Und für diejenigen unter Ihnen, die Ihr Blog-Raster-Layout aufpeppen möchten, gibt Ihnen dieser Beitrag hoffentlich zumindest einige Design-Tipps, um genau das zu tun.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!