So optimieren Sie Ihre Sidebar auf Mobilgeräten mit dem Divi Theme Builder

In einigen Fällen kann es etwas übertrieben sein, eine Seitenleiste auf dem Handy zu halten. Benutzer scrollen gerne durch relevante Informationen auf ihren Tablets und Telefonen (bis zu einem Punkt). Wenn Sie jedoch nach dem Hauptinhalt der Seite eine erhebliche Menge an Seitenleisteninhalten haben, erreichen Benutzer möglicherweise nie die Fußzeile, die normalerweise aus einigen wichtigen Handlungsaufforderungen besteht. Deshalb ist es wichtig, die Sidebar auf dem Handy zu optimieren.

In diesem Tutorial werden wir Möglichkeiten besprechen, wie Sie den Divi Theme Builder verwenden können, um Ihre Seitenleiste auf dem mobilen Display zu optimieren. Hier sind einige der Dinge, die wir in diesem Artikel behandeln werden:

• So erstellen Sie eine Vorlage mit einer Seitenleiste
• Erstellen von Sidebar-Inhalten mit Divi-Modulen und WordPress-Widgets
• Verwenden mehrerer Widget-Bereiche zum Ausblenden/Anzeigen bestimmter Widgets auf dem Handy
• Steuern des Abstands zwischen Seitenleisteninhalten auf Mobilgeräten
• Seitenleisteninhalte vollständig auf Mobilgeräten ausblenden
• Einige Seitenleisteninhalte auf Mobilgeräten ausblenden
• Ausblenden von Elementen in Modulen, um Inhalte auf Mobilgeräten zu minimieren
• Responsive Gestaltung von Seitenleisteninhalten durch Anpassen von Textgröße und -abstand
• So ändern Sie die Stapelreihenfolge der Seitenleiste auf dem Handy

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf das Seitenleisten-Layout auf dem Desktop und wie es für die mobile Anzeige optimiert wurde.

Laden Sie die KOSTENLOSE Vorlage mit optimierter Seitenleiste auf Mobilgeräten herunter

Um die Vorlage aus diesem Tutorial 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 in der Liste sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht abgemeldet und erhalten keine zusätzlichen 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!

Abonnieren Sie unseren Youtube-Kanal

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Lasst uns zum Tutorial kommen, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie das Divi-Theme installieren und aktivieren. Stellen Sie sicher, dass Sie die neueste Version von Divi haben.

Sie benötigen auch einige Beiträge/Seiten, die zu Testzwecken erstellt wurden, damit der Seiteninhalt tatsächlich Ergebnisse anzeigt.

Danach sind Sie bereit zu gehen.

So optimieren Sie die Seitenleiste Ihrer Divi-Vorlage auf Mobilgeräten

Bevor wir mit der Optimierung unserer Seitenleiste auf Mobilgeräten beginnen, müssen wir zuerst ein funktionierendes Modell zum Laufen bringen. Wir werden unsere Seitenleiste auf einer Seitenvorlage mit dem Divi Theme Builder erstellen. Dies wird uns helfen, besser zu verstehen, was beim Erstellen einer Seitenleiste in Divi erforderlich ist, damit wir besser verstehen, wie wir sie auf Mobilgeräten optimieren können.

Erstellen der Vorlage mit der Seitenleiste

Importieren von Divi Theme Builder Pack #3

Um die Dinge zu beginnen, werden wir das Divi Theme Builder Pack #3 verwenden, um unser Site-Design zu starten. Dann verwenden wir eine der Vorlagen, um die Seitenleiste hinzuzufügen, die wir für Mobilgeräte optimieren werden.

Nachdem Sie das Paket heruntergeladen haben, entpacken Sie den Ordner.

Navigieren Sie im WordPress-Dashboard zu Divi > Theme Builder. Klicken Sie dann auf das Portabilitätssymbol im Menü oben rechts auf der Seite. Wählen Sie im Portabilitäts-Modal die Registerkarte Import und wählen Sie die Datei divi-theme-builder-pack-3-all.json aus dem zuvor heruntergeladenen Ordner. Klicken Sie dann auf die Schaltfläche Importieren.

Wichtig: Bitte verwenden Sie eine Test-Site mit einer Neuinstallation von Divi, damit Sie Live-Inhalte auf Ihrer Website nicht überschreiben oder etwas kaputt machen.

