WordPress-Websites verwenden ein responsives Design – es gibt keine separate mobile Version zum Bearbeiten. In diesem Ratgeber erfährst du, wie du mithilfe von Blockeinstellungen und CSS die Darstellung deiner Inhalte auf Mobilgeräten anpassen kannst.
Der Navigationsblock enthält Einstellungen für den Button für das mobile Menü (auch als „Hamburger“-Icon bezeichnet). So passt du dein Menü auf Mobilgeräten an:
- Navigiere im Dashboard deiner Website zu Design → Editor.
- Wähle das Template oder den Template-Teil aus, das bzw. der dein Navigationsmenü enthält.
- Öffne die Listenansicht und wähle den Navigationsblock aus.
- Klicke in der Seitenleiste mit den Block-Einstellungen auf das Einstellungen-Icon (Zahnrad-Icon).
- Gehe im Abschnitt Anzeige folgendermaßen vor:
- Schalte Icon-Button anzeigen um, um ein Hamburger-Icon zu verwenden oder „Menü“-Text anzuzeigen.
- Wähle mithilfe der Einstellungen im Overlay-Menü deinen Icon-Stil (zwei oder drei Zeilen) aus und lege fest, wann das Hamburger-Icon angezeigt wird.
Weitere Informationen zum Bearbeiten des Stils deiner Website-Menüs.
Bei einigen Layout-Blöcken kannst du steuern, ob Inhalte auf Mobilgeräte-Displays vertikal gestapelt werden. Standardmäßig stapelt WordPress Inhalte auf kleineren Bildschirmen automatisch nebeneinander, damit sie gut lesbar sind.
So passt du das Stapelverhalten an:
- Navigiere im Dashboard deiner Website zu Design → Editor.
- Bearbeite die Seite oder das Template mit dem Block, den du anpassen möchtest.
- Öffne die Listenansicht und wähle den Block aus.
- Schalte in den Blockeinstellungen die Option Auf Mobilgeräten stapeln ein oder aus.
Blöcke mit der Einstellung „Auf Mobilgeräten stapeln“:
Buttons und Menüs sind auf Mobilgeräten besser lesbar, wenn sie in mehrere Zeilen umgebrochen werden, anstatt den gesamten Inhalt in eine einzige Zeile zu zwängen. Standardmäßig ist die Einstellung zum Umbrechen in mehrere Zeilen deaktiviert.
So aktivierst du Zeilenumbrüche:
- Navigiere im Dashboard deiner Website zu Design → Editor.
- Bearbeite die Seite oder das Template mit dem Block, den du anpassen möchtest.
- Öffne die Listenansicht und wähle den Block aus.
- Schalte in den Blockeinstellungen Zeilenumbruch auf mehrere Zeilen erlauben ein.
Blöcke mit der Einstellung „Zeilenumbruch auf mehrere Zeilen erlauben“:
Die Textgröße in Pixel (px) bleibt in einer Größe gesperrt. Die Textgröße in em oder rem wird basierend auf den Einstellungen und der Bildschirmgröße deines Besuchers angepasst, um deine Website auf verschiedenen Geräten zugänglicher und leichter lesbar zu machen.
So änderst du Text von Pixel in relative Einheiten:
- Klicke auf den Block mit Text, dessen Größe du ändern möchtest.
- Suche in den Blockeinstellungen den Abschnitt Typografie.
- Klicken Sie unter Schriftgröße auf das Symbol für die individuelle Größe (zwei horizontale Linien mit Punkten).
- Klicken Sie auf die
px-Einheit, um sie inemoderremzu ändern. - Gib einen numerischen Wert ein und passe ihn nach Bedarf an.
Wählen zwischen em und rem:
em– Text wird relativ zum Container skaliert (gut geeignet für Überschriften, Beschriftungen oder Text in bestimmten Blöcken)rem– Text bleibt auf deiner gesamten Website konsistent (gut geeignet für Textkörper, Überschriften und Buttons)
Du kannst die Schriftgröße auch Website-weit anpassen, anstatt einzelne Blöcke anzupassen.
Dieser Abschnitt des Ratgebers bezieht sich auf Websites mit den WordPress.com-Tarifen Premium, Business und Commerce sowie auf Websites mit dem alten Pro-Tarif. Führe für Websites mit Kostenlos- oder Persönlich-Tarif ein Tarif-Upgrade durch, um auf diese Funktion zuzugreifen.
Mithilfe von CSS-Klassen können bestimmte Blöcke auf Desktop- oder Mobilgeräten ausgeblendet werden. Befolge diese Schritte, um dies einzurichten:
- Bearbeite die Seite, den Beitrag oder das Template, das den auszublendenden Block enthält.
- Wähle den Block aus, indem du ihn anklickst oder ihn in der Listenansicht auswählst.
- Klicke in den Blockeinstellungen auf Erweitert.
- Gib im Feld Zusätzliche CSS-Klasse(n)
hide-desktopoderhide-mobileein:
- Navigiere zu den individuellen CSS-Einstellungen deiner Website:
- Block-Themes: Design → Editor → Stile → Arrays → Zusätzliches CSS
- Klassische Themes: Design → Anpassen → Zusätzliches CSS
- Füge den folgenden Code ein und klicke auf Speichern:
/* Elemente auf Mobilgeräten ausblenden*/
@media (max. Breite: 768 px) {
.hide-mobile { display: none !important; }
}
/* Elemente auf dem Desktop ausblenden*/
@media (min. Breite: 769 px) {
.hide-desktop { display: none !important; }
}
Füge den CSS-Code einmal zu deiner Website hinzu. Danach kannst du die hide-mobile– oder hide-desktop-Klasse zu jedem Block hinzufügen und das CSS blendet sie automatisch auf dem angegebenen Gerät aus.
📌
CSS ist eine erweiterte Anpassung. Wir können zwar keinen direkten Support für individuellen Code anbieten, aber du kannst mit diesen Ausschnitten experimentieren und hier mehr darüber erfahren, wie du CSS-Hilfe erhältst.
Support 