Wie man mit Divi Dienste auf Mobilgeräten schön präsentiert (Kostenloser Download!)

Wenn Sie sich auf Mobile-First-Designs konzentrieren, könnte Ihnen dieser Beitrag helfen. Wir haben zwei schöne Beispiele für Service-Vitrinen erstellt, die auf kleineren Bildschirmgrößen großartig aussehen. Darüber hinaus wurden sie speziell entwickelt, um auf Mobilgeräten optimal auszusehen und gleichzeitig ein gutes Design auf dem Desktop beizubehalten. In diesem Beitrag zeigen wir Ihnen Schritt für Schritt, wie Sie sie von Grund auf neu erstellen können. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, Ihrer Kreativität beim Entwerfen von Serviceabschnitten für jede von Ihnen erstellte Website freien Lauf zu lassen. Am Ende des Tutorials können Sie auch die JSON-Dateien beider Abschnitte herunterladen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf die beiden mobilen Beispiele, die wir neu erstellen werden.

Beispiel 1

Beispiel #2

Beginnen wir mit der Neuerstellung von Beispiel Nr. 1

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Erstellen Sie eine neue Seite und fügen Sie einen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und fügen Sie einen Verlaufshintergrund hinzu.

• Farbe 1: #ff0f83
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Links
• Startposition: 20%
• Endposition: 20%

Zeile 1 hinzufügen

Spaltenstruktur

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

Textmodul #1 hinzufügen

Inhalt hinzufügen

Das erste Modul, das wir benötigen, ist ein Textmodul. Fügen Sie dem Inhaltsfeld Inhalt hinzu.

Texteinstellungen

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

• Textschriftart: Poppins
• Schriftstärke des Textes: Schwer
• Textfarbe: #ffffff
• Textgröße: 20vw
• Textzeilenhöhe: 1em

• Stärke der Textschattenunschärfe: 0,95em
• Textschattenfarbe: rgba(0,0,0,0.13)
• Textausrichtung: Mitte

Textmodul #2 hinzufügen

H2-Inhalt hinzufügen

Fügen Sie direkt unter dem vorherigen ein weiteres Textmodul hinzu. Geben Sie einen H2-Inhalt Ihrer Wahl ein.

H2-Texteinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die H2-Texteinstellungen.

• Überschrift 2 Schriftart: Poppins
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #000000
• Überschrift 2 Textgröße: 10vw (Telefon & Tablet), 10vw (Desktop)

Abstand

Erstellen Sie eine Überlappung zwischen beiden Textmodulen, indem Sie einen negativen oberen Rand verwenden.

• Obere Marge: -12vw (Telefon), -10vw (Tablet), -8vw (Desktop)

Zeile 2 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine weitere Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie einen Verlaufshintergrund hinzu.

• Farbe 1: #3239ff
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Rechts
• Startposition: 30%
• Endposition: 30%

Größe

Gehen Sie als nächstes zu den Größeneinstellungen und lassen Sie die Zeile die gesamte Breite des Bildschirms einnehmen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Fügen Sie auch einige Abstandswerte hinzu. Diese Werte stellen sicher, dass alles auf allen Bildschirmgrößen gut aussieht.

• Linke Polsterung: 0vw (Telefon & Tablet), 15vw (Desktop)
• Rechte Polsterung: 0vw (Telefon & Tablet), 15vw (Desktop)

Benutzerdefinierte CSS

Wir platzieren die beiden Spalten auch direkt nebeneinander, indem wir eine Zeile CSS-Code auf der Registerkarte "Erweitert" hinzufügen.

display: flex;

Textmodul zu Spalte 1 hinzufügen

H3 hinzufügen und Inhalt verlinken

Jetzt können wir mit dem Hinzufügen von Modulen beginnen! Fügen Sie der ersten Spalte ein Textmodul mit einer H3-Kopie und einem Link hinzu.

Hintergrundfarbe

Gehen Sie dann zu den Hintergrundeinstellungen des Moduls und fügen Sie eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: rgba(255,255,255,0.95)