Sie werden sehen, dass alle Vorlagen in den Theme Builder importiert wurden.

Erstellen des Seitenleisten-Layouts in der Kategorieseitenvorlage

Suchen Sie die Vorlage für alle Kategorieseiten und klicken Sie auf , um das benutzerdefinierte Textkörper-Layout zu bearbeiten.

Das aktuelle Layout der Seite verwendet eine einspaltige Zeile für den Hauptinhaltsbereich der Seite. Wir müssen dies in eine Seitenleisten-Layoutstruktur ändern. Klicken Sie dazu im Zeilenmenü der zweiten Zeile auf das Symbol „Layout wählen“ und wählen Sie die Zweidrittel-Eindrittel-Spalten-Layoutstruktur.

Jetzt haben Sie auf der rechten Seite einen Bereich für Ihre Seitenleiste.

HINWEIS: Ich verwende keinen Spezialbereich für dieses Seitenleistenlayout. Spezialbereiche sind beim Erstellen eines Seitenleistenlayouts für Ihre Seite nicht erforderlich. Wenn Sie jedoch separate Zeilenfunktionen für den Hauptinhaltsbereich beibehalten möchten, sollten Sie einen Spezialbereich verwenden.

Wir werden uns in diesem Tutorial nicht zu sehr darauf konzentrieren, das genaue Design der Module nachzubilden. Stattdessen konzentrieren wir uns auf die Elemente, die zur Optimierung der Seitenleiste auf Mobilgeräten beitragen.

Das heißt, wir müssen der Seitenleistenspalte eine Hintergrundfarbe und Auffüllung hinzufügen.

Spalteneinstellungen der Seitenleiste

Öffnen Sie die Einstellungen für die für die Seitenleiste vorgesehene Spalte und aktualisieren Sie Folgendes:

• Hintergrundfarbe: #f2f5f9
• Padding: 25px oben, 25px unten, 25px links, 25px rechts

Erstellen des Sidebar-Inhalts mit Divi-Modulen und WordPress-Widgets

Der Inhalt der Seitenleiste variiert je nach den Anforderungen einer Website. Wenn wir jedoch über eine Blog-Site sprechen, finden Sie in der Regel eine Kombination der folgenden Seitenleisten-Inhaltselemente:

• Autoreninfo (Name, Bild, Biografie)
• Social Media Follow-Buttons
• E-Mail-Anmeldung
• Links zu Produkten und/oder Dienstleistungen
• Anzeigen
• Kategorien
• Aktuelle/Beliebte Beiträge

Das Erstellen dieser Elemente in Divi kann mit einer Kombination von Divi-Modulen erfolgen. Für dieses Beispiel fügen wir die folgenden Divi-Module hinzu, um unseren Sidebar-Inhalt zu erstellen.

1. Suchmodul – Dies dient als Suchformular.
2. E-Mail-Optin-Modul – Dies dient als E-Mail-Optin-Formular.
3. Textmodul – Dies ist der Titel der Social Media Follow-Schaltflächen
4. Social Media Follow Module – Dies zeigt die Social Media Follow-Buttons.
5. Textmodul (mit bg-Bild) – Dies dient als Beispielanzeige für die Seitenleiste.
6. Blurb-Modul (mit Autoreninhalt) – Dies dient als Autoreninfo-Bereich der Seitenleiste.
7. Textmodul – Dies dient als Titel für das darunter liegende Blogmodul.
8. Blog-Modul – Dies wird als Inhalt der letzten/bevorzugten Beiträge in der Seitenleiste dienen.

Einlesen von WordPress-Widgets mithilfe des Sidebar-Moduls

Wenn Sie noch nicht vertraut sind, verfügt Divi über ein Sidebar-Modul, mit dem Sie Inhalte (oder Widgets) des Widget-Bereichs in Ihren Divi-Sidebar-Bereich ziehen können. Tatsächlich verwendet diese Vorlage bereits das Seitenleisten-Widget in der Zeile direkt unter der, an der wir arbeiten.

Ziehen Sie das Sidebar-Modul aus der Zeile und platzieren Sie es direkt unter dem E-Mail-Optin-Modul.

Öffnen Sie dann die Einstellungen des Sidebar-Moduls. Sie werden sehen, dass das Modul den Seitenleisten-Widget-Bereich einzieht, der wie folgt aussehen sollte, wenn Sie das Standard-Setup in WordPress haben.

