Springe zum Hauptinhalt

So fügen Sie einem globalen Divi-Header einen dynamischen Site-Titel und einen Slogan hinzu

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]

Wenn Sie wissen, wie Sie einem globalen Divi-Header einen dynamischen Site-Titel und -Slogan hinzufügen, ist dies hilfreich, wenn Sie Divi-Websites erstellen. Und dafür gibt es einige gute Gründe. Einerseits haben nicht alle Websites ein Logo. Ein Site-Titel ist ein guter Logo-Ersatz. Ein weiterer Grund ist, Ihre Marke zu stärken, indem Sie wichtige Informationen auf Ihrer Website einfügen, die jeder sehen kann.

In diesem Tutorial zeigen wir Ihnen, wie Sie einem globalen Divi-Header einen dynamischen Site-Titel und einen Slogan hinzufügen. Diese Lösung extrahiert dynamisch den Site-Titel und den Slogan aus dem WordPress-Backend. Außerdem haben Sie alle leistungsstarken Designoptionen von Divi, um den Titel und den Slogan nach Ihren Wünschen anzupassen!

Mögliches Ergebnis

Hier ist eine Vorschau des Designs, das wir in diesem Tutorial erstellen werden.

Globale Header-Vorlage für dynamische Site-Titel 6

Beachten Sie den Site-Titel und den Slogan in der oberen Mitte der Kopfzeile, die dynamisch angezeigt wird.

Beispiel für eine Änderung des Divi-Titels

Kostenloser Download

Treten Sie dem Divi Newlsetter bei und wir senden Ihnen per E-Mail eine Kopie des Ultimate Divi Landing Page Layout Packs zusammen mit unzähligen anderen kostenlosen und erstaunlichen Divi-Ressourcen, Tipps und Tricks. Folgen Sie ihm und Sie werden in kürzester Zeit ein Divi-Meister sein. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Herunterladen, um auf das Layoutpaket zuzugreifen.DOWNLOAD

Um die Vorlage zu importieren, gehen Sie zu Divi> Theme Generator.

Klicken Sie oben rechts auf der Seite auf das Portabilitätssymbol.

Wählen Sie im Popup-Fenster "Portabilität" die Registerkarte "Importieren" und die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Wählen Sie eine Divi-Vorlage

Nach Abschluss ist die gesamte Header-Vorlage im Divi Theme Builder verfügbar.

Ändern Sie den globalen Divi-Header

Im Folgenden werden wir zum Design übergehen.

Der Titel der Site und der Slogan auf WordPress

Jede WordPress-Site hat einen Site-Titel und einen Slogan. Der Site-Titel ist im Grunde der Name der Site und der Slogan ist eine kurze Phrase, die normalerweise erklärt, was es ist.

Es ist nicht ungewöhnlich, den Site-Titel bei der Installation von WordPress hinzuzufügen und zu vergessen.

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]

Passen Sie den Divi-Titel an

Und manche Leute merken nicht einmal, dass der Slogan existiert, geschweige denn, dass sie sich die Zeit nehmen, ihn zu aktualisieren. Wenn Sie das Divi-Thema verwenden, werden der Site-Titel und der Slogan auf Ihrer Site standardmäßig nicht angezeigt, sodass Sie sie leicht ignorieren können. Der Site-Titel und der Slogan sind jedoch wesentliche Bestandteile der Website und werden von Suchmaschinen erkannt.

Sie können den Site-Titel und den Slogan in WordPress jederzeit suchen und aktualisieren, indem Sie zum WordPress-Dashboard gehen und zu Einstellungen> Allgemein navigieren.

Sie können auch eine andere Route verwenden, indem Sie den Design-Customizer verwenden, um den Site-Titel unter den allgemeinen Einstellungen zu aktualisieren.

Passen Sie die WordPress-Identität an

Nachdem wir nun wissen, wo sich der Site-Titel und der Slogan im WordPress-Backend befinden, wollen wir untersuchen, wie wir sie einem Divi-Header hinzufügen können!