Texteinstellungen

Fahren Sie fort, indem Sie die Textausrichtung in den Texteinstellungen des Moduls ändern.

• Textausrichtung: Mitte

Linktext-Einstellungen

Ändern Sie auch die Linktexteinstellungen.

• Link-Schriftart: Poppins
• Linke Schriftstärke: Fett
• Link-Schriftart: Unterstreichen
• Farbe der Link-Unterstreichung: #000000
• Linktextfarbe: #000000
• Linktextgröße: 3vw (Telefon), 2vw (Tablet), 1vw (Desktop)

H3-Texteinstellungen

Zusammen mit den H3-Texteinstellungen.

• Überschrift 3 Schriftart: Poppins
• Überschrift 3 Schriftstärke: Ultraleicht
• Überschrift 3 Textfarbe: #000000
• Überschrift 3 Textgröße: 4vw (Telefon), 3vw (Tablet), 2vw (Desktop)
• Überschrift 3 Textzeilenhöhe: 1,9 cm für eine Kreisform oder 3 cm für eine ovale

Abstand

Um aus diesem Modul eine Form zu erstellen, fügen wir einige benutzerdefinierte Werte für Rand und Abstand in den Abstandseinstellungen hinzu.

• Linker Rand: 5vw
• Rechter Rand: -5vw
• Obere Polsterung: 17vw (Telefon), 20vw (Tablet), 15vw (Desktop)
• Untere Polsterung: 17vw (Telefon), 20vw (Tablet), 15vw (Desktop)

Grenze

Wir verwandeln das Quadrat mit abgerundeten Ecken in einen Kreis, indem wir an jede der Ecken '100vw' hinzufügen.

Box Schatten

Und um etwas Tiefe zu erzeugen, fügen wir einen subtilen Kastenschatten hinzu.

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

Textmodul 4 Mal klonen

Nachdem wir das erste Textmodul geändert haben, können wir es viermal klonen. Trage zwei der Duplikate in die zweite Spalte ein.

Duplikat Nr. 1 ändern

Abstand

Fahren Sie fort, indem Sie die Abstandseinstellungen des ersten Duplikats ändern.

• Oberer Rand: 20vw
• Linker Rand: -5vw
• Rechter Rand: 5vw

Duplikat Nr. 2 ändern

Hintergrundfarbe

Öffnen Sie als nächstes das zweite Duplikat und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: rgba(255,248,209,0.92)

Abstand

Ändern Sie auch die Abstandseinstellungen.

• Obere Marge: -5vw

Duplikat Nr. 3 ändern

Hintergrundfarbe

Öffnen Sie dann das dritte Duplikat und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: rgba(219,255,223,0.95)

Abstand

Ändern Sie als nächstes die Abstandseinstellungen.

• Obere Marge: -5vw
• Linker Rand: -5vw
• Rechter Rand: 5vw

Duplikat Nr. 4 ändern

Abstand

Öffnen Sie auch das letzte Duplikat und fügen Sie einen negativen oberen Rand hinzu, um das Design zu beenden.

• Obere Marge: -5vw

Beginnen wir mit der Neuerstellung von Beispiel #2

Neuen Abschnitt hinzufügen

Auf zum zweiten Beispiel! Fügen Sie Ihrer Seite einen neuen Abschnitt hinzu.

Zeile 1 hinzufügen

Spaltenstruktur

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

Textmodul hinzufügen

H2-Inhalt hinzufügen

Das erste Modul, das wir benötigen, ist ein Textmodul. Geben Sie einen H2-Inhalt Ihrer Wahl ein.

H2-Texteinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die H2-Texteinstellungen.

• Überschrift 2 Schriftart: Poppins
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #333333
• Überschrift 2 Textgröße: 7vw (Telefon & Tablet), 4vw (Desktop)

Trennmodul hinzufügen

Sichtweite

Fügen Sie direkt unter dem Textmodul ein Trennmodul hinzu. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

Farbe

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

