Das Code-Modul von Divi

Procédure

Divi builder ist in unserenWordpress-Webhosting-Angeboten enthalten. Wenn Sie Unterstützung für DIVI builder wünschen, müssen Sie eine Lizenz direkt auf der Elegent theme Divi-Website erwerben.

Einführung

LWS stellt Ihnen 3 Premium-Plugins von Elegant Themes zur Verfügung (Divi, Bloom und Monarch). Diese werden regelmäßig aktualisiert. Als Kunde bei LWS haben Sie kostenlosen Zugang zu diesen Plugins, wenn Sie bei der Installation des Wordpress CMS mit unserem Auto-Installer die Distribution 'Divi Builder' auswählen.

Wenn Sie ein cPanel-Paket haben oder bereits eine Wordpress-Installation mit dieser Distribution durchgeführt haben, aber keinen Zugang zu allen Themen oder Updates haben, bitte ich Sie, uns dies mitzuteilen und uns die Zugangsdaten für den Administrationsbereich Ihrer Wordpress-Website mitzuteilen, damit ein Techniker die Lizenz aktualisieren kann.

Achtung: Sie müssen eine Elegant Themes-Lizenz erwerben, um den Support in Anspruch nehmen zu können. LWS bietet keinen Support für diese Produkte.

Was ist das Code-Modul von Divi?

Das Code-Modul ist eine leere Leinwand, auf der Sie Ihrer Seite Code hinzufügen können, wie z. B. Plugin-Verknüpfungen oder statisches HTML. Wenn Sie ein Plugin eines Drittanbieters verwenden möchten, z. B. ein Schiebe-Plugin eines Drittanbieters, können Sie den Shortcode des Plugins einfach in ein Standard- oder Vollbreiten-Codemodul einfügen, um das Element ungehindert anzuzeigen.

So fügen Sie ein Code-Modul zu Ihrer Seite hinzu.

Bevor Sie ein Code-Modul zu Ihrer Seite hinzufügen können, müssen Sie zunächst in den Divi Builder wechseln. Sobald das Divi-Design auf Ihrer Website installiert wurde, werden Sie jedes Mal, wenn Sie eine neue Seite erstellen, eine Schaltfläche Divi Builder verwenden über dem Nachrichteneditor bemerken. Klicken Sie auf diese Schaltfläche, um den Divi Builder zu aktivieren, wodurch Sie Zugriff auf alle Module des Divi Builders erhalten. Klicken Sie dann auf die Schaltfläche Visual Builder verwenden, um den Builder im visuellen Modus zu starten. Sie können auch auf die Schaltfläche Visual Builder verwenden klicken, während Sie auf Ihrer Website nach vorne navigieren, wenn Sie in Ihrem WordPress-Dashboard angemeldet sind.

Sobald Sie Visual Builder betreten haben, können Sie auf die graue Schaltfläche + klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb von Reihen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, denken Sie daran, Ihrer Seite zuerst eine Zeile hinzuzufügen.

Suchen Sie das Code-Modul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Modulliste ist durchsuchbar, das heißt, Sie können auch das Wort "Code" eingeben und dann auf die Eingabetaste klicken, um das Codemodul zu finden und automatisch hinzuzufügen! Sobald Sie das Modul hinzugefügt haben, werden Sie mit der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt, Stil und Erweitert.

Anwendungsfallbeispiel: Hinzufügen eines externen Stylesheets, um den Inhalt einer einzelnen Seite zu animieren.

In diesem Beispiel werde ich ein Link-Skript hinzufügen, um Animate.css zu importieren, um den Elementen der Seite Animationseffekte hinzuzufügen. Da die Datei Animate.css viel Code enthält, macht es Sinn, sie nur auf die Seite zu laden, die ich benötige.

Fügen Sie einfach einen regulären Abschnitt und eine Zeile mit voller Breite (1 Spalte) hinzu und fügen Sie das Modul Code hinzu.

In das Textfeld Inhalt fügen Sie den Codeauszug ein.

Jetzt müssen Sie nur noch einige CSS-Klassen hinzufügen, um jedes Element auf Ihrer Seite von CSS-Klassen zu Ihrer Seite zu animieren. In diesem Beispiel werde ich die Schaltfläche beim Laden der Seite hüpfen lassen.

Geben Sie in den Einstellungen des Schaltflächenmoduls auf der Registerkarte Erweitert die beiden Klassen "animiert" und "hüpfen" in das Textfeld der CSS-Klasse ein.

Nun hüpft die Schaltfläche beim Laden der Seite.

Hier sind einige weitere Beispiele dafür, wie Sie den Code-Baustein verwenden können:

1. Fügen Sie Javascript-Codeblöcke oder Bibliotheken ein, die nur für Ihre Seite gelten.
2. Integrieren Sie Plug-ins von Drittanbietern wie den Revolutionscursor.
3. Sie können das Code-Modul in voller Breite verwenden, um ein Musterformular für interaktivere Fragebögen, Kontaktformulare usw. einzubinden.
4. Fügen Sie ein schwebendes Aktionsmenü hinzu.
5. Erstellen Sie eine verschiebbare Oberbalkenanzeige.
6. Fügen Sie eine schwebende Aktionsschaltfläche hinzu.

Tipp: Manchmal führt das Hinzufügen von Code mit Zeilenumbrüchen dazu, dass der Code nicht funktioniert. Es ist besser, Ihren Code in einem Texteditor zu erstellen und ihn zu verknüpfen (alles in einer Zeile), bevor Sie ihn in das Code-Modul einfügen.

Video zur Einführung in das Code-Modul von Divi.

Schlussfolgerung

Vielen Dank, dass Sie diesem Tutorial gefolgt sind!

Das Code-Modul ist eine weitere Möglichkeit, Ihre Website durch das Hinzufügen dieser dynamischen Note noch besser zu personalisieren und zu beleben.

Bis bald für ein nächstes Tutorial ;)

Weitere Informationen über Elegant Themes Divi und seine Verwendung.

Das Kommentar-Modul von Divi

Verwalten Sie das Kontaktformular-Modul von Divi.

> Besuchen Sie unseren Hilfebereich Elegant Themes Divi