So fügen Sie einem globalen Header in Divi einen dynamischen Site-Titel und einen Slogan hinzu

Importieren der vorgefertigten globalen Header-Vorlage

In diesem Tutorial konzentrieren wir uns darauf, wie Sie den Titel und den Slogan einer dynamischen Site zu einem vorhandenen Header hinzufügen, anstatt einen vollständigen Header von Grund auf neu zu erstellen. Sie sparen Zeit und verbessern die Klarheit. Um dieses Header-Design zu starten, importieren wir eine vordefinierte globale Header-Vorlage aus unserer viertes Theme Generator Pack .

Sobald Sie haben hat das Paket von heruntergeladen Erstellen Thema , entpacken Sie die Datei und suchen Sie die Standard-JSON-Datei für Website-Vorlagen.

Gehen Sie dann zu Divi> Theme Builder.

Klicken Sie oben rechts auf das Portabilitätssymbol. Wählen Sie im Popup-Fenster für die Portabilität die Standard-JSON-Datei für Website-Vorlagen aus und klicken Sie auf die Schaltfläche Importieren.

Import von Divi-Modellen

Wenn die Vorlage zum Theme Builder hinzugefügt wurde, löschen Sie die Fußzeilenvorlage und klicken Sie, um die Gesamtüberschrift zu bearbeiten.

Vorlage aus der Fußzeile entfernen

Hinzufügen eines dynamischen Site-Titels und einer Tagline zum Header

Im Vorlagenlayout-Editor wird der bereits erstellte vorgefertigte Header angezeigt. Wir können sofort mit unseren Anpassungen beginnen.

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]

Logo verschieben

Ziehen Sie zunächst das Bildmodul, das das Logo (dynamisch) anzeigt, aus der mittleren Spalte der oberen Reihe in die linke Spalte der oberen Reihe.

Fügen Sie ein Call-to-Action-Modul hinzu, um den Site-Titel und den Slogan anzuzeigen

Fügen Sie dann ein neues Call-to-Action-Modul in die mittlere Spalte der oberen Zeile ein (wo sich das Logo befand).

Passen Sie den Aufruf zum Handeln an

Wir werden das Call to Action-Modul verwenden, um den Site-Titel und den Slogan anzuzeigen.

Bevor Sie jedoch mit dem Hinzufügen von Inhalten beginnen, wählen Sie zunächst NEIN, um die Hintergrundfarbe zu verwenden.

Konfigurieren Sie Handlungsaufforderungen

Fügen Sie einen dynamischen Site-Titel hinzu

Bewegen Sie den Mauszeiger unter Inhaltseinstellungen über das Eingabefeld für den Titel und klicken Sie auf das Symbol "Dynamischen Inhalt verwenden". Wählen Sie dann "Site Title" aus der Liste.

Fügen Sie einen dynamischen Site-Slogan hinzu

Bewegen Sie dann die Maus über den Körperbereich und wählen Sie das Symbol "Dynamischen Inhalt verwenden". Wählen Sie dann "Site Tagline" aus der Liste.

Fügen Sie einen Divi-Site-Slogan hinzu

Fügen Sie einen dynamischen Homepage-Link hinzu

Es ist üblich, dass der Site-Titel beim Klicken auf die Startseite umgeleitet wird, insbesondere wenn Sie das Logo ersetzen. Um den gesamten Kurs auf die Startseite umzuleiten, fügen Sie den Link zur Startseite als dynamischen Inhalt zur URL des Kurslinks hinzu.

Fügen Sie einen Link zur Homepage hinzu

Gestaltung des Site-Titels und des Slogan-Textes

Jetzt werden der Site-Titel und der Slogan dynamisch in der Kopfzeile angezeigt. Jetzt müssen wir nur noch etwas Styling hinzufügen. Denken Sie daran, dass wir den Titeltext anpassen müssen, um den Site-Titel zu entwerfen, und den Textkörper, um den Slogan zu entwerfen.

