So maximieren Sie die mobilen Ansichtsfenster von Divi mit gedrehter Kopie

Bei der Gestaltung einer Website müssen Sie ganz am Anfang eine wichtige Entscheidung treffen: „Für welches Gerät werde ich zuerst entwerfen?“ Oft ist die Antwort Desktop. Aber nur weil Sie zuerst für den Desktop entwerfen, heißt das nicht, dass Ihr mobiles Design nicht so gründlich sein kann. Durch die Verwendung gedrehter Kopien können Sie beispielsweise die mobilen Ansichtsfenster von Divi maximieren und mehr Inhalte in die mobilen Ansichtsfenster einfügen, ohne Ihre Besucher oder Ihr Design zu überfordern. In diesem Tutorial zeigen wir Ihnen genau, wie das in Divi geht. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

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

Laden Sie das Layout Maximizing Mobile Viewports KOSTENLOS herunter

Um das kostenlose maximierende mobile Ansichtsfenster-Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Abstand

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Zeile 1 hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 50 % (Desktop), 100 % (Tablet und Telefon)
• Reihenausrichtung: Links

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Hauptelement-CSS

Um sicherzustellen, dass alle Spalten nebeneinander bleiben, fügen wir auch dem Hauptelement der Zeile eine einzelne Zeile CSS-Code hinzu.

display: flex;

Spalte 1 Einstellungen

Animation

Dann öffnen wir die Einstellungen von Spalte 1 und fügen die folgende Animation hinzu:

• Animationsstil: Ausblenden

Hauptelement-CSS

Wir behalten die Spaltengröße auf kleineren Bildschirmgrößen bei, indem wir die folgende Zeile CSS-Code zum Hauptelement der Spalte hinzufügen:

width: 40% !important;

Spalte 2 Einstellungen

Animation

Als Nächstes öffnen wir die Einstellungen von Spalte 2 und wenden die folgende Animation an:

• Animationsstil: Ausblenden
• Animationsverzögerung: 200ms

Hauptelement-CSS

Wir behalten die Größe der Spalte auf kleineren Bildschirmgrößen bei, indem wir die folgende CSS-Codezeile hinzufügen:

width: 60% !important;

Bildmodul zu Spalte 2 hinzufügen

Bild hochladen

Zeit, Module hinzuzufügen. Fügen Sie in Spalte 2 ein Bildmodul hinzu und laden Sie ein Hochformat Ihrer Wahl hoch.

Größe

Wechseln Sie zur Design-Registerkarte des Moduls und erzwingen Sie die volle Breite des Moduls.

• Volle Breite erzwingen: Ja

Textmodul zu Spalte 1 hinzufügen

H2-Inhalt hinzufügen

In Spalte 1 benötigen wir als erstes Modul ein Textmodul mit H2-Inhalten.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H2-Texteinstellungen wie folgt:

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Schriftstärke: Leicht
• Überschrift 2 Textausrichtung: Mitte (nur Tablet und Telefon)
• Überschrift 2 Textfarbe: #000000
• Überschrift 2 Textgröße: 3vw (Desktop), 50px (Tablet), 40px (Telefon)
• Überschrift 2 Buchstabenabstand: -3px

Größe

Als Nächstes ändern wir die Breite in den Größeneinstellungen.

• Breite: 89 % (Desktop), 150 % (Tablet & Telefon)

Transformieren Drehen

Um unser Modul auf kleineren Bildschirmgrößen zu drehen, verwenden wir die Einstellungen zum Drehen von Transformationen.

• Links: 270 Grad (nur Tablet und Telefon)

Position

Außerdem positionieren wir das Modul bei verschiedenen Bildschirmgrößen unterschiedlich neu.

• Position: Absolut
• Ort: Unten Mitte (Desktop), Mitte (Tablet & Telefon)
• Vertikaler Versatz: 50px

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Das nächste und letzte Modul, das wir in Spalte 1 benötigen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Linienfarbe.

• Linienfarbe: #000000

Größe

Ändern Sie auch die Größeneinstellungen.

• Breite: 50% (Desktop), 30% (Tablet & Telefon)

Position

Und vervollständigen Sie die Moduleinstellungen, indem Sie das Modul entsprechend neu positionieren:

• Position: Absolut
• Ort: Mitte rechts

Zeile 2 hinzufügen

Spaltenstruktur

Verwenden Sie in der nächsten Zeile die folgende Spaltenstruktur:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 50 % (Desktop), 100 % (Tablet und Telefon)
• Zeilenausrichtung: Rechts

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Hauptelement-CSS

Um sicherzustellen, dass beide Spalten auf kleineren Bildschirmgrößen nebeneinander bleiben, fügen wir dem Hauptelement der Zeile eine einzelne Zeile CSS-Code hinzu.

