Erstellen von Fortgeschrittenen WordPress Block-Layouts
WordPress bietet eine Vielzahl von Möglichkeiten, um komplexe Block-Layouts zu erstellen, indem man Blöcke verschachtelt und gruppiert. Container-Blöcke wie der Gruppenblock, Spaltenblock, Cover-Block, Medien- und Textblock, Zeilenblock, Stapelblock und Rasterblock dienen als Behälter für andere Blöcke und ermöglichen es, verwandte Inhalte zu gruppieren und Stile oder Einstellungen auf die gesamte Gruppe anzuwenden.
Beispiel 1: Gruppierung von Header, Separator und Spalten
Um ein fortgeschrittenes Layout zu erstellen, beginne mit einem Gruppenblock als Container. Deaktiviere die Option „Inner blocks use content width“, um die Breite des Blocks anzupassen, und wähle eine breite Breite im Block-Toolbar. Füge innerhalb des Gruppenblocks eine Überschrift hinzu, gefolgt von einem Separator-Block mit einer breiten Linie. Darunter füge einen Spaltenblock mit zwei gleichen Spalten ein. Der Text in der linken Spalte bleibt unverändert, während der Text in der rechten Spalte für Kontrast kleiner gemacht wird.
Stiloptionen können über die Typografie-Einstellungen angepasst werden. Wähle zum Beispiel das Erscheinungsbild „thin“ und eine benutzerdefinierte Größe von 5 REM für die Überschrift. Ändere die Buchstaben in Großbuchstaben. Füge dem Gruppenblock Polsterung hinzu, um den Inhalt einzurahmen.
Beispiel 2: Nutzung des Cover-Blocks für ein Design
Starte mit einem Cover-Block und wähle eine passende Überlagerungsfarbe. Deaktiviere die Option „Inner blocks use content width“ und stelle die Breite auf volle Breite ein. Innerhalb des Cover-Blocks füge einen Zeilenblock und darin einen Gruppenblock hinzu. Füge Text und einen Buttons-Block mit einem Call-to-Action hinzu. Passe den Stil des Buttons an, indem du die Hintergrundfarbe auf Schwarz und die Textfarbe auf Weiß änderst. Stelle die Größe auf mittel und die Buchstaben auf Großbuchstaben ein.
Der Gruppenblock kann weiter gestylt werden, indem der Blockabstand auf 24 Pixel gesetzt wird. Die Breite des Gruppenblocks wird auf fest eingestellt, und die Breite auf 320 Pixel festgelegt. Im rechten Gruppenblock kann der Albumname hinzugefügt und gestylt werden, indem die Textgröße auf 148 Pixel, das Erscheinungsbild auf fett, der Zeilenabstand auf 0,8 und der Buchstabenabstand auf -4 Pixel gesetzt werden. Die Ausrichtung des Textes kann auf rechts geändert werden.
Die vertikale Ausrichtung des Zeilenblocks wird auf oben eingestellt, und dem Cover-Block wird Polsterung hinzugefügt, um den Inhalt einzurahmen. Um sicherzustellen, dass das Design auf mobilen Geräten korrekt angezeigt wird, aktiviere die Option „Allow to wrap to multiple lines“ im Zeilenblock.
Beispiel 3: Erstellen eines Designs mit dem Spaltenblock
Beginne mit einem Spaltenblock und wähle drei gleiche Spalten. Ändere die Breite des Hauptspaltenblocks auf breite Breite. Füge im ersten Spaltenblock einen Cover-Block hinzu und wähle ein Bild aus der Medienbibliothek. Ändere die Überlagerungsfarbe auf Schwarz und die Überlagerungsopazität auf 40.
Innerhalb des Cover-Blocks füge einen Stapelblock hinzu. Füge einen Heading-Block hinzu, ändere den Text in Großbuchstaben und die Größe auf 2 REM, während der Text fett gemacht wird. Füge darunter einen Separator-Block und einen Buttons-Block hinzu. Ändere den Stil des Buttons auf „Outline“ und stelle den Text auf fett ein. Richte den Stapelblock zentriert aus und passe den Blockabstand auf 3 zwischen den Blöcken an. Der Inhalt im Cover-Block kann auf die obere Mitte positioniert werden.
Nachdem das Styling abgeschlossen ist, dupliziere den linken Spaltenblock zweimal und lösche die beiden leeren Spalten. Aktualisiere den Inhalt entsprechend.