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 600.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. kurze Plug-in-Codes oder statischen HTML-Code. Wenn Sie ein Plugin eines Drittanbieters verwenden möchten, z. B. ein Slider-Plugin eines Drittanbieters, können Sie den Shortcode des Plugins einfach in ein Standard- oder ein Codemodul mit voller Breite einfügen, um das Element ungehindert 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-Design 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 wird Divi Builder aktiviert, 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

Sobald Sie in Visual Builder eingegeben haben, können Sie auf das graue Plus-Symbol klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb der Zeilen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, vergessen Sie nicht, Ihrer Seite zuerst eine Zeile hinzuzufügen.

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, dh Sie können auch das Wort "Code" eingeben und dann die Eingabetaste drücken, um das Codemodul zu suchen und automatisch hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie mit der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Verwenden Sie die Groß- / Kleinschreibung, indem Sie ein animiertes Stilblatt hinzufügen, um Inhalte auf einer einzelnen Seite zu animieren

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

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

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

Fügen Sie im Inhaltsfeld das Code-Snippet hinzu.

Sie müssen lediglich einige CSS-Klassen hinzufügen, um ein beliebiges Element Ihrer CSS-Klassenseite auf Ihrer Seite zu animieren. In diesem Beispiel hüpfe ich auf die Schaltfläche, wenn die Seite geladen wird.

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

Jetzt springt die Schaltfläche beim Laden der Seite.

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]

Tipp: Manchmal führt das Hinzufügen von Code mit Zeilenumbrüchen dazu, dass der Code nicht funktioniert. Am besten erstellen Sie Ihren Code in einem Texteditor und fügen ihn in das Codemodul ein.

Code Inhaltsoptionen

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

Inhalt

Sie können jeden HTML-, CSS- oder JavaScript-Code, den Sie auf der Seite anzeigen möchten, an der aktuellen Position platzieren. Nur Redakteure und Administratoren dürfen ungefiltertes HTML veröffentlichen. Dies bedeutet, dass Code aus dem Modul entfernt werden kann, wenn er von einem Autor oder Mitbearbeiter verwendet wird. Sie können auch Funktionscodes in das Modul einfügen. Diese Shortcodes werden in der übergeordneten Spalte ohne zusätzliche Divi-Modul-Wrapper angezeigt.

Administrationsetikett

Dadurch wird die Modulbezeichnung im Generator zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Bezeichnungen im Modulblock der Divi Builder-Benutzeroberfläche angezeigt.

Code-Design-Optionen

Auf der Registerkarte Design finden Sie alle Stiloptionen des Moduls, 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 Konstruktionsparametern, mit denen Sie so gut wie alles bearbeiten können.

Maximale Breite

Jeder hier eingegebene Wert begrenzt die Breite des im Codemodul wiedergegebenen Inhalts auf den festgelegten 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 für erfahrene Webdesigner hilfreich sind, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie ein benutzerdefiniertes CSS auf eines der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte Klassen und CSS-IDs zuweisen, mit denen Sie das Modul in der Datei style.css Ihres untergeordneten Themas anpassen können.

CSS-ID

Geben Sie eine benutzerfreundliche CSS-ID für dieses Modul ein. Ein Bezeichner kann zum Erstellen eines benutzerdefinierten CSS-Stils oder zum Erstellen von Links zu bestimmten Abschnitten Ihrer Seite verwendet werden.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Mit einer CSS-Klasse kann ein benutzerdefinierter CSS-Stil erstellt 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 dem benutzerdefinierten CSS verwendet werden, das Sie Ihrer Seite oder Website mithilfe von Divi Theme-Optionen oder Divi Builder-Seiteneinstellungen hinzufügen.

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]

Benutzerdefiniertes CSS

Ein benutzerdefiniertes CSS kann auch auf das Modul und eines der 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. Die CSS-Einträge in diesen Einstellungen sind bereits in Style-Tags eingebettet. Sie müssen 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 Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente der Seite entfernen.

Das war es 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