existierenWordPress-Website-BaukastenDie Anpassung und Optimierung der Funktionalität Ihrer Website erfordert in der RegelHinzufügen von benutzerdefinierten CodefragmentenElementor bietet eine leistungsstarke "Custom Code"-Funktion, mit der Sie Ihrer Website ganz einfach bestimmte Stile und interaktive Funktionen hinzufügen können, z. B. Google Analytics-Code oder Facebook Pixel-Code. Diese Codeschnipsel können Ihnen dabei helfen, Ihre Website-Daten zu verfolgen, das Benutzererlebnis zu verbessern und sogar bestimmte Stile und interaktive Funktionen hinzuzufügen.HTML-, JavaScript- und CSS-CodefragmenteFügen Sie es zu Ihrer Website hinzu.
Einführung in die Custom Code-Funktionalität
ElementorMit der Funktion für benutzerdefinierten Code können Sie Ihrer Website verschiedene Arten von Codeschnipseln hinzufügen, z. B. HTML, JavaScript und CSS, die für folgende Zwecke verwendet werden können
- Anpassen des DOM: durchJavaScript-Manipulation von DOM-ElementenDer Inhalt der Webseite kann je nach den Aktionen des Benutzers oder anderen Bedingungen dynamisch geändert werden.
- Ereignis hinzufügen: kannVerwenden Sie JavaScript, um Web-Elementen Klick-, Hover- und andere Ereignisse hinzuzufügen, um die Interaktivität zu verbessern.
- Anwenden von benutzerdefinierten Stilen: durchCSS-Code zum Hinzufügen von benutzerdefinierten Stilen zu bestimmten Elementen je nach den Bedürfnissen der Website.
Die Funktion Benutzerdefinierter Code unterstützt keine PHP-Code-Snippets. Das bedeutet, dass Sie mit dieser Funktion keine benutzerdefinierten Hooks hinzufügen oder PHP-Operationen durchführen können, aber Sie können dies mit der Funktionfunktionen.phpDateien oder Plug-ins von Drittanbietern, um diese Funktionen zu implementieren.
Hinzufügen von benutzerdefiniertem Code
Gehen Sie folgendermaßen vor, um Ihrer WordPress-Website benutzerdefinierten Code hinzuzufügen:
1,Navigieren Sie zur Seite Elementor's Custom Code
- Gehen Sie im Backend-Menü auf
Elementor > Benutzerdefinierter Code. Dadurch wird die Seite für die Verwaltung des benutzerdefinierten Codes angezeigt, auf der benutzerdefinierte Codeschnipsel hinzugefügt, bearbeitet oder gelöscht werden können.
2,Neuen benutzerdefinierten Code hinzufügen
- Klicken Sie auf die Schaltfläche "Neuen benutzerdefinierten Code hinzufügen", um zur Bearbeitungsseite für den neuen Code zu gelangen. Hier müssen Sie den Titel, die Position und die Priorität für das Code-Snippet festlegen.
3,Geben Sie den Titel ein
- Geben Sie einen beschreibenden Titel für das Code-Snippet ein, damit es später leicht identifiziert werden kann. Der Titel kann eine Beschreibung der Funktionalität des Code-Snippets sein, z. B. "Google Analytics Tracking Code" oder "Custom Popup Script".
4,Auswahl des Speicherorts für den Code
- Legen Sie fest, in welchen Teil der Seite der Code eingefügt werden soll. Elementor bietet folgende Optionen:
<head>Einfügen von Code in den Head-Tag der Seite, normalerweise für globale Stile oder Skripte.<body> - BeginnEinfügen des Codes am Anfang des Seitenkörpers, geeignet für einige Skripte, die sofort beim Laden der Seite ausgeführt werden müssen.<body> - EndeEinfügen von Code am Ende des Seitenkörpers, normalerweise für kleinere Skripte oder Stile.
5,Einstellung der Priorität
- Sie können eine Liste erstellen für dieCodeschnipsel setzen Prioritäten (1-10). Wenn mehrere Skripte demselben Ort zugewiesen sind, bestimmt die Priorität die Reihenfolge, in der diese Skripte geladen werden. Je niedriger die Zahl ist, desto höher ist die Priorität. Ein Skript mit einer Priorität von 1 wird beispielsweise vor einem Skript mit einer Priorität von 5 ausgeführt.
6,Code-Schnipsel eingeben
- Der in Elementor integrierte Code-Checker wird Ihren Code automatisch überprüfen und Sie benachrichtigen, wenn er einen Fehler findet.
7,Festlegung von Freigabebedingungen
- Klicken Sie im Bereich "Veröffentlichung" auf "Bearbeiten", um die Anzeigebedingungen für das Code-Snippet festzulegen. Diese Bedingungen steuern, auf welchen Seiten oder Abschnitten der Website der Code angezeigt wird. Sie können zum Beispiel festlegen, dass der Code nur auf bestimmten Seiten oder Benutzertypen, wie Administratoren oder Besuchern, wirksam wird.
8,Veröffentlichung von benutzerdefiniertem Code
- Nachdem Sie die oben genannten Schritte ausgeführt haben, klicken Sie auf "Beitrag", um den Code auf Ihrer Website anzuwenden. Sie haben auch die Möglichkeit, den benutzerdefinierten Code als Entwurf zu speichern oder ein Datum und eine Uhrzeit festzulegen, um ihn später zu veröffentlichen.
Hinzufügen von CSS-Stilen mit benutzerdefiniertem Code
Zusätzlich zum JavaScript-Code können CSS-Stile über die Funktion "Benutzerdefinierter Code" zu einer Website hinzugefügt werden. Um CSS auf bestimmte Bedingungen anzuwenden, kann CSS-Code um einen HTML-Code gewickelt werden<style>zwischen Tags und fügen Sie sie mit der Funktion für benutzerdefinierten Code in die Website ein. Unten ist ein Beispiel:
.custom-button {
background-color: #1B61E6;
color: #fff;
padding: 10px 20px;
border-radius: 5px; text-align: center; custom-button { background-color.
text-align: center; cursor: pointer; text-align: pointer
cursor: pointer; }
}
</styleIn dem obigen Code haben wir eine Datei namensbenutzerdefinierte SchaltflächeKlasse und legen Sie einige Stile für sie fest. Nach dem Hinzufügen über die Funktion "Benutzerdefinierter Code" werden diese Stile auf der Grundlage der festgelegten Bedingungen auf die Elemente der Website angewendet.
zu einem Urteil gelangen
Integrieren Sie HTML-, JavaScript- und CSS-Codefragmente in Ihre WordPress-Website mit der Funktion "Benutzerdefinierter Code" von Elementor. Egal, ob Sie Tracking-Code, dynamische Funktionen oder benutzerdefinierte Stile hinzufügen, diese Funktion hilft Ihnen, die Funktionalität Ihrer Website und das Benutzererlebnis zu verbessern, ohne dass Sie tiefgreifend programmieren müssen.