• Farbe: #333333

Größe

Spielen Sie auch mit den Größeneinstellungen herum.

• Teilergewicht: 5px
• Breite: 12%
• Modulausrichtung: Mitte

Zeile 2 hinzufügen

Spaltenstruktur

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

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Größe

Gehen Sie als nächstes zu den Größeneinstellungen und lassen Sie die Zeile die gesamte Breite des Bildschirms einnehmen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Fügen Sie neben einigen benutzerdefinierten Rand- und Abstandswerten hinzu, um das Design für alle Bildschirmgrößen zu optimieren.

• Oberer Rand: 2vw
• Unterer Rand: 2vw
• Obere Polsterung: 10vw (Telefon & Tablet), 5vw (Desktop)
• Untere Polsterung: 10vw (Telefon & Tablet), 5vw (Desktop)
• Linke Polsterung: 2vw (Telefon & Tablet), 20vw (Desktop)
• Rechte Polsterung: 2vw (Telefon & Tablet), 20vw (Desktop)

Box Schatten

Wir verwenden auch einen subtilen Boxschatten.

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

Benutzerdefinierte CSS

Zu guter Letzt platzieren Sie beide Spalten nebeneinander, indem Sie dem Hauptelement im erweiterten Tab eine einzelne CSS-Codezeile hinzufügen.

display: flex;

Blurb-Modul zu Spalte 1 hinzufügen

Symbol auswählen

Wir können jetzt mit dem Hinzufügen von Modulen beginnen! Das einzige Modul, das wir in Spalte 1 benötigen, ist ein Blurb-Modul. Wählen Sie ein Symbol Ihrer Wahl aus.

Hintergrund mit Farbverlauf

Fügen Sie dann einen Farbverlaufshintergrund hinzu.

• Farbe 1: #7b28ef
• Farbe 2: #29b6e5
• Verlaufsrichtung: 142deg

Symboleinstellungen

Ändern Sie als nächstes die Symboleinstellungen.

• Symbolfarbe: #ffffff
• Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 5vw (Telefon und Tablet), 4vw (Desktop)

Größe

Und ändern Sie die Größeneinstellungen.

• Breite: 48 % (Telefon & Tablet), 78 % (Desktop)

Abstand

Wir fügen auch einige benutzerdefinierte Werte für Rand und Abstand hinzu, um das Design für alle Bildschirmgrößen zu optimieren.

• Obere Marge: 2vw (Telefon)
• Obere Polsterung: 8.5vw (Telefon), 9vw (Tablet), 6vw (Desktop)
• Untere Polsterung: 3vw (Telefon), 5vw (Tablet), 4vw (Desktop)

Grenze

Verwandeln Sie das Modul als nächstes in einen Kreis, indem Sie '100vw' zu jeder der Ecken in den Randeinstellungen hinzufügen.

Box Schatten

Wir fügen auch einen Boxschatten hinzu.

• Vertikale Position des Kastenschattens: 10px
• Stärke der Box-Schattenausbreitung: 5px
• Schattenfarbe: rgba (2,185.252,0.35)

Textmodul Nr. 1 zu Spalte 2 hinzufügen

H3-Inhalt hinzufügen

Auf zur zweiten Spalte! Das erste Modul, das wir dort brauchen, ist ein Titel Textmodul. Fügen Sie etwas H3-Inhalt hinzu.

H3-Texteinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die H3-Texteinstellungen.

• Überschrift 3 Schriftart: Poppins
• Überschrift 3 Textgröße: 4vw (Telefon), 3vw (Tablet), 2vw (Desktop)

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Obere Marge: 0vw (Telefon), 3vw (Tablet & Desktop)
• Linker Rand: -20vw (Telefon und Tablet), 0vw (Desktop)
• Rechter Rand: 0vw
• Untere Polsterung: 2vw (Telefon & Tablet), 1vw (Desktop)
• Linke Polsterung: 5vw (Telefon & Tablet), 2vw (Desktop)

Grenze

Zusammen mit einem linken Rand.

