Navigation im Cover-Block bei Twenty Twenty-Three

Navigation oben im Cover-Block bei Twenty Twenty-Three (WordPress 6.2)

Aufgrund einer sehr interessanten Anfrage im deutschsprachigen Support-Forum habe ich mir angesehen, wie man die Navigationsleiste im Cover-Block beim Theme Twenty Twenty-Three und WordPress 6.2 oben positionieren kann. Da es sich um die Bearbeitung eines Blocks geht, kann man die Lösung vermutlich auch ohne Probleme auf andere Block Themes wie z. B. Twenty Twenty-Two übertragen.

Wenn man sich ausführlicher mit Full Site Editing (FSE) und Block Themes beschäftigt, dann wird mir immer wieder klar, welches Potential in dieser doch recht neuen Entwicklung bei WordPress steckt.

Bei vielen klassischen Themes gibt es für diese Darstellungsoption Einstellungen. Allerdings gibt es für diese Einstellungen keine „Norm“, so dass man bei jedem klassischen Theme in der Regel in unterschiedlicher Form diese Option einschalten muss. Die Einstellungen sind bei Block Themes nicht nötig, weil man jedes Template (Startseite, einzelne Beiträge, etc.) individuell gestalten kann.

Navigation im Cover-Block

Navigationsleiste im Cover-Block mit Abstandshalter beim Theme Twenty Twenty-Three oben
Navigationsleiste im Cover-Block beim Theme Twenty Twenty-Three oben

Höhe des Cover-Blocks und des Abstandshalters

Die Höhe des Abstandshalters ist natürlich von der Höhe des Cover-Blocks abhängig.
Wenn ich z. B. die Höhe des Cover-Blocks mit 20rem einstelle, dann habe ich im Beispiel eine Höhe des Abstandshalter-Blocks mit 15rem festgelegt.

Die Höhe des Cover-Blocks und des Abstandshalters
Die Höhe des Cover-Blocks und des Abstandshalters

Der obere weiße Rand

So weit so gut: Aber der obere weiße Rand stört doch ziemlich. Wenn man sich das in der developer console (Aufruf mit F12 bei Chrome) anschaut, dann kann man erkennen, dass eine Einstellung für padding dafür verantwortlich ist. Den Wert für padding-top muss man auf 0 setzen, damit der obere weiße Rand verschwindet:

Navigationsleiste im Cover-Block beim Theme Twenty Twenty-Three oben: der weiße Rand
Navigationsleiste im Cover-Block beim Theme Twenty Twenty-Three oben

Diesen Rand kann man auf verschiedene Arten über eine geänderte CSS-Regel löschen. Ich habe mich in dem Fall aufgrund der minimalen Änderung nicht für ein Child Theme von Twenty Twenty-Three entschieden, sondern über eine entsprechende CSS-Regel gelöst.

.wp-site-blocks {
    padding-top: 0;
}

Bis WordPress Version 6.1.x kann man diese Option z. B. wie folgt einbinden: Wenn man an die URL /wp-admin/customize.php anhängt, ist der Customizer wieder da. Weitere Möglichkeiten kann man in dem folgenden Beitrag nachlesen.

Bei WordPress 6.2 gibt es eine neue Option, bei der man individuelle CSS-Regeln verwenden kann. Das habe ich in dem folgenden Beitrag ausführlich beschrieben.

Oberen Rand bei Navigation über Custom CSS entfernen
Custom CSS bei Twenty Twenty-Three
Oberen Rand beim Navigations-Block über Custom CSS entfernen
Custom CSS bei Twenty Twenty-Three

Fazit

Es ist immer wieder beeindruckend, welche Möglichkeiten man jetzt zusätzlich beim Full Site Editing (FSE) hat. Mit ein paar relativ einfachen Änderungen kann man dieses Design umsetzen. Ein klein wenig schade ist es, dass man doch noch ein wenig CSS reinpacken muss. Ich bin mir aber sicher, dass sich auf Dauer auch in diesem Bereich noch etwas tun wird. Auf jeden Fall war das eine sehr interessante Aufgabenstellung und es macht immer mehr Spaß mit FSE zu arbeiten.

Weitere Beiträge zum Thema


Mehr erfahren auf dieser Webseite

Navigationsleiste im Cover-Block mit Abstandshalter beim Theme Twenty Twenty-Three oben


Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

  • Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörter.
  • Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.

Beitrags-Kategorien

Allgemein (78) Anleitung (39) Block-Editor (34) Full Site Editing (20) Keine Anzeige (1) Plugins (25) Theme (13) Tipps (49) WordPress (80)

Schreibe einen Kommentar