Colección de Divi tips I

18 comentarios

Por: Caribdis.Net

Publicada: 9 de noviembre de 2015

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 $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'; }

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.

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

18 Comentarios

  1. Claudio Ferrer

    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.

    Responder
    • Caribdis Diseño Web

      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:

      Clases CSS - Menú

      Saludos.

      Responder
  2. Jose

    Mil gracias, tus sugerencias son geniales!

    Responder
  3. Manuel López

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

    Responder
    • Caribdis Diseño Web

      Gracias por tu comentario, Manuel. Un cordial saludo. 🙂

      Responder
  4. Angel

    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.

    Responder
    • Caribdis Diseño Web

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

      Responder
      • Angel

        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.

        Responder
        • Caribdis Diseño Web

          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.

          Responder
  5. Caribdis Diseño Web

    Hola, Ángel.

    Ese mensaje es una de las cadenas del archivo .mo que se encuentra en la carpeta /lang/. En la versión 2.5 hicieron algunas macanas al mezclar los textdomains, 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.

    Responder
  6. Angel Guiñales

    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.

    Responder
  7. Angel

    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.

    Responder
    • Caribdis Diseño Web

      Hola, Ángel. El código debería funcionar también en el tipo de entrada Vídeo, por favor confirmame si no es así.

      Responder
      • Angel

        Funciona perfectamente. Muchísimas gracias

        Responder
  8. Ricardo Alfaro J.

    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.

    Responder
    • Caribdis Diseño Web

      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.

      Responder
  9. Luis Nieto

    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!

    Responder
    • Caribdis Diseño Web

      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 🙂

      Responder

Enviar comentario

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!