display: flex;

Spalte 1 Einstellungen

Hintergrund mit Farbverlauf

Als Nächstes öffnen wir die Einstellungen von Spalte 1 und wenden einen Verlaufshintergrund an.

• Farbe 1: #1a9970
• Farbe 2: #000000
• Verlaufstyp: Linear
• Verlaufsrichtung: 153deg

Animation

Wir verwenden auch für diese Spalte eine verzögerte Animation.

• Animationsstil: Ausblenden
• Animationsverzögerung: 400ms

Hauptelement-CSS

Wir stellen dann sicher, dass wir die Größe der Spalte auf kleineren Bildschirmgrößen beibehalten, indem wir die folgende Zeile CSS-Code zum Hauptelement der Spalte hinzufügen:

width: 25% !important;

Sichtweite

Zu guter Letzt blenden wir die Überläufe der Spalte aus, um sicherzustellen, dass nichts über den Container hinausgeht.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Spalte 2 Einstellungen

Hintergrundfarbe

Weiter zu den Einstellungen von Spalte 2. Verwenden Sie dafür folgende Hintergrundfarbe:

• Hintergrundfarbe: #f4f4f4

Animation

Wenden Sie auch eine verzögerte Animation an.

• Animationsstil: Ausblenden
• Animationsverzögerung: 600ms

Hauptelement-CSS

Und vervollständigen Sie die Spalteneinstellungen, indem Sie dem Hauptelement der Spalte eine einzelne Zeile CSS-Code hinzufügen. Dadurch wird sichergestellt, dass die Spalte auf kleineren Bildschirmgrößen ihre Größe behält.

width: 75% !important;

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen. Fügen Sie in Spalte 2 ein Textmodul mit einem beliebigen Beschreibungsinhalt Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Open Sans
• Textgröße: 15px (Desktop), 14px (Tablet), 13px (Telefon)
• Textzeilenhöhe: 2,4 em

Größe

Dann ändern wir die Größeneinstellungen.

• Breite: 80%
• Modulausrichtung: Mitte

Abstand

Wir vervollständigen die Moduleinstellungen, indem wir den Abstandseinstellungen einige benutzerdefinierte Abstandswerte hinzufügen.

• Obere Polsterung: 15%
• Untere Polsterung: 15%

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir in Spalte 2 benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Ausrichtung

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Schaltflächenausrichtung.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Stylen Sie die Schaltfläche als nächstes.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextfarbe: #000000
• Hintergrundfarbe der Schaltfläche: #ffffff
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px

• Button-Schriftart: Montserrat
• Schaltflächensymbol anzeigen: Ja
• Platzierung der Schaltflächensymbole: Links
• Nur Symbol beim Hover für Schaltfläche anzeigen: Nein

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie den Abstandseinstellungen einige benutzerdefinierte Abstandswerte hinzufügen.

• Obere Polsterung: 2%
• Untere Polsterung: 2%
• Linke Polsterung: 10%
• Rechte Polsterung: 10%

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

In Spalte 1 benötigen wir als einziges Modul ein Textmodul. Fügen Sie dem Inhaltsfeld folgenden Inhalt hinzu: '— 01'.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Montserrat
• Schriftstärke des Textes: Dünn
• Textfarbe: #ffffff
• Textgröße: 50px (Desktop), 40px (Tablet), 35px (Telefon)
• Textausrichtung: Mitte

Größe

Erhöhen Sie als nächstes die Breite des Moduls.

• Breite: 150%

Transformieren Übersetzen

Gehen Sie dann zu den Transformationseinstellungen und positionieren Sie das Modul neu, indem Sie die Transformationsübersetzungseinstellungen ändern:

• Unten: -50 % (nur Tablet und Telefon)

Transformieren Drehen

Wir drehen das Modul auch auf kleineren Bildschirmgrößen.

• Links: 270 Grad (nur Tablet und Telefon)

Position

Und wir vervollständigen die Moduleinstellungen, indem wir das Modul auf der Registerkarte "Erweitert" neu positionieren.

• Position: Absolut
• Ort: Zentrum

Abschnitt zur Wiederverwendung klonen

Nachdem Sie den ersten Abschnitt abgeschlossen haben, können Sie ihn beliebig oft klonen.

Alle Kopien und Links ändern

Stellen Sie sicher, dass Sie alle Kopien und Links ändern.

Bild ändern

Zusammen mit dem Portraitbild und fertig!

Vorschau

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

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Ihre mobilen Ansichtsfenster in Divi maximieren. Genauer gesagt haben wir gedrehte Kopien verwendet, um mehr Inhalte in unsere Ansichtsfenster einzupassen, ohne ein überwältigendes Designerlebnis zu schaffen. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.