Home » Genesis framework » Wie man den WordPress Gutenberg-Editor im Genesis Sample theme breiter macht

Wie man den WordPress Gutenberg-Editor im Genesis Sample theme breiter macht

Sie haben wahrscheinlich bemerkt, dass der Inhalt im WordPress-Editor schmaler wird – er füllt viel weniger Platz auf dem Bildschirm aus als sonst, wenn Sie zum Genesis-Muster-Theme wechseln. Das ist zwar kein Beinbruch, aber immer noch unpraktisch, wenn Sie einen hochauflösenden Bildschirm verwenden. Vor allem, wenn Sie mehrere Spalten in Seiten oder Beiträgen verwenden.

Es gibt zwei Möglichkeiten, die Breite des WordPress-Editors im Genesis-Muster-Theme (oder in den meisten anderen Themes, die auf dem Genesis-Framework basieren) zu steuern:

Ich zeige Ihnen beide Möglichkeiten – Sie können diejenige verwenden, die am besten zu Ihrem Workflow passt.

Wie man die Breite des WordPress-Editors in Genesis-Themes ändert

Standardmäßig sucht der WordPress-Editor nach Gutenberg-Editor-Styling-Informationen in den Dateien des aktuell aktiven Themes. Das Genesis-Beispieltheme hat einige benutzerdefinierte CSS für den WordPress-Editor in seinen Ordnern. Um also die Breite des Editors zu ändern, müssen wir eine CSS-Datei bearbeiten.

Gehen Sie zu Erscheinungsbild >> Theme-Dateieditor und öffnen Sie die Datei lib >> gutenberg >> style-editor.css im Editor.

make wordpress editor wider in Genesis Sample theme

Um die Standard-WordPress-Blöcke breiter zu machen, müssen Sie .wp-block max-width auf eine größere Zahl ändern. Zum Beispiel auf 960px:

.wp-block {
   max-width: 960px;
}

Sie können auch die maximale Breite von Blöcken in voller Breite oder breiter ändern:

.wp-block[data-align="full"] .wp-block[data-align="wide"],
.wp-block[data-align="wide"] .wp-block[data-align="wide"],
.wp-block[data-align="wide"] {
	max-width: 1200px;
}

Nach dem Speichern der Änderungen wird der Inhalt des WordPress-Editors breiter sein – es sind keine weiteren Schritte erforderlich.

In der gleichen css-Datei können Sie die Schriftgröße, die Schriftfamilie und andere Elemente des WordPress-Editors ändern, um sicherzustellen, dass der WordPress-Editor ähnlich aussieht wie Ihr angepasstes Genesis-Muster-Theme.

Nur zur Erinnerung – diese Einstellungen werden die Breite des Genesis Sample Themes für die Besucher Ihrer Website nicht verändern. Sie sind nur für Website-Administratoren gedacht. Wenn Sie die Breite des Genesis-Muster-Themes für Website-Besucher ändern möchten, klicken Sie hier für eine Anleitung.

Wie man das Theme-Styling vollständig aus dem WordPress-Editor entfernt

Wenn Sie nicht möchten, dass der WordPress-Editor wie Ihr WordPress-Theme aussieht, können Sie das Theme-Styling in den Einstellungen des WordPress-Editors ausschalten.

Öffnen Sie dazu einen beliebigen Beitrag oder eine Seite im WordPress-Editor. Klicken Sie auf Optionen (drei vertikale Punkte) oben rechts im WordPress-Editor und dann auf Einstellungen.

how to disable theme styling in wordpress editor

Deaktivieren Sie in dem Popup-Fenster die Einstellung Themenstile verwenden.

disable theme styling css in gutenberg editor

Best WordPress hosting 2024

Sobald Sie das tun, wird der WordPress Gutenberg-Editor die Standard-Theme-Stile verwenden – er wird nicht versuchen, Ihr Theme-Styling anzupassen.

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK