---
title: "Colección de Divi tips I"
url: https://caribdis.net/2015/11/09/coleccion-de-divi-tips-i/
date: 2015-11-09
modified: 2020-04-22
lang: es
author: "Caribdis.Net"
description: "Hacía rato que tenía ganas de armar una serie de entradas que recopilaran consejos útiles y trucos para Divi. Algunos pertenecen a las entregas semanales del podcast Divi Nation, pero..."
categories:
  - "Consejos"
  - "Divi"
tags:
  - "Divi"
  - "Elegant Themes"
  - "tutorial"
  - "WordPress"
image: https://caribdis.net/wp-content/uploads/2015/11/divitips.jpg
word_count: 1513
---

# Colección de Divi tips I

Hacía rato que tenía ganas de armar una serie de entradas que recopilaran consejos útiles y trucos para [**Divi**](https://caribdis.link/Divi). Algunos pertenecen a las entregas semanales del podcast [Divi Nation](http://www.elegantthemes.com/blog/category/community), pero la mayoría son consultas puntuales, o preguntas que los usuarios han dejado en los comentarios. Hoy inauguramos con esta media docena de *tweaks*:

### Convertir el menú estándar en el icono “hamburguesa” (o menú para móviles)

Con este truco, podremos tener siempre visible el icono del menú para móviles, aunque estemos en la versión de escritorio. Un clic en el icono revelará los elementos del menú con un efecto de aparición suave.

[![Menú para móvil en resoluciones de escritorio](//caribdis.net/wp-content/uploads/2015/11/menu-movil-1024x166.png)](https://caribdis.net/wp-content/uploads/2015/11/menu-movil.png)

Primero, vamos al menú *Opciones del tema > Integración* y pegamos el siguiente código en el recuadro *Añadir código al <head> de su sitio*:
<script type="text/javascript">
(function($) {
$(document).ready(function() {
if ($('#top-menu').length) {
$('<div></div>').insertAfter('#top-menu');
$('.menu-toggle').click(function() {
$(this).prev('ul').toggleClass('menu-visible');
});
}
});
})(jQuery);
</script>
Luego, vamos a la hoja de estilos del tema hijo (o al recuadro CSS personalizado de las Opciones del tema) y pegamos lo siguiente:
@media only screen and (min-width: 981px) {
#top-menu-nav #top-menu {
opacity: 0;
-moz-animation: fadeOut 0.6s 1 cubic-bezier(0.77, 0, .175, 1);
-ms-animation: fadeOut 0.6s 1 cubic-bezier(0.77, 0, .175, 1);
-o-animation: fadeOut 0.6s 1 cubic-bezier(0.77, 0, .175, 1);
-webkit-animation: fadeOut 0.6s 1 cubic-bezier(0.77, 0, .175, 1);
transition: fadeOut 0.6s 1 cubic-bezier(0.77, 0, .175, 1);
}

#top-menu-nav #top-menu.menu-visible {
opacity: 1; -moz-animation: fadeIn 0.6s 1 cubic-bezier(0.77, 0, .175, 1);
-ms-animation: fadeIn 0.6s 1 cubic-bezier(0.77, 0, .175, 1);
-o-animation: fadeIn 0.6s 1 cubic-bezier(0.77, 0, .175, 1);
-webkit-animation: fadeIn 0.6s 1 cubic-bezier(0.77, 0, .175, 1);
transition: fadeIn 0.6s 1 cubic-bezier(0.77, 0, .175, 1);
}

#top-menu-nav .menu-toggle {
float: right; margin: -8px 0 0 10px;
cursor: pointer;
}

#top-menu-nav .menu-toggle:after {
font-family: 'ETmodules';
font-size: 32px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative; content: '61';
}
}
Fuente: [Podcast Divi Nation N° 9](http://www.elegantthemes.com/blog/community/the-divi-nation-podcast-episode-9-transitioning-from-web-designer-to-digital-strategist-with-marie-poulin)

### Mostrar los botones Añadir al carrito en la página Tienda.

De manera predeterminada, Divi no muestra los botones *Añadir al carrito* o *Seleccionar opciones* de los productos variables en las páginas de categorías de la tienda.

[![Tienda de Divi predeterminada](//caribdis.net/wp-content/uploads/2015/11/tienda1.jpg)](https://caribdis.net/wp-content/uploads/2015/11/tienda1.jpg)

Pegando el siguiente código en el archivo `functions.php` del tema hijo:
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 11 );
lograremos lo siguiente:

[![Tienda con botones "Añadir al carrito"](//caribdis.net/wp-content/uploads/2015/11/tienda2.jpg)](https://caribdis.net/wp-content/uploads/2015/11/tienda2.jpg)

### Hacer que rebote la flecha del encabezado en pantalla completa

Cuando usamos encabezados en pantalla completa, a veces no queda tan claro para el visitante que el contenido sigue más abajo. Con tal fin, Divi incluye la opción de añadir una flecha para enlazar a la siguiente sección, pero una buena manera de hacer que llame más la atención es darle algo de movimiento.

Para esto, simplemente hay que pegar el siguiente código en la hoja de estilos del tema hijo (o el recuadro *CSS personalizado* de las *Opciones del tema*):
.et_pb_fullwidth_header_scroll a {
-webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
.et_pb_fullwidth_header_scroll .et-pb-icon {
-webkit-animation: et_bounce 1s infinite;
-moz-animation: et_bounce 1s infinite;
-ms-animation: et_bounce 1s infinite;
-o-animation: et_bounce 1s infinite;
animation: et_bounce 1s infinite;
}
@-webkit-keyframes et_bounce {
0% {
-webkit-transform: translateY(0);
}
40% {
-webkit-transform: translateY(-15px);
}
100% {
-webkit-transform: translateY(0px);
}
}
@-moz-keyframes et_bounce {
0% {
-moz-transform: translateY(0);
}
40% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0px);
}
}
@-ms-keyframes et_bounce {
0% {
-ms-transform: translateY(0);
}
40% {
-ms-transform: translateY(-10px);
}
100% {
-ms-transform: translateY(0px);
}
}
@-o-keyframes et_bounce {
0% {
-o-transform: translateY(0);
}
40% {
-o-transform: translateY(-10px);
}
100% {
-o-transform: translateY(0px);
}
}
@keyframes et_bounce {
0% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
Un ejemplo en funcionamiento puede verse [aquí](https://lafaienza.com/). Nótese que no usamos el rebote infinito, sino que a la cuarta vez lo detenemos. Dependiendo de la cantidad de veces que queremos que rebote, editamos las propiedades de la animación (el número 4):
animation: 1s ease 0s normal forwards 4 running et_bounce;
Fuente: [Podcast Divi Nation N° 10](http://www.elegantthemes.com/blog/community/the-divi-nation-podcast-episode-10-creating-customer-journeys-that-win-new-business-with-julie-hall)

### Abrir enlaces a redes sociales en una nueva ventana

Para quienes no quieran crear un tema hijo y modificar el archivo `social_icons.php`, está esta breve porción de código que podemos pegar en el recuadro *Añadir código al <body> de su sitio* del menú *Opciones del tema > Integración*:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".et-social-icon a").attr('target', '_blank');
});
</script>

[![Enlaces a redes sociales en el menú secundario](//caribdis.net/wp-content/uploads/2015/11/social-link1-1024x90.png)](https://caribdis.net/wp-content/uploads/2015/11/social-link1.png)[![Enlaces a redes sociales en el pie de página](//caribdis.net/wp-content/uploads/2015/11/social-link2-1024x95.png)](https://caribdis.net/wp-content/uploads/2015/11/social-link2.png)
Funciona en los iconos del pie de página y en los de la barra de menú secundario, si está activada.

### Agregar más enlaces a perfiles sociales en el pie de página

Ya habíamos dicho [en una oportunidad](https://caribdis.net/2015/10/08/personalizar-los-creditos-del-pie-de-pagina-de-divi/) que la barra de los créditos del pie de página de Divi es bastante frustrante en cuanto a posibilidades de personalización. Algunas cosas tienen una solución simple (como la que vimos más arriba), pero otras requieren modificaciones un poco más específicas, que solo se pueden lograr editando archivos del tema (y usando un tema hijo para implementarlas). Un ejemplo de esto último son los iconos de las redes sociales en el pie de página.

En el caso de este sitio, optamos por suprimir el icono *RSS* y mostrar en su lugar el de *LinkedIn*, con su respectivo enlace.

¿Cómo procedemos? Copiamos el archivo `social_icons.php` de la carpeta `/includes/` de **Divi** y lo pegamos en una carpeta `/includes/` que hayamos creado previamente en el tema hijo. Luego abrimos ese archivo `social_icons.php` con un editor de texto, y veremos lo siguiente:
<ul>
<?php if ( 'on' === et_get_option( 'divi_show_facebook_icon', 'on' ) ) : ?>
                <li>
                               <a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>">                                     <span><?php esc_html_e( 'Facebook', 'Divi' ); ?></span>
                               </a>
                </li>
<?php endif; ?>
<?php if ( 'on' === et_get_option( 'divi_show_twitter_icon', 'on' ) ) : ?>
                <li>
                               <a href="<?php echo esc_url( et_get_option( 'divi_twitter_url', '#' ) ); ?>">
                                               <span><?php esc_html_e( 'Twitter', 'Divi' ); ?></span>
                               </a>
                </li>
<?php endif; ?>
<?php if ( 'on' === et_get_option( 'divi_show_google_icon', 'on' ) ) : ?>
                <li>
                               <a href="<?php echo esc_url( et_get_option( 'divi_google_url', '#' ) ); ?>">
                                               <span><?php esc_html_e( 'Google', 'Divi' ); ?></span>
                               </a>
                </li>
<?php endif; ?>
<?php $et_instagram_default = ( true === et_divi_is_fresh_install() ) ? 'on' : 'false'; ?>
<?php if ( 'on' === et_get_option( 'divi_show_instagram_icon', $et_instagram_default ) ) : ?>
<li>
<a href="<?php echo esc_url( et_get_option( 'divi_instagram_url', '#' ) ); ?>">
<span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>
<?php if ( 'on' === et_get_option( 'divi_show_rss_icon', 'on' ) ) : ?>
<?php
                $et_rss_url = '' !== et_get_option( 'divi_rss_url' )
                               ? et_get_option( 'divi_rss_url' )
                               : get_bloginfo( 'rss2_url' );
?>
                <li>
                               <a href="<?php echo esc_url( $et_rss_url ); ?>">
                                               <span><?php esc_html_e( 'RSS', 'Divi' ); ?></span>
                               </a>
                </li>
<?php endif; ?>
</ul>
Aquí debemos buscar en qué posición queremos añadir el nuevo icono. Lo queremos al lado del de *Google+* y antes del icono RSS (que desactivamos desde las *Opciones del tema*).

Entonces, llevamos el cursor hasta el final de la etiqueta `<?php endif; ?>` inmediata a la sección de *Google+* y pegamos:
<li>
<a target="_blank" href="https://www.linkedin.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span>
</a>
</li>
Podemos hacer lo mismo con otras redes sociales.

Para *YouTube:*
<li>
<a target="_blank" href="https://youtube.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'YouTube', 'Divi' ); ?></span>
</a>
</li>
Para *Pinterest:*
<li>
<a target="_blank" href="https://www.pinterest.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span>
</a>
</li>
Para *Tumblr:*
<li>
<a target="_blank" href="https://tumblr.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'Tumblr', 'Divi' ); ?></span>
</a>
</li>
Para *Skype:*
<li>
<a target="_blank" href="skype:USUARIO_DE_SKYPE?call">
<span><?php esc_html_e( 'Skype', 'Divi' ); ?></span>
</a>
</li>
Para *Flickr:*
<li>
<a target="_blank" href="https://flickr.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'Flickr', 'Divi' ); ?></span>
</a>
</li>
Para *Vimeo:*
<li>
<a target="_blank" href="https://vimeo.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'Vimeo', 'Divi' ); ?></span>
</a>
</li>
Para *Dribbble:*
<li>
<a target="_blank" href="https://dribbble.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'Dribbble', 'Divi' ); ?></span>
</a>
</li>
Para *MySpace* (¿alguien sigue usando *MySpace* ;-) ):
<li>
<a target="_blank" href="https://myspace.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'MySpace', 'Divi' ); ?></span>
</a>
</li>
Por último, añadimos el siguiente código CSS a la hoja de estilos:
.et-social-facebook a:before { content: '\e093'; }
.et-social-twitter a:before { content: '\e094'; }
.et-social-google-plus a:before { content: '\e096'; }
.et-social-pinterest a:before { content: '\e095'; }
.et-social-linkedin a:before { content: '\e09d'; }
.et-social-tumblr a:before { content: '\e097'; }
.et-social-instagram a:before { content: '\e09a'; }
.et-social-skype a:before { content: '\e0a2'; }
.et-social-flikr a:before { content: '\e0a6'; }
.et-social-myspace a:before { content: '\e0a1'; }
.et-social-dribbble a:before { content: '\e09b'; }
.et-social-youtube a:before { content: '\e0a3'; }
.et-social-vimeo a:before { content: '\e09c'; }
.et-social-rss a:before { content: '\e09e'; }
[![Iconos de redes sociales en el pie de página](//caribdis.net/wp-content/uploads/2015/11/social-link3-1024x43.png)](https://caribdis.net/wp-content/uploads/2015/11/social-link3.png)

### Desactivar los vídeos relacionados de YouTube al finalizar la reproducción

Sirve tanto para el módulo *Vídeo* (que muestra un vídeo individual), como para el *Carrusel de vídeo.*

Pegamos el siguiente código en el recuadro *Añadir código al