So verwenden Sie Blurb-Module als Fußzeilenelemente mit Divi

Veröffentlicht: 2021-12-20

Blurb-Module sind eine großartige Wahl für Divi-Fußzeilen. Sie können Bilder oder Symbole in verschiedenen Layouts anzeigen und haben viele Anpassungsmöglichkeiten. Sie sind besonders ideal für Links mit Symbolen, um gestylte Aufzählungszeichen zu erstellen. Glücklicherweise ist es nicht schwierig, diese Art von Links mit den Divi-Klappentext-Modulen zu erstellen. In diesem Artikel erfahren Sie, wie Sie Klappentext-Module für Fußzeilenelemente in Ihren Divi-Fußzeilen verwenden.

Vorschau

Bevor wir beginnen, werfen wir einen Blick darauf, wie unsere Fußzeile auf einem Desktop und Smartphone aussehen wird.

Desktop mit Fußzeilenelementen von Blurb-Modulen

Hier ist die Desktop-Version der Fußzeile, die wir erstellen werden. Wir verwenden Klappentexte in der oberen rechten Ecke, um Links zu erstellen.

Telefon mit Fußzeilenelementen von Blurb-Modulen

So sieht die Fußzeile mit unseren Klappentexten auf einem Smartphone aus.

Laden Sie eine Divi-Fußzeilenvorlage herunter

Zunächst benötigen Sie eine Fußzeilenvorlage für den Divi Theme Builder. Sie können Ihre eigene erstellen oder eine der kostenlosen Fußzeilen verwenden, die Elegant Themes im Blog bereitstellt. Sie finden sie, indem Sie im Blog nach „free footer“ suchen. Laden Sie den Ordner auf Ihren Computer herunter und entpacken Sie ihn.

Für meine Beispiele verwende ich die kostenlose Kopf- und Fußzeilenvorlage für das Layoutpaket für künstliche Intelligenz von Divi.

Abonnieren Sie unseren Youtube-Kanal

Laden Sie Ihre Divi-Fußzeilenvorlage hoch

Um Ihre JSON-Datei hochzuladen, gehen Sie im WordPress-Dashboard zu Divi > Theme Builder . Wählen Sie Portabilität und klicken Sie auf die Registerkarte Importieren des sich öffnenden Modals. Klicken Sie auf Datei auswählen und navigieren Sie zu der Datei auf Ihrem Computer und wählen Sie sie aus. Klicken Sie auf Divi Theme Builder-Vorlagen importieren und warten Sie, bis die Datei importiert wurde. Löschen Sie die Kopfzeile, wenn Sie sie nicht verwenden möchten. Klicken Sie auf Änderungen speichern .

Sie können jetzt Ihre neue Divi-Fußzeile anpassen. Sie können die Fußzeile von hier aus im Backend bearbeiten oder sie im Visual Builder im Frontend auswählen. Ich werde die Fußzeile am Backend bearbeiten, da die Kopfzeile ein benutzerdefiniertes Menü hat und standardmäßig im Builder geöffnet wird.

Laden Sie Ihre Divi-Fußzeilenvorlage hoch

Ich verwende auch die Zielseite aus dem Layoutpaket für künstliche Intelligenz für meine Seitenelemente. Das Layout und der Header haben beide viele Designwarteschlangen, aus denen sie ziehen können. Besonders gut gefällt mir das Design des Menüs im Kopf- und Fußzeilen-Template der künstlichen Intelligenz. Ich werde all dies verwenden, um mir beim Entwerfen der Klappentext-Links in der Fußzeile zu helfen.

Verwenden Sie Blurb-Module als Fußzeilenelemente

Ich werde die Links in den beiden Abschnitten „ Was wir tun“ und „ Ressourcen “ ersetzen. Dadurch erhalten wir die gewünschten Links und markieren sie mit Symbolen. Ich werde die erste Überschrift verwenden und die Anzahl der Links reduzieren. Wir werden das erste stylen und es dann klonen, um den Rest zu erstellen.

Verwenden Sie Blurb-Module als Fußzeilenelemente

Löschen Sie zunächst die Module in einer der beiden Spalten. Wir werden dies in ein zweispaltiges Layout umwandeln, sodass wir nur eine Spalte für unsere Klappentext-Module als Fußzeilenelemente benötigen.

Verwenden Sie Blurb-Module als Fußzeilenelemente

Öffnen Sie die Zeileneinstellungen und wählen Sie ein zweispaltiges Layout aus .

Verwenden Sie Blurb-Module als Fußzeilenelemente

Löschen Sie abschließend den Textbaustein , der die Links enthält. Wir brauchen nur das Titelmodul.

Verwenden Sie Blurb-Module als Fußzeilenelemente

Bewegen Sie den Mauszeiger über den Bereich, dem Sie das Modul hinzufügen möchten, und wählen Sie das Plus-Symbol aus. Wählen Sie das Klappentext-Modul aus der Liste aus.

Richten Sie das Blurb-Modul ein

Das Klappentextmodul enthält einen Titel, einen Fließtext und ein Bild. Wir verwenden den Titel als Link. Der Fließtext kann für Kurzbeschreibungen verwendet werden. Ich werde es für dieses Tutorial löschen. Wenn Sie es verwenden möchten, empfehle ich, den Text so kurz wie möglich zu halten und nur ein paar Klappentexte zu verwenden. Anstelle des Bildes verwenden wir ein Symbol.