Präsentieren Sie Ihre neuesten Blog-Posts in einem atemberaubenden mobilen Design mit Divi

Die Art und Weise, wie Sie Blog-Posts auf Ihrer Website präsentieren, hat großen Einfluss darauf, wie sich Ihre Besucher verhalten, wenn sie beim Navigieren auf Ihrer Website darauf stoßen. Damit Sie kreativ und effektiv werden, zeigen wir Ihnen, wie Sie Ihre neuesten Blog-Posts auf beeindruckende Weise präsentieren.

Das Beispiel, das wir neu erstellen, wird auf kleineren Bildschirmgrößen besonders gut aussehen, während es auch auf Desktops und Tablets ein tolles Erscheinungsbild behält. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, Ihre eigenen benutzerdefinierten Designs für die neuesten Blog-Posts zu erstellen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Erstellen Sie eine neue Seite oder öffnen Sie eine vorhandene und fügen Sie einen regulären Abschnitt hinzu. Öffnen Sie die Einstellungen und fügen Sie als nächstes einen Verlaufshintergrund hinzu.

• Farbe 1: #2e1b8f
• Farbe 2: #ffffff
• Verlaufsrichtung: 90deg
• Startposition: 53,3%
• Endposition: 53,3%

Abstand

Gehen Sie dann zu den Abstandseinstellungen. Hier werden wir die Größe des Abschnittsinhalts auf dem Desktop verkleinern und diesen Platz auf kleineren Bildschirmgrößen schrittweise entfernen.

• Oberer Rand: 100px
• Unterer Rand: 100px
• Linke Polsterung: 26vw (Desktop), 13vw (Tablet), 0vw (Telefon)
• Rechte Polsterung: 22,8 vw (Desktop), 11,4 vw (Tablet), 0 vw (Telefon)

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Spalte 2 Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie der zweiten Spalte eine Hintergrundfarbe hinzu.

• Spalte 2 Hintergrundfarbe: #f7f7f7

Spalte 3 Hintergrundfarbe

Fügen Sie dieselbe Farbe auch dem Hintergrund von Spalte 3 hinzu. Wir verwenden die gleiche Farbe für diese beiden Säulen, um sie zu verbinden und sie wie ein Stück aussehen zu lassen. Später im Beitrag werden wir dies verwenden, um die Spaltenbreiten auf kleineren Bildschirmgrößen zu manipulieren.

• Spalte 3 Hintergrundfarbe: #f7f7f7

Größe

Gehen Sie als nächstes zum Design-Tab und öffnen Sie die Größeneinstellungen. Hier entfernen wir den gesamten Standardabstand zwischen den Spalten.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Anzeige

Um sicherzustellen, dass alle drei Spalten auf kleineren Bildschirmgrößen nebeneinander angezeigt werden, müssen wir dem Hauptelement der Zeile eine einzelne Zeile CSS-Code hinzufügen.

display: flex;

Blurb-Modul zu Spalte 1 hinzufügen

Symbol auswählen

Zeit, Module hinzuzufügen! Beginnen Sie mit einem Blurb-Modul in Spalte 1 und wählen Sie ein Symbol Ihrer Wahl aus.

Hintergrund mit Farbverlauf

Gehen Sie zu den Hintergrundeinstellungen des Moduls und fügen Sie einen radialen Farbverlaufshintergrund hinzu.

