Baukasten

Die folgenden Komponenten unseres Basisbaukastens sind Bestandteil der Startinstallation von «Quark» und «Bootstrap4», den beiden GRAV-«Themes», mit denen wir besonders gute Erfahrungen gemacht haben.

Bei einem «Theme» handelt es sich um eine Zusammenstellung von grafischen Elementen, die das Aussehen der Benutzeroberfläche von Webseiten bestimmen und die sich den eigenen Bedürfnissen anpassen lassen.

Bei beiden «Themes» bilden ausgereifte und vielseitige CSS-Frameworks die Grundlage, womit Komponenten wie Akkordeons, Cards, Galerien usw. «out-of-the-Box» zur Verfügung stehen und gewährleistet ist, dass sich deine zukünftige Webseite «responsiv» verhält, also flexibel an die Grösse des Browserfensters anpasst.
Übrigens läuft diese Webseite mit «Quark».


Komponenten

«Zweispalter» | «Cards» | «Akkordeon» | «Galerie»


Komponente «Zweispalter»

«Responsiver» Zweispalter mit Text und Bild

Text links, Bild rechts

In dieser Komponente stehen dir zwei Spalten zur Verfügung. In die eine kannst du frei formatierbaren Text eingeben, in der anderen erscheint ein Bild, das du auf die Seite hochgeladen hast. Du kannst wählen, ob das Bild in der rechten oder linken Spalte angezeigt werden soll. Auf kleinen Bildschirmen werden die beiden Spalten übereinander angezeigt, wobei – sinnvollerweise – immer zuerst der Text erscheint.
Zuätzlich kannst du bei Bedarf eine zweispaltige Überschrift eingeben, deren Grösse du selber bestimmen kannst (h1-h4).

Text rechts, Bild links

In dieser Komponente stehen dir zwei Spalten zur Verfügung. In die eine kannst du frei formatierbaren Text eingeben, in der anderen erscheint ein Bild, das du auf die Seite hochgeladen hast. Du kannst wählen, ob das Bild in der rechten oder linken Spalte angezeigt werden soll. Auf kleinen Bildschirmen werden die beiden Spalten übereinander angezeigt, wobei immer zuerst der Text erscheint.
Zuätzlich kannst du bei Bedarf eine zweispaltige Überschrift eingeben, deren Grösse du selber bestimmen kannst (h1-h4).

nach oben


Komponente «Cards»
Kärtchen 1
Kurz und bündig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Kärtchen 2
Auf einen Blick
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Kärtchen 3
Auf den Punkt gebracht
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

nach oben


Komponente «Akkordeon»
Variante 1
Mit dem ersten Klick öffnet sich das aufklappbare Feld und schliesst sich mit dem nächsten Klick wieder. Alle aufklappbaren Felder können gleichzeitig geöffnet sein.

Was ist ein «Akkordeon»?

Unter einem Akkordeon (engl. accordion) versteht man einen Aufklappmechanismus, der nur einen Teilbereich der Seite darstellt und erst durch die Interaktion des Benutzers (click, touch) weitere Teilbereiche aufschiebt und somit sichtbar macht.

Welche Inhalte können im unsichtbaren Bereich eingegeben werden?

Möglich ist fast alles.

Geordnete und ungeordnete Listen
  1. Erster Punkt
  2. Zweiter Punkt

oder ungeordnet:

  • Äpfel
  • Birnen
Kann ich auch ein Bild einfügen?

Ja, auch Bilder können im aufklappbaren Bereich eingefügt werden.

hero

Was gibt es sonst noch zu sagen?

Je nachdem, mit welchem Ausgangs-«Theme» wir arbeiten, sind mehr oder weniger ausgefeilte Varianten des Akkordeons – und der anderen Module – möglich. Am besten sprichst du mit uns darüber.

Variante 2
Mit dem ersten Klick öffnet sich das aufklappbare Feld und schliesst sich mit dem Klick auf ein geschlossenes Feld wieder. Jeweils nur ein aufklappbares Felder kann geöffnet sein.

nach oben


Komponente «Galerie»

Zusätzliche Plugins: Shortcode Core | Shortcode Gallery++

001 Blick von der Belalp auf das Matterhorn 002 Unterwegs von der Belalp auf die Riederalp 003 Hängebrücke Belalp-Riederalp 004 Massaschlucht 005 Hängebrücke Belalp-Riederalp 006 Grünsee 007 Blick auf den Aletschgletscher 008 Aletschgletscher 009 Schwarznasenschaf 010 Massaschlucht

nach oben