So entwerfen Sie ein geometrisches Rasterlayout in Divi

Das Entwerfen eines geometrischen Rasterlayouts für Ihre Website kann außergewöhnlich schön sein. Eines meiner liebsten geometrischen Gestaltungselemente ist ein Sechseck. Hexagone können verwendet werden, um ausgewogene und harmonische Rasterlayouts zu entwerfen (denken Sie an Bienenstock). Aber das Design kann mit Herausforderungen verbunden sein. Sie müssen Formen erstellen, die als Hintergrund für Ihre Inhalte dienen. Dann müssen Sie Ihren Inhalt in die Form einpassen. Dann müssen Sie sicherstellen, dass diese Formen auf verschiedenen Bildschirmgrößen richtig verteilt sind. Aber keine Sorge. Es ist nicht so schwer, wie Sie denken.

Was das Erstellen dieser geometrischen Formen angeht, gibt es Möglichkeiten, dies mit Hilfe von fortgeschrittenem benutzerdefiniertem CSS zu erreichen, aber ich denke, der einfachste Weg besteht darin, ein Bild zu erstellen. Dann können Sie die Kraft von Divi für den Rest nutzen.

In diesem Tutorial zeige ich Ihnen, wie einfach es ist, mit Divi ein sechseckiges Bild zu erstellen, um ein geometrisches Rasterlayout zu entwerfen.

Lass uns anfangen!

Vorgeschmack

Hier ist ein Blick auf das geometrische Gitterdesign, das wir in diesem Tutorial erstellen werden.

Was du brauchst

• Ein Fotoeditor (ich werde Sketch verwenden), um ein Sechseckbild zu erstellen. Oder ziehen Sie dieses Bild vorerst einfach auf Ihren Desktop und verwenden Sie es.
  
• Divi-Theme (installiert und aktiv)

Erstellen des Sechseck-Hintergrundbilds

Um das Sechseck-Hintergrundbild zu erstellen, verwende ich den Fotoeditor Sketch (nur für Mac). Dies sollte jedoch eine einfache Form sein, die mit einer beliebigen Anzahl von Bildbearbeitungsprogrammen (wie Photoshop, Illustrator oder Gimp) erstellt werden kann.

Wenn Sie sich nicht mit diesem Teil des Tutorials beschäftigen möchten, können Sie dieses Bild vorerst einfach auf Ihren Desktop ziehen. Es ist ein dunkles halbtransparentes Sechseckbild, das mit einer Reihe von Designs funktionieren sollte, wenn man bedenkt, dass die Hintergrundfarben dahinter durchscheinen.

So erstellen Sie das Bild in einer Skizze. Klicken Sie zunächst oben rechts auf das Einfügen-Symbol. Bewegen Sie dann den Mauszeiger über die Formoption und wählen Sie die Sechseckform aus.

Halten Sie nun die Umschalttaste gedrückt und klicken (und halten) Sie auf die Leinwand und ziehen Sie Ihre Maus, um die Form zu erstellen, und lassen Sie dann die Maus los. Wenn Sie die Umschalttaste gedrückt halten, können Sie perfekt quadratische Abmessungen für Ihre Form erstellen. Aktualisieren Sie nun die Eigenschaften Ihrer Form in der rechten Seitenleiste wie folgt:

Größe: 360 Breite, 360 Höhe
Seiten: 6
Füllfarbe: 000000 hex, 0 R, 0 G, 0 B, 30 A (im Grunde ist dies eine schwarze Farbe mit 30% Deckkraft)

Exportieren Sie dann Ihr Bild als PNG und importieren Sie es für später in Ihre WordPress-Medienbibliothek.

Erstellen des ersten Abschnitts mit drei Spalten

Dieses Design besteht aus drei übereinander gestapelten Abschnitten mit jeweils einer Reihe, die unsere unterschiedlichen Spaltenstrukturen enthält. Der erste Abschnitt hat unsere dreispaltige Struktur, der zweite Abschnitt hat zwei Spalten und der dritte nur eine Spalte.