Verwenden mehrerer Widget-Bereiche

Im Moment zeigt der Widget-Bereich „Sidebar“ mehrere Widgets an, da sich im Widget-Bereich der Sidebar mehrere Widgets befinden. Sie können jedoch tatsächlich mehr Kontrolle über das Seitenleistendesign Ihres Divi erhalten, indem Sie mehrere Widget-Bereiche verwenden, die ein einzelnes Widget enthalten. Die Verwendung mehrerer Widget-Bereiche gibt Ihnen mehr Kontrolle über das Design Ihrer Widgets sowie die Sichtbarkeit von Widgets auf Mobilgeräten.

Um mehrere Widgets zu erstellen, öffne einen neuen Tab und gehe zum WordPress-Dashboard. Navigieren Sie zu Darstellung > Widgets.

Erstellen Sie einen neuen Widget-Bereich, indem Sie einen Namen eingeben und auf die Schaltfläche Erstellen klicken. Da in diesem Widget-Bereich das Kategorien-Widget hinzugefügt wird, nennen wir den Bereich „Kategorien“. Aktualisieren Sie die Seite, um den Widget-Bereich anzuzeigen. Ziehen Sie dann das Kategorien-Widget in den Kategorien-Widget-Bereich.

Wiederholen Sie den Vorgang, um einen neuen Widget-Bereich namens „Archive“ zu erstellen. Ziehen Sie dann das Archiv-Widget in den Archiv-Widget-Bereich.

Gehen Sie mit Ihrem Seitenleistenlayout zurück zur Kategorieseitenvorlage und aktualisieren Sie den Inhalt des Seitenleistenmoduls, um den Kategorien-Widget-Bereich anzuzeigen.

Duplizieren Sie das Seitenleistenmodul (um das Design beizubehalten)

Aktualisieren Sie das doppelte Seitenleistenmodul, um den Archiv-Widget-Bereich einzublenden.

Übernehmen der Kontrolle über den Abstand zwischen Sidebar-Modulen

Derzeit hat die Zeile, die die Seitenleiste enthält, einen Bundstegbreitenwert von 2. Dies bedeutet, dass zwischen jedem Modul innerhalb der Seitenleiste standardmäßig ein unterer Rand/Abstand vorhanden ist. Um mehr Kontrolle über diesen Abstand zu erhalten, können wir den unteren Rand aller Module in der Seitenleistenspalte löschen. Öffnen Sie dazu die Einstellungen des Suchmoduls und aktualisieren Sie Folgendes:

• Rand unten: 0px (Desktop), 15px (Tablet)

Klicken Sie dann auf das Symbol Weitere Einstellungen (oder das Rechtsklickmenü) in der Randoption. Wählen Sie dann „Margin erweitern“.

Aktualisieren Sie im Modul Stile erweitern die Optionen zum Erweitern des Rands auf „Alle Module“ in „Diese Spalte“.

Dann können wir den Abstand zwischen den Modulen mit Trennmodulen hinzufügen.

Optimieren der Seitenleiste auf Mobilgeräten

Ausblenden der Seitenleiste auf Mobilgeräten

Manchmal möchten Sie möglicherweise die Seitenleiste auf dem Handy vollständig ausblenden. Dazu müssen Sie die Sichtbarkeit der Spalte mit der Seitenleiste auf Tablet und Telefon deaktivieren.

Öffnen Sie die Zeileneinstellungen und öffnen Sie die Einstellungen der Spalte, die für die Seitenleiste vorgesehen ist. Aktualisieren Sie dann die Sichtbarkeit wie folgt:

• Deaktivieren auf: Tablet, Telefon

Dadurch wird die gesamte Seitenleiste auf dem Tablet- und mobilen Display ausgeblendet.

Einige Inhalte der Seitenleiste auf Mobilgeräten ausblenden

Auf dem Desktop haben Sie möglicherweise Platz, um die meisten (oder alle) Seitenleisteninhalte aufzubewahren, ohne dass sie zu sehr vom Inhalt abgelenkt werden. Auf Mobilgeräten muss der Benutzer jedoch durch viele Seitenleisteninhalte scrollen, an denen er möglicherweise wenig Interesse hat. Nutzen Sie also beim Erstellen Ihrer Seitenleiste im Divi Theme Builder die Sichtbarkeitsoptionen, um einige der Seitenleistenelemente auf dem mobilen Display zu deaktivieren. Und wenn Sie WordPress-Widgets für Seitenleisteninhalte verwenden, erstellen Sie mehrere Widget-Bereiche, um bestimmte Widgets auch auf Mobilgeräten zu entwerfen und auszublenden.

