{"id":52477,"date":"2022-07-18T09:38:55","date_gmt":"2022-07-18T08:38:55","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=52477&preview=true&preview_id=52477"},"modified":"2023-08-23T15:39:54","modified_gmt":"2023-08-23T14:39:54","slug":"elementor-custom-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/","title":{"rendered":"So f\u00fcgst du benutzerdefiniertes CSS zu Elementor hinzu (5 Methoden)"},"content":{"rendered":"

Einer der gr\u00f6\u00dften Vorteile von Seitenerstellern<\/a> wie Elementor ist, dass du Zugang zu vorgefertigten Seitenelementen, den sogenannten Widgets, hast. Die Widgets von Elementor bieten eine Vielzahl von Anpassungs- und Gestaltungsm\u00f6glichkeiten. Manchmal ist jedoch die einzige M\u00f6glichkeit, einen bestimmten Stil anzuwenden, die Verwendung von Cascading Style Sheets (CSS)<\/a>.<\/p>\n

Mit CSS hast du ein erstaunliches Ma\u00df an Kontrolle \u00fcber jede Komponente deiner Webseite. Wenn du mit der Sprache vertraut bist, ist das Hinzuf\u00fcgen von CSS zu WordPress ganz einfach. Elementor bietet au\u00dferdem mehrere Optionen zum Hinzuf\u00fcgen von benutzerdefiniertem CSS.<\/p>\n

Schau dir unsere Videoanleitung zum Hinzuf\u00fcgen eines benutzerdefinierten CSS zu Elementor<\/a> an<\/strong><\/p>\n<\/kinsta-video>\n

In diesem Artikel erkl\u00e4ren wir dir, was CSS ist und wie du Elementor<\/a> ein eigenes Styling hinzuf\u00fcgen kannst. Zum Schluss gehen wir noch auf einige Best Practices f\u00fcr die Verwendung von CSS in WordPress ein. Los geht’s!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Was ist CSS?<\/h2>\n

CSS ist eine so genannte „Stylesheet“-Sprache. Mit CSS-Stylesheets kannst du HTML- oder XML-Dokumenten<\/a> ein eigenes Styling verpassen. Mit CSS kannst du eine einfache HTML-Seite in ein modernes Design<\/a> verwandeln.<\/p>\n

Stell dir CSS als eine Sprache vor, die beschreibt, wie Elemente in einem Browser aussehen sollen. Sie funktioniert in jedem Browser und ist eine der Kernsprachen des Internets.<\/p>\n

Dies ist zum Beispiel der CSS-Code, mit dem du dem Textk\u00f6rper eines HTML-Dokuments eine Hintergrundfarbe zuweisen kannst:<\/p>\n

body {\n\nbackground-color: red;\n\n}<\/code><\/pre>\n
Du kannst CSS verwenden, um Stile auf bestimmte Komponenten, Klassen und IDs in HTML anzuwenden. Das folgende Snippet w\u00fcrde zum Beispiel eine bestimmte Textfarbe und -ausrichtung auf alle H2s auf einer Seite anwenden:<\/p>\n
h2 {\n\ncolor: black;\n\ntext-align: left;\n\n}<\/code><\/pre>\n
Wenn du eine HTML-Seite l\u00e4dst, wird in der Regel auch ein separates Stylesheet geladen, das den gesamten CSS-Code enth\u00e4lt. Das bedeutet, dass du Stylesheets auf mehreren Seiten wiederverwenden kannst.<\/p>\n
Es steht dir frei, CSS-Code direkt auf jede HTML-Seite<\/a> anzuwenden. Du kannst ihn auch „inline“ verwenden. Das ist ein Begriff, der sich auf CSS-Code bezieht, der auf ein einzelnes HTML-Element angewendet wird und sich in dieser Datei befindet.<\/p>\n
Hier ist ein Beispiel f\u00fcr Inline-CSS f\u00fcr eine bestimmte H2-\u00dcberschrift:<\/p>\n
<h2 style=\"color:black;text-align:center;\">This is where the heading text goes<\/h1><\/code><\/pre>\n
Es gilt als Best Practice, CSS<\/a> in einem separaten Stylesheet hinzuzuf\u00fcgen<\/a>. Einer der vielen Vorteile von WordPress und Elementor<\/a> ist jedoch, dass du CSS hinzuf\u00fcgen kannst, ohne Dateien manuell bearbeiten zu m\u00fcssen. Schauen wir uns einmal genauer an, wie das funktioniert.<\/p>\n\n
Benutzerdefinierte CSS-Optionen in Elementor<\/h2>\n
Wenn du mit Elementor vertraut bist, wei\u00dft du, dass der Builder Abschnitte, Spalten und Widgets verwendet, um dir bei der Erstellung von Seiten zu helfen. Abschnitte enthalten eine oder mehrere Spalten, und jede Spalte kann mehrere Module enthalten:<\/p>\n
\"Spalten
Spalten und Module in Elementor<\/figcaption><\/figure>\n
Das Beste an Elementor ist, dass du auf der Ebene des Abschnitts, der Spalte und des Widgets eigenen CSS-Code hinzuf\u00fcgen kannst. Wenn du mit dem Mauszeiger \u00fcber einen Abschnitt f\u00e4hrst, kannst du das Sechs-Punkte-Symbol ausw\u00e4hlen, um das Men\u00fc Abschnitt bearbeiten <\/strong>auf der linken Seite des Bildschirms zu \u00f6ffnen:<\/p>\n
\"Separaten
Separaten CSS-Code auf der Ebene des Abschnitts, der Spalte und des Widgets hinzuf\u00fcgen<\/figcaption><\/figure>\n
Wenn du im Men\u00fc “ Abschnitt bearbeiten <\/strong>“ auf die Registerkarte “ Erweitert“ <\/strong>gehst, siehst du einen Abschnitt “ Benutzerdefiniertes CSS“ <\/strong>. Darin findest du ein Feld, mit dem du Code f\u00fcr diesen speziellen Abschnitt hinzuf\u00fcgen kannst:<\/p>\n
\"Die
Die Option Benutzerdefiniertes CSS findest du auf der Registerkarte „Erweitert“<\/figcaption><\/figure>\n
Wenn du Spalten und Widgets bearbeitest, wirst du feststellen, dass du in den jeweiligen Einstellungsmen\u00fcs Zugriff auf dieselben drei Registerkarten hast. Abschnitte, Spalten und Widgets enthalten alle Layout-, Stil- und erweiterte Einstellungen.<\/p>\n
Um benutzerdefiniertes CSS zu einer Spalte hinzuzuf\u00fcgen, fahre mit dem Mauszeiger \u00fcber die Spalte und w\u00e4hle das zweispaltige Symbol in der oberen rechten Ecke des Elements. Navigiere dann zu der Option Erweitert <\/strong>und \u00f6ffne den Abschnitt Benutzerdefiniertes CSS <\/strong>:<\/p>\n
\"Benutzerdefiniertes
Benutzerdefiniertes CSS zu einer einzelnen Spalte hinzuf\u00fcgen<\/figcaption><\/figure>\n
Auf die gleiche Weise kannst du benutzerdefinierte CSS zu einem Elementor-Widget hinzuf\u00fcgen. W\u00e4hle einfach das Widget aus, das du anpassen m\u00f6chtest, und gehe direkt zum Reiter Erweitert > Benutzerdefiniertes CSS <\/strong>:<\/p>\n
\"Du
Du kannst auch CSS zu einem Widget hinzuf\u00fcgen<\/figcaption><\/figure>\n
Das Hinzuf\u00fcgen von benutzerdefiniertem CSS zu bestimmten Elementen im Elementor Page Builder ist sehr einfach. Beachte aber, dass das Styling nur f\u00fcr diese Elemente gilt. Wenn du benutzerdefiniertes CSS f\u00fcr deine gesamte Webseite hinzuf\u00fcgen m\u00f6chtest, musst du einen anderen Ansatz w\u00e4hlen.<\/p>\n
So f\u00fcgst du mit Elementor benutzerdefiniertes CSS hinzu (5 Methoden)<\/h2>\n
In diesem Abschnitt stellen wir dir verschiedene M\u00f6glichkeiten vor, wie du mit Elementor benutzerdefiniertes CSS hinzuf\u00fcgen kannst. Wir stellen Methoden vor, mit denen du CSS auf deine gesamte Webseite, auf bestimmte Seiten und auf Elementor-Widgets anwenden kannst.<\/p>\n
Methode 1: Verwende das Elementor HTML Widget<\/h3>\n
Elementor erm\u00f6glicht es dir, benutzerdefiniertes CSS zu jedem seiner Widgets hinzuzuf\u00fcgen. In manchen F\u00e4llen m\u00f6chtest du aber vielleicht Elemente manuell mit HTML<\/a> und CSS hinzuf\u00fcgen. In diesen F\u00e4llen musst du das HTML-Widget <\/strong>verwenden:<\/p>\n
\"Verwende
Verwende das HTML-Widget<\/figcaption><\/figure>\n
Das HTML-Widget <\/strong>kann HTML, CSS und JavaScript<\/a> parsen. Du kannst jeden beliebigen Code in das HTML-Code-Feld <\/strong>einf\u00fcgen und wenn er g\u00fcltig ist, zeigt Elementor ihn als Widget an:<\/p>\n
\"F\u00fcge
F\u00fcge einen beliebigen Code in das Widget ein<\/figcaption><\/figure>\n
Das HTML-Widget <\/strong>unterst\u00fctzt sowohl Inline- als auch Standalone-CSS. Jeder Code, den du \u00fcber das Widget hinzuf\u00fcgst, wirkt sich nur auf dieses eine Element aus.<\/p>\n
Methode 2: Verwende das Men\u00fc Elementor Site Settings<\/h3>\n
Elementor enth\u00e4lt eine Sammlung von globalen Einstellungen, die den Optionen im WordPress Customizer \u00e4hneln. Um auf das Elementor Site Settings <\/strong>Men\u00fc zuzugreifen, \u00f6ffne den Editor und klicke auf das Hamburger-Men\u00fc in der oberen linken Ecke des Bildschirms:<\/p>\n
\"Klicke
Klicke auf das verf\u00fcgbare Hamburger-Men\u00fc<\/figcaption><\/figure>\n
Auf der n\u00e4chsten Seite w\u00e4hlst du die Option Site Settings <\/strong>:<\/p>\n
\"Klicke
Klicke auf die Option „Site Settings“<\/figcaption><\/figure>\n
Hier siehst du eine Sammlung von Einstellungen, mit denen du den Stil deiner Seite anpassen kannst. Alle \u00c4nderungen, die du in diesem Men\u00fc vornimmst, gelten f\u00fcr deine gesamte Webseite, auch wenn du technisch gesehen nur eine einzige Seite bearbeitest.<\/p>\n
Auf der offiziellen Elementor-Webseite erf\u00e4hrst du, wie du das Men\u00fc “ Site Settings <\/strong>„<\/a>\u00a0zur Anpassung deiner Seite verwendest. Der einzige Bereich, der uns interessiert, ist die Registerkarte Custom CSS <\/strong>. Wenn du ihn \u00f6ffnest, siehst du ein Feld, das genauso aussieht wie die benutzerdefinierten CSS-Optionen f\u00fcr Abschnitte, Widgets und Spalten:<\/p>\n
\"Wenn
Wenn du hier benutzerdefiniertes CSS hinzuf\u00fcgst, wirkt sich das auf die gesamte Seite aus<\/figcaption><\/figure>\n
Jedes benutzerdefinierte CSS, das du hier hinzuf\u00fcgst, wirkt sich auf deine gesamte Webseite aus. Wenn du nur bestimmte Elemente anpassen willst, empfehlen wir dir, einen gezielteren Ansatz zu w\u00e4hlen (z. B. CSS direkt in ein Widget einzuf\u00fcgen).<\/p>\n
Methode 3: Nutze den WordPress Customizer<\/h3>\n
Der WordPress Customizer erm\u00f6glicht es dir auch, CSS f\u00fcr die gesamte Seite hinzuzuf\u00fcgen. Dazu gehst du zu Darstellung > Anpassen <\/strong>und w\u00e4hlst im linken Men\u00fc die Option Zus\u00e4tzliches CSS <\/strong>:<\/p>\n
\"Nutze
Nutze den WordPress Customizer, um CSS hinzuzuf\u00fcgen<\/figcaption><\/figure>\n
Allerdings sind die Elementor-Codefelder benutzerfreundlicher als die Felder im Customizer. Wenn du Elementor bereits f\u00fcr die Webseiten-Erstellung verwendest, gibt es keinen Grund, benutzerdefiniertes CSS \u00fcber den Customizer hinzuzuf\u00fcgen.<\/p>\n
Methode 4: Benutzerdefinierte CSS-Dateien einbinden<\/h3>\n
Wenn du mit der Bearbeitung von WordPress-Dateien vertraut bist und \u00fcber einen FTP-Client (File Transfer Protocol)<\/a> auf deine Webseite zugreifst, kannst du ein CSS-Stylesheet in die Warteschlange stellen, um es mit Elementor zu laden. Bei dieser Methode musst du Code in die WordPress-Datei functions.php <\/strong>einf\u00fcgen.<\/p>\n
Um auf die Datei functions.php <\/strong>zuzugreifen, verbindest du dich per FTP mit deiner Webseite und gehst zum WordPress-Stammverzeichnis <\/strong>. \u00d6ffne den Ordner, suche die Datei functions.php <\/strong>und bearbeite sie.<\/p>\n
Hier ist ein Beispiel f\u00fcr den Code, den du in die Datei einf\u00fcgen m\u00f6chtest:<\/p>\n
add_action( 'elementor\/frontend\/before_enqueue_scripts', function() {\n\nwp_enqueue_script(\n\n'custom-stylesheet',\n\nget_stylesheet_uri()\n\n);\n\n} );<\/code><\/pre>\n
Dieser Code verwendet den before_enqueue_scriptshook<\/strong>, um ein Stylesheet namens custom-stylesheet<\/strong> zu laden.<\/em> Au\u00dferdem verwenden wir die Funktion get_stylesheet_urifunction<\/strong>, um den Speicherort des Stylesheets auf dem Server zu ermitteln.<\/p>\n
Idealerweise f\u00fcgst du das benutzerdefinierte Stylesheet in das Verzeichnis deines Child-Themes oder in den Themes-Ordner <\/strong>selbst ein. Das Stylesheet kann jeden Elementor-CSS-Code enthalten, den du m\u00f6chtest. Das Snippet, das du der functions.php <\/strong>hinzugef\u00fcgt hast, stellt sicher, dass der Code nur geladen wird, wenn Elementor auf deiner Webseite aktiv ist.<\/p>\n
Methode 5: Verwende ein CSS-Plugin<\/h3>\n
Es gibt verschiedene Plugins, mit denen du deiner Webseite benutzerdefinierten CSS-Code hinzuf\u00fcgen kannst, ohne den Customizer oder die Page Builder<\/a> zu benutzen. Eines unserer Lieblingstools f\u00fcr diese Aufgabe hei\u00dft Simple Custom CSS and JS<\/a>:<\/p>\n
\"Simple
Simple Custom CSS and JS<\/figcaption><\/figure>\n
Mit Simple Custom CSS and JS hast du die M\u00f6glichkeit, Code direkt in die Kopf- und Fu\u00dfzeilen deines Themes einzuf\u00fcgen. Gehe dazu zu Benutzerdefiniertes CSS & JS > Benutzerdefiniertes CSS hinzuf\u00fcgen <\/strong>und klicke auf CSS-Code hinzuf\u00fcgen.<\/strong><\/p>\n
Auf der linken Seite wird ein einfacher CSS-Editor angezeigt. Auf der rechten Seite kannst du festlegen, ob der CSS-Code in einem externen Stylesheet<\/a> oder intern geladen werden soll. Du kannst auch entscheiden, ob der Code in der Kopf- oder Fu\u00dfzeile erscheinen soll:<\/p>\n
\"Code
Code in ein externes Stylesheet laden<\/figcaption><\/figure>\n
Wenn du mit der Bearbeitung des CSS-Codes fertig bist, klicke auf die Schaltfl\u00e4che Ver\u00f6ffentlichen <\/strong>. M\u00f6glicherweise musst du zur Frontend-Ansicht wechseln, um den Code in Aktion zu sehen.<\/p>\n
Best Practices f\u00fcr die Erstellung von benutzerdefiniertem CSS mit Elementor<\/h2>\n
Wenn du mit benutzerdefiniertem CSS arbeitest oder irgendeinen Code zu deiner Webseite hinzuf\u00fcgst, solltest du die folgenden Best Practices im Hinterkopf behalten. Beginnen wir mit der Verwendung eines Child-Themes.<\/p>\n
Verwende ein WordPress Child Theme<\/h3>\n
Wenn du den Stil deines Themes<\/a> mit CSS \u00e4ndern m\u00f6chtest, empfehlen wir dir, ein Child-Theme zu verwenden<\/a>. Ein „Child“-Theme ist eine Vorlage, die alle Stile eines bestimmten Themes erbt.<\/p>\n
Wenn du also \u00c4nderungen am Original-Theme vornimmst, wirken sich diese nicht auf die Anpassungen aus, die du im Child-Theme vornimmst. Und wenn du dein Theme aktualisierst, bleiben diese \u00c4nderungen erhalten.<\/p>\n
Verwende einen Code-Pr\u00e4prozessor, um das Schreiben zu vereinfachen<\/h3>\n
Eine der gr\u00f6\u00dften Herausforderungen beim Hinzuf\u00fcgen von Code in WordPress oder bei der Verwendung von Elementor ist, dass du nicht auf alle Funktionen moderner Code-Editoren zugreifen kannst. Anstatt den Code mit einfachen Editoren vor Ort zu bearbeiten, empfehlen wir dir, deinen bevorzugten Pr\u00e4prozessor zu verwenden<\/a>. Dann kannst du deinen Code einfach kopieren und in WordPress einf\u00fcgen.<\/p>\n
Erw\u00e4ge den Einsatz einer Staging-Webseite<\/h3>\n
Wenn du gro\u00dfe \u00c4nderungen an WordPress vornehmen willst, empfehlen wir dir, eine Staging-Webseite zu verwenden. Mit Staging-Webseiten kannst du \u00c4nderungen an Stil und Funktionalit\u00e4t testen, ohne dass du Gefahr l\u00e4ufst, etwas auf deiner Live-Webseite kaputt zu machen.<\/p>\n
Bei einigen Webhostern kannst du \u00fcber dein Control Panel auf die Staging-Funktion zugreifen. Wenn du Kinsta nutzt, kannst du deine Webseite \u00fcber das MyKinsta-Dashboard<\/a> ausw\u00e4hlen und zwischen der Live- und der Staging-Umgebung hin und her wechseln:<\/p>\n
\"Die
Die Staging-Umgebung in MyKinsta<\/figcaption><\/figure>\n
Wenn dein Webhoster keine Staging-Funktionalit\u00e4t<\/a> anbietet, kannst du eine lokale WordPress-Entwicklungsumgebung wie DevKinsta<\/a> f\u00fcr Testzwecke nutzen. Alternativ kannst du auch einen Wechsel des Hosting-Anbieters in Betracht ziehen.<\/p>\n\n
Zusammenfassung<\/h2>\n
Das Hinzuf\u00fcgen von benutzerdefiniertem CSS in Elementor ist einfacher, als du vielleicht denkst. Der Page Builder bietet mehrere Methoden, um Code zu Abschnitten, Spalten, Widgets und f\u00fcr deine gesamte Webseite hinzuzuf\u00fcgen.<\/p>\n
Hier sind die f\u00fcnf wichtigsten M\u00f6glichkeiten, um Elementor (oder deiner Webseite im Allgemeinen) benutzerdefiniertes CSS hinzuzuf\u00fcgen:<\/p>\n
    \n
  1. Verwende das Elementor HTML Widget.<\/li>\n
  2. Verwende das Men\u00fc Elementor Site Settings.<\/li>\n
  3. Verwende den WordPress Customizer.<\/li>\n
  4. Binde benutzerdefinierte CSS-Dateien ein.<\/li>\n
  5. Verwende ein CSS-Plugin.<\/li>\n<\/ol>\n
    Bei Kinsta helfen wir dir mit unseren Pl\u00e4nen dabei, die Webseite deiner Tr\u00e4ume mit Page Buildern wie Elementor zu erstellen. Schau dir unsere Pl\u00e4ne<\/a> an oder sprich mit dem Vertrieb, um den richtigen Plan f\u00fcr dich zu finden.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Einer der gr\u00f6\u00dften Vorteile von Seitenerstellern wie Elementor ist, dass du Zugang zu vorgefertigten Seitenelementen, den sogenannten Widgets, hast. Die Widgets von Elementor bieten eine Vielzahl …<\/p>\n","protected":false},"author":117,"featured_media":52478,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[370,434,676],"topic":[999],"class_list":["post-52477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-css","tag-elementor","tag-page-builder","topic-wordpress-entwicklung"],"yoast_head":"\nSo f\u00fcgst du benutzerdefiniertes CSS zu Elementor hinzu (5 Methoden)<\/title>\n<meta name=\"description\" content=\"Nicht sicher wo du benutzerdefinertes CSS in Elementor einf\u00fcgst? Erfahre wie genau du es in Elementor hinzuf\u00fcgst und hebe deine Seite von anderen ab.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"So f\u00fcgst du benutzerdefiniertes CSS zu Elementor hinzu (5 Methoden)\" \/>\n<meta property=\"og:description\" content=\"Nicht sicher wo du benutzerdefinertes CSS in Elementor einf\u00fcgst? Erfahre wie genau du es in Elementor hinzuf\u00fcgst und hebe deine Seite von anderen ab.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-18T08:38:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T14:39:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/07\/elementor-custom-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Nicht sicher wo du benutzerdefinertes CSS in Elementor einf\u00fcgst? Erfahre wie genau du es in Elementor hinzuf\u00fcgst und hebe deine Seite von anderen ab.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/07\/elementor-custom-css.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"12\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"So f\u00fcgst du benutzerdefiniertes CSS zu Elementor hinzu (5 Methoden)\",\"datePublished\":\"2022-07-18T08:38:55+00:00\",\"dateModified\":\"2023-08-23T14:39:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/\"},\"wordCount\":2093,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/07\/elementor-custom-css.jpg\",\"keywords\":[\"css\",\"Elementor\",\"page builder\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/\",\"name\":\"So f\u00fcgst du benutzerdefiniertes CSS zu Elementor hinzu (5 Methoden)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/07\/elementor-custom-css.jpg\",\"datePublished\":\"2022-07-18T08:38:55+00:00\",\"dateModified\":\"2023-08-23T14:39:54+00:00\",\"description\":\"Nicht sicher wo du benutzerdefinertes CSS in Elementor einf\u00fcgst? Erfahre wie genau du es in Elementor hinzuf\u00fcgst und hebe deine Seite von anderen ab.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/07\/elementor-custom-css.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/07\/elementor-custom-css.jpg\",\"width\":1460,\"height\":730,\"caption\":\"So f\u00fcgst du benutzerdefiniertes CSS zu Elementor hinzu (5 Methoden)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Entwicklung\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"So f\u00fcgst du benutzerdefiniertes CSS zu Elementor hinzu (5 Methoden)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"So f\u00fcgst du benutzerdefiniertes CSS zu Elementor hinzu (5 Methoden)","description":"Nicht sicher wo du benutzerdefinertes CSS in Elementor einf\u00fcgst? Erfahre wie genau du es in Elementor hinzuf\u00fcgst und hebe deine Seite von anderen ab.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/","og_locale":"de_DE","og_type":"article","og_title":"So f\u00fcgst du benutzerdefiniertes CSS zu Elementor hinzu (5 Methoden)","og_description":"Nicht sicher wo du benutzerdefinertes CSS in Elementor einf\u00fcgst? Erfahre wie genau du es in Elementor hinzuf\u00fcgst und hebe deine Seite von anderen ab.","og_url":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2022-07-18T08:38:55+00:00","article_modified_time":"2023-08-23T14:39:54+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/07\/elementor-custom-css.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Nicht sicher wo du benutzerdefinertes CSS in Elementor einf\u00fcgst? Erfahre wie genau du es in Elementor hinzuf\u00fcgst und hebe deine Seite von anderen ab.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/07\/elementor-custom-css.jpg","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Salman Ravoof","Gesch\u00e4tzte Lesezeit":"12\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"So f\u00fcgst du benutzerdefiniertes CSS zu Elementor hinzu (5 Methoden)","datePublished":"2022-07-18T08:38:55+00:00","dateModified":"2023-08-23T14:39:54+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/"},"wordCount":2093,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/07\/elementor-custom-css.jpg","keywords":["css","Elementor","page builder"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/","url":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/","name":"So f\u00fcgst du benutzerdefiniertes CSS zu Elementor hinzu (5 Methoden)","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/07\/elementor-custom-css.jpg","datePublished":"2022-07-18T08:38:55+00:00","dateModified":"2023-08-23T14:39:54+00:00","description":"Nicht sicher wo du benutzerdefinertes CSS in Elementor einf\u00fcgst? Erfahre wie genau du es in Elementor hinzuf\u00fcgst und hebe deine Seite von anderen ab.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/07\/elementor-custom-css.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/07\/elementor-custom-css.jpg","width":1460,"height":730,"caption":"So f\u00fcgst du benutzerdefiniertes CSS zu Elementor hinzu (5 Methoden)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/elementor-custom-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Entwicklung","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/"},{"@type":"ListItem","position":3,"name":"So f\u00fcgst du benutzerdefiniertes CSS zu Elementor hinzu (5 Methoden)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/52477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=52477"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/52477\/revisions"}],"predecessor-version":[{"id":57749,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/52477\/revisions\/57749"}],"alternate":[{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/52477\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/52477\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/52477\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/52477\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/52477\/translations\/es"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/52477\/translations\/en"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/52477\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/52477\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/52477\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/52477\/translations\/dk"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/52477\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/52478"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=52477"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=52477"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=52477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}