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. Es variiert auch, ob Sie den klassischen Editor, den Flex-Modus oder Editor 2.0 verwenden. 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.
Wenn Sie einen widget per Drag & Drop auf Ihre Website ziehen, beachten Sie den Text in der blauen Platzierungsanzeige (nur klassischer Editor):
-
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.
Hinweis
Mit Editor 2.0 können widget nur zu bestehenden Spalten hinzugefügt werden, neue können nicht mit der Platzierung eines widgeterstellt werden.
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 (nur klassischer Editor).
-
Klicken Sie im Flex-Modus oder Editor 2.0 auf das Pluszeichen (+) im schwebenden Menü.
-
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.
Für widget mit Text können Sie die Textstile bearbeiten. Alle Änderungen, die Sie für einen bestimmten widget vornehmen, überschreiben den Designtextstil.
In Editor 2.0 wird die Textgröße, die in bestimmten widget (Texteditor, Kontaktformular, Navigation, Business, Click to E-Mail, Click to Call und Schaltfläche widget) festgelegt wurde, automatisch basierend auf der Bildschirmgröße angepasst. Auf desktopbeträgt die Textgröße 100 %, auf Tablets wird die Textgröße auf 85 % reduziert, und auf Mobilgeräten wird die Textgröße auf 80 % reduziert. Standardmäßig passt der Editor den Text jedoch nicht so an, dass er auf Mobilgeräten oder Tablets kleiner als 16 px ist. Und es passt sich nicht an eine Größe von mehr als 60 px auf Tablets oder 40 px auf Mobilgeräten an. Dadurch soll sichergestellt werden, dass der Text immer noch lesbar und im Verhältnis zu jeder Bildschirmgröße ist.
Wenn Sie die Textgröße pro Gerät überschreiben müssen, können Sie die Textgröße im Designtext anpassen und der Text wird pro Bildschirmgröße nicht verkleinert.
Im Folgenden finden Sie Beispiele dafür, wie die Textgröße in verschiedenen Szenarien angepasst wird:
-
Wenn Sie die Textgröße auf desktopauf 40 px festlegen, wird der Text automatisch auf 34 px auf Tablets und 32 px auf Mobilgeräten reduziert.
-
Wenn Sie die Textgröße auf dem desktopauf 16 px festlegen, wird sie auf einem Tablet nicht um 85 % auf 13 px oder auf Mobilgeräten um 80 % auf 12 px reduziert, da dies zu klein zum Lesen ist und unter dem Minimum von 16 px liegt. Stattdessen bleibt die Textgröße mit 16 px auf allen Bildschirmgrößen gleich.
-
Wenn Sie die Textgröße auf desktopauf 100 px einstellen, wird sie auf dem Tablet auf 60 px angepasst, da dies das Maximum ist, anstatt auf 85 px, was 85 % der desktop Textgröße entsprechen würde. Die mobile Textgröße wird ebenfalls auf 40 px angepasst, da dies das Maximum ist, anstatt 80 px, was 80 % der desktop Textgröße entsprechen würde.
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.
Abschnitt "Beispiellayout" auf der Registerkarte "Design " (Klassischer Editor):
Beispiel-Layout-Abschnitt im Design-Panel (Editor 2.0/Flex):
-
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 Schaltflächenstil erbt, der im Designfenster definiert ist. Darüber hinaus können Sie zwischen verschiedenen Schaltflächen-Layouts wählen, Änderungen am Schaltflächenstil (Breite, Höhe) und Schaltflächentext (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 das Tablet eingestellten 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.
Anmerkung
Diese Informationen gelten speziell für den Editor 2.0, der früher als All-Flex-Editor bezeichnet wurde. Informationen zum Identifizieren Ihrer aktuellen Editor-Version finden Sie unter Identifizieren der Editor-Version, die von Ihrer Website verwendet wird.
Behoben widget ermöglichen es Ihnen, ein widget jederzeit sichtbar zu halten, auch wenn ein Besucher auf der Seite nach unten scrollt, während er angeheftet widget an sein übergeordnetes Element (Spalte oder innere Spalte) angeheftet ist, solange sich das übergeordnete Element im Ansichtsfenster befindet.
widget kann im Abschnitt "Position " des Design-Panels als fest oder angeheftet festgelegt werden. Weitere Informationen zu Abschnitten der Gruppe "Design" finden Sie unter "Entwerfen mit Flex".
Feste widget ermöglichen es Ihnen, eine widget jederzeit sichtbar zu halten, auch wenn ein Besucher auf der Seite nach unten scrollt. Verwenden Sie feste widget , um wichtige Handlungsaufforderungen auf allen Website-Seiten fest, sichtbar und anklickbar zu halten.
So legen Sie eine widget fest:
-
Klicken Sie in der Seitenleiste auf widget. Suchen Sie nach dem gewünschten widget, klicken Sie darauf und ziehen Sie es auf die Leinwand.
-
Klicken Sie auf das widget , um das schwebende Menü zu öffnen, und wählen Sie Design bearbeiten aus. Dadurch wird das Design-Panel auf der rechten Seite des Bildschirms geöffnet. Scrollen Sie nach unten zum Abschnitt Position des Design-Fensters.
-
Klicken Sie auf das Menü Positionstyp, um es zu erweitern, und wählen Sie Fest aus. Diese Änderung gilt für alle Bildschirmgrößen, Sie können sie jedoch bei Bedarf überschreiben. Nachdem Sie die Position ausgewählt haben, können Sie nicht mehr von Fest zu Angeheftet wechseln. Dies liegt daran, dass der widget aus seinem ursprünglichen Container entfernt wird, wenn Sie Fest auswählen, sodass er beim Scrollen des Benutzers auf dem Bildschirm sichtbar bleibt. Wenn Sie von Fest zu Angeheftet wechseln würden, würde der Editor nicht wissen, in welchem Container die widget platziert werden soll. Wenn Sie wechseln müssen, müssen Sie zuerst wieder auf Standard wechseln. Der widget wird in den ersten Abschnitt im Ansichtsfenster verschoben.
-
Legen Sie im Menü Abstände über die Randeinstellungen fest, wo sich der widget im Viewport befindet. Dies ist besonders wichtig für die Konfiguration, wenn Sie zwei feste widget an derselben Position im Ansichtsfenster haben.
-
Um die widget nur auf der aktuellen Seite anzuzeigen, aktivieren Sie den Schalter Nur auf dieser Seite anzeigen.
Angeheftete widget bleiben so lange an ihrem übergeordneten Element (Spalte oder innere Spalte) hängen, wie sich das übergeordnete Element im Ansichtsfenster befindet. Wenn es mehr als einen angehefteten widget an derselben Position gibt, ist der widget oben der erste widget.
Hinweis
Angeheftet ist in erweiterten Rastern keine Option.
So heften Sie eine widgetan:
-
Klicken Sie in der Seitenleiste auf widget. Suchen Sie nach dem gewünschten widget, klicken Sie darauf und ziehen Sie es auf die Leinwand.
-
Klicken Sie auf das widget , um das schwebende Menü zu öffnen, und wählen Sie Design bearbeiten aus. Dadurch wird das Design-Panel auf der rechten Seite des Bildschirms geöffnet.
-
Scrollen Sie im Design-Panel nach unten zum Abschnitt Position.
-
Klicken Sie auf das Menü Positionstyp, um es zu erweitern, und wählen Sie Angeheftet aus. Dadurch wird sichergestellt, dass das widget an seinem übergeordneten Element (Spalte oder innere Spalte) festhält, solange sich das übergeordnete Element im Ansichtsfenster befindet. Diese Änderung gilt für alle Bildschirmgrößen, Sie können sie jedoch bei Bedarf überschreiben.
-
Konfigurieren Sie im Abschnitt Position den Versatz des widget. Der Versatz ist die Stelle, an der das widget beim Bildlauf angeheftet wird, bevor es das Ansichtsfenster verlässt. Wenn desktopeingestellt ist, haben andere Bildschirmgrößen die gleichen Werte, können jedoch bei Bedarf pro Bildschirmgröße überschrieben werden. Wenn die Option "Sticky Header" aktiviert ist, basiert der Offset auf der Standardhöhe der Kopfzeile. Wenn Sie einen Sticky Header nach dem Einstellungsoffset aktivieren, wird er nicht automatisch aktualisiert, und Sie müssen zurückgehen und den Offset manuell anpassen.
Wenn Sie das angeheftete widget zu irgendeinem Zeitpunkt in ein anderes übergeordnetes Element (Spalte oder innere Spalte) verschieben, bleiben die Einstellungen des Design-Panels, wie z. B. der Versatz, erhalten.
Anmerkung
Diese Informationen gelten speziell für den klassischen Editor und sind für Editor 2.0 (früher als All-Flex-Editor bezeichnet) nicht relevant. Informationen zum Identifizieren Ihrer aktuellen Editor-Version finden Sie unter Identifizieren der Editor-Version, die von Ihrer Website verwendet wird.
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 .
Informationen zu Ausrichtungsoptionen im Flex-Modus oder Editor 2.0 finden Sie unter Entwerfen mit Flex.
Wählt den Container aus, in dem sich der widget befindet, sodass Sie ihn leicht finden und bearbeiten können.
Klassischer Editor:Klicken Sie mit der rechten Maustaste auf das widget, klicken Sie auf Container auswählen und wählen Sie Spalte oder Zeilen.
Editor 2.0: Klicken Sie mit der rechten Maustaste auf das widget, klicken Sie auf Layer auswählen und wählen Sie den gewünschten Container aus.
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.
Alternativ können Sie in Editor 2.0 im schwebenden Menü auf das Symbol Duplizieren klicken.
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.
Im klassischen Editor Klicken Sie mit der rechten Maustaste auf das widget, klicken Sie auf Auf Gerät ausblenden, wählen Sie ein Gerät aus (in Editor 2.0 können Elemente nur auf Geräten ausgeblendet werden, die gerade bearbeitet werden).
Alternativ können in Editor 2.0 Elemente im Ebenenbedienfeld ausgeblendet werden. Klicken Sie in der Seitenleiste auf Ebenen, hover Sie über das gewünschte Element und klicken Sie auf das Augensymbol.
Wenn in der Seitenleiste ein Augensymbol () angezeigt wird, bedeutet dies, dass auf dem Gerät, das Sie gerade bearbeiten, ausgeblendete Elemente vorhanden sind (nur klassischer Editor). Um die versteckten Elemente anzuzeigen, klicken Sie auf das Augensymbol.
Wenn sich in Editor 2.0 auf dem Gerät, das Sie gerade bearbeiten, versteckte Elemente befinden, werden diese im Ebenenbedienfeld angezeigt. Klicken Sie im Seitenbereich auf Ebenen. Ausgeblendete Elemente werden deaktiviert mit einem Symbol mit durchgestrichenem Auge daneben angezeigt ().
Hinweis
Versteckte Inhalte können weiterhin im Code der Live-Website angezeigt werden (nach der Veröffentlichung/erneuten Veröffentlichung). Dies ist zu erwarten und auf die verwendete Technologie zurückzuführen. Ausführliche Informationen finden Sie unter Website-Leistung und -Optimierung.
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.