Wechseln Sie zur Registerkarte "Design" und aktualisieren Sie Folgendes:

  • Titelschrift: Heebo
  • Titel Schriftgewicht: Fett
  • Titel Schriftart: TT
  • Titeltextgröße: 32px (Desktop), 24px (Tablet und Telefon)
  • Titelbuchstabenabstand: 0.3em
  • Körperschrift: Roboto
  • Body Font Style: kursiv
  • Körpertextfarbe:
  • Körpertextgröße: 13px
  • Body Letter Abstand: 0.1em
  • Körperlinienhöhe: 1em
Passen Sie die Schriftart des Divi-Titels an

Um die Zentrierung zu erleichtern, entfernen Sie die Standardauffüllung unter dem Textkörper, indem Sie der Promo-Beschreibung das folgende benutzerdefinierte CSS hinzufügen:

Polsterung unten: 0px
Fügen Sie einen benutzerdefinierten Divisionscode hinzu

Zusätzliche Designanpassungen

In diesem letzten Teil des Tutorials werden wir einige zusätzliche Designanpassungen an der Kopfzeile vornehmen, um sicherzustellen, dass die Elemente in jeder Spalte vertikal zentriert bleiben, und um der Schaltfläche ein einzigartiges Design zu geben. Wir werden dem Slogan auch eine verschnörkelte Vorher-Nachher-Linie hinzufügen (nur für Tritte).

Spalten / Inhalt vertikal zentrieren

Im Moment ist die oberste Zeile die aktive Option "Spaltenhöhen ausgleichen", die die Flex-Eigenschaft verwendet. Wir können dies nutzen, indem wir ein kleines CSS-Snippet hinzufügen, um sicherzustellen, dass alle Spalten vertikal in der Zeile zentriert bleiben. Öffnen Sie dazu die Einstellungen für die oberste Zeile und fügen Sie dem Hauptelement folgendes CSS hinzu:

Align-Items: Center;

Aktualisieren der Spalte mit der Schaltfläche

Öffnen Sie als Nächstes die Einstellungen für Spalte 3 in der oberen Zeile und entfernen Sie die Hintergrundfarbe und den Abstand.

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]

Passen Sie die Divi-Kontaktschaltfläche an

Aktualisieren des Schaltflächenhintergrunds

Öffnen Sie dann die Tastenmoduleinstellung und aktualisieren Sie den Hintergrund mit einem neuen Hintergrundverlauf wie folgt:

  • Verlaufshintergrund Linke Farbe: #ffffff
  • Farbe des rechten Hintergrundverlaufs: # 1dbf73
  • Farbverlaufsrichtung: 135deg
  • Startposition: 10%
  • Endposition: 0%
Passen Sie den Hintergrund der Divi-Schaltfläche an

Hinzufügen von Vorher- und Nachher-Zeichen zum Slogan

Jedes dynamische Inhaltselement kann durch Klicken auf das Zahnradsymbol geändert werden. Um dem Slogan Vorher- und Nachher-Zeichen hinzuzufügen, öffnen Sie die Einstellungen des Call-to-Action-Moduls, das den Slogan enthält, und klicken Sie auf das Bearbeitungssymbol im dynamischen Inhalt des Site-Slogans. Fügen Sie dann die Zeichen zu den Vorher- und Nachher-Einträgen hinzu.

Zeigen Sie den Divi-Slogan an

Endergebnis

Öffnen Sie eine beliebige Seite Ihrer Website, um das Ergebnis anzuzeigen. Der dynamische Site-Titel und der Slogan sollten wunderschön angezeigt werden!

Endergebnis divi

Abschließende Gedanken

Es ist wirklich schön, dass Sie einen Gesamtheader mit einem dynamischen Site-Titel und einem Slogan anpassen können. Dies scheint für viele Websites nützlich zu sein. Ich mag auch die Idee, den Site-Titel und den Slogan zusätzlich zum Logo einzufügen, um die Marke noch stärker darzustellen.

Quelle: Elegantes Thema

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

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

Zurück nach oben