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.
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.
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:
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>
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 $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 class="et-social-icon et-social-instagram"> <a href="<?php echo esc_url( et_get_option( 'divi_instagram_url', '#' ) ); ?>" class="icon"> <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 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 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'; }
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 + '&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.
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola! Yo quisiera saber como puedo hacer para que algunos (no todos) elementos del menu principal de mi web sean visibles desde dispositivos moviles pero no desde escritorios o computadoras.
Hola, Claudio.
Podés aplicarle una clase al elemento del menú que quieras ocultar, ejemplo
no-desktop, y luego usar el siguiente código personalizado:@media (min-width: 981px) { .no-desktop { display: none; } }El campo Clases CSS lo activás desde las opciones de pantalla:
Saludos.
Mil gracias, tus sugerencias son geniales!
De verdad que estaba simplemente navegando por ahí y me encontré con esta página y toda esta información maravillosa… Hoy sólo escribo para saludarlos y felicitarlos… seguramente más adelante haré alguna consulta!!!
Gracias por tu comentario, Manuel. Un cordial saludo. 🙂
Hola de nuevo, sobre uno de los tips: “Desactivar los vídeos relacionados de YouTube al finalizar la reproducción”. Al pegar el código proporcionado el funcionamiento es correcto, pero la web hace un efecto extraño como si cargara 2 veces las imágenes de los vídeos al mostrar la página, penalizando el tiempo de carga. ¿ Es posible corregir este efecto ?
Un saludo y gracias por todo.
Hola, Ángel.
Al parecer, con una de las últimas actualizaciones de Divi (no necesariamente la 2.6) se produjo este efecto raro. La recomendación ahora sería instalar el plugin Hide YouTube Related Videos. Simplemente activarlo, y funciona a nivel global.
Fijate si esto te sirve.
Saludos. 🙂
Hola de nuevo.
He actualizado DIVI a 2.6 e instalado el plugin que comentas y el funcionamiento es correcto. Lo único es que al actualizar el tema han empezado a fallar 2 cosas que antes funcionaban:
1. En el blog de noticias (sidebar derecho), por cada entrada tengo una imagen destacada. Al entrar en la noticia antes se veía esa misma imagen, ahora ha dejado de verse, salvo que inserte otra imagen asociada a la entrada.
2. Cuando entro a través del menú de la cabecera a las entradas de una categoría, por ejemplo “Tres Cantos”, por cada entrada se ve repetida la imagen del vídeo asociado en Youtube. Esto no ocurre cuando accedo a la entrada directamente desde la página de inicio.
Gracias por todo.
Hola, Ángel.
La verdad, no sé por qué te sucede esto. No puedo recrear ninguno de los dos incidentes. Al agregar entradas de tipo Vídeo y pegar la URL de YouTube en el editor de texto, se comportan normalmente si accedo al archivo de la categoría.
Lo mismo las imágenes destacadas de las entradas; me aparecen correctamente. Fijate si creando nuevas entradas el problema persiste. En ese caso, tendrías que contactar con el soporte de ET porque se trata de errores muy puntuales.
Saludos.
Hola, Ángel.
Ese mensaje es una de las cadenas del archivo
.moque se encuentra en la carpeta/lang/. En la versión 2.5 hicieron algunas macanas al mezclar lostextdomains, por lo cual varias traducciones no son reconocidas. Fijate si descargando esta traducción, funciona (el texto traducido es “Se ha suscripto. Busque el mensaje de confirmación”).Saludos.
Hola de nuevo, tengo una duda con el módulo optin de DIVI que permite agregar suscriptores a mi web utilizando mailchimp. Me gustaría saber si es posible configurar DIVI para que los mensaje aparezcan traducidos en español o es añadiendo código php, si fuera así ¿ donde debería introducir el código ?. El mensaje que quiero traducir es el de confirmación de la suscripción: “Subscribed – look for the confirmation emai !”
Muchas gracias.
Muchas gracias por tus aportaciones, genial ayuda.
Respecto al tip de eliminar vídeos relacionados de youtube, cual sería el código cuando los vídeos aparecen como entradas (tipo vídeo) en un módulo BLOG de DIVI?
Gracias.
Hola, Ángel. El código debería funcionar también en el tipo de entrada Vídeo, por favor confirmame si no es así.
Funciona perfectamente. Muchísimas gracias
Estimada Ana:
Nuevamente nos sorprendes con tus estupendas ayudas. Con todo lo que has publicado acerca de DIVI, hoy lo he convertido en mi tema de batalla. Muchas gracias por tus tremendos aportes. Un gran saludo desde Chile.
Me alegro de que te sirvan. 🙂 La mayoría son consultas que han hecho los usuarios y creo que pueden ser útiles para muchos que estén con las mismas inquietudes. Por eso vamos a seguir con este tipo de entradas, cada vez que haya algún truquito nuevo para compartir. Saludos y gracias por dejar tu comentario.
Hola… que tips tan valiosos, los estoy teniendo en cuenta para mi desarrollo web, quería hacerte una pregunta, hablando de menús y demás, quisiera poder tener un banner superior a modo de logo, luego tener el menú principal y ya de ahi en adelante colocar las secciones de DIVI como los sliders etc, hay alguna manera de manipular la ubicación del menú tal como se haría con otro objeto del diseñador??… Gracias!
Hola, Luis. Esta opción está dentro del Personalizador.
Vas a Divi > Personalizador de tema y buscás el panel Cabecera y navegación, y luego Formato de cabecera. Del menú desplegable Estilo del encabezado seleccionás Centrado. De vuelta en Cabecera y navegación seleccionás Barra de menú primario y ahí manejás la altura del logo (que ahora está arriba del menú). También podés usar la opción Ajustes de navegación fija para controlar el comportamiento del logo y el menú al desplazar la página (si querés reducir u ocultar el logo, por ejemplo). El menú aquí quedaría centrado; si quisieras alinearlo a la izquierda, tendrías que añadir código CSS (
#et-top-navigation { text-align: left; }).Espero que te sirva. Saludos 🙂