CMS Wordpress 08 Juil. 2021 Créé par 2mn de lecture

Anpassen des Codes Ihres Extra-Themas

Lien de l'article

Sommaire

Procédure

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 Autoinstaller die Distribution 'Divi Builder' wä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.

Passen Sie den Code Ihres Extra Themes an.

Sie können das Code-Modul verwenden, um Ihren Layouts benutzerdefinierte HTML- und/oder WordPress-Shortcodes hinzuzufügen. Im obigen Beispiel haben wir ein E-Mail-Opt-in-Formular hinzugefügt, indem wir einen Shortcode verwendet haben, der von dem E-Mail-Opt-in-Plugin Bloom bereitgestellt wurde.

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 Extra-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.

Anpassen des Codes Ihres Extra-Themas

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.

Anpassen des Codes Ihres Extra-Themas

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.

Anpassen des Codes Ihres Extra-Themas

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

Anpassen des Codes Ihres Extra-Themas

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.