Vortrag Block Editor

Inhaltsverzeichnis

• Der Block Editor – eine Einführung
• Spalten mit Bildern
  • Design mit Cover Block
  • Designs realisiert mit einem Cover-Block und Duotone
  • Designs mit dem Cover Block
    • Zuerst ein Verlauf
    • Änderung Farbe und Anpassung des Verlaufs
    • Weiße Überdeckung des unteren Bereichs
    • Zusätzlich eine Überschrift mit einem Button
• Mehr Infos zur Kletterhalle
  • Bild mit Duotone und zwei Spalten. Links die Infos
• Duotone mit zwei Spalten – Grafik
• Duotone mit zwei Spalten – Grafik 2
  • Eine Variante für die Startseite
• Ein weiterer Pattern
• Ein weiterer Pattern 2
• Pattern als Vorlage speichern
• Pattern-Verzeichnis

Der Block Editor – eine Einführung

• Auswahl der Blöcke über „+“
• Überschrift und Absatz
• lorem ipsum einfügen
• Dokumentenübersicht > Listenansicht und Übersicht
• Titel: Hansestadt Attendorn (automatisch <h1>)
• Überschrift: Hansestadt Attendorn im Sauerland (<h2>)
• Überschrift: Geschichte (<h2>)
  • Text: lorem ipsum
  • oder Text aus Geschichte, siehe https://de.wikipedia.org/wiki/Attendorn#Geschichte:~:text=Quelltext%20bearbeiten%5D-,Historisches,-%5BBearbeiten%20%7C
• Überschrift: Bevölkerung (<h2>)
  • Text: lorem ipsum
  • oder Text aus Wikipedia zu Bevölkerung: https://de.wikipedia.org/wiki/Attendorn#Geschichte:~:text=eingegliedert.%5B9%5D-,Einwohnerentwicklung,-%5BBearbeiten%20%7C
• Liste oberhalb erstellen mit interner Verlinkung (als Anker mit #)
• Vorschau zeigen
• kurze Übersicht Blöcke
• Bild oben als Cover einfügen “Hintergrund fixiert”
• Überschrift Landschaft (<h2>)
• Spalten mit Bildern

Spalten mit Bildern

• Spalten: Außenabstände auf 0 setzen (Hinweis: aktuell nur möglich bei einem Block Theme und nicht z. B. bei GeneratePress)
• Texte darunter mit Innenabstand links und rechts
• Hintergrundfarbe und Textfarbe ändern
• Radius bei Bildern ändern

Design mit Cover Block

• Zeigen https://www.hoernerdoerfer.de/
• Auf der Grundlage der Vorlage entwickeln
  • zusätzlich ggfs. Runde Ecken bei Gruppe

Designs realisiert mit einem Cover-Block und Duotone

Einige Designs, die ich auf dem WordPress Meetup Südsauerland beim Vortrag zum Block Editor live zeigen möchte.

siehe auch: https://space2.yd-sgs.de/

Designs mit dem Cover Block

Das funktioniert, aber diese Option hat gewisse Einschränkungen, weil die Drehung immer durch den Mittelpunkt verläuft. Dadurch entsteht unter der Abschrägung relativ viel Weißraum, der nicht genutzt werden kann.

Zuerst ein Verlauf

Änderung Farbe und Anpassung des Verlaufs

Weiße Überdeckung des unteren Bereichs

Zusätzlich eine Überschrift mit einem Button

Bild mit Duotone und zwei Spalten. Links die Infos

Eine Variante für die Startseite

Pattern als Vorlage speichern

Pattern-Verzeichnis

Add a beautifully designed, ready to go layout to any WordPress site with a simple copy/paste.

• https://wordpress.org/patterns/
• https://playground.wordpress.net/