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

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 class="menu-toggle"></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

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

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"

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

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ú secundarioEnlaces a redes sociales en el pie de página
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 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 class="et-social-icons">
<?php if ( 'on' === et_get_option( 'divi_show_facebook_icon', 'on' ) ) : ?>
                <li class="et-social-icon et-social-facebook">
                               <a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>" class="icon">                                     <span><?php esc_html_e( 'Facebook', 'Divi' ); ?></span>
                               </a>
                </li>
<?php endif; ?>
<?php if ( 'on' === et_get_option( 'divi_show_twitter_icon', 'on' ) ) : ?>
                <li class="et-social-icon et-social-twitter">
                               <a href="<?php echo esc_url( et_get_option( 'divi_twitter_url', '#' ) ); ?>" class="icon">
                                               <span><?php esc_html_e( 'Twitter', 'Divi' ); ?></span>
                               </a>
                </li>
<?php endif; ?>
<?php if ( 'on' === et_get_option( 'divi_show_google_icon', 'on' ) ) : ?>
                <li class="et-social-icon et-social-google-plus">
                               <a href="<?php echo esc_url( et_get_option( 'divi_google_url', '#' ) ); ?>" class="icon">
                                               <span><?php esc_html_e( 'Google', '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 class="et-social-icon et-social-rss">
                               <a href="<?php echo esc_url( $et_rss_url ); ?>" class="icon">
                                               <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 class="et-social-icon et-social-linkedin">
<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 class="et-social-icon et-social-youtube">
<a target="_blank" href="https://youtube.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'YouTube', 'Divi' ); ?></span>
</a>
</li>

Para Pinterest:

<li class="et-social-icon et-social-pinterest">
<a target="_blank" href="https://www.pinterest.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span>
</a>
</li>

Para Instagram:

<li class="et-social-icon et-social-instagram">
<a target="_blank" href="https://www.instagram.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
</a>
</li>

Para Tumblr:

<li class="et-social-icon et-social-tumblr">
<a target="_blank" href="https://tumblr.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'Tumblr', 'Divi' ); ?></span>
</a>
</li>

Para Skype:

<li class="et-social-icon et-social-skype">
<a target="_blank" href="skype:USUARIO_DE_SKYPE?call">
<span><?php esc_html_e( 'Skype', 'Divi' ); ?></span>
</a>
</li>

Para Flickr:

<li class="et-social-icon et-social-flikr">
<a target="_blank" href="https://flickr.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'Flickr', 'Divi' ); ?></span>
</a>
</li>

Para Vimeo:

<li class="et-social-icon et-social-vimeo">
<a target="_blank" href="https://vimeo.com/URL_DEL_PERFIL">
<span><?php esc_html_e( 'Vimeo', 'Divi' ); ?></span>
</a>
</li>

Para Dribbble:

<li class="et-social-icon et-social-dribbble">
<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 class="et-social-icon et-social-myspace">
<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

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 <body> de su sitio del menú Opciones del tema > Integración:

<script type="text/javascript">
(function($) {
$(window).load(function() {
$('.fluid-width-video-wrapper').each(function() {
var src = $(this).find('iframe').attr('src');
$(this).find('iframe').attr('src', src + '&amp;rel=0');
});
});
})(jQuery);
</script>

Y así concluye esta primera entrega. Más adelante, seguiremos agregando más trucos, y por supuesto recibiendo solicitudes y sugerencias para engrosar esta colección.

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en Electromecánica, Periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)