![\"Blockausrichtungen](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/Diseno-de-bloques-de-Gutenberg-anchos-y-de-ancho-completo.png\")
<\/p>\nGutenbergs Blockeditor f\u00fcr WordPress hat die Art und Weise ge\u00e4ndert, wie wir Inhalte in CMS erstellen. Es er\u00f6ffnete aber auch neue M\u00f6glichkeiten an der Front.<\/p>\n
Eine der interessantesten Entwicklungen in diesem Bereich ist die M\u00f6glichkeit, einer Seite oder einem Beitrag “vollst\u00e4ndige” oder “breite” Bl\u00f6cke hinzuzuf\u00fcgen. Diese Funktion bietet einem Gutenberg-Block die M\u00f6glichkeit, von der Standardbreite des Inhalts eines Themas abzuweichen, was im alten Classic Editor fast unm\u00f6glich war.<\/p>\n
Es gibt mehrere Verwendungsm\u00f6glichkeiten f\u00fcr einen vollst\u00e4ndig oder breit ausgerichteten Block. Sie k\u00f6nnen beispielsweise neue Seitenabschnitte mit einem Deckblatt voller Breite eingeben, das den Text auf einem Bildhintergrund \u00fcberlagert. Oder Sie k\u00f6nnen die Funktion nutzen, um einen Handlungsaufrufbereich zu erstellen, den Sie nicht verpassen sollten. Hier k\u00f6nnen fast alle Arten von Inhalten hinzugef\u00fcgt werden, was Teil des Appells ist.<\/p>\n
Es gibt jedoch eine kleine Einschr\u00e4nkung: Ihr Thema muss vollst\u00e4ndige, ausgerichtete Bl\u00f6cke unterst\u00fctzen. Zum Gl\u00fcck ist das ganz einfach. Im Folgenden finden Sie ein kurzes Tutorial, mit dem Sie Ihrem WordPress-Design und Ihren Designbl\u00f6cken \u00fcber CSS umfassende Unterst\u00fctzung f\u00fcr die Ausrichtung hinzuf\u00fcgen k\u00f6nnen.<\/p>\n
Der erste Schritt besteht darin, der Datei functions.php Ihres aktiven Themas eine einzelne Codezeile hinzuzuf\u00fcgen. Laden Sie diese Datei von Ihrer Website herunter, falls Sie sie noch nicht haben (sie befindet sich im Ordner \/ wp-content \/ themes \/ yourtheme \/ und ersetzt “yourtheme” durch den Ordnernamen). Kopieren Sie dann das folgende PHP-Code-Snippet und f\u00fcgen Sie es ein:<\/p>\n
add_theme_support (‘breite Ausrichtung’); <\/p>\n
Laden Sie nach dem Hinzuf\u00fcgen des Codes die ge\u00e4nderte Datei Functions.php erneut in Ihren Themenordner.<\/p>\n
Dieser Code bedeutet, dass Sie Breiten- und Breitenausrichtungsbl\u00f6cke aktivieren m\u00f6chten. Wenn Sie sich jetzt bei WordPress anmelden und auf den Seiten- \/ Post-Editor zugreifen, beachten Sie, dass einige Bl\u00f6cke (nicht alle) die neuen Ausrichtungsoptionen “Voll” und “Breite” haben.<\/p>\n
<\/p>\n
Verwenden Sie ein kommerzielles oder Standardthema?<\/strong><\/p>\n Wenn Sie ein Standard- oder kommerzielles WordPress-Thema verwenden, stellen Sie sicher, dass Sie ein sekund\u00e4res Thema verwenden. Auf diese Weise k\u00f6nnen Sie \u00c4nderungen am Thema vornehmen, ohne es nach einem Update m\u00f6glicherweise zu verlieren.<\/p>\n Das Entwerfen eines breiten oder vollst\u00e4ndig ausgerichteten Blocks kann etwas schwierig sein. Und es gibt verschiedene Techniken. Was wir hier verwenden werden, stammt aus diesem Beispiel in CodePen.<\/p>\n @media screen e (Mindestbreite: 960 px) { Beachten Sie, dass wir eine CSS-Medienabfrage verwenden, um genau diesen Stil zu integrieren, wenn die Bildschirmgr\u00f6\u00dfe 960 Pixel oder mehr betr\u00e4gt. Dies liegt daran, dass wir diesen Effekt nicht unbedingt auf kleineren Bildschirmen haben m\u00f6chten.<\/p>\n In diesem Fall verwenden wir dieselben Stile f\u00fcr die beiden Blockausrichtungen. Nat\u00fcrlich ist es durchaus m\u00f6glich, sie separat zu gestalten, so dass jedes auf der Vorderseite ein einzigartiges Erscheinungsbild bietet.<\/p>\n Beachten Sie auch einen m\u00f6glichen Nachteil: Bei einigen Modellen kann bei Verwendung dieser Technik eine horizontale Bildlaufleiste angezeigt werden. Dies kann durch CSS korrigiert werden, indem dem body-Element Folgendes hinzugef\u00fcgt wird:<\/p>\n K\u00f6rper { Nachdem wir die vollst\u00e4ndige und ausgerichtete Sperrfunktion aktiviert haben, ist es Zeit, die Dinge zu testen. Hier erstellen wir eine Seite mit einem Deckblock mit einer breiten Ausrichtung.<\/p>\n Wenn Sie sich das vordere Ende der Site ansehen, funktioniert der Deckblock wie erwartet. Das Element erstreckt sich \u00fcber die gesamte Breite der Seite, w\u00e4hrend der Inhalt unten innerhalb der Standardbreite von 960 Pixel des Themas bleibt.<\/p>\n Dieses Element, das nur Standardstile verwendet, f\u00e4llt wirklich auf. Dennoch gibt es viele M\u00f6glichkeiten, mehr mit Design zu tun.<\/p>\n Durch das Hinzuf\u00fcgen zus\u00e4tzlicher CSS-Klassen oder das Targeting bestimmter Bl\u00f6cke steht uns ein umfassendes Arsenal an Entwurfsm\u00f6glichkeiten zur Verf\u00fcgung. Dinge wie Hintergr\u00fcnde, Rahmen oder Beschneidungspfade k\u00f6nnen eine einzigartige Note hinzuf\u00fcgen.<\/p>\n In einer Standardinstallation bietet Gutenberg nicht alle Funktionen eines Page Builder-Plugins. Aber die Blockausrichtungen erm\u00f6glichen es uns, dieses Gebiet zu betreten.<\/p>\n Dies ist eine gute Sache, da sich das Webdesign seit den Tagen, als der Classic Editor zum ersten Mal erschien, weiterentwickelt hat. Zu dieser Zeit verwendeten Websites in der Regel immer eine einheitliche Breite von Inhalten.<\/p>\n Abschnitte in voller Breite geh\u00f6ren derzeit zu den beliebtesten und n\u00fctzlichsten Gestaltungsoptionen. Die M\u00f6glichkeit, dies ohne Theme-Plugins oder Hacks zu nutzen, macht WordPress f\u00fcr Designer noch besser.<\/p>\n ","protected":false},"excerpt":{"rendered":" Gutenbergs Blockeditor f\u00fcr WordPress hat die Art und Weise ge\u00e4ndert, wie wir Inhalte in CMS erstellen. Es er\u00f6ffnete aber auch neue M\u00f6glichkeiten an der Front. Eine der interessantesten Entwicklungen in diesem Bereich ist die M\u00f6glichkeit, einer Seite oder einem Beitrag “vollst\u00e4ndige” oder “breite” Bl\u00f6cke hinzuzuf\u00fcgen. Diese Funktion bietet einem Gutenberg-Block die M\u00f6glichkeit, von der Standardbreite […]<\/p>\n","protected":false},"author":1,"featured_media":29988,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/07\/Diseno-de-bloque-Gutenberg-ancho-y-completo-en-WordPress.jpg","fifu_image_alt":""},"categories":[7],"tags":[5075,5077,68,5076,51],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/29987"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=29987"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/29987\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/29988"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=29987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=29987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=29987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Grundlegender Blockstil<\/h2>\n
.alignwide, .alignfull {.
Breite: 100vw;
maximale Breite: 100vw;
linker Rand: berechnet (50% – 50 vw);
}}
}} <\/p>\n
x-pop: versteckt;
}} <\/p>\nDie Ergebnisse<\/h2>\n
![\"Erstellen](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/Diseno-de-bloques-de-Gutenberg-anchos-y-de-ancho-completo.jpg\")
<\/p>\n![\"Der](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/1584219365_458_Diseno-de-bloques-de-Gutenberg-anchos-y-de-ancho-completo.jpg\")
<\/p>\nErweitern mit WordPress-Themes<\/h2>\n