• Farbe 1: #5000ff
• Farbe 2: rgba(41,196,169,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 28%
• Endposition: 28%

Symboleinstellungen

Fahren Sie fort, indem Sie zur Registerkarte Design gehen und die Symboleinstellungen ändern.

• Symbolfarbe: #ffffff
• Bild-/Symbolplatzierung: Oben
• Symbolschrift verwenden: Ja
• Symbolschriftgröße: 22px

Abstand

Fügen Sie als nächstes eine benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 20px
• Untere Polsterung: 10px

Grenze

Und fügen Sie einen dezenten unteren Rand hinzu, um das Blurb-Modul-Design zu vervollständigen.

• Breite des unteren Rands: 1px
• Farbe des unteren Rands: #ffffff
• Unterer Randstil: Gestrichelt

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das nächste und letzte Modul, das wir in der ersten Spalte benötigen, ist ein Textmodul. Fügen Sie Inhalte Ihrer Wahl hinzu.

Texteinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Didact Gothic
• Schriftstärke des Textes: Fett
• Textfarbe: #ffffff

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Auf zur zweiten Spalte! Hier benötigen wir nur ein Textmodul. Geben Sie einen Inhalt Ihrer Wahl ein.

Hintergrundfarbe

Gehen Sie zu den Hintergrundeinstellungen und fügen Sie eine vollständig weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Texteinstellungen

Wir ändern auch das Erscheinungsbild unserer Inhalte, indem wir die Texteinstellungen auf der Registerkarte „Design“ ändern.

• Textschrift: Source Serif Pro
• Schriftstärke des Textes: Fett
• Textfarbe: #000000
• Textgröße: 13px
• Textausrichtung: Mitte

Größe

Wie bereits erwähnt, manipulieren wir die Spaltenstrukturen, um ein benutzerdefiniertes Design auf kleineren Bildschirmgrößen zu erstellen. Dazu müssen Sie die Breite des Textmoduls verringern und sicherstellen, dass es an der linken Seite der Spalte ausgerichtet ist.

• Breite: 60%
• Modulausrichtung: Links

Abstand

Als nächstes fügen wir einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 57px
• Untere Polsterung: 57px
• Linke Polsterung: 20px
• Rechte Polsterung: 20px

Box Schatten

Zusammen mit einem subtilen Kastenschatten.

• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.23)

Textmodul zu Spalte 3 hinzufügen

Inhalt hinzufügen

Weiter zur nächsten und letzten Spalte. Fügen Sie ein Textmodul mit dem H3-Titel Ihres Blog-Posts und einem Link hinzu. Fügen Sie die Beitragsdetails im Absatztextstil direkt unter dem Titel hinzu.

Texteinstellungen

Gehen Sie zum Design-Tab des Textmoduls und ändern Sie die Texteinstellungen.

• Textschrift: Source Serif Pro
• Textfarbe: #a8a8a8
• Textgröße: 12px

H3-Texteinstellungen

Fahren Sie fort, indem Sie auch die H3-Texteinstellungen ändern.

• Überschrift 3 Schriftart: Didact Gothic
• Überschrift 2 Schriftstärke: Fett
• Überschrift 3 Textgröße: 17px

Abstand

Schließlich müssen wir einige benutzerdefinierte Abstandswerte hinzufügen. Sie werden feststellen, dass wir dem Modul auch einen negativen linken Rand hinzufügen. Dies ist der letzte Schritt, um eine andere Art von Spaltenstruktur auf kleineren Bildschirmgrößen zu erstellen. Obwohl die Spaltenstruktur technisch immer noch dieselbe ist, haben wir Spaltenhintergründe, Modulbreiten und einen negativen linken Rand kombiniert, um ein anders aussehendes Ergebnis zu erzielen.

• Oberer Rand: 35px
• Linker Rand: -80px (Desktop), -50px (Tablet & Telefon)
• Rechte Polsterung: 20px

Zeile zweimal klonen

Sobald Sie mit dem Ändern der Zeile und aller ihrer Module fertig sind, können Sie die gesamte Zeile beliebig oft klonen, je nachdem, wie viele neueste Blog-Posts Sie verwenden möchten.

Symbole ändern

Ändern Sie das Symbol jedes Duplikats.

Inhalte & Links ändern

Zusammen mit den Inhalten und Links, die beteiligt sind und Sie sind fertig!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie ein atemberaubendes mobiles Design erstellen, das Ihre neuesten Blog-Posts präsentiert. Das Design, das wir Schritt für Schritt neu erstellt haben, ist in erster Linie für kleinere Bildschirmgrößen gedacht, sieht aber auch auf Tablets und Desktops gut aus. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!