So erstellen Sie Mobile-First-Designs mit Divi

Viele Websites erhalten Tonnen von Besuchern von mobilen Geräten. Dies führt zu der Frage, ob Ihre Designs für kleinere Bildschirmgrößen ausreichend optimiert sind. Mit Divi reagiert ein Design, das für ein Desktop-Erlebnis entwickelt wurde, auch sofort. Aber nur weil etwas responsive ist, heißt das nicht, dass es auch optimiert ist.

Wenn Mobilgeräte Ihre Hauptquelle für Besucher sind, kann es wirklich hilfreich sein, mit dem Entwerfen und Bauen aus einer mobilen Perspektive anstelle einer Desktop-Perspektive zu beginnen. In diesem Beitrag zeigen wir Ihnen genau, wie das geht. Nachdem wir einige Tipps und Tricks durchgegangen sind, die Sie beachten sollten, erstellen wir auch ein Beispiel von Grund auf neu, das diese Tipps berücksichtigt.

Lasst uns anfangen!

Vorschau

Wie bereits erwähnt, beginnen wir mit einigen Tipps und Tricks. Anschließend erstellen wir ein Beispiel von Grund auf neu, das diese Tipps verwendet. Schauen wir uns das Ergebnis an.

Handy, Mobiltelefon

Desktop

Sich nähern

Abonnieren Sie unseren Youtube-Kanal

1. Wechseln Sie direkt nach dem Hinzufügen einer neuen Seite zur mobilen Ansicht

Als erstes müssen Sie nach dem Hinzufügen einer neuen Seite sofort zur mobilen Ansicht wechseln. Auf diese Weise können Sie ein Design erstellen, das auf Mobilgeräte ausgerichtet und genau ist.

2. Aktivieren Sie Responsive-Optionen für jedes Designelement und ändern Sie zuerst die Mobile-Werte

Sobald Sie mit dem Entwerfen des gewünschten Designs beginnen, sollten Sie die Responsive-Optionen für Designelemente aktivieren. Dies beinhaltet, ist aber nicht beschränkt auf Textgröße, Auffüllung und Rand. Die ersten Werte, die Sie hinzufügen, sind die Werte für Mobilgeräte (anstelle der Desktop-Werte), um sicherzustellen, dass das Design zuerst für Mobilgeräte optimiert ist.

3. Entfernen Sie den Standardabstand zwischen den Spalten und fügen Sie den Abstand bei Bedarf manuell hinzu

Um mehr horizontalen Platz zu schaffen, wird außerdem empfohlen, den gesamten standardmäßigen benutzerdefinierten Abstand zwischen den Spalten zu entfernen. Bei Bedarf können Sie die Polsterung jederzeit manuell zu jeder Säule oder jedem Gestaltungselement hinzufügen und selbst wählen, wie viel Abstand Sie haben möchten.

4. Platzieren Sie 2 oder 3 Spalten nebeneinander, um ein horizontales Design zu erstellen

Die responsive Struktur in Divi ist vertikal ausgerichtet. Das bedeutet, dass Module und Spalten untereinander erscheinen. Dies erfordert jedoch mehr vertikales Scrollen. Abhängig von dem Design, an dem Sie arbeiten, kann die Schaffung eines horizontaleren Flusses wirklich den Unterschied ausmachen.

5. Ändern Sie Desktop- und Tablet-Ansichten unterwegs oder danach

Auch wenn Sie Design für einen Mobile-First-Zweck erstellen, ist es wichtig, auch die anderen Ansichten in Ordnung zu halten. Reaktionsfähige Optionen, die in jedem Designelement enthalten sind, werden Ihnen dabei helfen. Sie können diese Werte nachträglich oder während des gesamten Konstruktionsprozesses ändern.

Beginnen wir mit der Neuerstellung des Beispiels!

Neuen Abschnitt hinzufügen

Öffnen Sie eine neue Seite, wechseln Sie zur mobilen Ansicht und fügen Sie einen neuen Abschnitt hinzu, um loszulegen.

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie Ihrem Abschnitt eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Textmodul zu Zeile hinzufügen

H2-Inhalt hinzufügen

Fügen Sie der Spalte Ihrer Zeile ein Textmodul hinzu und geben Sie einige H2-Titelinhalte ein.

H2-Texteinstellungen

Gehen Sie dann zu den Überschriftentexteinstellungen und ändern Sie das Aussehen des Titels.

• Überschrift 2 Schriftart: Didact Gothic
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #333333
• Überschrift 2 Textgröße: 5.5vw (Telefon), 5vw (Tablet), 2vw (Desktop)

Teilermodul zu Reihe hinzufügen

Sichtweite

