Wordpress, Themes und Plugins Tutorial: Divi Landingpage mit Custom Post Type erstellen

Tutorial: Divi Landingpage mit Custom Post Type erstellen

16. Mai 2020 | Wordpress, Themes und Plugins | 5 Kommentare

Für viele Anwendungsfälle möchte man einen eigenen Inhaltstyp in WordPress haben. Wie du das machst und was du bei dem Theme Divi in Verbindung mit einem Custom Post Type beachten musst, zeige ich Dir in diesem Beitrag.

Warum Custom Post Type in WordPress?

Warum benötigst du einen separaten Beitragstyp in WordPress? Es gibt das die vielfältigsten Gründe.

Der Hauptgrund ist die Übersichtlichkeit von Inhalten. Aber oftmals werden diese Inhalte mit zusätzlichen Feldern ausgestattet. Viele Themes bringen deshalb einen zusätzlichen Inhaltstyp mit. So auch das Theme Divi von Elegantthemes?

Divi bringt den Inhaltstyp Projekte mit. Dieser dient dazu z.B. Referenzen oder abgeschlossene Kundenprojekte einzupflegen.

Innerhalb dieses Inhaltstyps Projekte können eigene Kategorien und Tags angelegt werden, wodurch sich die hinterlegten Inhalte besser filtern lassen.

Welchen Vorteil bietet ein Custom Post Type?

Ein benutzerdefinierter Inhaltstyp (englisch Custom Post Type) bietet dir die Möglichkeit, deinen Content besser zu organisieren. Außerdem können diese Inhaltstypen mit zusätzlichen Feldern und Funktionalitäten ausgestattet sein.

Ein weiterer Vorteil ist, das du separate Inhaltstypen von der Suche und von der XML Sitemap ausschließen kannst. Das macht Sinn beispielsweise bei bestimmten Landinpages oder bei Bestätigungsseiten, die der Besucher nur unter bestimmten Umständen sehen soll.

Custom Post Type und das Divi Theme

Wie bereits weiter oben schon erwähnt, bringt Divi bereits einen eigenen Custom Post Type mit. Divi ist außerdem schon vorbereitet für weitere eigene Inhaltstypen.

Egal ob die zusätzlichen Inhaltstypen per PHP Code oder per Plugin angelegt werden, der Divi Builder erkennt und unterstützt auch diese Inhaltstypen. Um die Unterstützung des Divi-Builder zu verwenden, muß nur in den Divi Optionen der entsprechende Posttype aktiviert werden. Das war schon alles,dachte ich zumindest.

So erstellst du einen Custom Post Type

In diesem Abschnitt gebe ich Dir eine Schritt für Schritt Anleitung, wie du benutzerdefinierte Inhaltstypen mit Divi nutzen kannst, ohne das du zusätzlichen PHP Code manuell einsetzen mußt.

Dieses Plugin benötigst du für WordPress

Allerdings benötigst du ein zusätzliches WordPress Plugin, um den zusätzlichen Inhaltstyp anzulegen und zu verwalten. Du kannst das natürlich über die function.php auch manuell programmieren. Das ist hier aber nicht das Thema des Beitrags.

Wir nutzen für die Umsetzung das Plugin „Custom Post Type UI“. Damit kannst du benutzerdefinierte Inhaltstypen anlegen, konfigurieren und verwalten.

Installiert wird das Plugin wie gewohnt über die Pluginsuche von WordPress. Nach dem installieren und aktivieren, noch einmal den Menüpunkt Aktualisierungen von WordPress anklicken und Sprachdateien updaten. Danach ist „Custom Post Type UI“ auch auf deutsch.

Neuen Custom Post Type anlegen

Nach dem du das Plugin „Custom Post Type UI“ installiert und aktiviert hast, findest du in der linken Seitenleiste von WordPress den neuen Menüpunkt „CPT UI“.

Damit legst du jetzt deinen neuen Inhalts Type an. In meinen Beispiel erstellen wir einen eigenen Inhaltstype für Landingpages. Zunächst klicken wir auf „Neuen Inhaltstyp hinzufügen“

Nachfolgend beschreibe ich, welche Felder du ausfüllen und was du dort eintragen musst. Wir fangen zuerst mit den Grundeinstellungen von unserem neuen Custom Post Type an. Diese Einstellungen sind zwingend wichtig.

  • Inhaltstyp-Titelform
    In diesem Feld legen wir den Slug fest, um dem Inhaltstyp einen technischen Namen zugeben. Zudem wird der Slug in der URL verwendet, um damit diese Inhalte in einem fiktiven Ordner zusammen zu fassen. Wir tragen hier „lp“ für Landingpage ein.
  • Beschriftung Plural und Singular
    In diesen beiden Felder tragen wir den ausgeschriebenen Namen für unseren Inhaltstyp ein. Einmal als Singular (Einzahl) und Plural (Mehrzahl). Wir tragen hier „Landingpage“ bei Singular und „Langingpages“ bei Plural ein.
