Komponenten

Die Demoseite für Komponenten

Subtitel

Box (Klein, Einspaltig)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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.

Subtidsaasdtel

zwe

dasadsasd


    Subtitel

    Drei Boxen (ohne Hintergrund)

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Subtitel

    Drei Boxen (ohne Hintergrund)

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Subtitel

    Drei Boxen (ohne Hintergrund)

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Subtitel

    Drei Boxen (mit Hintergrund)

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Subtitel

    Drei Boxen (mit Hintergrund)

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Subtitel

    Drei Boxen (mit Hintergrund)

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Subtitel

    Beispielinhalt

    Subtitel

    Hintergrund mit Farbverlauf zu Transparent

    Subtitel

    Beispielinhalt

    Um Einstellungen vorzunehmen, wähle das ganze Element «Cover» aus und mache folgende Dinge:

    • Bild ändern: Im kleinen Menü bei Cover-Element auf «Ersetzen» -> Mediathek oder hochladen
    • Position des Kreises: Optionentab -> Fokuspunkt auf Bild auswählen
    • Höhe für den gesamten Inhalt: Stylingtab ->
    • Grösse des Kreises: Stylingtab -> Ränder (nutze idealerweise vw oder vh)
    • Parallax-Effekt: Optionen-Tab -> Hintergrund Fixiert
    • Maus-Effekt mit Lupe deaktivieren (statisch): Optionen-Tab -> Bildwiederholung ein

    Ein Beispiel

    Kleine Kreis-Box

    Um die Interaktivität zu entfernen, markiere das Cover-Element und setzte in den Medieneinstellungen den Hintergrund wiedederholen auf ein.
    Die Position des Kreises via Fokuspunkt bestimmen, für die Grösse das Cover auswählen und im Styling-Täb die Rändergrösse einstellen, idealerweise als rem.

    Ein Beispiel

    Breite Kreis-Box

    Um die Interaktivität zu entfernen, markiere das Cover-Element und setzte in den Medieneinstellungen den Hintergrund wiedederholen auf ein.
    Die Position des Kreises via Fokuspunkt bestimmen, für die Grösse das Cover auswählen und im Styling-Täb die Rändergrösse einstellen, idealerweise als rem.

    Ein Beispiel

    Box Gesamte Breite mit Kreis

    Um die Interaktivität zu entfernen, markiere das Cover-Element und setzte in den Medieneinstellungen den Hintergrund wiedederholen auf ein.
    Die Position des Kreises via Fokuspunkt bestimmen, für die Grösse das Cover auswählen und im Styling-Täb die Rändergrösse einstellen, idealerweise als rem.

    Ein Beispiel

    Kreis: Parallax frei schwebend, statisch

    Um die Interaktivität hinzuzufügen, markiere das Cover-Element und setzte in den Medieneinstellungen den Hintergrund wiedederholen auf aus.
    Die Position des Kreises wird via Fokuspunkt fesgelegt, die Grösse kann auf dem Cover unter Styling -> Ränder angegeben werden (hier ideal in vh)

    Ein Beispiel

    Kreis: Parallax mit Rahmen

    Um die Interaktivität hinzuzufügen, markiere das Cover-Element und setzte in den Medieneinstellungen den Hintergrund wiedederholen auf aus.
    Die Position des Kreises wird via Fokuspunkt fesgelegt, die Grösse kann auf dem Cover unter Styling -> Ränder angegeben werden (hier ideal in vh)

    Ein Beispiel

    Frei schwebender Kreis

    Um die Interaktivität hinzuzufügen, markiere das Cover-Element und setzte in den Medieneinstellungen den Hintergrund wiedederholen auf aus.
    Positionierung des Kreises via Fokuspunkt, die Grösse kann auf dem Cover unter Styling -> Ränder angegeben werden (hier ideal in vh)

    Um Einstellungen vorzunehmen, wähle das ganze Element «Cover» aus und mache folgende Dinge:

    • Bild ändern: Im kleinen Menü bei Cover-Element auf «Ersetzen» -> Mediathek oder hochladen
    • Position des Kreises: Optionentab -> Fokuspunkt auf Bild auswählen
    • Höhe für den gesamten Inhalt: Stylingtab ->
    • Grösse des Kreises: Stylingtab -> Ränder (nutze idealerweise vw oder vh)
    • Parallax-Effekt: Optionen-Tab -> Hintergrund Fixiert
    • Maus-Effekt mit Lupe deaktivieren (statisch): Optionen-Tab -> Bildwiederholung ein

    Abfrage-Loop Linkboxen (Box mit Titel + Buttons)

    Ein Test

    sda

    Ein Test

    sda

    Ein Test

    sda

    Subtitel

    Linkbox Benutzerdefiniert ohne Abfrage