de de de de fr en de de de en de de sv de de la de sv de de la de sv de de la hbs_lat de de de de de de de de de ru de de de hbs_lat de de de de de de de de de de fa en sv en de de de de fr en de
Gestaltungsvorlagen kombinieren und gleichzeitig Markdown einbinden | gravik.ch
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Auf der Webseite von Spectre-CSS, dem Basis-Framework von «Quark», können die notwendigen Gestaltungsvorlagen kopiert und anschliessend miteinander kombiniert werden.
Kopiervorlage 1: Dreispaltiges Layout
Kopiervorlage 2: Code für die «Cards»
In der Administrationsumgebung auf Einstellungen/System/Markdown wechseln (mehr zum Thema «Markdown und HTML»)
«Markdown Extra» aktivieren (auf «Ja» klicken, speichern)
Eine neue Seite («Default») oder ein neues Blog-Item hinzufügen
Den Code von Kopiervorlage 1 einfügen
Anpassungen vornehmen (nur auf kleinen Bildschirmen einspaltig, sonst dreispaltig)
Platzhalter für den Code der ersten «Card»     Platzhalter für den Code der zweiten «Card»     Platzhalter für den Code der dritten «Card»
«Cards»-Platzhalter durch Kopiervorlage 2 ersetzen
...   ...      ...      ...                     ...   ...      ...      ...                     ...   ...      ...      ...
pb-2 in  : Cards-Abstand bei einspaltiger Anzeige
markdown="1": Im betreffenden DIV Markdown erlauben
![bild1](bild1.jpg "Bild 1") Bild mit Markdown einbinden -> direkt nach dem DIV eingeben
[weiter](./): Link des Buttons mit Markdown erzeugen, z.B. [weiter](../../home), [https://getgrav.org](https://getgrav.org?target=_blank) -> direkt nach dem DIV eingeben
Code mit allen Anpassungen -> kann kopiert und direkt verwendet werden:
![bild1](bild1.jpg "Bild 1")      Überschrift «Card 1»   Untertitel 1      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.      [weiter](./)             ![bild2](bild2.jpg "Bild 2")      Überschrift «Card 2»   Untertitel 2      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.      [mehr](./)             ![bild4](bild4.jpg "Bild 3")      Überschrift «Card 3»   Untertitel 3      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.      [>>>](./)
Screenshot mit Erklärungen zu den Anpassungen
vorheriger Beitrag nächster Beitrag
gravik.ch | Altenbergstrasse 8 | 3013 Bern | Mail