Fahren Sie direkt unter dem hinzugefügten Textmodul fort und fügen Sie ein Trennmodul hinzu. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Gehen Sie dann zur Registerkarte Design und ändern Sie die Farbe des Teilers.

• Farbe: #333333

Größe

Ändern Sie auch die Größeneinstellungen.

• Breite: 48%
• Modulausrichtung: Mitte

Zeile 2 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine weitere Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Hintergrundfarbe

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

• Hintergrundfarbe: #ffe69e

Spalte 2 Hintergrundfarbe

Fügen Sie auch der zweiten Spalte der Zeile eine Hintergrundfarbe hinzu.

• Spalte 2 Hintergrundfarbe: #ffd65b

Ausrichtung

Ändern Sie dann die Zeilenausrichtung.

• Reihenausrichtung: Links

Größe

Öffnen Sie als nächstes die Größeneinstellungen. Hier möchten wir den gesamten Standardabstand zwischen den Spalten entfernen. Wir verwenden auch eine benutzerdefinierte Breite für die Spalte, damit sie auf dem Desktop gut aussieht.

• Benutzerdefinierte Breite verwenden: Ja
• Einheit: PX
• Benutzerdefinierte Breite: 700px
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Fahren Sie fort, indem Sie zu den Abstandseinstellungen gehen und einige benutzerdefinierte Werte für Rand und Abstand manuell hinzufügen.

• Oberer Rand: 5vw
• Unterer Rand: 5vw
• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Spalte 1 obere Polsterung: 10vw (Telefon), 8vw (Tablet), 4vw (Desktop)
• Spalte 1 untere Polsterung: 10vw (Telefon), 8vw (Tablet), 4vw (Desktop)

Grenze

Fügen Sie der Reihe auch einige abgerundete Ecken hinzu.

• Oben rechts: 10px
• Unten rechts: 10px

Box Schatten

Und geben Sie ihm auch einen subtilen Kastenschatten.

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

Benutzerdefinierte CSS

Zu guter Letzt werden wir die Spalten auf kleineren Bildschirmgrößen nebeneinander platzieren, um sicherzustellen, dass wir den horizontalen Platz, den wir haben, voll ausnutzen. Gehen Sie zur Registerkarte "Erweitert" und fügen Sie dem Hauptelement eine einzelne Zeile CSS-Code hinzu.

display: flex;

Textmodul zu Spalte 1 hinzufügen

H3-Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie der ersten Spalte ein Titel-Textmodul hinzu und geben Sie H3-Inhalte ein.

H3-Texteinstellungen

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Einstellungen für den Überschriftentext.

• Überschrift 3 Schriftart: Didact Gothic
• Überschrift 3 Schriftstärke: Fett
• Überschrift 3 Textausrichtung: Mitte
• Überschrift 3 Textfarbe: #ee6f49
• Überschrift 3 Textgröße: 4vw (Telefon), 3vw (Tablet), 1,5vw (Desktop)

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Fügen Sie als nächstes ein Teilermodul hinzu. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Ändern Sie dann die Farbe des Teilers.

• Farbe: #ffffff

Größe

Zusammen mit den Größeneinstellungen.

• Teilergewicht: 4px
• Breite: 30%
• Modulausrichtung: Mitte

Abstand

Fügen Sie dem Modul auch einen benutzerdefinierten oberen Rand hinzu.

• Obere Marge: 4vw (Telefon), 2vw (Tablet), 1,5vw (Telefon)

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das in der ersten Spalte benötigt wird, ist ein Button-Modul. Geben Sie eine Kopie ein.

Ausrichtung

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Ändern Sie auch das Aussehen der Schaltfläche in den Schaltflächeneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Tastentextgröße: 3vw (Telefon), 2vw (Tablet), 1,5vw (Desktop)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #ee6f49
• Breite des Tastenrahmens: 0px
• Knopfschrift: Didact Gothic
• Schriftdicke: fett

Bildmodul zu Spalte 2 hinzufügen

Upload-Symbol

Das einzige Modul, das wir in Spalte 2 benötigen, ist ein Image-Modul. Sie können ein beliebiges Bild Ihrer Wahl verwenden, aber wenn Sie genau die gleichen Symbole verwenden möchten, die in diesem Beispiel verwendet wurden, können Sie zum Möbelgeschäft-Layout-Paket gehen und sie am Ende des Beitrags herunterladen.

Ausrichtung

Gehen Sie dann zur Registerkarte Design und ändern Sie die Bildausrichtung.

• Bildausrichtung: Mitte

Zeile 2 klonen

Sobald Sie mit dem Ändern der Zeile fertig sind, können Sie sie klonen.

Zeilenhintergrundfarbe ändern

Wir müssen einige Änderungen an diesem Duplikat vornehmen, beginnend mit der Hintergrundfarbe der Zeile.

