widget sind die wichtigsten Bausteine einer Website, mit denen Sie Inhalte effektiv hinzufügen und verwalten können. Sie dienen als wesentliche Elemente, die sowohl die Funktionalität als auch das Design Ihrer Website verbessern. Durch die Einbeziehung verschiedener Arten von widgetkönnen Sie ein dynamisches und ansprechendes Benutzererlebnis schaffen.
Es gibt mehrere Methoden, um widgethinzuzufügen. Im Folgenden erfahren Sie, wie Sie widgethinzufügen können:
So fügen Sie widget aus der widget Bibliothek hinzu:
-
Klicken Sie in der Seitenleiste auf widget, um die widget Bibliothek zu öffnen.
-
widget können über die Suchleiste oben oder durch Scrollen durch die verschiedenen Abschnitte in der Bibliothek gesucht werden.
-
-
Klicken Sie auf das widget und ziehen Sie es an die gewünschte Stelle auf der Website. Eine blaue Platzierungsanzeige wird angezeigt.
-
Der widget wird an der Stelle angezeigt, die durch den blauen Platzierungsindikator angezeigt wird.
Beachten Sie den Text in der blauen Einfügemaske, wenn Sie ein Widget per Drag-and-Drop zur Website hinzufügen.
-
Hier einfügen. Die widget wird zu einer vorhandenen Zeile oder Spalte hinzugefügt.
-
In neue Zeilen einfügen. Eine neue Zeile wird hinzugefügt und die widget wird darin platziert.
-
In neue Spalte einfügen. Eine neue Spalte wird hinzugefügt und die widget wird darin platziert.
So fügen Sie widget aus der Arbeitsfläche hinzu:
-
Klicken Sie mit der rechten Maustaste auf ein beliebiges widget und wählen Sie unten im Kontextmenü widget hinzufügen, um widget direkt unter dem aktuellen widget hinzuzufügen.
-
Wenn Sie mit der rechten Maustaste auf eine Spalte klicken, klicken Sie auf Hinzufügen, und wählen Sie unten widget hinzufügenaus
(Relevant fürClassic, Flex-Modus und Editor 2.0)
-
-
Wählen Sie eines der vier beliebtesten widget aus oder klicken Sie auf Mehr widget , um das vollständige Menü zu öffnen. Nachdem Sie das widgethinzugefügt haben, können Sie es wie gewohnt bearbeiten.
Sie können widget anpassen, um den Inhalt, das Erscheinungsbild und das Layout Ihrer Website anzupassen. Das Bearbeiten widget ermöglicht Ihnen eine bessere Kontrolle darüber, welche Funktionen Ihre Website hat und wie sich diese Funktionen verhalten.
Die meisten widget haben einen Bereich für ihren Inhalt sowie ihr Design.
Die meisten widget im Editor verfügen über Designoptionen, mit denen Sie das Erscheinungsbild der widgetfür Ihre Website anpassen können. Nicht alle widget haben die gleichen Optionen. Bei einigen widget können Sie beispielsweise keine inneren Abstände bearbeiten, bei anderen können Sie äußere Abstände nicht ändern.
Im Folgenden finden Sie gängige Design-Einstellungen.
Layout-Optionen sind in der Regel spezifisch für bestimmte widget. Um aus den für diesen widgetverfügbaren Layout-Optionen auszuwählen, klicken Sie auf das Layout, das im Designeditor angezeigt wird (oder klicken Sie auf den kleinen Pfeil daneben), um das Menü Layout auswählen zu öffnen. Um das ausgewählte Layout zu ändern, klicken Sie auf das Layout, das Sie stattdessen verwenden möchten, und es wird im widgetaktualisiert.
Beispiel-Layout-Abschnitt auf der Registerkarte Design :
-
Farbe. Klicken Sie auf das runde Farbsymbol rechts neben dem Namen Einstellungen, um die Farbauswahl zu öffnen und die Farbe zu ändern.
-
Grenze. Ändern Sie die Breite des Rahmens mit dem Schieberegler oder dem Textfeld. Klicken Sie auf das Zahnradsymbol (
), um weitere Optionen anzuzeigen.
-
Hintergrund. Verwenden Sie für dieses widget ein Hintergrundbild oder eine Hintergrundfarbe, indem Sie das Dialogfeld "Bilder auswählen und platzieren" oder eine Video-URL verwenden.
-
Breite und Höhe. Verwenden Sie den Schieberegler oder das Textfeld, um die Anzahl der Pixel zu ändern.
-
Abgerundete Ecken. Vergrößern oder verringern Sie die abgerundeten Ecken auf einem widget. Klicken Sie auf das Zahnradsymbol (
-
Schatten. Schalten Sie einen Schatten für diese widgetein oder aus.
-
Text. Legen Sie verschiedene Aspekte des Textes fest, z. B. Schriftartenfamilie, Schriftartenstärke usw.
widget , die eine Schaltfläche enthalten, bieten die Möglichkeit, auszuwählen, ob die Schaltfläche den primären oder sekundären Knopfe-Stil erbt, der im Design-Panel definiert ist. Darüber hinaus können Sie zwischen den verschiedenen Button-Layouts wählen, Änderungen am Button-Stil (Breite, Höhe) und Button-Text (Schriftart, Textgröße) vornehmen sowie die inneren und äußeren Abstände anpassen.
Alle Änderungen, die Sie im Designeditor vornehmen, überschreiben die Stile, die auf der Ebene des Themas Schaltfläche festgelegt wurden. Wenn Sie zum Theme-Button-Stil zurückkehren müssen, klicken Sie auf Auf Theme-Stil zurücksetzen.
-
Wenn Sie Änderungen an der Schaltfläche vornehmen (dadurch werden die auf der Thema-Schaltflächenebene eingestellten Stile außer Kraft gesetzt), wird auf dem primären oder sekundären Schaltflächenstil weiterhin ein Kontrollkästchen angezeigt.
-
Wenn Sie auf einen Schaltflächenstil klicken, der nicht über das Kontrollkästchen verfügt, wird die Schaltfläche auf den Stil zurückgesetzt, der auf der Thema-Schaltflächenebene festgelegt wurde.
Ändern Sie die inneren Abstände (Abstände innerhalb der widget Kanten) und die äußeren Abstände (Abstände außerhalb der widget Kanten). Jede Zahl im äußeren Feld legt die äußeren Abstände für ihre eigene Seite (oben, unten, links oder rechts) fest, und jede Zahl in der inneren Box legt die inneren Abstände für ihre eigene Seite (oben, unten, links oder rechts) fest.
Detaillierte Informationen finden Sie unter Äußere und Innere Abstände
Mit Eingangsanimationen können Sie widget und Seiten widget animieren, wenn sie zum ersten Mal auf Ihrer Website geladen werden. Bewegung und Interaktivität machen Ihre Website einprägsamer und können die Bereiche hervorheben, auf die sich die Besucher konzentrieren sollen, wie z. B. eine Telefonnummer oder eine Kontakt-Schaltfläche.
Darüber hinaus können Sie mit den Scroll-Einstellungen steuern, wo die Animation auf dem Bildschirm beginnt und endet.
So fügen Sie eine Animation hinzu:
-
Navigieren Sie zum Abschnitt Animation .
-
Wählen Sie einen Auslöser ( Eingang oder Scroll) und eine Animation aus.
-
(Fakultativ) Passen Sie die Animation an (z. B. die Wegbeschreibung, aus der die Animation eingegeben wird).
Beispiel für ein Animations-Setup:
Um die Animation zurückzusetzen, klicken Sie auf Auf Standard zurücksetzen.
Wenn Sie eine Bildlaufanimation verwenden, können Sie in der Seitenleiste auf Animation pausieren () klicken, um alle Animationen anzuhalten, während Sie sich im Bearbeitungsmodus befinden. Die Animationen sind weiterhin im Vorschaumodus und auf der Live-Website aktiv.
Hinweis
Die für Desktop und Tablet festgelegten Animationen sind verknüpft und identisch. Bei Mobilgeräten ist dies jedoch anders, und für Desktop/Tablet konfigurierte Animationen gelten dort nicht.
Beachten Sie beim Hinzufügen von Animationen Folgendes:
-
Zu viele Animationen können Benutzer verwirren oder ablenken, daher sollten sie sparsam eingesetzt werden.
-
Wenn Sie eine Animation entfernen, denken Sie daran, dass Animationen sowohl auf Zeilen als auch auf widgetangewendet werden können, sodass die Animation, die Sie sehen, möglicherweise an einem unerwarteten Ort hinzugefügt wurde.
So entfernen Sie Animationen:
-
Navigieren Sie zum Abschnitt Animation .
-
Klicken Sie in das Dropdown-Menü Animation und wählen Sie Keine.
Hinweis
Wenn ein Element nicht über eine Animation verfügt, kann es auf einen der Container angewendet werden, in denen sich das Element befindet. Es wird empfohlen, alle Container auf mögliche Animationen zu überprüfen.
Legen Sie fest, ob das widget links, rechts oder in der Mitte des Bereichs ausgerichtet wird.
Einige widget verhalten sich in verschiedenen Ansichten sehr unterschiedlich. Überprüfen Sie, wie Ihre widget in jeder Ansicht angezeigt wird, nachdem Sie sie hinzugefügt haben, um sicherzustellen, dass sie korrekt angezeigt wird.
Um die Ausrichtung festzulegen, klicken Sie mit der rechten Maustaste auf das widgetund klicken Sie auf das Symbol Linksbündig, Zentriert oder Rechtsbündig .
Ein widget kann kopiert und an einem anderen Speicherort eingefügt werden. Die Option "Einfügen" wird nur angezeigt, wenn Sie über ein kopiertes widget verfügen.
Klicken Sie mit der rechten Maustaste auf das widget, und klicken Sie auf Kopieren oder Einfügen.
Warnung
Wir raten davon ab, Kontaktformular zu kopieren und einzufügen, da dies in der Regel zu Problemen im duplizierten Kontaktformular führt.
Mit der Funktion „Auf Gerät ausblenden“ können Sie die Inhalte abhängig vom jeweiligen Gerät anpassen, mit dem der Besucher auf Ihre Website zugreift. Sie können beispielsweise das Widget „Anruf per Mausklick“ für Mobiltelefonbenutzer oder ein Kontaktformular für Desktopbenutzer anzeigen.
widget , die durch die Funktion "Auf Gerät ausblenden " ausgeblendet werden, werden nicht gelöscht.
Klicken Sie mit der rechten Maustaste auf das widget, klicken Sie auf Auf Gerät ausblenden und wählen Sie ein Gerät aus .
Wenn in der Seitenleiste ein Augensymbol () vorhanden ist, bedeutet dies, dass auf dem Gerät, das Sie gerade bearbeiten, ausgeblendete Elemente vorhanden sind. Um die versteckten Elemente anzuzeigen, klicken Sie auf das Augensymbol.
Mit Anker-Links können Sie Besucher zu einem bestimmten Abschnitt der Seite leiten, was es ihnen erleichtert, auf einer längeren Seite oder zu einem bestimmten Abschnitt, auf den Sie verweisen möchten, von Ort zu Ort zu gelangen. Weitere Informationen zu Ankern finden Sie unter Canvas-Aktionen und -Optionen.
Klicken Sie mit der rechten Maustaste auf das widget, und klicken Sie auf Als Anker festlegen.