Abstand / Trenner

Owned by Sebastian Meyer
Last updated: Jan 19, 2023 by Jenny Maiwald (Unlicensed)
2 min read

Widget-Beispiel

Ein Beispiel dieses Widgets könnt ihr euch auf folgender Landingpage genauer ansehen: https://showcase2.easytemplate360.de/Widget-Abstand/Trenner

Beschreibung

Dieses simple Widget bietet dir die Möglichkeit, Abstand und optional eine Trennlinie zwischen anderen Widgets einzufügen.

Das Widget steht dir ab Plugin-Version 2.0.10 und Template-Version 2.0.9 zur Verfügung.

  • In den Einstellungen kannst Du die Ausrichtung bestimmen

  • Es ist möglich, dass die horizontale Trennlinie bis zum Rand des Bereichs des Widgets gehen soll

  • Du kannst die Breite der Trennlinie bestimmen.
    In diesem Widget sind wir mit der Eingabe der Werte flexibler als bisher.
    WICHTIG:
    Bei der Eingabe der Werte muss darauf geachtet werden, dass valide CSS-Werte mit Einheit drin stehen.
    Sprich eine Eingabe in der Breite von 80 bewirkt nichts. Es müsste dann z.B. 80% eingegeben werden, damit die Trennlinie 80% Ihrer ursprünglichen Breite anzeigt.
    Ihr könnte aber auch die Breite direkt in Pixel angeben z.B. 100px

  • Du kannst die Höhe der Trennlinie bestimmen. Hier gilt das gleiche zu beachten, wie bei der Eingabe der Breite. Hier sind die gültigen Einheiten vh und px

  • Die Trennlinie kann eine individuelle Farbe haben.

Erklärung zu den Standardwerten:

Größe = Contentbreite
Horizontale Ausrichtung Trennlinie = zentriert

Die Breite der Trennlinie richtet sich nach der Breite des Widgets

Höhe der Trennlinie für:
Smartphone hochkant = 1px
Smartphone quer/Tablet hochkant = 1px
Tablet quer = 1px
Laptop = 1px
Desktop = 1px

 

Eine Beispielansicht im Frontend, Contentbreite

Dazu die Ansicht im Backend, Contentbreite

  • Trennline wird nur über die Contentbreite angezeigt (hier zur Veranschaulichung in rot)

  • Damit die Trennlinie angezeigt wird, muss diese aktiviert sein.

  • Als Höhe der Trennlinie haben wir hier keinen Wert gesetzt, im Standard ist dieser automatisch 1px.

Eine Beispielansicht im Frontend, “volle Breite”

Dazu die Ansicht im Backend, “volle Breite”

  • Trennline wird über die komplette Seite angezeigt (hier zur Veranschaulichung in rot)

  • zum Bsp. um eine optische Unterteilung der Webseite zu gestalten

  • Als Höhe der Trennlinie haben wir hier 3px eingetragen, dadurch wird die Trennlinie dicker.