Wie man einen Post-Hero-Header mit Blöcken baut – WP Tavern

9. April 2022
Wie man einen Post-Hero-Header mit Blöcken baut - WP Tavern

Ich bin besessen von Art Direction im Internet, solange ich mich erinnern kann. Der Begriff wird oft verwendet, um den Akt der Gestaltung einzelner Seiten um den Inhalt selbst zu beschreiben. Dies ist das Gegenteil davon, wie die meisten Benutzer normalerweise beim Schreiben von Beiträgen arbeiten. Die Vorlage oder das Design ist vom geschriebenen Wort getrennt.

Jason Santa Marias Website ist wahrscheinlich das meistzitierte Schaufenster solcher Beiträge. Ich empfehle dringend, herumzustöbern, besonders wenn man sich die Candygram Artikel.

Es gibt Zeiten, in denen Geschichten nach mehr visueller Betonung verlangen. Das Design des Inhalts kann ein Bild zeichnen, das nicht allein durch Text möglich ist. Manchmal handelt es sich dabei um aufwendige, ganzseitige Layouts. In anderen Fällen ist es das Einfügen von Bildern und anderen Elementen, die die Aufmerksamkeit des Lesers auf sich ziehen.

Es ist einer der Gründe, warum ich genossen die Verwendung des Archeo-Themas von Automattic in letzter Zeit. Seine Muster wecken frühe Erinnerungen an das Lesen von Zeitschriften vor dem Zuhause, wobei jede Geschichte mit ihrem eigenen Layout vorgestellt wurde.

Im Laufe der Jahre habe ich versucht, mehrere Systeme für das Pro-Post-Design zu entwickeln, aber sie blieben immer hinter dem zurück, wo ich sie haben wollte. Ein Teil des Problems war, dass ich keinen soliden Rahmen hatte, der sich zukunftssicher genug anfühlte, dass ich seine Probleme nicht noch ein Jahrzehnt oder länger auf der Straße lösen würde.

Als WordPress seinen Blockeditor startete, begannen diese alten Ideen wieder an die Oberfläche zu kriechen. Könnte es den Leuten ermöglichen, ihre Geschichten visuell zu erzählen und eine gewisse Sicherheit zu bieten, dass die Layouts ein paar Veröffentlichungen später nicht brechen würden?

Heute bin ich zuversichtlich, dass WordPress es mehr möglich macht als zuvor. Es gibt einige Dinge, die es besser machen könnte, wie z.B. die Erweiterung des gemeinsam genutzten CSS-Toolkits und die Erweiterung der Palette der Designsteuerelemente auf mehr Blöcke. Aber im Kern ist der Blockeditor eine Designsprache, die es Endbenutzern ermöglicht, ihre Geschichten durch visuelle und Textelemente zu erzählen. Dies wird mit Version 6.0 und darüber hinaus nur noch besser.

Ich wollte einen kleinen Einblick geben, wie Benutzer diese Tools nutzen können, um visuell einzigartigere Geschichten zu erstellen. Dieser Eintrag in der Bauen mit Blöcken Serie soll einen Sprungbrett bieten.

Für diejenigen, die mitmachen, werden wir einen Post-Header / Intro-Abschnitt für eine fiktive Geschichte über Gotham City erstellen:

Großer violetter Heldenabschnitt auf einer Website mit fettem Titel, Bild in voller Breite und Text.

Es ist kein ganzseitiges Design, aber meine Hoffnung ist, dass es den Leuten hilft, mehr mit ihren Inhalten zu experimentieren. WordPress hat eine Menge solider Design-Tools, mit denen Sie jetzt arbeiten können.

Ich habe tatsächlich zwei verschiedene Muster für dieses Tutorial zusammengestellt. Ich fühlte mich jedoch nicht wohl mit den Methoden, die für das Original verwendet wurden:

Heldenabschnitt in voller Breite mit durchblutendem Bildhintergrund.  Auf der linken Seite befinden sich der Titel des Beitrags, die Byline und der Inhalt in einer Spalte.

Insbesondere das Ausrichten des Inhalts nach links und in einem Container mit maximaler Breite hat seine Probleme. Es gibt mindestens zwei Möglichkeiten, dies zu tun. Die am häufigsten verwendete Methode besteht darin, einen 50/50-Spaltenblock einzufügen, wobei die erste Spalte für den Inhalt verwendet wird und die zweite leer bleibt. Dies hat die größte themenübergreifende Kompatibilität, kann aber bei einigen Bildschirmgrößen unordentlich sein.

Die zweite besteht darin, sich auf die Positionierungssteuerung des Cover-Blocks zu verlassen, um einen inneren Gruppenblock nach links auszurichten. Dies ist die beste Option für ein rein responsives Layout. Die Ausgabe war jedoch inkonsistent, wenn mit mehreren Blockthemen getestet wurde.

Letztendlich habe ich das erste Layout beiseite gelegt. Ich wollte es jedoch zumindest mit denen teilen, die einen Riss daran nehmen wollten.

Erstellen des Post-Header-Helden

