So entwerfen Sie mit Divi . ein responsives fünfspaltiges „Showcase“-Layout

Das Entwerfen eines fünfspaltigen Layouts mit genügend Platz für Ihre Inhalte kann eine Herausforderung sein. Ganz zu schweigen von der größeren Herausforderung, sicherzustellen, dass es für alle Browsergrößen gut skaliert wird. In diesem Tutorial zeige ich Ihnen, wie Sie den Platz maximieren, der benötigt wird, um Inhalte in ein fünfspaltiges Layout einzupassen, ohne das Design auf kleineren Bildschirmgrößen (wie Tablet und Smartphone) zu beeinträchtigen. Dieses Design ist ideal für die Präsentation von Produkten, Dienstleistungen und Projekten. Ich werde sogar ein paar Bonus-Design-Features für ein wenig Inspiration hinzufügen.

Lass uns anfangen.

Vorgeschmack

Verwendete reaktionsschnelle Techniken

Verwenden Sie eine benutzerdefinierte Zeilenbreite und Bundstegbreite

Der Schlüssel zum responsiven Layout mit fünf Spalten besteht darin, Ihren Spalten zunächst genügend Platz für den Inhalt zu geben. Im Design für dieses Tutorial werde ich der Zeile mit den fünf Spalten eine benutzerdefinierte Breite von 89% geben. Dann schaffe ich noch mehr Platz, indem ich die Bundstegbreite auf 1 setze, was im Grunde genommen jeden Rand zwischen den Spalten entfernt. Für dieses Design ist es wichtig, eine benutzerdefinierte Breite von 89 % zu verwenden, anstatt die Zeile auf volle Breite einzustellen, da Sie die Bundstegbreite auf 1 setzen können und trotzdem einen Rand auf jeder Seite Ihrer Zeile beibehalten. Sie werden sehen, was ich meine.

Verwenden Sie vw-Längeneinheiten für Abstände und Überschriftentext

Ein weiterer Schlüssel, um die Dinge in einem fünfspaltigen Layout reaktionsschnell zu halten, besteht darin, Ihren Inhalt mit vw-Längeneinheiten zu verteilen. Und es ist wichtig, bei der Verwendung von vw in allen Abständen konsistent zu sein. Dadurch wird sichergestellt, dass die Skalierung bei allen Browsergrößen konstant bleibt, ohne dass Elemente brechen oder herumspringen, während Sie die Breite Ihres Fensters anpassen. Die Verwendung der Längeneinheit vw für Überschriftentext ist ebenfalls wichtig, damit der Text in kleineren Browserfenstern nicht in eine neue Zeile umbricht. Für Überschriftentext müssen wir jedoch eine px-Einheit für Tablet und Smartphone zuweisen, um die zu starke Verkleinerung des Textes zu berücksichtigen.

Teil 1: Erste Schritte

Alles, was Sie für dieses Tutorial benötigen, ist das Divi-Theme. Wir werden den Visual Builder zusammen mit dem Homepage-Layout der Architekturfirma verwenden.

Erstellen Sie also zunächst eine neue Seite, geben Sie Ihrer Seite einen Titel und stellen Sie den Visual Builder bereit. Wählen Sie die Option „Wählen Sie ein vorgefertigtes Layout“. Wählen Sie im Popup „Aus Bibliothek laden“ das Layoutpaket Interior Design aus und laden Sie dann das Homepage-Layout des Architekturbüros auf Ihre Seite.

Teil 2: Erstellen des Titelabschnitts

Duplizieren Sie zunächst den zweiten Abschnitt, der die drei Klappentexte enthält.

Für dieses Design benötigen wir zwei Abschnitte, da der obere Abschnitt zwei Zwecken dient. Erstens wird es den Titel unseres Abschnitts unten enthalten. Und zweitens können wir mit einem Abschnittsteiler ein einzigartiges Design hinzufügen.

Lass uns weitermachen.

Löschen Sie im ursprünglichen Abschnitt (nicht im Duplikat) die drei Klappentexte und ändern Sie die Spaltenstruktur der Zeile in eine Spalte.

