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.
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!
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]');
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.