Für dieses Muster habe ich mit Version 12.9 des Gutenberg-Plugins gearbeitet. Ich habe versucht, bei den Funktionen zu bleiben, die WordPress 5.9-Benutzern zur Verfügung stehen, aber die ältere Benutzeroberfläche fühlt sich langsamer und sperriger an als neuere Updates des Plugins.

Ich habe auch ein benutzerdefiniertes Blockthema verwendet. Jeder sollte funktionieren, aber er sollte eine "leere" Vorlage oder eine gleichwertige Open-Canvas-Option in voller Breite haben. Wenn nicht, können Sie eine aus der Integrierter Vorlageneditor. Es würde nur den Post-Content-Block darin benötigen.

Schritt 1: Erstellen des Hintergrunds

WordPress-Post-Editor mit eingefügtem Cover-Block.  Auf der rechten Seite wird das Überlagerungsfarbbedienfeld mit ausgewähltem Farbverlauf angezeigt.
Hinzufügen eines Cover-Blocks mit Hintergrundbild und Farbverlaufsüberlagerung.

Der Cover-Block ist meine erste Wahl, wenn ich viele Layouts erstelle. Es ist eine der vielseitigsten Optionen in WordPress und ebnet den Weg für viele Arten von Designs. Es ist keine Überraschung, dass ich started hier.

Der erste Schritt besteht darin, einen neuen Cover-Block einzufügen und ein Bild dafür auszuwählen. Stellen Sie es dann auf die volle Breite ein und schalten Sie die Option für die volle Höhe ein.

Je nach ausgewähltem Bild können Sie die Overlay-Option an diese anpassen. Ich habe den Farbverlauf "lebendiges Cyanblau bis lebendiges Lila" mit einer Deckkraft von 70% ausgewählt. Ich wollte, dass genug von dem Hintergrundbild durchschaut, um es zu sehen, aber nicht so sehr, dass es alles andere überfordern würde.

Schritt 2: Abstandshalter und eine Gruppe

WordPress-Post-Editor mit zwei Spacer-Blöcken und einer Gruppe, die in einem Cover verschachtelt ist.  Auf der linken Seite ist die Listenansicht geöffnet, die die Hierarchie anzeigt.
Hinzufügen einer Gruppe zwischen zwei Abstandshalterblöcken.

Zu diesem Zeitpunkt sind wir noch dabei, das Gesamtlayout für den Inhalt zu erstellen. Fügen Sie im Cover von Schritt #1 einen Abstandshalter, eine Gruppe und einen weiteren Abstandshalter hinzu.

Setzen Sie jeden Abstandshalter auf 2rem oder Ihr bevorzugter Wert. Dies dient nur dazu, etwas mehr vom Hintergrundbild oben und unten im Muster zu zeigen. Alternativ können Sie die Auffüllungsoption auf dem äußeren Cover-Block anpassen, um den gleichen Effekt zu erzielen.

Für den Gruppenblock habe ich nur die Rahmeneinstellungen geändert. Ich habe ausgewählt 3px Legen Sie für die Breite den Stil auf Durchgehend fest, und wählen Sie Weiß als Farbe aus.

Anmerkung: der Konzernblock in diesem Schritt wird in Zukunft überflüssig sein. Im Idealfall könnten wir einfach in das Cover von Schritt #3 kleben. Es werden jedoch noch keine benutzerdefinierten Rahmen unterstützt. Es gibt eine offene Ticket zum Hinzufügen der Funktion. Es ist unklar, ob WordPress dies für Cover in der kommenden 6.0-Version anbieten wird. Im Moment müssen wir einen zusätzlichen Wrapper hinzufügen.

Schritt 3: Innere Abdeckung

WordPress-Post-Editor mit einem Cover-Block, der in einem Gruppenblock verschachtelt ist, der in einem anderen Cover verschachtelt ist.
Hinzufügen eines Covers innerhalb einer Gruppe innerhalb eines Covers

Fügen Sie einen neuen Cover-Block innerhalb der Gruppe aus Schritt #2 hinzu. Stellen Sie es auf Ausrichtung in voller Breite ein und aktivieren Sie die volle Höhe. Wählen Sie dann eine Hintergrundfarbe Ihrer Wahl aus und passen Sie die Deckkraft an etwas an, das in Ihr Design passt. Diese Ebene muss dunkel genug sein, damit Ihr Text lesbar ist. Sie können dies später ändern, je nachdem, wie alles aussieht.

Für diejenigen, die mit der neuesten Version von Gutenberg testen, lesen Sie den Hinweis am Ende des nächsten Schritts.

Schritt 4: Inhaltsgruppe

Ein Gruppenblock innerhalb eines Covers innerhalb einer Gruppe innerhalb eines Covers im WordPress-Post-Editor.
Noch eine weitere Containerschicht.

Ich verspreche, dass dies die letzte Schicht von verschachtelten Containern ist, damit dieses Muster funktioniert. Fügen Sie für diesen Schritt einen neuen Gruppenblock aus Schritt #2 in das Cover ein.

