Springe zum Hauptinhalt

Wie verwende ich das Code-Modul im Divi Builder?

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Das Codemodul ist eine leere Zeichenfläche, mit der Sie Ihrer Seite Code hinzufügen können, z. B. Plugin-Shortcodes oder statischen HTML-Code. Wenn Sie ein Plugin eines Drittanbieters verwenden möchten, z. B. ein Slider-Plugin eines Drittanbieters, können Sie den Plugin-Shortcode einfach in ein Standard- oder Vollbreiten-Codemodul einfügen, um das Element uneingeschränkt anzuzeigen.

So fügen Sie Ihrer Seite ein Codemodul hinzu

Bevor Sie Ihrer Seite ein Codemodul hinzufügen können, müssen Sie zuerst auf den Divi Builder zugreifen. Sobald das Divi-Thema auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder jedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher.

Durch Klicken auf diese Schaltfläche aktivieren Sie Divi Builder, mit dem Sie auf alle Divi Builder-Module zugreifen können. Klicken Sie dann auf die Schaltfläche Verwenden Sie Visual Builder um den Generator im visuellen Modus zu starten.

Sie können auch auf die Schaltfläche klicken Verwenden Sie Visual Builder beim Surfen auf Ihrer Upstream-Website, wenn Sie in Ihrem WordPress-Dashboard angemeldet sind.

Button Divi Builder Modul Blog Divi

Nach der Eingabe in Visual Builder können Sie auf die graue Plus-Schaltfläche klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite starten, denken Sie daran, Ihrer Seite zuerst eine Zeile hinzuzufügen.

Fügen Sie das Divi-Code-Modul ein

 

Suchen Sie das Codemodul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar. Sie können also auch das Wort "Code" eingeben und dann die Eingabetaste drücken, um das Codemodul zu finden und automatisch hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie mit der Liste der Moduloptionen begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Anwendungsfall durch Hinzufügen eines stumpfen Stylesheets zum Animieren von Inhalten auf einer einzelnen Seite

In diesem Beispiel füge ich ein Link-Skript zum Importieren von Animate.css hinzu, um den Elementen auf der Seite Animationseffekte hinzuzufügen. Da die Datei Animate.css viel Code enthält, ist es sinnvoll, ihn nur auf die von mir benötigte Seite zu laden.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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

Divi Builder Code

Fügen Sie im Textfeld Inhalt das Code-Snippet hinzu.

Fügen Sie das animate.css-Snippet hinzu

Sie müssen lediglich einige CSS-Klassen hinzufügen, um ein Element Ihrer CSS-Klassenseite auf Ihrer Seite zu animieren. In diesem Beispiel werde ich die Schaltfläche beim Laden der Seite abprallen lassen.

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

Fügen Sie eine CSS-Animationsklasse hinzu

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Jetzt springt die Schaltfläche beim Laden der Seite.

Animation der Divi Builder-Schaltfläche

Tipp: Manchmal führt das Hinzufügen von Code mit Zeilenumbrüchen dazu, dass der Code nicht mehr funktioniert. Es ist besser, Ihren Code in einem Texteditor zu erstellen und in das Codemodul einzufügen.

Code Inhaltsoptionen

Auf der Registerkarte Inhalt finden Sie alle Inhaltselemente des Moduls wie Text, Bilder und Symbole. All das steuert was erscheint in Ihrem Modul immer in dieser Registerkarte.

Divi Builder Code ParameterInhalt

Sie können dort jeden HTML-, CSS- oder JavaScript-Code einfügen, den Sie auf der Seite am aktuellen Speicherort anzeigen möchten. Nur Redakteure und Administratoren dürfen ungefilterten HTML-Code veröffentlichen. Dies bedeutet, dass Code aus dem Modul entfernt werden kann, wenn er von einem Autor oder Mitwirkenden verwendet wird. Sie können auch Shortcodes in das Modul einfügen. Diese Kurscodes (Shortcodes) werden in der übergeordneten Spalte ohne zusätzlichen Divi-Modul-Wrapper angezeigt.

Administrationsetikett

Dadurch wird die Modulbezeichnung im Generator zur leichteren Identifizierung geändert. Bei Verwendung der WireFrame-Ansicht in Visual Builder werden diese Beschriftungen im Modulblock der Divi Builder-Oberfläche angezeigt.

Code-Design-Optionen

Auf der Registerkarte Design finden Sie alle Optionen für den Modulstil, z. B. Schriftarten, Farben, Größe und Abstand. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Designeinstellungen, mit denen Sie nahezu alles optimieren können.

Design Option Modul Code Divi BuilderMaximale Breite

Jeder hier eingegebene Wert begrenzt die Breite aller im Codemodul gerenderten Inhalte auf den eingestellten Wert. Wenn Sie beispielsweise 50% in das Eingabefeld eingeben, wird der Inhalt des Codemoduls auf 50% der Spalte reduziert, in der es enthalten ist.

Code Code für erweiterte Optionen

Auf der Registerkarte Erweitert finden Sie Optionen, die erfahrene Webdesigner möglicherweise nützlich finden, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf jedes der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte CSS-Klassen und -IDs zuweisen, mit denen Sie das Modul in der style.css-Datei Ihres untergeordneten Themas anpassen können.

Divi Builder für den Code des Abschnittsmoduls

CSS-ID

Geben Sie eine benutzerfreundliche CSS-ID für dieses Modul ein. Eine ID kann verwendet werden, um einen benutzerdefinierten CSS-Stil zu erstellen oder um auf bestimmte Abschnitte Ihrer Seite zu verlinken.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Eine CSS-Klasse kann zum Erstellen eines benutzerdefinierten CSS-Stils verwendet werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem Divi Child-Design oder in benutzerdefiniertem CSS verwendet werden, das Sie Ihrer Seite oder Website mithilfe der Divi-Designoptionen oder der Divi Builder-Seiteneinstellungen hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und alle internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt CSS hinzufügen können. CSS-Einträge in diesen Einstellungen sind bereits mit Stil-Tags eingebettet. Sie müssen also nur CSS-Regeln eingeben, die durch Semikolons getrennt sind.

Sichtbarkeit

Mit dieser Option können Sie die Geräte steuern, auf denen Ihr Modul angezeigt wird. Sie können Ihr Modul auf Tablets, Smartphones oder Desktops einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Mods auf verschiedenen Geräten verwenden möchten oder wenn Sie das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente von der Seite entfernen.

Das war's für dieses Tutorial.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie2
tweet
Registrieren