Support » Allgemeine Fragen » Gutenberg Text Block zentrieren

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 21)
  • 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):

    Absatz in Gruppe

    Thread-Starter trubinwordpress

    (@trubinwordpress)

    Danke, hat leider nicht geklappt. Der Absatz ist jetzt zwar zentriert, aber immer noch viel breiter als die Blöcke mit den Bildern(900) px), die ich auch in die Gruppe gepackt habe

    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:

    Screenshot

    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:

    Screenshot

    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:

    Screenshot

    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 3 Wochen, 6 Tage von Bego Mario Garde. Grund: Tipp
    Thread-Starter trubinwordpress

    (@trubinwordpress)

    Besten Dank
    Auch ich finde zentrierten Text scheusslich. Meine Frage war nicht, den Text sondern den Textblock oder den Gruppenblock unter den Bildern in derselben Breite zu haben.
    Oder einfacher: Wie kann ich die Breite eines Gruppen- oder Absatzblock festlegen?
    PS: Das ganze ist nur ein Problem, wenn das Brouserfenster gross ist – bei mir 4K
    Bin gespannt und Danke
    Thomas

    Auch ich finde zentrierten Text scheusslich.

    Wieso machst du das dann? 😀

    Screenshot

    (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?

    Thread-Starter trubinwordpress

    (@trubinwordpress)

    Sorry, wenn Du genau hinschaust, ist nicht der Text zentriert, seine Linien sind rechts unterschiedlich lang. Ich will nur, dass die Texte gleich breit sind wie die Bilder, der Text selbst ist links ausgerichtet. Das ist auf meiner ganzen übrigen Website so, die ich mit dem klassischen editor erstellte.

    Ich hab versucht, Deine erste Anleitung mit der Gruppe umzusetzen, Ich hab alle Varianten (Links, zentriert, rechts, keine) für die Bilder durchprobiert. Für die Gruppen und den Absatz kann man die Ausrichtung schon gar nicht anwählen, man kann einzig den Text links, mittig oder rechts ausrichten – ausser ich kapier da was nicht.

    Die Galerie möchte ich nicht anwenden oder kann man nur unterhalb dieser den gleich langen Text einfügen?

    Moderator La Geek

    (@la-geek)

    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;
    }

    Sorry, wenn Du genau hinschaust, ist nicht der Text zentriert, seine Linien sind rechts unterschiedlich lang.

    In meinem Beispiel ist der Inhalt der Gruppe – Galerie, Bild, Text … – durch die Block-Breite zentriert, aber nicht der Absatz, sonst würde es so aussehen:

    Screenshot

    Meinst du mit „rechts unterschiedlich lang“ den linksbündigen Flattersatz? Möchtest du, dass der Text als Blocksatz ausgegeben wird? Das würde so aussehen:

    Screenshot

    Dafür gibt es aber extra im Block-Editor keine Einstellungsoption, weil beim Blocksatz (besonders auf kleinen Displays und bei langen Wörtern, die im Deutschen öfters vorkommen) schnell sehr komische Lücken entstehen:

    Screenshot

    Blocksatz ist im Web Design unüblich und wäre nur über eigene CSS-Regeln möglich.

    @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; }
    Moderator La Geek

    (@la-geek)

    Wahrscheinlich wäre es dann am besten, die Breite global zu definieren?
    .has-global-padding { width: 620px; }

    Ich vermute, das ist eine body class? Die existiert in meinem Theme (aber auch im Seitenquelltext) nicht. Generell ist die Idee aber gut.

    Wenn man konsequent alles in Gruppen-Blöcke packt, dann würde das vermutlich den gewünschten Effekt bringen:

    .wp-block-group {
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }

    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.“

    Thread-Starter trubinwordpress

    (@trubinwordpress)

    Danke für all Eure Antworten! Mit dem Editor von Site Origin sieht die Seite katastrophal aus. Ich hätte nie gedacht, dass ein so simples Problemchen im meist verbreiteten Editor und einem ebenfalls verbreiteten Template nicht gelöst werden kann. In englischen Texten fand ich ähnliche Frustrationen.

    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?

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

    Schöne Ostern
    Thomas

    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.

    Moderator La Geek

    (@la-geek)

    @trubinwordpress

    Das Code-Snippets plus die einzutragende CSS-Klasse habe ich dir dort aufgeschrieben gehabt:

    https://de.wordpress.org/support/topic/gutenberg-text-block-zentrieren/#post-157740

    Moderator La Geek

    (@la-geek)

    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;
    } 
Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 21)