Divi Page Builder in Custom Post Types nutzen (z.B. WooCommerce)

Divi ist ein tolles Theme. Aber der großartige Pagebuilder ist leider nur für Seiten und Beiträge verfügbar. Naja, was heißt „nur“. In den meisten Fällen wird dies reichen. Aber wer zum Beispiel einen Shop mit WooCommerce baut, wird den Pagebuilder sich auch gerne für die Produktseiten nutzen.

Nun, hier gibt es eine gute und eine schlechte Nachricht. Von Hause aus ist dies nicht möglich. Aber mit ein paar kleinen Tricks bekommt man den Pagebuilder auch zur Gestaltung seiner Produkte in WooCommerce oder anderen Custom Post Types aktiviert.

Divi Page Builder in Custom Post Types (z.B. Produkte in WooCommerce) aktivieren.

Schritt 1:

Zunächst empfehle ich dir, immer in einem Childtheme zu arbeiten. Wie du ein Childtheme anlegst, habe ich dir hier erklärt: So kannst du ein WordPress Child-Theme erstellen.

Schritt 2:

Von Hause aus ist es nicht möglich, den PageBuilder auch bei den Produkten unter WooCommerce zu nutzen. Aber mit einem kleinen Trick bekommt man den Pagebuilder auch zur Gestaltung seiner Produkte in WooCommerce oder anderen Custom Post Types aktiviert.

1. Gehe zu DESIGN > EDITOR

2. Öffne die Datei function.php deines Child-Themes

3. Füge folgenden Code der Datei hinzu: function my_et_builder_post_types( $post_types ) { $post_types[] = 'YOUR_CPT_HERE'; $post_types[] = 'ANOTHER_CPT_HERE'; return $post_types; } add_filter( 'et_builder_post_types', 'my_et_builder_post_types' ); Für die Werte YOUR_CPT_HERE und ANOTHER_CPT_HERE muss man nun den richtigen Wert für WooCommerce und seinen Custom Post Type einsetzen. Für WooCommerce würde die richtige Funktion so aussehen: function my_et_builder_post_types( $post_types ) { $post_types[] = 'product'; return $post_types; } add_filter( 'et_builder_post_types', 'my_et_builder_post_types' ); 4. Datei speichern.

Ab sofort hast du den Pagebuilder überall verfügbar, wo es auch einen Texteditor gibt.

Eine Einschränkung: Die Bibliothek.

Leider erkennt der Pagebuilder außerhalb von Beiträgen und Seiten die klassische Divi-Bibliothek nicht. Also keine Panik, wenn du hier keine Layouts laden kannst.

Mein Umweg: Du kannst über eine Seite ein Layout laden und dann per Copy and Paste in deinen Custom-Pagebuilder einfügen. Nun kannst du dieses Layout speichern – und später auch wieder im Rahmen dieses Post Types (Also zum Beispiel WooCommerce Produktes) aufrufen.

Im Detail: Du erstellst eine normale Seite und gestaltest deine Sektion. Dann gehst du mit der rechten Maustaste auf die Sektion und kopierst diese. Nun gehst du z.B. zu deinem WooCommerce-Produkt, aktivierst den Pagebuilder und fügst die Sektion per Paste (wieder mit der rechten Maustaste) ein. Jetzt kannst du das Layout in deiner Bibliothek speichern und es wird für alle weiteren WooCommerce-Produkte zur Verfügung stehten.

Neuer Theme Builder ab Divi 4

Neuer Theme Builder ab Divi 4

Unendliche Möglichkeiten dank des Theme Builders Divi 4. Mit dem Theme Builder könnt ihr jetzt komplette Seiten-Templates erstellen, z.B. für den Blog, die 404-Seite oder für Archiv- oder Suchergebnisse. Dabei könnt ihr global einen Kopf-, Inhalts-, und Fußbereich...

WordPress Standard-Text für geschützte Seiten ändern

WordPress Standard-Text für geschützte Seiten ändern

Du kannst in WordPress einzelne Seiten und Beiträge mit einem Passwort schützen. Ruft dann jemand diese Seite auf, erscheint ein Standard-Text: “This post is password protected. To view it please enter your password below:” beziehungsweise: "Um diesen geschützten...

DIVI Related Posts ohne Plugin

DIVI Related Posts ohne Plugin

In diesem Tutorial "Divi Related Posts" zeige ich dir, wie du ähnliche Beiträge unterhalb deiner Blogbeiträge ausgeben kannst. Divi bietet von Hause aus leider keine Möglichkeit, ähnliche Beiträge unterhalb eines Blogbeitrags auszugeben. Aber keine Sorge: Es gibt...

|

Hey, hinterlasse mir einen Kommentar!

