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».

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 7

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido