widget: Form

widget Kategorien: Medien

Das Widget „Form“ ist ein Design-Tool, mit dem wichtige Mitteilungen hervorgehoben werden können. Erstellen Sie Schaltflächen und Banner, heben Sie Auszeichnungen hervor und weisen Sie auf heruntergesetzte Preise hin. Sie können ein Bild, einen farbigen Hintergrund und Text hinzufügen, die Größe festlegen und Schatten einsetzen. Das Widget lässt sich an jeder Stelle platzieren und bietet somit ein Höchstmaß an Flexibilität.

Inhaltseditor

  1. Wählen Sie eine Form aus.

  2. Wenn Sie dem Shape einen Hyperlink hinzufügen möchten, klicken Sie auf Link hinzufügen (weitere Informationen zu Hyperlinks finden Sie unter Linkauswahl.

  3. Geben Sie einen Titel und eine Beschreibung für das Shape ein. Um den Titel und die Beschreibung auszublenden, klicken Sie auf das Augensymbol (24517315481495-eye_icon.png).

    Anmerkung

    Das Feld für langen Text bietet verschiedene Optionen für die Textformatierung, z. B. Kursivschrift, Fettdruck oder Unterstreichung von Text.

  4. Geben Sie den Alt-Text (Alternativtext) und einen Tooltip für die Form ein.

Designeditor

  1. Um von einer Farbe zu einem Bildhintergrund zu wechseln, klicken Sie auf Layout .

    • Um das Standardbild zu ändern, navigieren Sie zur Registerkarte Stil und wählen Sie die Registerkarte Bild aus.

      Hinweis

      Wenn die Option "Proportionen beibehalten" ausgeschaltet ist, werden die Proportionen des Bildes an die widgetangepasst.

  2. Passen Sie die Breite, Höhe und Hover-Effekte (für desktop) auf der Registerkarte Stil an.

  3. Wenn Sie den widget über einem Bild oder einem anderen widgetplatzieren oder überlappen möchten, klicken Sie auf die Registerkarte Abstände und konfigurieren Sie die Ränder als negative Zahl (z. B. -50 Pixel).

  4. Um das Symbol zu einem schwebenden widgetzu machen, aktivieren Sie den Schalter Schwebend und wählen Sie eine Position für das widgetaus. Um die schwebende widget nur auf der aktuellen Seite anzuzeigen, aktivieren Sie den Schalter Nur auf dieser Seite anzeigen .

Stellen Sie sicher, dass die von Ihnen definierten Design-Einstellungen für das jeweilige Gerät korrekt sind. Einstellungen wie Abstände (des gesamten Widgets und der einzelnen Elemente), Breite und mehr werden je nach Gerät definiert.

Beispiele

Erstellen eines interessanten Layouts mit einer amorphen Form

So erstellen Sie ein interessantes Layout mit einer amorphen Form:

  1. Erstellen Sie eine Zeile mit zwei Spalten.

  2. Wählen Sie eine amorphe Form und fügen Sie diese der rechten Spalte hinzu.

  3. Vergrößern Sie die Form, damit sie so groß ist wie die Spalte.

  4. Wählen Sie im Designeditor das Layout mit dem Hintergrundbild aus und ersetzen Sie das Bild durch das gewünschte Bild.

22384747496983-shapewidget2_en-us.jpg
Verwenden einer Form als Schaltfläche

So verwenden Sie eine Form als Schaltfläche mit einem Link und einem Hover-Effekt:

  1. Wählen Sie die Kreisform und fügen Sie einen Titel und eine Beschreibung hinzu.

  2. Wählen Sie die Farben für die Form und die Texte aus.

  3. Um die Form in der Ecke eines Bildes zu positionieren, verwenden Sie auf der linken Seite der Form einen negativen Außenabstand (Abstände > Außenabstand > -50 Pixel für den linken und oberen Außenabstand).

22384799701783-shapewidget3_en-us.jpg
Markieren Sie einen bestimmten Tarif oder eine bestimmte Dienstleistung

So verwenden Sie Formen, um einen bestimmten Tarif oder Service hervorzuheben:

  1. Wählen Sie die Flaggenform und fügen Sie einen Titel und eine kurze Beschreibung hinzu.

  2. Deaktivieren Sie die Option Proportionen beibehalten , damit Sie nur die Breite anpassen können.

  3. Wählen Sie die Farben für die Form und die Texte aus.

  4. Um die Form so zu positionieren, dass sie den oberen Rand einer Spalte überlappt, verwenden Sie einen negativen oberen Außenabstand (Abstände > Außenabstand > -30 Pixel für den oberen Außenabstand).

22384747643031-shapewidget4_en-us.jpg
Erstellen einer Scroll-Schaltfläche

So verwenden Sie eine Form, um eine Scroll-Schaltfläche zu erstellen:

  1. Wählen Sie die Rautenform und fügen Sie einen Titel hinzu.

  2. Deaktivieren Sie die Option Proportionen beibehalten , damit Sie nur die Breite anpassen können.

  3. Wählen Sie die Farben für die Form und die Texte aus.

  4. Um die Form auf einem Bild zu positionieren, verwenden Sie einen negativen oberen Außenabstand (Abstände > Außenabstand > -50 Pixel für den oberen Außenabstand).

22384816667031-shapewidget5_en-us.jpg