CPT UI - Grundeinstellungen
  • Hat ein Archiv
    Diese Einstellung lassen wir auf „deaktiviert“, da wir für unsere Landingpages kein Archiv benötigen.
  • Von der Suche ausschließen
    Hier wählen wir „deaktiviert“ aus, denn wir wollen ja, das diese Inhalte nicht von der WordPress Suche gefunden werden.
CPT UI - Suche ausschließen
  • Menü-Position
    Mit dieser Einstellung kannst du festlegen, wo in der linken Seitenleiste dein neuer Inhaltstyp angezeigt wird. Beispielsweise direkt unter dem Inhaltstyp „Projekte“ von Divi.
  • Im Menü anzeigen
    Natürlich wollen und müssen wir den neuen Inhaltstyp im Menü anzeigen. Also wählen wir hier „aktiviert“ aus.
  • Menü-Icon
    Mit dieser Einstellung kann das Symbol geändert werden, welches an dem Menüpunkt angezeigt wird. Hierfür musst du den entsprechenden WordPress Code in das Feld kopieren. Eine Liste aller Icon Codes findest du hier, oder in der Nähe des Eingabefeldes.
CPT UI - Menüposition festlegen
Wordpress Icons auswählen
  • Unterstützt
    Mit dieser Auswahl legst du fest, welche der Grundfunktionalität der neue Inhaltstyp haben soll. Für unseren Fall benötigen wir nur die nachfolgenden Elemente.
    • Titel
    • Editor
    • Beitrag
    • Seiten-Attribute
    • Beitrags-Formate
CPT UI - unterstützte Funktionen auswählen

Nachdem wir diese Einstellungen alle ausgewählt haben, kannst du den neuen Custom Post Type speichern und damit anlegen. Sollte doch noch was verändert werden, kannst du das nachträglich anpassen.

Unseren neuen Post Type haben wir nun angelegt, aber unser Page Builder von Divi arbeitet noch nicht so richtig. Außerdem haben wir immer noch die Seitenleiste, sowie die den Kopf und den Fuss unseres Blogs, den wir für die Landingpage nicht gebrauchen können. Das werden wir im nächsten Schritt ändern.

Divi Builder Unterstützung

Das Problem, das unser neuer Custom Post Type vom Divi-Builder unterstützt wird, ist recht einfach zu beheben. Dazu gehst du in die Theme Optionen von Divi. Und hier wählst du den Tab „Builder“ aus. Dir werden auf dieser Seite alle verfügbaren Inhaltstypen angezeigt.

Auch unser Inhaltstype „Landingpages“ wird an dieser Stelle mit angezeigt. Einfach den Schalter aktivieren und der neue Custom Post Type wird nun vom Divi Builder unterstützt. Soviel dazu, aber das war noch nicht alles.

Custom Post Type im Divi Builder aktivieren

Custom Post Type ohne Header und Footer

Nach dem wir die Divi Unterstützung gelöst haben, müssen wir die Landingpage Inhalte von Seitenleiste, Footer und Header befreien. An dessen Stelle sollen unsere Landingpages eigene Header und Footer bekommen. Es soll ja schließlich nichts vom Angebot ablenken und woanders hin klicken.

Als Nächstes nutzen wir die neue Divi Template Funktion und legen wir für unseren Inhaltstyp „Landingpages“ ein eigenes Divi Template an. Dazu gehst du auf den Menüpunkt „Template Builder“ in der linken Seitenleiste. Jetzt kannst du für diesen Inhaltstyp einen eigenen Header und einen eigenen Footer festlegen.

Divi Template Builder - eigenes Template für Header und Footer anlegen.

Als erstes legst du den benutzerdefinierten Header für deine Landingpages an. Hier kommt nur das Logo und/oder der Seitentitel in Textform hinein. Der Besucher soll zwar wissen mit welchem Anbieter er es zu tun hat, aber der Header soll nicht vom weiteren Inhalt der Seite ablenken. Wie der Header im Detail aussieht ist dabei Dir überlassen und kannst du frei gestallten.

CPT - Benutzerdefinierte Kopfzeile anlegen

Im nächsten Schritt musst du die benutzerdefinierte Fußzeile anlegen. Das geschieht im Prinzip genauso, wie bei der Kopfzeile, nur das du hier die Links zum Impressum und zum Datenschutz deiner Webseite einbaust. Auch hier kannst das Layout nach deinen Wünschen anpassen.

