Auf der Suche nach der Lösung habe ich im GeneratePress-Forum die letzten 6 Jahre durchstöbert. Die Frage taucht in schöner Regelmässigkeit auf:
Wie mache ich einen ganzen Block zum Link?
Text-Links kann schliesslich jeder.
Image-Links auch.
Aber was mach' ich, wenn ich einen ganzen Block voll Text, Grafik usw. vor mir habe, und diesen komplett verlinken möchte?
Typische Anwendung, wie im Titelbild gezeigt: eine Liste von Beiträgen (Posts) zur Auswahl, genau genommen: die Kurzfassungen davon (Excerpts).
Der / die / das User* hovert über einen Excerpt, bekommt das Feedback: da geht was, wahrscheinlich ist es ein Link und: Klick! Tatsache. War einer 🙂
Die minimal invasive Lösung basiert auf dem Plugin GenerateBlocks und ein paar Zeilen CSS.
Und so geht’s:
- Container auswählen
- CSS-Klasse zuweisen
- Zusätzliches CSS einfügen
Die folgende Lösung basiert auf der kostenfreien Standardversion von GenerateBlocks.
Sollte so ähnlich aber auch mit anderen Gutenberg-Erweiterungen funktionieren, die mit Containern bzw. Blöcken aus Blöcken umgehen können.
Den Container, um den es hier geht, haben wir kürzlich erst gebaut. Wer sich für Überschriften mit Dach- und Unterzeile interessiert: Hier ist der Post.
1. Container auswählen
Im Gutenberg Block-Editor von WordPress verklickt man sich schneller, als einem lieb ist. Speziell wenn es um übergeordnete Elemente geht wie Container, Raster, Spalten und Tabellen.
Auf Nummer Sicher geht die Listenansicht.
Das passende Icon ist ganz rechts, neben dem Info-Icon.
Im Beispiel haben wir es mit einem Container (Behälter) zu tun, der ein Block ist und 10 weitere Blöcke enthält. Der letzte davon ist ein weiterer Container, der einen Absatz-Block enthält, der …
Eben. Es kann kompliziert werden. Wenn alles ein Block aus Blöcken ist, und jeder wieder ein Block aus Blöcken sein kann.
2. CSS-Klasse zuweisen
Dann geht es im Editor nach rechts. Wir aktivieren den Block Tab.
Dann ganz nach unten, auf Erweitert klicken, bis es aufklappt.
Dort geben wir der neuen Klasse von klickbaren Containern einen treffenden Namen, z.B. clickable-container.
Dieser Name muss exakt mit dem übereinstimmen, den wir gleich ins "Zusätzliche CSS" schreiben.
3. Zusätzliches CSS einfügen
Und schliesslich gehen wir Design > Customizer > Zusätzliches CSS und fügen an passender Stelle ein, z.B. ganz am Ende des bisherigen CSS-Textes:
/* Clickable Containers */
.gb-container.clickable-container .gb-inside-container {
position: relative;
}
.gb-container.clickable-container a:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
}
.gb-container.clickable-container:hover {
opacity: .6;
}Im CSS beginnen Klassennamen (Selektoren) mit einem Punkt. Ober- und Unterklassen werden mit direkt aneinandergehängten Namen bezeichnet.
In diesem Beispiel ist .gb-container die Oberklasse.
Der Präfix gb signalisiert, da hat GenerateBlocks schon mal was vorbereitet.
Unseren eigenen, neuen Klassennamen hängen wir einfach hinten dran.
Das letzte Statement sorgt mit dem hover-Selektor dafür, dass etwas passiert, wenn die Maus über den Container gezogen wird. Im Beispiel stellen wir die
Opacity (Deckkraft) auf 60 %
Vor einem weissen Hintergrund bewirkt das einen netten Dimm-Effekt. Auffällig genug, um beim User als Feedback anzukommen. Dezent genug, um ihn / sie / es nicht damit zu verstören.
Für alle weiteren Details zum vertieften CSS-Verständnis bitte selbstständig weitergoogeln … hüstel 🙂
Im WordPress-Backend sieht das Ganze dann ungefähr so aus:
Abschliessend auf "Veröffentlichen" und schon war’s das, mit dem klickbaren Container!
Wer sich auf eigene Faust nach alternativen Lösungen umschauen möchte, dem sei empfohlen, die Keywords zu variieren. Ich bin mit der folgenden Liste unterwegs gewesen:
- clickable divsboxes with icons
- content section clickable
- whole post div clickable
- blog post container clickable
- clickable items
- full div clickable
- clickable article
- group clickable
- clickable containers
- clickable container with gb
- clickable block
- containers clickable
- clickable column
- posts on archive fully clickable
- turn an entire container block into one big link
Ist schon – immer wieder – beeindruckend, mit welchen Riesen-Wolken von Suchbegriffen hantiert wird. Im gesamten Internet. Da staunt man nur noch, wie Google das inzwischen sortiert bekommt.
Aber auch das Support-Team von GeneratePress & GenerateBlocks betreffend.
Egal, wie man die Frage stellt. In kürzester Zeit kommt man auf den gemeinsamen Nenner und findet die passende Lösung. Und dabei könnten sie es sich so einfach machen: GeneratePress Pro kaufen, fertig.
Stattdessen bekommt man den entscheidenden Tipp, wie es auch so geht. Wenn auch nicht gaaaanz so einfach wie gekauft 🙂
