Oft sehen wir auf WordPress-Webseiten Darstellungen von Events in Form von „Time-Lines“. Die Erstellung solcher geschieht meist mit Plugins, von denen es ganz einfache kostenfreie gibt, aber auch mit ausgeklügelten Tools, welche keine Wünsche offen lassen, aber auch ein wenig ins Geld gehen können.
Warum nicht eine „Time-Line“ selber erstellen – mit den Hausmitteln von WordPress?
Das könnte im Ergebnis zum Beispiel (aus meiner Seite „Meine Reisen“) so aussehen:
Um dies zu erreichen, mache ich mir die Möglichkeiten der Gutenberg-Blocks zu nutze, kombiniert mit CSS-Anweisungen. Pro Event gibt es einen Gutenberg-Spalten-Block mit folgender Struktur (und css-Klasse – wtl=woodesign time line):
- Spalten („wtl-spalten“)
- Spalte („wtl-spalte-1“)
- Überschrift (h2)
- Absatz
- Spalte („wtl-spalte-2*)
- Überschrift (h2)
- Bild
- Absatz
- Spalte („wtl-spalte-1“)
Bei jedem zweiten Spalten-Block werden Spalten 1 und 2 getauscht und es sind natürlich ein paar CSS-Anweisungen bzgl. Border, und Abstände nötig.
Und warum nicht diesen Spalten-Blöck, wenn mal alles stimmig ist als wiederverwendbaren Block speichern?
Die CSS-Anweisungen für obiges Beispiel sind wie folgt („ohne Gewähr“ 😉 ):
/* woody-time-line = wtl */
/* --------------------- */
div.wp-block-columns.wtl-spalten {
background-color: #eee;
margin-bottom: 0px;
font-size: 95%;}
div.wp-block-columns.wtl-spalten figcaption {
line-height: 1.3}
div.wp-block-columns.wtl-spalten figure {
margin-top: 16px; }
div.wp-block-column.wtl-spalte-1 {
margin-top: 12px;
margin-bottom: auto;}
div.wp-block-columns.wtl-spalten:nth-child(odd) div.wp-block-column.wtl-spalte-1 {
order: 99}
div.wp-block-column.wtl-spalte-2 {
border-left: 3px solid rgb(216, 139, 95);
margin: 0;}
div.wp-block-columns.wtl-spalten:nth-child(odd) div.wp-block-column.wtl-spalte-2 {
border-right: 3px solid rgb(216, 139, 95);
border-left: none;
margin: 0;}
div.wp-block-group.wtl-gruppe {
margin-top: 1em;
background-color: #eee;}
div.wp-block-group.wtl-gruppe .wp-block-group__inner-container {
padding: 1.1em;
border: 1px solid rgb(216, 139, 95);
margin:22px;
background: #fff;}
div.wp-block-group.wtl-gruppe h2 {
margin-top: 0px;
line-height: 1.4;
margin-bottom: 8px;}
div.wp-block-group.wtl-gruppe p {
margin-bottom: 0;}
div.wp-block-column.wtl-spalte-1 p {
padding-left:40px}
div.wp-block-column.wtl-spalte-1 h2 {
padding-left: 40px;
color:rgb(216, 139, 95);
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;}
div.wp-block-column.wtl-spalte-1 h2:after {
background-color: rgb(216, 139, 95);
content: '\a0';
flex-grow: 1;
height: 3px;
position: relative;
top: 1rem;margin-left: 20px;
margin-right: -14px;}
div.wp-block-columns.wtl-spalten:nth-child(odd) div.wp-block-column.wtl-spalte-1 p {
padding-left: 0px;
padding-right:40px;
text-align: right}
div.wp-block-columns.wtl-spalten:nth-child(odd) div.wp-block-column.wtl-spalte-1 h2{
padding-left: 0px;
padding-right:40px}
div.wp-block-columns.wtl-spalten:nth-child(odd) div.wp-block-column.wtl-spalte-1 h2:after {
display:none}
div.wp-block-columns.wtl-spalten:nth-child(odd) div.wp-block-column.wtl-spalte-1 h2:before {
background-color: rgb(216, 139, 95);
content: '\a0';
flex-grow: 1;
height: 3px;
position: relative;
top: 1rem;margin-right: 20px;margin-left: -14px;}
Bitte beachten Sie, dass für die Darstellung auf kleineren Devices die CSS-Anweisungen noch anzupassen sind.
Viel Spass beim Time-Line bauen.