9 Kommentare

  1. Dirk

    Hallo Marco,
    ich verstehe nicht die Aussage

    “ Mein Umweg: Du kannst über eine Seite ein layout laden und dann per Copy and Paste in deinen Custom-Pagebuilder einfügen. Nun kannst du dieses layout speichern – und später auch wieder im Rahmen dieses Post Types (Also zum Beispiel WooCommerce Produktes) aufrufen.“

    Wie soll das praktisch funktionieren.

    Grüße Dirk

  2. Marco

    Hi Dirk, du erstellst eine normale Seite und gestaltest deine Sektion. Dann gehst du mit der rechten Maustaste auf die Sektion und kopierst diese. Nun gehst du z.B. zu deinem WooCommerce-Produkt, aktivierst den Pagebuilder und fügst die Sektion per Paste (wieder mit der rechten Maustaste) ein. Jetzt kannst du das Layout in deiner Bibliothek speichern und es wird für alle weiteren WooCommerce-Produkte zur Verfügung stehten. VG, Marco

  3. Friedrich Weitzel

    Hallo,

    hm, bei mir funktioniert das noch nicht. Ich nutze schon länger DiVi und würde sehr gerne bei meinen Woocommerce Seiten auch den Page Builder nutzen.
    Habe Deinen Code oben in die function.php des Child Themes kopiert. Die Seite lädt normal. Wenn ich jetzt ein neues Produkt anlege, wird mir der Page Bulider leider NICHT angezeigt.

    Habe es wieder gelöscht und noch einmal probiert. Leider immer noch ohne Erfolg. Auch bei bereits bestehenden Produkten wird mir der Page Builder nicht zur Auswahl (wie auf normalen Seiten) angezeigt.

    Meine funczins.php sieht so aus:
    post_type) and $s->post_type!=’page‘ and $s->post_type!=’post‘) {
    ?>

    jQuery(function($){
    $(‚#et_pb_layout‘).insertAfter($(‚#et_pb_main_editor_wrap‘));
    });

    #et_pb_layout { margin-top:20px; margin-bottom:0px }

    <?php
    }
    }
    add_action('admin_head', 'myprefix_admin_js');

    Kannst Du mir sagen woran das liegt?

    Danke
    Gruß
    Friedrich

  4. Marco

    Also ich habe bei mir diesen Code stehen – und der geht wunderbar:

    /* Enable Divi Builder on all post types with an editor box */
    function myprefix_add_post_types($post_types) {
    foreach(get_post_types() as $pt) {
    if (!in_array($pt, $post_types) and post_type_supports($pt, 'editor')) {
    $post_types[] = $pt;
    }
    }
    return $post_types;
    }
    add_filter('et_builder_post_types', 'myprefix_add_post_types');
    /* Add Divi Custom Post Settings box */
    function myprefix_add_meta_boxes() {
    foreach(get_post_types() as $pt) {
    if (post_type_supports($pt, 'editor') and function_exists('et_single_settings_meta_box')) {
    add_meta_box('et_settings_meta_box', __('Divi Custom Post Settings', 'Divi'), 'et_single_settings_meta_box', $pt, 'side', 'high');
    }
    }
    }
    add_action('add_meta_boxes', 'myprefix_add_meta_boxes');
    /* Ensure Divi Builder appears in correct location */
    function myprefix_admin_js() {
    $s = get_current_screen();
    if(!empty($s->post_type) and $s->post_type!='page' and $s->post_type!='post') {
    ?>
    <script>
    jQuery(function($){
    $('#et_pb_layout').insertAfter($('#et_pb_main_editor_wrap'));
    });
    </script>
    <style>
    #et_pb_layout { margin-top:20px; margin-bottom:0px }
    </style>
    <?php
    }
    }
    add_action('admin_head', 'myprefix_admin_js');

  5. Friedrich Weitzel

    Habe es mit copy paste noch mehrfach probiert.
    Die ganze Seite ist das nicht mehr zu laden, weil angeblich ein Fehler in Zeile (auf Deinen Code bezogen) 24 vorliegen würde.

    Leider verstehe ich nicht viel von html :-(

    Gruß
    Friedrich

  6. Marc

    Moin,
    leider scheint dies nicht mehr zu funktionieren. Sehe keinerlei Änderungen auf meiner Seite. Hinzugefügt direkt in mein Child-Theme.

    Könntest du eventuell noch ein Update bringen bitte?

    Danke!

    VG

  7. Marco

    Hi, bei mir geht dies ohne Probleme? Prüfe bitte, ob du die aktuelle Divi-Version installiert hast.

  8. Alex

    Ich nehme an das betrifft die alte Version von Divi. Bilde mir ein gelesen zu haben, dass die 3er Version mit Woocommerce umgehen kann. Oder verstehe ich da was falsch?

  9. Marco

    Divi und Woo kommen miteinander klar. Was hier beschrieben ist, ist die Möglichkeit den Pagebuilder zur Gestaltung eines Produktes einzusetzen.

Einen Kommentar abschicken

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

Marco

Marco

Designer & Marketer

Später lesen?

Diesen Artikel als
E-Book downloaden!


DOWNLOAD

Pin It on Pinterest

Share This

Durch der Website stimmst du der Cookie-Verwendung zu. Impressum | Datenschutzerklärung | Cookie-Settings