Um Module auf Mobilgeräten auszublenden, öffnen Sie das Drahtmodellansichtsmodul und verwenden Sie dann die Mehrfachauswahlfunktion von Divi, um alle Module auszuwählen, die Sie auf Tablets und Telefonen ausblenden/deaktivieren möchten. Öffnen Sie dann die Einstellungen für eines der ausgewählten Module und aktualisieren Sie Folgendes:

• Deaktivieren auf: Telefon, Tablet

In dieser Abbildung haben wir alle Module (einschließlich der Trennwände) mit Ausnahme der beiden Seitenleistenmodule (mit den Kategorien- und Archiv-Widgets) und dem Textmodul (mit der Anzeige) auf dem Tablet- und Telefondisplay ausgeblendet. Anders ausgedrückt: Auf Mobilgeräten werden nur die Kategorien, Archive und Anzeigen angezeigt.

Vorschau der Ergebnisse auf einer Blog-Seite

Bevor wir die Ergebnisse auf der Live-Seite sehen, weisen wir sie zuerst der Blog-Seite der Site zu. Klicken Sie dazu auf das Zahnradsymbol über der Vorlage, wählen Sie den Blog aus der Liste aus und speichern Sie ihn.

Stellen Sie sicher, dass unter Darstellung > Lesen eine Beitragsseite ausgewählt ist.

Ergebnisse

Hier ist der Unterschied zwischen der Desktop-Sidebar und der mobilen Sidebar. Beachten Sie, dass die mobile Seitenleiste Unterrichtsinhalte enthält.

Doppelte Seitenleisten- und Fußzeileninhalte auf Mobilgeräten vermeiden

Auf dem Desktop können Sie doppelte Inhalte in Ihrer Seitenleiste und Fußzeile hinzufügen. Tatsächlich ist dies eine gute Möglichkeit, die Conversions zu steigern. Auf dem Desktop ist es beispielsweise sinnvoll, oben in der Seitenleiste und in der Fußzeile ein E-Mail-Optin-Modul einzufügen, damit Benutzer das E-Mail-Optin beim Lesen des Inhalts des Beitrags sowie am Ende des Beitrags sehen können. Auf Mobilgeräten gibt es jedoch kein Seitenleistenlayout. Alles wird in einer Spalte angezeigt (vielleicht zwei). Rechte Seitenleisten stapeln sich unter dem Inhalt des Beitrags/der Seite und die linken Seitenleisten stapeln sich über dem Inhalt des Beitrags/der Seite. Wenn also ein E-Mail-Optin-Modul der Seitenleiste unter dem Inhalt des Beitrags/der Seite gestapelt wird, könnte der Benutzer durch mehr als ein E-Mail-Optin-Modul scrollen (eines in der Seitenleiste und eines in der Fußzeile). Wenn sich außerdem unten in der rechten Seitenleiste und eines oben in der Fußzeile ein E-Mail-Optin befindet, scrollt der Benutzer auf dem Handy durch zwei aufeinanderfolgende E-Mail-Optins.

Ausblenden von Elementen in Modulen, um Inhalte auf Mobilgeräten zu minimieren

Sie können entscheiden, dass das Ausblenden eines gesamten Moduls auf dem Mobilgerät nicht erforderlich ist. Stattdessen können Sie den Modulinhalt minimieren, indem Sie bestimmte Elemente nur auf der mobilen Anzeige ausblenden.

Sie können beispielsweise das empfohlene Bild und einen Auszug der vorgestellten Beiträge in der Desktop-Seitenleiste anzeigen. Auf Mobilgeräten können Sie jedoch das vorgestellte Bild und den Auszug ausblenden, um eine minimierte Version des Inhalts zu erstellen.

Seitenleisten-Inhalte responsive machen

Sie können sich entscheiden, den gesamten Inhalt der Seitenleiste auf dem mobilen Display zu behalten. Warum nicht? Wenn Sie wertvolle Informationen haben, von denen Sie wissen, dass sie die Benutzer zu schätzen wissen, bewahren Sie sie auf jeden Fall auf. Sie sollten jedoch Schritte unternehmen, um sicherzustellen, dass der Inhalt der Seitenleiste responsive ist. Das bedeutet, dass Sie die Größe und den Abstand der Elemente anpassen möchten, um kleinere Bildschirme anzupassen. Dadurch wird die Scrolldistanz der Seite verkürzt und der Inhalt leichter lesbar.