CPT - Benutzerdefinierte Fußzeile anlegen

Landingpage mit CSS Code anpassen

Nachdem wir für unsere Landingpage den Divi Builder aktiviert haben und die Seite zum ersten mal aufrufen, müssen wir feststellen, das noch nicht Alles so aussieht wie es soll. Zum einen wird die standardmäßige Beitrags-Überschrift angezeigt und zum anderen haben die Elemente unschöne Seitenränder. Damit können wir unser Layout immer noch nicht ordentlich aufbauen.

Custom Post Type ohne CSS Anpassung

Abhilfe schaffst du mit nachfolgenden CSS Code. Einerseits wird der originale Post Title mit dem CSS Code ausgeblendet. Zum anderen werden mit diesem CSS Code auch die Seitenränder bei Verwendung des Divi Builder korrigiert. Jetzt kannst du deine Layouts wie gewohnt erstellen.

body.single-lp div#main-content div.container {
    padding-top: 0px !important;
    width: 100%;
    max-width: 100%;
}
body.single-lp div#main-content div.entry-content {
    padding-top: 0px;
}
body.single-lp div#main-content div.et_post_meta_wrapper {
  display: none !important;
}

Den CSS Code kannst du an 2 Stellen im Divi Theme einsetzen. Entweder in den Theme Optionen. Dort gibt es ganz unten ein Feld um weiteren CSS Code einzufügen. Der Vorteil ist hier, das du den Code nur einmal einbinden musst und damit automatisch überall gilt.

Ich empfehle Dir aber den Code in der entsprechenden Landingpage unterzubringen. Dazu klickst du unten auf das Zahnrad und kommst so zu den Grundeinstellungen für die einzelne Seite. Der Vorteil ist, das der Code auch nur bei Aufruf dieser Landingpage mit geladen wird.

Divi Seite eigenen CSS Code einbinden

Damit haben wir alle Anpassungen erledigt und der neue Custom Post Type kann ohne Einschränkungen verwendet werden.

Einen Haken gibt es allerdings bei dieser Lösung. Der von WordPress ausgegebene Titel wurde von uns nur per CSS ausgeblendet. Wir haben damit die H1 Überschrift zweimal im HTML Code.

Google bekommt aber schon mit, welche Überschrift für den Besucher sichtbar ist. Für Online Marketing, das die Besuche per Google Ads oder Facebook Ads auf die Seite holt stellt das kein Problem dar.

Fazit zu Divi und Custom Post Type

Um mehr Übersicht für die Inhalte von WordPress zu erhalten, kannst du relativ einfach WordPress Custom Post Type nutzen. Diese hier vorgestellte Lösung ist vorrangig für Seiten geeignet, die für Landingpages oder Bestätigungsseiten verwendet werden.

Wie hat dir dieser Beitrag gefallen?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Hier schreibt: Thomas

Hier schreibt: Thomas

Ich heiße Thomas und bin Inhaber einer Agentur für eCommerce und Online Marketing. Zusätzlich interessiere ich mich für CMS Systeme, Wordpress, Drupal, Grafik und Multimedia. Ihr findet mich auf Twitter und Facebook. Über einen Kommentar zu diesem Beitrag würde ich mich freuen.

5 Kommentare

  1. Davut

    Danke für diese tolle Anleitung. Ich werde es auf jeden Fall ausprobieren.

    Gruß Davut

    Antworten
    • Thomas

      Ja, ich habe auch lange rumprobiert, um eine Lösung zu finden die ohne Programmieraufwand auskommt.

  2. Anthea

    Hallo,
    vielen Dank für das Teilen dieser Lösung.
    Ich werde es definitiv mal ausprobieren.
    LG aus Hannover,
    Anthea

    Antworten
  3. Andre

    Alles wurde sehr ethisch erklärt. Gut gemacht!

    Antworten
  4. Ali El Okla

    Hallo,
    Unglaublicher Artikel. Vielen Dank, dass Sie uns die Lösung geliefert haben.
    Beste grüße,

    Antworten

Einen Kommentar abschicken

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

Blog via E-Mail abonnieren

Gib Deine E-Mail-Adresse an, um diesen Blog zu abonnieren und Benachrichtigungen über neue Beiträge via E-Mail zu erhalten.

Schließe dich 2.830 anderen Abonnenten an

In eigener Sache

Mit einem Stern (*) markierten Links sind Affiliate-Links. Wenn du einen Kauf über diese Links tätigst, bekomme ich eine Provision und du unterstützt aktiv diesen Blog. Für dich ändert sich der Preis nicht.

Wichtig: Ich empfehle nur Produkte, die ich selbst verwende und/oder von denen ich überzeugt bin. Vielen Dank für deine Unterstützung!