• Hintergrundfarbe: #8ee5cf

Hintergrundfarbe von Spalte 2 entfernen

Fahren Sie fort, indem Sie die Hintergrundfarbe von Spalte 2 entfernen.

Hintergrundfarbe für Spalte 1 hinzufügen

Stattdessen fügen wir der ersten Spalte eine Hintergrundfarbe hinzu.

• Spalte 1 Hintergrundfarbe: #47e5bd

Module in Spalten ändern

Wir tauschen auch Spalten für die Module.

Symbol im Bildmodul ändern

Ändern Sie dann das Symbol im Bildmodul.

Filter zum Bildmodul hinzufügen

Und passen Sie es an die neuen Zeilen- und Spaltenhintergrundfarben an, indem Sie den Farbton in den Filtereinstellungen ändern.

• Farbton: 65 Grad

Zeilenausrichtung ändern

Ändern Sie als nächstes die Zeilenausrichtung.

• Zeilenausrichtung: Rechts

Zeilenrahmen ändern

Zusammen mit den abgerundeten Ecken.

• Oben links: 10px
• Unten links: 10px

Ändern Sie die Textfarbe des Textmoduls in Spalte 2

Wir verwenden auch eine andere Textfarbe für das Textmodul in Spalte 2.

• Überschrift 3 Textfarbe: #7b9710

Hintergrundfarbe der Schaltfläche ändern

Und wir verwenden dieselbe Farbe für den Schaltflächenhintergrund.

• Schaltflächenhintergrundfarbe: #7b9710

Beide Zeilen klonen

Da wir nun beide Seiten der Reihe haben, können wir beide so oft wie nötig klonen und in die richtige Reihenfolge bringen.

Duplikat Nr. 1 ändern

Zeilenhintergrundfarbe ändern

Wir beginnen mit dem Ändern der Zeilenhintergrundfarbe des ersten Duplikats.

• Hintergrundfarbe: #ffc9cf

Spaltenfarbe ändern

Dann werden wir auch die Hintergrundfarbe von Spalte 2 ändern.

• Spalte 2 Hintergrundfarbe: #ffadb6

Symbol im Bildmodul ändern

Ändern Sie das Symbol im Bildmodul in ein anderes Ihrer Wahl.

Filter zum Bildmodul hinzufügen

Und ändern Sie den Farbton in den Filtereinstellungen, damit er mit den neuen Zeilen- und Spaltenhintergrundfarben übereinstimmt.

• Farbton: 309 Grad

Textfarbe ändern

Wir ändern auch die Textfarbe.

• Überschrift 3 Textfarbe: #f862b0

Hintergrundfarbe der Schaltfläche ändern

Und wir verwenden dieselbe Farbe für den Schaltflächenhintergrund.

• Schaltflächenhintergrundfarbe: #f862b0

Duplikat Nr. 2 ändern

Zeilenhintergrundfarbe ändern

Auf zum nächsten und letzten Duplikat! Ändern Sie die Hintergrundfarbe der Zeile.

• Hintergrundfarbe: #b2c4ff

Spaltenfarbe ändern

Machen Sie dasselbe für die Hintergrundfarbe von Spalte 1.

• Spalte 1 Hintergrundfarbe: #9eb4ff

Symbol im Bildmodul ändern

Ändern Sie dann das verwendete Symbol.

Filter zum Bildmodul hinzufügen

Zusammen mit dem Farbton in den Filtereinstellungen des Bildmoduls.

• Farbton: 221 Grad

Textfarbe ändern

Ändern Sie als nächstes die Textfarbe des Bildmoduls.

• Überschrift 3 Textfarbe: #6287f9

Hintergrundfarbe der Schaltfläche ändern

Verwenden Sie dieselbe Farbe für den Schaltflächenhintergrund.

• Schaltflächenhintergrundfarbe: #6287f9

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis.

Handy, Mobiltelefon

Desktop

Abschließende Gedanken

Wenn Ihre Hauptbesucherquelle von Mobilgeräten stammt, ist es wichtig, alles für diese bestimmte Bildschirmgröße zu optimieren. Mit Divi reagiert alles sofort. Aber nur weil etwas reaktionsschnell ist, heißt das nicht, dass es auch für diese bestimmte Bildschirmgröße optimiert ist. Eine andere Möglichkeit, das Design für Mobiltelefone anzugehen, besteht darin, Ihr Design aus einer Mobile-First-Perspektive zu beginnen. In diesem Beitrag haben wir einige Tipps und Tricks dazu gegeben. Danach haben wir ein Beispiel nachgebaut, das diesen Regeln entspricht und es uns ermöglicht, ein beeindruckendes Ergebnis zu erzielen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!