Textgröße auf Mobilgeräten anpassen

Eine einfache Möglichkeit, den vertikalen Abstand zu minimieren und die Lesbarkeit auf Mobilgeräten zu verbessern, besteht darin, die Textgröße des Modulinhalts in der Seitenleiste anzupassen. Sie können beispielsweise den Überschriftstext von 24 Pixel auf dem Desktop auf 14 Pixel auf Mobilgeräten anpassen.

Abstand/Teiler auf Mobilgeräten anpassen

In diesem Beispiel haben wir Trennwände zwischen den Modulen hinzugefügt, um Platz zu schaffen. Wir können jedoch die Teilereinstellungen von Divi verwenden, um den Abstand dieser Teiler auf dem Handy anzupassen. Dies reduziert den verschwendeten Platz beim Scrollen.

Sie können beispielsweise den oberen und unteren Rand des Teilers auf einem Tablet und Telefon von 30px auf 15px ändern.

Ändern der Stapelreihenfolge der Seitenleiste auf Mobilgeräten

Die Stapelreihenfolge ist ein häufiges Problem bei Seitenleisten. Dies gilt insbesondere für die linke Seitenleiste. Wie ich bereits erwähnt habe, stapeln sich rechte Seitenleisten unter (oder nach) dem Inhalt des Beitrags/der Seite und die linken Seitenleisten stapeln sich über (oder vor) dem Inhalt des Beitrags/der Seite. Das bedeutet, dass beim Anzeigen einer Seite mit einer linken Seitenleiste auf einem Mobilgerät als Erstes der Inhalt der Seitenleiste und nicht der Hauptinhalt des Beitrags/der Seite angezeigt wird. Das ist nicht gut für UX. Um dies zu beheben, können Sie entweder die Seitenleiste ganz ausblenden oder die Stapelreihenfolge ändern, sodass die linke Seitenleiste auf dem Handy unter den Beitrags-/Seiteninhalt fällt.

Um die Stapelreihenfolge einer linken Seitenleiste so zu ändern, dass sie unter (oder nach) Seiteninhalt auf Mobilgeräten gestapelt wird, öffnen Sie die Zeileneinstellungen der Zeile, die das Seitenleistenlayout enthält. Fügen Sie dann das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

Öffnen Sie dann die Spalteneinstellungen der als Seitenleiste bezeichneten Spalte und fügen Sie das folgende benutzerdefinierte CSS zur Hauptelement-Tablet-Anzeige hinzu:

order: 2;

Wenn Sie es nicht erraten haben, ändert dieser kleine Ausschnitt die Reihenfolge vom Standardwert („1“) auf den Wert „2“, wodurch die gesamte Spalte/Seitenleiste unter/nach der Spalte mit dem Hauptinhalt gestapelt wird.

Abschließende Gedanken

Seitenleisten sind für Benutzer weiterhin ein vertrauter Bereich, der hilfreiche sekundäre Inhalte bereitstellt, während sie sich mit dem Hauptinhalt einer Seite beschäftigen. Derselbe Seitenleisteninhalt auf Mobilgeräten kann jedoch zu einer Ablenkung werden. Hoffentlich hat Sie dieser Beitrag dazu inspiriert, Ihren Seitenleisten die Aufmerksamkeit zu schenken, die sie auf Tablets und Telefonen verdienen. Dies kann bedeuten, dass Sie die Sidebar komplett ausblenden, nur einige Sidebar-Inhalte anzeigen oder einfach die vorhandenen Inhalte speziell für die mobile Anzeige optimieren.

Die Seitenleiste, die in diesem Tutorial für die Vorlage erstellt wurde, wurde unter Verwendung der vorhandenen Designelemente aus dem Layoutpaket 3 des Theme-Builders entworfen. Wenn Ihnen das Design dieser Vorlage mit der Seitenleiste gefällt, können Sie sie oben herunterladen, um sie sich genauer anzusehen.

Weitere Informationen finden Sie in dieser Anleitung zur Verwendung von Seitenleisten mit dem Divi Theme Builder.

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

Danke schön!