DIVI Theme – individueller Header für Artikel Seiten

Das DIVI Theme von Elegantthemes gehört zu einem der bekanntesten MultiPurpose Themes der Welt.

Ich persönlich nutze das DIVI neben dem Avada Theme recht häufig für eigene, aber auch für Kundenprojekte. Der ein oder andere Kritiker wird nun wieder sagen dass solche Themes „schwerfällig“ sind, immer gleich aussehen, oder dass es schwierig ist komplett eigenständige Layouts und Designs zu entwickeln.

Ich liebe das DIVI und ich liebe das Avada Theme und kann diese Kritiken auch überhaupt nicht bestätigen. Selbstverständlich benötigen diese Art von Themes auch eine längere Einarbeitungsphase und vermutlich sind diese sogar für den „Otto-Normalverbraucher“ viel zu komplex, aber für Entwickler und Designer sind diese in meinen Augen ein echter Traum und wenn man häufiger damit arbeitet ist es unglaublich in welch kurzer Zeit man komplexe Webseiten, Funktionen, mobile Darstellungen etc. umsetzen kann.

In meinem heutigen Artikel geht es um ein „Problem“ dass zuletzt von einem unserer Kunden angefragt worden ist:

Wie nutze ich einen individuellen Header bei Artikel / Blog Seiten?

Der ein oder andere wird das Problem kennen. Ihr habt einen schicken transparenten Header für eure Startseite erstellt. Für Unterseiten habt ihr nun die Möglichkeit mit dem DIVI Builder ein angepasstes Layout zu erstellen aber spätestens bei den Artikel Seiten gibt es keine Möglichkeit mehr hier individuell einzuwirken.

In unserem Fall war der Header und das Menü komplett auf die Startseite abgestimmt und auf den Artikelseiten hat das Layout dann einfach nicht mehr gepasst.

Um dieses „Problem“ zu lösen werde ich nun eine Lösung präsentieren bei der jedoch einiges Grundwissen bezüglich FTP Zugriff oder auch Bearbeitung von Dateien eures Templates sehr hilfreich sind.

Los gehts…

Erstellung eines Child Themes

Sobald ihr Änderungen an eurem Theme vornehmt ist ein Childtheme Pflicht. Hier erfahrt ihr wie ihr ein Child Theme bei WordPress erstellt.

Erstellung einer Kopie der single.php

Ein einzelner Blogartikel wird über die single.php dargestellt. Diese wollen wir nun etwas erweitern und damit unsere Änderungen beim nächsten Update nicht wieder überspielt werden, kopieren wir uns die single.php aus dem Theme Ordner und speichern sie im ersten Schritt auf unserem PC.

Also öffnet mit einem Programm wie z.B. filezilla eure Seite und navigiert zu …./wp-content/themes/Divi

Dort findet ihr die single.php.

Erstellung einer neuen Section mit dem DIVI Builder

Geht dafür im WP Admin auf DIVI > Divi-Bibliothek und klickt auf „Neu hinzufügen, vergebt einen template Namen und wählt aus dem Dropdown „Section“ aus. (Checkbox bei den Kategorien nicht vergessen!)

Im nächsten Schritt könnt ihr nun wie gewohnt den DIVI Builder verwenden um einen separaten Bereich zu bauen.

In unserem Fall haben wir eine Hintergrundgrafik hochgeladen (natürlich könnt ihr z.B. auch einfach eine Hintergrundfarbe setzen), Die Abstände entsprechend angepasst und einen Bereich für den Seitentitel hinzugefügt.

Info. Wenn den Seitentitel dynamisch ausgeben möchtest, also quasi statt einem statischen Text/Titel, lieber den Titel des entsprechenden Posts zeigen möchtet, fügt im Textmodul folgenden Shortcode hinzu:

<h1>[page_title]</h1>

Zum Schluss des Artikels werden wir hier durch ein kleines Snippet in der functions.php unseren Seiten Titel dynamisch ausgeben.

Ansicht im frontend visual Builder des DIVI
Ansicht im backend visual Builder des DIVI

Das erstellte Layout speichert ihr nun einfach ab.

Wichtig: Nachdem ihr das Layout gespeichert habt, öffnet dies noch einmal über bearbeiten und notiert euch die ID die in eurer URL Leiste angezeigt wird. Diese brauchen wir nämlich gleich!

In unserem Fall ist die ID die 521

Einbau der DIVI Section in die single.php

im nächsten Schritt öffnet ihr nun die zu Beginn abgespeicherte single.php mit einem Editor (nicht Word 🙂 )

Fügt nun den folgenden Code direkt unter der Zeile „get_header() ; ein

echo do_shortcode ('[et_pb_section global_module="521"][/et_pb_section]');

Speichert die Datei und ladet diese nun in euer Child Theme hoch. Also …/wp-content/themes/Divi-Childtheme

Wenn alles passt sollte nun ein einzelner Artikel eure entsprechenden Änderungen anzeigen.

Dynamische Anpassung des Titels in eurem neuen Header

Um nun je nach Artikel/Post auch eine entsprechende Überschrift des Titels in eurem neuen Header auszugeben, fügen wir nun noch ein kleines Snippet in unsere functions.php ein.

Wichtig! Dies müsst ihr nur durchführen wenn ihr weiter oben den kleinen Shortcode in euer Textmodul eingefügt habt.

Eure functions.php sollte sich ebenfalls in eurem Child-Theme befinden, also …wp-content/themes/Divi-Child

Fügt nun am Ende der functions.php folgenden Code hinzu:

function page_title_fastwp() {
	return get_the_title();
}
add_shortcode( 'page_title', 'page_title_fastwp');

Das war es eigentlich.

Noch ein paar abschließende Worte. Um das hier skizzierte „Problem“ zu lösen gibt es natürlich auch noch andere Optionen.

Gerade weil sich aber auf diese Art und Weise individuelle Sections in der DIVI Bibliotek erstellen lassen, ist dies sicherlich auch bei anderen Problemstellungen eine effektive Herangehensweise.

Christian
Christian
Mein Name ist Christian und ich bin Mitgründer der Plattform fastWP. Hier im Magazin bin ich für die eher "technisch" lastigen Themen zuständig aber schreibe gerne über das Thema SEO, das nun bereits seit über 10 Jahren zu meiner Leidenschaft gehört.

HINTERLASSEN SIE EINE ANTWORT

Please enter your comment!
Please enter your name here

154 SEO Tools - die ultimative Liste!

Abonniere jetzt unseren Newsletter und lade dir die Liste kostenlos herunter!

Alles klar! Prüfe jetzt deinen Posteingang um die Anmeldung abzuschließen.