- Benutzerdefiniertes CSS hinzufügen
- Ihren CSS-Code auf Widget-Elemente anwenden
- JS-Code hinzufügen
- Code-Ansicht ändern
Beispielanwendungsfall
Ein häufiger Anwendungsfall für benutzerdefinierten Code besteht darin, mehrmals denselben Stil auf Widget-Elemente anzuwenden, anstatt Stileigenschaften manuell auf jedem Element einzurichten. Wenn Sie ein nicht-technischer Benutzer sind, bitten Sie einen Ihrer Entwickler, vordefinierte CSS-Klassen für Sie zu erstellen.Benutzerdefinierten CSS-Code hinzufügen
- Klicken Sie im linken Menü auf Benutzerdefinierter Code. Die Seite öffnet sich mit ausgewählter Option Benutzerdefiniertes CSS.
- Fügen Sie Ihren CSS-Code im Code-Editor hinzu.
CSS-Code auf Widget-Elemente anwenden
- Öffnen Sie den Bereich Design.
- Wählen Sie ein Element aus. Dieses Element wird gemäß einer der Klassen gestaltet, die Sie im Code-Editor erstellt haben.
- Scrollen Sie nach unten und klappen Sie den Abschnitt Css und Klassen aus.
- Fügen Sie den Namen Ihrer Klasse im Feld Element ClassName hinzu oder in Container ClassName, wenn Sie diese Klasse auf das übergeordnete Element anwenden möchten.
Ihr ausgewähltes Element, das gemäß Ihrem benutzerdefinierten Code gestaltet ist, erscheint nicht im rechten Vorschaubereich. Sie müssen auf das Kamera-Symbol klicken, um Ihre Änderungen zu sehen.
JS-Code hinzufügen
Durch das Hinzufügen von JS-Code können Sie ein benutzerdefiniertes Skript auf Anforderung in Ihrem Widget ausführen.- Klicken Sie in der linken Seitenleiste auf Benutzerdefinierter Code.
- Klicken Sie auf Benutzerdefiniertes JS.
- Fügen Sie Ihren JS-Code im Code-Editor hinzu.
Um die Ausführung Ihres Skripts zu überprüfen, klicken Sie auf das Kamera-Symbol.
Code-Ansicht ändern
Wenn Sie sowohl mit CSS- als auch mit JS-Code arbeiten, möchten Sie möglicherweise beide Codes gleichzeitig lesen. So fügen Sie mehrere Code-Editoren hinzu:- Klicken Sie auf das Symbol Panel hinzufügen in der oberen rechten Ecke über dem Code-Editor.
- Skalieren Sie jedes Panel manuell nach Ihren Bedürfnissen.