Die einzige notwendige Einstellung ist das Einschalten der Option "Standardlayout erben" in der Seitenleiste des Blocks. Ich habe die Einstellung "Blockabstand" auf 4rem um dem Inhalt viel Raum zum Atmen zu geben, aber das kann sich von Thema zu Thema ändern. Sie sollten auch Weiß oder eine andere Lichtfarbe für die Text- und Linkfarboptionen auswählen.

Anmerkung: Dies ist wieder einmal ein Szenario, in dem WordPress 5.9 nur knapp davor zurückschreckt, die Tools anzubieten, die wir benötigen, um einen Teil der Kruste zu reduzieren. Der Cover-Block aus Schritt #3 war für einen transparenten Hintergrund notwendig. WordPress 6.0 ermöglicht es Benutzern jedoch, Passen Sie die Deckkraft einer beliebigen Farbe an. Für diejenigen, die mit dem Gutenberg-Plugin testen, können Sie einfach den Gruppenblock in diesem Schritt verwenden und einen transparenten Hintergrund darauf setzen.

Schritt 5: Eingängiger Titel

WordPress-Post-Editor mit einem großen und fetten Post-Titel.
Gehen Sie groß oder gehen Sie mit dem Post-Titel nach Hause.

Jetzt kommen wir zum lustigen Teil - dem eigentlichen Inhalt. Denken Sie daran, dass es mit WordPress 6.0 möglich sein könnte, die früheren Schritte zu halbieren.

Da ich zusätzlichen Platz zwischen dem Titel und seinem Container wollte, fügte ich einen Spacer-Block mit einem 2rem Höhe innerhalb des Gruppenblocks aus Schritt #3. Danach habe ich den Post-Title-Block hinzugefügt und ihn auf die Ausrichtung in voller Breite festgelegt. Denken Sie daran, dass wir für diesen Beitrag eine "leere" Vorlage verwenden, daher müssen wir den Titel irgendwo hinzufügen.

Hier werden die Dinge heikel, und ich habe mich fast dagegen entschieden, dieses spezifische Tutorial insgesamt zu teilen. Schriftgrößen in WordPress sind nur so gut wie Ihr aktives Theme. Die Kernplattform hat kein reaktionsschnelles Handling für sie und die damit verbundenen Linienhöhen, und jedes Thema kann mit den angebotenen Auswahlmöglichkeiten völlig inkonsistent sein.

Die beste Option besteht darin, eine relativ große Schriftgröße zu wählen, wenn sie vom Thema für den Post-Titelblock angeboten wird. Ein abgerundetes Design bietet eine Reihe von Auswahlmöglichkeiten und die Größenänderung für kleinere Bildschirme. Wenn nicht verfügbar, müssen Sie eine benutzerdefinierte Schriftgröße und Zeilenhöhe hinzufügen. Die in meinem Setup verwendeten Werte sind 6rem und 1beziehungsweise.

Wählen Sie dann die Option "Schwarz" für die Optionen "Aussehen" oder "Gewicht", je nachdem, welche Option verfügbar ist.

Schritt 6: Hinzufügen eines Bilds

WordPress-Post-Editor mit einem Bild in voller Breite, das eine Demo-Bildunterschrift und einen schwarzen Rand hat.
Hinzufügen eines Bilds in voller Breite für den Beitrag.

Für diesen Schritt haben Sie zwei Möglichkeiten: den Block "Ausgewähltes Bild posten" oder "Bild". Ersteres hat nicht annähernd so viele Einstellungen in WordPress 5.9. Ihr aktives Design kann auch einige benutzerdefinierte Stile für einen und nicht für den anderen verfügbar machen.

Ich habe mich in erster Linie für den Bildblock entschieden, weil ich eine Bildunterschrift für das Foto hinzufügen wollte. Ich habe es dann auf die Ausrichtung in voller Breite eingestellt und einen "Rahmen" -Stil ausgewählt, der von meinem Thema verfügbar ist, um ihn ein wenig vom Hintergrund zu trennen.

Schritt 7: Verpacken

WordPress-Post-Editor mit einem Bild, gefolgt von einem Absatz und einem Abstandshalter in einer Reihe von Containern mit violettem Hintergrund.
Hinzufügen von Absatz- und Abstandshalterblöcken.

Von diesem Punkt an haben Sie einfach Spaß mit den Dingen. Ich habe ein Lede für meine fiktive Geschichte und einen weiteren Spacer-Block hinzugefügt, aber Sie können an anderen Optionen wie der Anzeige des Post-Autors und des Datums basteln.

Das fühlte sich wie eine Menge Arbeit an, die zusammengefügt wurde. WordPress 6.0 sollte die Dinge jedoch viel einfacher machen.

Quelle


Dieser Artikel ist im Original von wptavern.com und wurde übersetzt
https://wptavern.com/making-an-impression-how-to-build-a-post-hero-header-with-blocks

Abonniere den RSS-Feed von unseren WP News und verpasse keine Meldung: https://die-mainagentur.de/feed/?post_type=wp-news

Alternativ kannst du unseren WP-Newsletter abonnieren

Mit dem Eintrag in den WP-Newsletter bekommst du per Mail über neue Artikel zugesendet. Du kannst den Newsletter jederzeit abbestellen.
Mehr dazu in der Datenschutzerklärung