Cómo añadir un área de widgets a la cabecera del tema Divi

El tema Divi ofrece por defecto 2 zonas de cabecera, la principal y la superior, con montones de posibles personalizaciones, pero ¿y si quieres más? ¿y si necesitas un área de widgets bajo la cabecera principal?

Un modo sencillo de añadir elementos bajo el menú de navegación principal es añadir una zona de widgets, en la que puedas añadir cualquier bloque o widget que quieras o necesites.

Es muy sencillo, solo tienes que añadir el siguiente código al final del archivo functions.php del tema hijo de Divi:

/* Area de widgets bajo cabecera Divi */
// Creamos el area de widgets nueva
function ayudawp_widget_area() {
register_sidebar(array(
'name' => 'Cabecera',
'id' => 'ayudawp-widget-area',
'before_widget' => '<div id="%1$s" class="et_pb_widget %2$s">',
'after_widget' => '</div> <!-- end .et_pb_widget -->',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
));
}
add_action('widgets_init', 'ayudawp_widget_area');

// Creamos el area de widgets y lo ponemos en su lugar
function ayudawp_footer() { ?>
<div id="ayudawp-widget-area-wrap">
<?php dynamic_sidebar('ayudawp-widget-area'); ?>
</div>
<script>
jQuery(function($){
$("#et-top-navigation").after($("#ayudawp-widget-area-wrap"));
$("#ayudawp-widget-area-wrap").show();
});
</script>
<?php 
} 
add_action('wp_footer', 'ayudawp_footer');

// Ajustamos el diseño para que se ajuste a la cabecera
function ayudawp_css() { ?>
<style>
#ayudawp-widget-area-wrap { 
display:none; 
float:right; 
max-width: 500px; 
clear:right;
position:relative; 
}
#ayudawp-widget-area-wrap .et_pb_widget { margin-right:0px }
#ayudawp-widget-area-wrap .et_pb_widget:last-child { margin-bottom: 18px; }
.et-fixed-header #ayudawp-widget-area-wrap .et_pb_widget:last-child { margin-bottom: 10px; }
@media only screen and ( max-width: 980px ) { 
#ayudawp-widget-area-wrap .et_pb_widget:last-child { margin-bottom: 0px; }
}
@media only screen and ( max-width: 768px ) {
#ayudawp-widget-area-wrap .et_pb_widget:first-child { margin-top: 18px; }
}
</style>
<?php
}
add_action('wp_head', 'ayudawp_css');

Guarda los cambios y ya puedes ir a la sección de «Apariencia → Widgets» o al personalizador y empezar a añadir widgets o bloques al nuevo área de widgets bajo el menú de navegación de la cabecera principal del tema Divi, a la nueva área de widgets llamada «Cabecera».