Scrollen Sie dann im Layout nach unten zum letzten Abschnitt und kopieren Sie den Textbaustein in die linke Spalte.

Fügen Sie es dann in die soeben erstellte einspaltige Zeile ein und löschen Sie den gesamten Textinhalt unter der Überschrift h2, sodass nur noch "Let's Build Something" übrig bleibt.

Teil 3: Anpassen von Blurbs für ein fünfspaltiges Layout

Jetzt ist es an der Zeit, den Abschnitt zu besuchen, den wir mit unseren ursprünglichen drei Klappentexten in der 3-Spalten-Reihe dupliziert haben. Lassen Sie uns zunächst die Zeilenstruktur in ein Layout mit fünf Spalten ändern.

Öffnen Sie die Klappeneinstellungen des Klappenmoduls in der ersten Spalte und löschen Sie dann das als Symbol verwendete Bild.

Dann duplizieren Sie das Klappenmodul in der ersten Spalte. Wir werden für dieses Design zwei Klappentexte pro Spalte verwenden, da wir den oberen Klappentext für unser Hintergrundbild benötigen.

Öffnen Sie die Einstellungen für den oberen Klappentext in der ersten Spalte und löschen Sie den Fließtext im Inhaltsfeld.

Fügen Sie dem oberen Blurb-Modul ein Hintergrundbild und einen Farbverlauf hinzu

Geben Sie dann dem gleichen Klappentext ein Hintergrundbild und fügen Sie einen Farbverlauf hinzu, um das Bild wie folgt zu überlagern:

Hintergrundbild hinzufügen
Hintergrundfarbe links: rgba(255,255,255,0)
Hintergrundfarbe rechts: rgba(18,18,18,0.65)
Startposition: 50%
Farbverlauf über dem Hintergrundbild platzieren: JA

Der Farbverlauf ist notwendig, damit unser Titeltext mit helleren Hintergrundbildern besser lesbar wird.

Verwenden Sie VW-Einheiten für den Titeltext und die Abstände

Aktualisieren Sie dann die Einstellungen der Registerkarte „Design“ wie folgt:

Titeltextgröße: 2.7vw (Desktop), 46px (Tablet), 36px (Smartphone)
Titel-Buchstaben-Abstand: -3px
Benutzerdefinierter Rand: 1,5 vw links, 1,5 vw rechts
Benutzerdefinierte Polsterung: 35vw oben, 2vw unten, 1vw links, 1vw rechts

Einstellungen speichern.

Die benutzerdefinierte obere Polsterung von 35vw erzeugt das einzigartige lange vertikale Bilddesign. Der Titeltext erhält einen Wert von 2,7vw, damit die Textskalierung bei unterschiedlichen Browserbreiten konsistent bleibt. Der Rest des Abstands wird sinnvoller, wenn wir später unserer Reihe mehr Abstand hinzufügen.

Anpassen des unteren Klappentexts

Öffnen Sie dann die Einstellungen des zweiten Klappenmoduls darunter in der ersten Spalte und löschen Sie den Titeltext. Aktualisieren Sie dann Folgendes:

Ausrichtung des Textkörpers: Links
Körpertextfarbe: #666666
Benutzerdefinierte Polsterung: 2vw oben, 2vw unten, 2vw links, 2vw rechts

Nun, da wir unsere beiden Klappentexte in unserer ersten Kolumne entworfen haben. Kopieren Sie beide und fügen Sie sie in jede der verbleibenden Spalten ein. Sie müssen zuerst die ursprünglichen Klappenmodule in den Spalten 2 und 3 löschen. Jetzt sollte Ihr Design so aussehen.

Teil 4: Anpassen der Abschnittseinstellungen

Lassen Sie uns nun unsere Abschnittseinstellungen aktualisieren, um einen weißen Hintergrund und einen Kastenschatten am unteren Rand zu haben, der einen Raum für die Überlappung unserer Zeile schafft.