Erstellen Sie zum Erstellen des ersten Abschnitts eine neue Seite und stellen Sie den Visual Builder bereit, um ein neues Layout von Grund auf zu erstellen. Ein neuer regulärer Abschnitt wird für Sie erstellt und der Visual Builder fordert Sie auf, Ihre Spaltenstruktur für Ihren Abschnitt auszuwählen. Wählen Sie die dreispaltige Struktur (ein Drittel ein Drittel ein Drittel).

Bevor wir nun beginnen, unsere Zeile zu bearbeiten und unsere Module hinzuzufügen, geben wir unserem Abschnitt einen Hintergrundfarbverlauf, indem wir die Abschnittseinstellungen wie folgt aktualisieren:

Hintergrundfarbe links: #2b87da
Hintergrundfarbe rechts: rgba(0,0,0,0.6)

Passen Sie die Zeileneinstellungen an und fügen Sie Hexagon-Bilder zu Ihren Spaltenhintergründen hinzu

Um das gewünschte Design zu erreichen, müssen wir unser Hintergrundbild zu jeder Spalte unserer dreispaltigen Zeile hinzufügen. Fügen Sie also für jede Spalte das Sechseckbild (sollte 360 ​​x 360 Pixel groß sein) zu jeder Spalte hinzu. Stellen Sie dann die Hintergrundbildgröße auf „tatsächliche Größe“ und die Hintergrundbildwiederholung auf „keine Wiederholung“.

Stellen Sie sicher, dass Sie dies für die Hintergrundbilder von Spalte 1, 2 und 3 tun.

Als nächstes müssen wir unsere Zeileneinstellungen anpassen, um den Abstand zu erstellen, den wir benötigen, damit unsere sechseckigen Hintergrundbilder in jeder Spalte korrekt angezeigt werden. Dieser Abstand trägt auch dazu bei, dass die Dinge reaktionsschnell bleiben und der horizontale Platz auf Mobilgeräten maximiert wird.

Aktualisieren Sie die Zeileneinstellungen wie folgt:

Benutzerdefinierte Breite verwenden: JA
Einheit: %
Benutzerdefinierte Breite: 100%
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 2
Spaltenhöhen ausgleichen: JA

Benutzerdefinierte Polsterung (Desktop): 0 Pixel oben, 0 Pixel unten, 10 % links, 10 % rechts
Benutzerdefinierte Polsterung (Tablet): 0 % links, 0 % rechts

Speichern Sie Ihre Zeileneinstellungen vorerst.

Hinzufügen Ihrer Blurb-Module zu jeder Spalte

Fügen Sie Ihrer ersten Spalte ein neues Klappenmodul hinzu und aktualisieren Sie die Klappeneinstellungen wie folgt:

Inhalt: „Ihr Inhalt geht hier. Bearbeiten oder entfernen Sie diesen Text inline oder in den Modulinhaltseinstellungen.“ (Halten Sie sich kurz, da Sie nur einen begrenzten Platz in Ihrem Sechseckbild haben)
Symbol verwenden: Ja
Wählen Sie das Symbol (jeden, den Sie offensichtlich möchten)

Aktualisieren Sie dann die Designeinstellungen wie folgt:

Symbolfarbe: #66d1ff
Symbolschriftgröße: 66px
Textausrichtung: Mitte
Textfarbe: Hell
Breite: 360px (die gleiche Breite Ihres Sechseck-Hintergrundbilds)
Modulausrichtung: Mitte
Benutzerdefinierte Polsterung: 85 Pixel oben, 85 Pixel unten, 10 % links, 10 % rechts

Es ist wichtig, zuerst den Inhalt hinzuzufügen, der vor Ihrem Sechseck angezeigt werden soll, damit Sie nun den Abstand Ihres Klappenmoduls anpassen können, um das Hintergrundbild vollständig anzuzeigen. Beachten Sie, dass ich eine obere und untere Auffüllung von 85px hinzugefügt habe. Dies reicht gerade aus, um den sechseckigen Hintergrund freizulegen, auch wenn der Browser an die Größe mobiler Geräte angepasst wird.

