Gutenberg Text Block zentrieren

Du hast den Absatz in einen Spalten-Block mit einer Spalte gepackt.
Versuche es mal ohne Spalte und packe den Absatz in eine Gruppe (in der Listenansicht
bei dem Absatz, dann rechte Maustaste auf drei senkrechte Punkte und da gruppieren).

Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):

Deine ursprüngliche Frage war, wie du Text zentrieren kannst. Was Hans-Gerd dir vorgeschlagen hat, hat also durchaus geklappt – nur passt es nicht mit der Größe der Bilder zusammen. 🙂

Für das Einbinden der beiden Bilder würde ich eine Galerie verwenden – das sieht mit dem Abstand zwischen den Fotos nach meinem Empfinden hübscher aus.

Hier ein Beispiel:

Dazu habe ich zunächst wie von Hans-Gerd vorgeschlagen einen Gruppen-Block eingefügt (1) und ihm über die Formatierungsleiste (2) eine maximale Breite von 620 Pixeln zugewiesen (3). Ein größerer Wert (900 Pixel?) würde die Lesbarkeit wegen der Zeilenlänge verschlechtern.

In diesem Gruppen-Block habe ich eine Galerie eingefügt (4), die ebenfalls maximal 620 Pixel breit ist und zwei Bilder in zwei Spalten enthält:

Darunter ist (noch im Gruppen-Block) Fließtext in drei Absätzen (5).

Das Ergebnis ist eine schöne, sauber formatierte Webseite mit viel ansprechendem Weißraum:

Noch ein gestalterischer Tipp: Einsteiger formatieren Webseiten gerne „zentriert“ (wie du es bei Navigation, Überschrift und Zwischenüberschrift gemacht hast), was sich aber gestalterisch oft als problematisch erweist.

Bei zentriert gesetztem Text ist es für
den Betrachter viel schwieriger, den Anfang der
nächsten Zeile zu finden. Der Text wird
dadurch weniger lesbar. Durch unterschiedlich lange Zeilen erscheint der Text außerdem als sehr unruhig.

Bei linksbündig gesetztem Text ist es für
den Betrachter auch bei unterschiedlichen Zeilenlängen einfacher,
den Anfang der nächsten Zeile zu finden. Der Text wird
dadurch lesbarer. Selbst bei unterschiedlich langen Zeilen erscheint der
Text linksbündig gesetzt als ruhiger.

Wie immer gilt: du machst es bitte auf deinen Webseiten so, wie es dir am besten gefällt. Deine Website, deine Regeln. Der Tipp ist nur als ein freundlicher Hinweis gedacht. 🙂

• Diese Antwort wurde geändert vor 1 Jahr von Bego Mario Garde. Grund: Tipp

Auch ich finde zentrierten Text scheusslich.

Wieso machst du das dann? 😀

(Website-Titel und Teile des Textes habe ich unkenntlich gemacht. Die rote Linie soll den zentrierten Satz verdeutlichen.)

Oder einfacher: Wie kann ich die Breite eines Gruppen- oder Absatzblock festlegen?

🤔 Das habe ich doch sehr ausführlich und mit Screenshots erläutert?

Hallo Bego – @pixolin

es kommt auf das aktivierte Theme an. Ich habe zum Beispiel auch eine andere Icon-Leiste beim Block Gruppe. @trubinwordpress hat das Theme „Origami“ installiert. So sieht es bei mir aus:

Auch auf Deutsch steht dort keine maximale Breite. Soll heißen: die wird durch das Theme definiert.

@trubinwordpress
Gib dem Block Gruppe eine CSS-Klasse (rechte Spalte, unten), trag dort z. B. ein: gruppenbreite

Den folgenden CSS-Code kannst du (wenn kein Child-Theme vorhanden ist) im WordPress-Backend >> Design >> Customizer >> zusätzliches CSS einfügen.

Abgekürzter Weg -> (https://dein-domainname.de/wp-admin/customize.php), also:

/wp-admin/customize.php an deine Domain anhängen >>, aufrufen und dann auf zusätzliches CSS klicken, das funktioniert auch (noch?), wenn du unter dem Menüpunkt Design kein „Customizer“ mehr findest.

CSS-Code:

.wp-block-group.gruppenbreite {
    max-width: 680px;
    margin: 0 auto;
}

@la-geek

Vielen Dank für den Hinweis, Angelika. Ich habe vergessen, dass die Auswahl der Block-Breite themeabhängig ist. Dazu noch eine für mich unverständliche Beschreibung des Problems – da kommt eines zum anderen.

Wahrscheinlich wäre es dann am besten, die Breite global zu definieren?

.has-global-padding { width: 620px; }

Ui, das ist ja übel – die CSS-Klasse .has-global-padding wird nicht im Theme Origami gerendert. Örks.

Da bin ich ganz bei dir und bin auf die gleiche CSS-Regel gekommen.

Das Theme scheint grundsätzlich mehr auf den SiteOrigin Page Builder ausgerichtet zu sein: „Origami includes a powerful drag and drop page builder for creating unlimited page layouts.“

dass ein so simples Problemchen im meist verbreiteten Editor und einem ebenfalls verbreiteten Template nicht gelöst werden kann.

Wieso? Wir haben doch Lösungsvorschläge gemacht?

Du verwendest ein Theme, das vor allem für die Nutzung mit einem Page Builder konzipiert wurde und Funktionen nicht verwendet, mit denen du das Layout im Block-Editor noch genauer steuern könntest. Als Workaround haben wir dir eine CSS-Regel genannt, die du im Customizer einbauen kannst.

In englischen Texten fand ich ähnliche Frustrationen.

Das liegt in der Natur von Support-Foren. Es melden sich selten Nutzer, um endlich mal loszuwerden, wie toll sie alles finden. Wir versuchen, damit pragmatisch umzugehen.

Angelika, ich könnte mir vorstellen, dass es irgendwo ein CSS Schnitzel gibt, das auch zu Origami passt. welches Template täte das denn – ohne meine übrige Seite zu zerschiessen?

Unsere Antworten hast du aber schon noch gelesen?

Glaubt mir, ich weiss, was Blocksatz ist im Unterschied zu einem zentrierten Block!

Das wollte ich auch nicht in Frage stellen. Es ging nur darum, was genau du möchtest und wo es klemmt. Es ist normal, dass wir bei Verständnisfragen nochmal nachhaken, was gemeint ist.

Wenn du aber eine seitenübergreifende Lösung suchst, dann versuche es damit:

.origami {
    max-width: 620px;
    margin: 0 auto;
}

Statt 620px trage die für dich angenehme Pixelbreite ein.

Ohne Auswirkung auf Header und Footer sollte das zum Ziel führen:

.origami .post {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}