Form-Widgets

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.

So fügen Sie das Widget hinzu:

  1. Klicken Sie in der linken Seitenleiste auf Widgets.
  2. Klicken Sie auf das Widget „Form“ und ziehen Sie es auf Ihre Website.

Mehr zum Hinzufügen von Widgets zu Ihrer Website erfahren Sie unter Widgets hinzufügen.

Inhalts-Editor

So können Sie den Inhaltseditor aufrufen:

  1. Klicken Sie mit der rechten Maustaste auf das Widget und dann auf Inhalt bearbeiten.
  2. Wählen Sie eine Form aus.
  3. Klicken Sie auf Link hinzufügen, um einen Link zur Form hinzuzufügen.
  4. Geben Sie einen Titel und eine Beschreibung für die Form ein. Wenn Sie den Titel und die Beschreibung ausblenden möchten, klicken Sie auf das Augensymbol ().
  5. Geben Sie Alternativtext und einen Tooltip für die Form ein.

Design-Editor

So rufen Sie den Designeditor auf:

  1. Klicken Sie mit der rechten Maustaste auf das Widget und dann auf Design bearbeiten.
  2. Klicken Sie auf Layout, um ein anderes Layout für die Form auszuwählen.
  3. Um das Widget auf oder über einem Bild oder anderen Widget zu platzieren, klicken Sie auf die Registerkarte Abstände und geben Sie für die Außenabstände eine negative Zahl ein (z. B. -50 Pixel).

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. Weitere Informationen finden Sie unter Bearbeiten nach Gerät.

Informationen über Designoptionen, die nicht spezifisch für dieses Widget eingestellt werden (z. B. Layout, Stil oder Abstände), finden Sie unter Widget-Design.

Beispiele

Eine Form für den Header erstellen

So erstellen Sie ein Form für den Header:

  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.

Eine Form als Schaltfläche verwenden

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).

Einen bestimmten Tarif oder Service hervorheben

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).

Eine Scroll-Schaltfläche erstellen

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).