Nachdem Sie Ihr Klappenmodul gespeichert haben, kopieren Sie es und fügen Sie es in Spalte 2 und 3 ein, damit alle drei Klappen vorhanden sind.

Jetzt haben wir unserer ersten Reihe von Klappentexten erfolgreich sechseckige Hintergründe hinzugefügt.

Erstellen des zweiten Abschnitts mit zwei Spalten

Um unseren zweiten Abschnitt zu erstellen, duplizieren Sie den ersten Abschnitt, aktualisieren Sie dann die Abschnittseinstellungen mit der folgenden Hintergrundfarbe: rgba(0,0,0,0.6) und löschen Sie den vorhandenen Farbverlauf.

Ändern Sie dann die Spaltenstruktur Ihrer Zeile auf zwei Spalten und löschen Sie das zusätzliche Modul in der unteren rechten Spalte.

Aktualisieren Sie die Zeileneinstellungen wie folgt:

Dachrinnenbreite: 3
Benutzerdefinierter Rand (Desktop): -145px Oben
Benutzerdefinierter Rand (Tablet): -70px Oben
Benutzerdefinierte Polsterung (Desktop): 24 % links, 24 % rechts

Ich habe links und rechts mehr Padding hinzugefügt, um die Hexagon-Hintergründe zwischen den Klappen im obigen Abschnitt zu positionieren (24% Padding auf jeder Seite bringt uns ziemlich nahe). Ich habe auch die Bundstegbreite wieder auf 3 geändert, um dem verringerten Spaltenraum aufgrund des größeren Zeilenabstands gerecht zu werden. Dann habe ich einen Rand von -145px verwendet, um die Zeile etwas nach oben zu ziehen.

Wie Sie sehen können, kommt das Rasterlayout zusammen.

Erstellen des dritten Abschnitts mit einer Spalte

Für den letzten Abschnitt gehen Sie vor, um den Abschnittsabschnitt zu duplizieren. Gehen Sie dann zum ersten Abschnitt, kopieren Sie den Hintergrundverlauf und fügen Sie ihn in den gerade erstellten dritten Abschnitt ein. Drehen Sie dann die Farbverläufe um, indem Sie auf das „Schalter“-Symbol klicken, wenn Sie mit der Maus über die Farbverlaufsvorschau fahren. Löschen Sie dann die Hintergrundfarbe im dritten Abschnitt.

Aktualisieren Sie nun die Zeilenspaltenstruktur auf eine Spalte und löschen Sie das zusätzliche Klappenmodul.

Damit der Hexagon-Bildhintergrund mit den anderen Klappen in kleineren Browserfenstern skaliert wird, müssen wir der Zeile mehr Auffüllung hinzufügen. Dadurch wird das Sechseckbild ein wenig zusammengedrückt, um den anderen zu entsprechen. Dies ist nur ein kleines Detail, um das Design einheitlicher zu gestalten.

Aktualisieren Sie in den Zeileneinstellungen den benutzerdefinierten Abstand wie folgt:

Benutzerdefinierte Polsterung (Desktop): 37 % links, 37 % rechts

Schauen wir uns nun das Endergebnis unseres geometrischen Rasterlayouts an.

So sieht es auf dem Handy aus.

So passt es sich an unterschiedliche Bildschirmgrößen an.

Letzter Gedanke

In diesem Tutorial erfahren Sie, wie Sie ein geometrisches Raster erstellen, indem Sie Ihren Spalten einen sechseckigen Hintergrund hinzufügen. Sie können diese Technik jedoch problemlos anwenden, um ein beliebiges Hintergrundbild hinzuzufügen. Dies öffnet viele Türen für die Gestaltung schöner Layouts, um Ihre Website von anderen abzuheben.

Ich hoffe, Sie finden es hilfreich für Ihr nächstes Projekt und ich freue mich darauf, von Ihnen in den Kommentaren zu hören.

Danke schön!