Hintergrundfarbe: #ffffff
Benutzerdefinierte Polsterung: Standard Oben, 5 vw Unten, Standard Links, Standard Rechts
Box Shadow: siehe Screenshot
Vertikale Position des Boxschattens: -200px
Stärke der Box-Schattenunschärfe: 0px
Schattenfarbe: #121212

Teil 5: Anpassen der Zeileneinstellungen

Gehen wir nun zurück zu unserer Zeile und aktualisieren die Einstellungen wie folgt:

Hintergrundbild: #ffffff
Zeilenausrichtung: Mitte
Benutzerdefinierte Breite: 89 %
Dachrinnenbreite: 1
Benutzerdefinierter Rand: -10vw
Benutzerdefinierte Polsterung: 3vw oben, 3vw unten, 1,5vw links, 1,5vw rechts
Box Shadow: siehe Screenshot
Stärke der Box-Schattenunschärfe: 80px

Wie bereits im Tutorial erwähnt, sind die benutzerdefinierte Breite und die Bundstegbreite unerlässlich, um den Inhaltsbereich zu schaffen, den wir für ein fünfspaltiges Layout benötigen.

An dieser Stelle ist die Grundstruktur des Designs abgeschlossen. So sieht das Design bisher aus.

Teil 6: Den letzten Schliff hinzufügen

Jetzt können wir ein paar weitere Design-Optimierungen hinzufügen, um es abzuschließen.

Staffelung der Klappentexte

Lassen Sie uns zunächst die Höhe der Klappenhintergrundbilder gestaffelt, indem wir den Abstand einiger weniger verringern. Öffnen Sie die Einstellungen des oberen Klappenmoduls in der zweiten Zeile und aktualisieren Sie das Padding wie folgt:

Benutzerdefinierte Polsterung: 28vw Top

Und für den oberen Klappentext in der dritten Spalte ändern Sie die obere Auffüllung auf 30vw.

Fügen Sie einen Abschnittsteiler hinzu, um Ihrer fünfspaltigen Reihe eine Textur hinzuzufügen

Eine coole Designtechnik besteht darin, dem Abschnitt direkt über dem Abschnitt mit unseren fünf Spalten einen oberen Abschnittsteiler hinzuzufügen. Der Teilerhintergrund wird auf dem Hintergrund der fünfspaltigen Zeile angezeigt, auch wenn er den obigen Abschnitt überlappt. Gehen Sie dazu in den Abschnitt mit dem Titel „Let's Build Something“ und teilen Sie ihn wie folgt auf:

Da die Farbe des Teilers mit einer Deckkraft von 15 % die gleiche Farbe wie der Hintergrund des Abschnitts hat, ist der Teiler im oberen Abschnitt nicht sichtbar, wird jedoch im Abschnitt darunter und in der überlappenden Reihe sichtbar. Und weil wir der Reihe einen Kastenschatten gegeben haben, entsteht ein einzigartiges Design.

Ich habe einige der Hintergrundbilder aktualisiert, um eine bessere Vorstellung davon zu bekommen, wie das Design mit verschiedenen Bildern aussehen würde.

Hier ist das endgültige Design.

Eine der großartigen Eigenschaften des fünfspaltigen Layouts ist, dass Sie auf dem Tablet ein schönes zweispaltiges Layout erhalten.

Und so sieht es auf dem Smartphone aus.

Abschließende Gedanken

Ich liebe es, die Möglichkeiten von Divi zu erkunden, um reaktionsschnelle Layouts zu erstellen. Die Herausforderung eines fünfspaltigen Layouts besteht darin, dass es wirklich nicht viel Platz für Inhalte gibt, es sei denn, Sie verwenden die richtigen Techniken, um Ihre Inhalte entsprechend zu verteilen, um sie in allen Browsergrößen gut zu skalieren. Ich hoffe, dass dieses Design hilfreich war, um einige Möglichkeiten für die Verwendung eines fünfspaltigen Layouts für Ihr nächstes Projekt vorzustellen.

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

Danke schön!