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.
Beachten Sie den Site-Titel und den Slogan in der oberen Mitte der Kopfzeile, die dynamisch angezeigt wird.
Kostenloser Download
Treten Sie dem Divi Newlsetter bei und wir senden Ihnen per E-Mail eine Kopie des Divi Ultimate Landing Page Layout Pack und jede Menge mehr Ressourcen, kostenlose und erstaunliche Divi-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.
Nach Abschluss ist die gesamte Header-Vorlage im Divi Theme Builder verfügbar.
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.
Und einige Leute wissen nicht einmal, dass der Slogan existiert, geschweige denn, sich die Zeit zu nehmen, ihn zu aktualisieren. Zusätzlich bei der Verwendung von Divi-Thema, werden der Website-Titel und der Slogan standardmäßig nicht auf Ihrer Website angezeigt, sodass sie leicht übersehen werden können. Der Seitentitel und der Slogan sind jedoch wesentliche Elemente 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.
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 JSON-Datei von Website-Vorlage Standardeinstellung.
Gehen Sie dann zu Divi> Theme Builder.
Klicken Sie oben rechts auf das Portabilitätssymbol. Wählen Sie im Popup-Portabilitätsfenster die JSON-Datei aus Website-Vorlage Standard und klicken Sie auf die Schaltfläche Importieren.
Wenn die Vorlage zum Theme Builder hinzugefügt wurde, löschen Sie die Fußzeilenvorlage und klicken Sie, um die Gesamtüberschrift zu bearbeiten.
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.
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).
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.
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 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.
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
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
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.
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%
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.
Endergebnis
Öffnen Sie eine beliebige Seite Ihrer Website, um das Ergebnis anzuzeigen. Der dynamische Site-Titel und der Slogan sollten wunderschön angezeigt werden!
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