• Linker Randbreite: 5px
• Farbe des linken Rands: #f4f4f4
• Linker Randstil: Doppelt

Trennmodul zu Spalte 2 hinzufügen

Teiler anzeigen

Das zweite Modul, das wir brauchen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

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

• Farbe: #f4f4f4

Stile

Ändern Sie als nächstes den Trennlinienstil in den Stileinstellungen.

• Teiler-Stil: Doppel

Größe

Fahren Sie fort, indem Sie die verschiedenen Optionen in den Größeneinstellungen ändern.

• Teilergewicht: 5px
• Höhe: 0px

Abstand

Und spielen Sie auch mit den Abstandswerten herum.

• Linker Rand: -20vw (Telefon und Tablet), 0vw (Desktop)

Textmodul #2 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir in der zweiten Spalte benötigen, ist ein weiteres Textmodul. Fügen Sie einen Körperinhalt Ihrer Wahl hinzu.

Texteinstellungen

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

• Textgröße: 2vw (Telefon), 1.7vw (Tablet), 0.8vw (Desktop)
• Textausrichtung: Links

Abstand

Spielen Sie auch mit den Abstandswerten herum.

• Oberer Rand: 0vw
• Linker Rand: -20vw (Telefon und Tablet), 0vw (Desktop)
• Rechter Rand: 0vw
• Obere Polsterung: 3vw (Telefon & Tablet), 2vw (Desktop)
• Linke Polsterung: 5vw (Telefon & Tablet), 2vw (Desktop)

Grenze

Und fügen Sie einen linken Rand hinzu.

• Linker Randbreite: 5px
• Farbe des linken Rands: #f4f4f4
• Linker Randstil: Doppelt

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

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

Tasteneinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die Schaltflächeneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Tastentextgröße: 2.5vw (Telefon), 2vw (Tablet), 1vw (Desktop)
• Schaltflächentextfarbe: #4f77e8
• Breite des Tastenrahmens: 1px
• Farbe der Knopfleiste: #4f77e8

• Schaltflächenrandradius: 1px
• Schaltflächenschriftart: Poppins

Abstand

Ändern Sie auch die Abstandswerte.

• Obere Marge: 4vw (Telefon & Tablet), 2vw (Desktop)
• Linker Rand: -20vw (Telefon und Tablet), 0vw (Desktop)

Zeile zweimal klonen

Nachdem wir die Zeile und alle ihre Module geändert haben, können wir sie zweimal klonen.

Symbole ändern

Stellen Sie sicher, dass Sie die Symbole für beide Blurb-Module ändern.

Farbverlaufshintergründe ändern

Ändern Sie auch die Farbverlaufshintergründe.

• Farbe 1: #ff2885
• Farbe 2: #d6ac24

• Farbe 1: #70ff1e
• Farbe 2: #2699ff

Boxschattenfarben ändern

Passen Sie die Schattenfarbe des Felds an den neuen Verlaufshintergrund an.

• Schattenfarbe: rgba(255,208,2,0.37)

• Schattenfarbe: rgba(42,255,0,0,37)

Schaltflächenrahmen und Textfarben ändern

Und vervollständigen Sie das Design, indem Sie den Knopfrahmen und die Textfarben ändern.

• Schaltflächentextfarbe: #e96c54
• Farbe des Knopfrahmens: #e96c54

• Schaltflächentextfarbe: #4dcb93
• Knopfrandfarbe: #4dcb93

Laden Sie die Abschnitte für mobile Dienste KOSTENLOS herunter

Um die kostenlosen Abschnitte für mobile Dienste in die Hände zu bekommen, müssen Sie sie 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!

Vorschau

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

Beispiel 1

Beispiel #2

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen zwei kreative Möglichkeiten gezeigt, wie Sie Dienste auf Mobilgeräten nur mit den integrierten Optionen von Divi präsentieren können. Wir hoffen, dass dieser Mobile-First-Ansatz auch Sie dazu inspirieren wird, kreativ zu werden. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!