Widget „Form"

Widget-Kategorien: Medien

Das „Form"-Widget ist ein Gestaltungswerkzeug für alles, was ins Auge fallen soll: Buttons und Banner, Hinweise auf Auszeichnungen oder hervorgehobene Sonderpreise. Du fügst Bild, farbigen Hintergrund und Text hinzu, bestimmst die Größe und ergänzt Schatten. Platzieren kannst du das Widget an jeder beliebigen Stelle, ganz nach Bedarf.

Informationen zum Hinzufügen von Widgets findest du unter „Add Widgets".

Inhalte bearbeiten

Klicke auf das Element, um das schwebende Menü zu öffnen, und klicke dann auf die Option zum Bearbeiten der Inhalte.

1. Wähle eine Form aus.

2. Um der Form einen Link hinzuzufügen, klicke auf Link hinzufügen (mehr zu Links findest du unter „Link Picker").

3. Gib einen Titel und eine Beschreibung für die Form ein. Um Titel und Beschreibung auszublenden, klicke auf das Augen-Symbol.

   Hinweis: Das lange Textfeld bietet verschiedene Optionen zur Textformatierung, etwa Kursiv, Fett oder Unterstreichen.

4. Gib einen Alt-Text und einen Tooltip für die Form ein.

Design bearbeiten

Klicke auf das Element, um das schwebende Menü zu öffnen, und klicke dann auf die Option zum Bearbeiten des Designs.

1. Um von einem farbigen Hintergrund zu einem Bildhintergrund zu wechseln, klicke auf Layout.

   • Um das Standardbild zu ändern, wechsle zum Tab Stil und wähle den Tab Bild.

   Hinweis: Ist Proportionen beibehalten deaktiviert, werden die Bildproportionen an das Widget angepasst.

2. Stelle Breite, Höhe und Hover-Effekt (für Desktop) im Tab Stil ein.

3. Um das Widget über ein Bild oder ein anderes Widget zu legen oder es überlappen zu lassen, klicke auf den Tab Abstand und stelle die Abstände auf einen negativen Wert ein (zum Beispiel -50px).

4. Um das Widget zu einem schwebenden Widget zu machen, aktiviere den Schalter Schwebend und wähle eine Position für das Widget. Damit das schwebende Widget nur auf der aktuellen Seite erscheint, aktiviere den Schalter Nur auf dieser Seite anzeigen.

Achte darauf, dass deine Design-Einstellungen pro Gerät korrekt sind. Einstellungen wie Abstände (des gesamten Widgets und einzelner Elemente), Breite und mehr werden pro Gerät festgelegt.

Informationen zu Design-Optionen, die nicht speziell zu diesem Widget gehören (zum Beispiel Layout, Stil oder Abstände), findest du unter „Widget Design".

Beispiele

Ein interessantes Layout mit einer amorphen Form erstellen

So erstellst du ein interessantes Layout mit einer amorphen Form:

1. Erstelle eine Zeile mit zwei Spalten.
2. Wähle eine amorphe Form und füge sie in die rechte Spalte ein.
3. Mach die Form so groß wie die Spalte.
4. Wähle beim Bearbeiten des Designs das Layout mit dem Hintergrundbild und ersetze das Bild durch das gewünschte.

Eine Form als Button verwenden

So verwendest du eine Form als Button, indem du einen Link und einen Hover-Effekt hinzufügst:

1. Wähle die Kreis-Form und füge einen Titel und eine Beschreibung hinzu.
2. Wähle Farben für die Form und die Texte.
3. Um die Form an die Ecke eines Bildes zu setzen, verwende einen negativen Abstand an der linken Seite der Form (Spacing > Margin > -50px linker & oberer Abstand).

Einen bestimmten Tarif oder Service hervorheben

So hebst du mit Formen einen bestimmten Tarif oder Service hervor:

1. Wähle die Flaggen-Form und füge einen Titel und eine kurze Beschreibung hinzu.
2. Deaktiviere Proportionen beibehalten, damit du nur die Breite anpassen kannst.
3. Wähle Farben für die Form und die Texte.
4. Um die Form so zu platzieren, dass sie über den oberen Rand einer Spalte ragt, verwende einen negativen oberen Abstand (Spacing > Margin > -30px oberer Abstand).

Einen Scroll-Button erstellen

So erstellst du mit einer Form einen Scroll-Button:

1. Wähle die Rauten-Form und füge einen Titel hinzu.
2. Deaktiviere Proportionen beibehalten, damit du nur die Breite anpassen kannst.
3. Wähle Farben für die Form und die Texte.
4. Um die Form über ein Bild zu legen, verwende einen negativen oberen Abstand (Spacing > Margin > -50px oberer Abstand).