Mit Custom CSS können Sie Ihrer Website benutzerdefinierten Code hinzufügen, um ihr ein einzigartiges Aussehen zu verleihen.
Was ist CSS?
CSS (Cascading Style Sheets) ist eine Methode zum Hinzufügen von Stilen zu Webseiten, wie Farben, Schriftarten, Abstände und Positionen. Eine der großartigen Eigenschaften des Elementor-Editors ist, dass Sie viele dieser Stilelemente ohne CSS-Kenntnisse hinzufügen können. Elementor Pro ermöglicht es jedoch auch Webentwicklern mit CSS-Kenntnissen, benutzerdefinierte CSS hinzuzufügen, um ihren Seiten ein einzigartiges Aussehen zu verleihen.
Wo kann ich mit Elementor benutzerdefinierte CSS hinzufügen?
Der Elementor-Editor ermöglicht es Ihnen, benutzerdefinierte CSS auf drei verschiedenen Ebenen hinzuzufügen:
- Site Level: Das Hinzufügen von benutzerdefiniertem CSS wirkt sich auf Ihre gesamte Website aus!
- Seitenebene: Wenn Sie hier benutzerdefinierte CSS hinzufügen, wirkt sich dies nur auf bestimmte Seiten aus.
- Elementebene: Das Hinzufügen von benutzerdefiniertem CSS hier wirkt sich nur auf bestimmte Elemente aus.
Benutzerdefinierte CSS-Beispiele
| Wo ist der Code einzugeben? | Diesen Code einfügen | Die Wirkung von CSS wird sein |
| Website-EinstellungenKnetbrett | Körper { | Einen roten Hintergrund für alle Seiten der Website bereitstellen |
| Seite einrichtenKnetbrett | Körper { | Seitenhintergrund blau. zur Kenntnis nehmenDieses CSS auf Seitenebene hat Vorrang vor allen CSS-Einstellungen auf Site-Ebene. Selbst wenn Sie also das obige Site-CSS verwenden, hat diese Seite immer noch einen blauen Hintergrund! |
| elementarRegisterkarte "Erweitert | #my-Element { | Sie basiert aufCSS-ID "my-element" für das spezifische Element, auf das abgezielt wird, und stellt einen grünen Hintergrund dafür bereit. Achtung!Dieses CSS überschreibt jegliches CSS auf Site- oder Seitenebene, um einen grünen Hintergrund für Elemente bereitzustellen. Selbst wenn Sie also das obige Site- und/oder Seiten-CSS verwenden, hat diese Seite immer noch einen blauen Hintergrund. |
Hinzufügen von benutzerdefiniertem CSS
Hinzufügen von benutzerdefiniertem CSS zu Elementor
1. durch Klicken auf oder aus dem MenüNavigator (auf einem Computerbildschirm)um es auszuwählen, indem Sie ein Element in der Liste
2. im Panel klicken Sie auf"Fortgeschritten"Tab.
3. scrollen Sie nach unten und erweitern Sie Custom CSS.
4 Geben Sie den CSS-Code in das geöffnete Textfeld ein.
Hinzufügen von benutzerdefiniertem CSS zu einer Seite
1. gehen Sie zum Bedienfeld Seite einrichten.
2. klicken Siehohes NiveauTab.
3. geben Sie den CSS-Code in das geöffnete Textfeld ein.
Hinzufügen von benutzerdefiniertem CSS zu einer Website
1. gehen Sie zum Panel Website-Einstellungen.
2. aus der Liste auswählenBenutzerdefiniertes CSS.
3. geben Sie den CSS-Code in das geöffnete Textfeld ein.
Wie man benutzerdefinierte CSS mit Elementor AI hinzufügt
Elementor AI hilft Ihnen nicht nur beim Verfassen von Website-Inhalten, sondern ermöglicht es Pro-Nutzern auch, benutzerdefinierte CSS-Stile zu Seiten und Elementen hinzuzufügen. Pro-Nutzer können auch benutzerdefinierten Code zu Websites hinzufügen. Alle Benutzer können Elementor AI verwenden, um HTML-Code zu Seiten über das HTML-Widget hinzuzufügen.
Wenn Sie benutzerdefinierte CSS oder Code mit Elementor AI hinzufügen, folgen Sie diesen Empfehlungen:
- Achten Sie darauf, Ihre Seite zu speichern und zu sichern, bevor Sie benutzerdefinierte CSS hinzufügen, für den Fall, dass Sie versehentlich das Seitenlayout ändern.
- Wenn Sie einem bestimmten Element CSS hinzufügen, achten Sie darauf, dass Sie einen "Selektor" verwenden, damit sich der Code nicht auf den Rest der Seite auswirkt.
- Wenn Sie Elementor AI verwenden, um den Code neu zu generieren, wird der vorherige Code überschrieben. Daher ist es eine gute Idee, den ursprünglichen Code in einem anderen Dokument zu sichern.
- Wenn Sie mehrere Codefragmente einfügen, können einige Codes miteinander in Konflikt geraten.
- Wir verbessern ständig die Codierungsmöglichkeiten von Elementor AI, aber der generierte Code kann es erforderlich machen, dass Sie ihn manuell an Ihre speziellen Bedürfnisse anpassen.
- Bitte beachten Sie, dass Elementor keinen offiziellen technischen Support für benutzerdefinierten CSS-Code anbietet, der Benutzer muss den Code selbst überprüfen und debuggen.
Hinzufügen von benutzerdefiniertem Code zu Elementor mit Elementor AI
Das folgende Beispiel fügt CSS-Anpassungscode zum Titel der Startseite hinzu:
- Kopfzeilen-Widget auswählen
- Über das Widget "Titel"."Fortgeschritten"und wählen Sie"Benutzerdefiniertes CSS".
- OptionKodierung mit AI.
Hinweis: Nachdem Sie Elementor AI zum ersten Mal verwendet haben, wird dieMit AIDer Code für den Text wird durch das Elementor AI-Symbol ersetzt.
- Geben Sie in das Textfeld "Diese Überschrift soll beim Schweben rot werden".
- Klicken (mit einer Maus oder einem anderen Zeigegerät)Code generieren.
Dadurch wird der folgende CSS-Anpassungscode hinzugefügt:
Klicken Sie auf Vorschau, um zu sehen, wie benutzerdefiniertes CSS funktioniert.
Animation Titel
Jetzt fügen wir dem Titel eine Animation hinzu.
- Kehren Sie zu Custom CSS zurück und wählen SieCode mit AI.
- Geben Sie in das Textfeld ein: "In dieser Überschrift wird der Text beim Hovern eingeblendet".
- Klicken (mit einer Maus oder einem anderen Zeigegerät)Code generieren.
- Klicken (mit einer Maus oder einem anderen Zeigegerät)"Einfügen".
Gehen Sie auf Vorschau und sehen Sie sich die Ergebnisse an. Wenn Sie mit dem Mauszeiger über den Text fahren, sollte er auftauchen und rot werden.
Elementor klebrig machen
Eine gängige Technik, die ein Designer anwendet, besteht darin, bestimmte Elemente einer Seite immer sichtbar zu machen, auch wenn der Besucher die Seite scrollt. Dieser Effekt wird als "Klebriges Elementor", das normalerweise im Kopfbereich einer Webseite verwendet wird. Der Zweck ist, das Menü für den Besucher leicht zugänglich zu machen, wenn er auf der Seite navigiert.
Das folgende Beispiel zeigt, wie man den Titel einer Webseite festhält und sicherstellt, dass er immer am oberen Rand des Bildschirms angezeigt wird:
- OptionTitel bearbeiten.
- Wählen Sie den Container in der Kopfzeile
- OptionBenutzerdefiniertes CSS.
- OptionKodierung mit AI.
- Geben Sie "Diesen Container klebrig machen" in das Textfeld ein.
- Klicken (mit einer Maus oder einem anderen Zeigegerät)Code generieren. Der generierte Code sieht dann wie folgt aus:
Elementor AI stellt Ihnen den generierten Code zur Verfügung und erklärt Ihnen im Bereich unterhalb des Codefeldes, was der Code bewirkt, in einfachem Englisch. - OptionCode einfügen.
Verwenden Sie die Vorschau, um die Ergebnisse zu sehen, und der Titel bleibt am oberen Rand des Bildschirms, wenn Sie auf der Seite nach unten blättern.
Zusammenfassung:
Das Grundkonzept von CSS (Cascading Style Sheets), einem leistungsstarken Werkzeug zum Hinzufügen und Anpassen des Stils von Webseiten, wie Farben, Schriftarten, Abstände und Layout. Insbesondere bietet Elementor die Möglichkeit, benutzerdefinierte CSS auf verschiedenen Ebenen (Site-, Seiten- und Element-Ebene) hinzuzufügen, so dass die Benutzer eine Feinabstimmung für spezifische Bedürfnisse vornehmen können.
Der Artikel bietet auch spezifische Schritt-für-Schritt-Anleitungen, wie man CSS-Code zu verschiedenen Teilen von Elementor hinzufügt, einschließlich Hilfe bei der Code-Generierung und -Verwaltung durch die Elementor AI-Technologie. Themen, die bei der Verwendung von benutzerdefiniertem CSS zu beachten sind, wie Code-Backups, die Verwendung von Selektoren und der Umgang mit Code-Konflikten, werden hervorgehoben, um sicherzustellen, dass das Design der Website sowohl ästhetisch ansprechend als auch leistungsstark ist.
