La biblioteca de fragmentos para Divi

El tema Divi y su Divi Builder ofrecen innumerables opciones de personalización. Sólo hay que conocerlos bien para configurar cada uno de los píxeles de un diseño... Sin embargo, todavía hay algunos lugares en los que los desarrolladores de Elegantthemes han decidido por nosotros, dejándonos sin opción de arreglar algunos elementos de diseño aquí y allá... ¡Y aquí es donde entran los SNIPPETS para Divi!

Sí, con un simple copiar y pegar, corregirá estos diseños no deseados en su sitio.

Voy a publicar este artículo hoy, pero anclarlo en algún sitio porque cada vez que necesite un nuevo snippet para mis propios proyectos de Divi, vendré a compartirlos con vosotros aquí. ¡Así que esta es la V1 de este artículo en evolución!

¿Qué es un Snippet?

Recortes Un fragmento es un trozo de código que está listo para ser copiado y pegado en su sitio. En cuanto añadas este código, la funcionalidad o el diseño que buscas debería ser inmediato.

Los snippets son una verdadera ayuda para los usuarios de WordPress / Divi que no tienen conocimientos de codificación, ya que les permite arreglar sus pequeños problemas sin llamar a un desarrollador.

Debo confesar que cuando empecé con WordPress, ni siquiera sabía dónde colocar los Snippets que encontraba en la web. No sabía la diferencia entre CSS y JS y no sabía cómo manipular esas líneas de código... ¡Pues se puede aprender todo!

¿Necesitas dominar Divi? ¡Descubre mi formación que te guiará paso a paso en la comprensión y uso de Divi! Más información sobre la formación en Divi.

¿Cómo puedo utilizar los fragmentos de Divi que se ofrecen aquí?

Te voy a ofrecer varios snippets de Divi para conseguir varios resultados inmediatos. Todo lo que tienes que hacer es copiar y pegar el código dado. Para ayudarte, te mostraré donde colocar este código pero para tu aprendizaje, te aconsejo que leas detenidamente esta guía para saber añadir código a Divi.

Tenga en cuenta que los códigos propuestos pueden ser modificados por usted para que se ajusten mejor a su carta gráfica, así que no dude en modificar los códigos de color, los valores de los píxeles, etc.

Ah, y ahora que lo pienso: si el código no funciona, acuérdate de borrar la caché o de comprobar que las comillas o los apóstrofes están rectos, porque esto se puede modificar al copiar y pegar...

1 - Eliminar la línea gris bajo el menú Divi

¡¿Ah, te estás molestando con esto?! Muchos de vosotros me hacéis esta pregunta con regularidad: "cómo eliminar la línea gris bajo el menú"...

Así que aquí está la respuesta:

/* supprimer la ligne grise sous le menu de Divi */

#main-header {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

💡 Coloca este código en el hoja de estilo de su tema infantil - o en la pestaña Divi > Opciones del tema > Personalizar CSS - o en el Apariencia > Personalizar > CSS adicional.

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

2 - Eliminar la línea gris de la barra lateral de Divi

Este parece molestar menos, pero en algunos sitios, mantener esa línea gris que separa el contenido principal de la barra lateral puede ser antiestético...

Así que aquí está la solución:

/* supprimer la ligne grise de la sidebar Divi */
#main-content .container::before {
    background-color: rgba(0, 0, 0, 0);
}

💡 Coloca este código en el hoja de estilo de su tema hijo - o en el Divi > Opciones del tema > Personalizar CSS - o en la pestaña Apariencia > Personalizar > CSS adicional.

3 - Reducir la fuente del botón de búsqueda

¡Seguro que odias esto! No te gusta que se trunque la palabra "búsqueda". Efectivamente, para los angloparlantes (búsqueda) el botón no es un problema, pero para los francófonos sí lo es...

/* réduire la police pour le bouton rechercher */
.et_pb_widget .wp-block-search__button {
    font-size: 10px;
}

Descubra también este tutorial para optimice su página de resultados búsqueda con Divi.

💡 Coloca este código en el hoja de estilo de su tema hijo - o en el Divi > Opciones del tema > Personalizar CSS - o en la pestaña Apariencia > Personalizar > CSS adicional.

4 - Eliminar las viñetas de la lista en el pie de página de Divi

Si utilizas widgets en el pie de página, es posible que aparezcan feas viñetas que perturben tu diseño...

Aquí está la solución:

/* supprimer les puces de liste en pied de page */
#footer-widgets .footer-widget li::before {
display:none;
}
#footer-widgets .footer-widget li {
    padding-left: 0px;
}

💡 Coloca este código en el hoja de estilo de su tema hijo - o en el Divi > Opciones del tema > Personalizar CSS - o en la pestaña Apariencia > Personalizar > CSS adicional.

5 - Eliminar la sombra bajo el menú principal de Divi

Este Snippet Divi también podría ser útil si quieres conseguir un diseño "plano"...

/* supprimer l'ombre sous le menu */
#main-header.et-fixed-header {
   -webkit-box-shadow:none!important; 
   -moz-box-shadow:none !important; 
   box-shadow:none !important;
}

💡 Coloca este código en el hoja de estilo de su tema hijo - o en el Divi > Opciones del tema > Personalizar CSS - o en la pestaña Apariencia > Personalizar > CSS adicional.

¿Necesitas dominar Divi? ¡Descubre mi formación que te guiará paso a paso en la comprensión y uso de Divi! Más información sobre la formación en Divi.

6 - Añadir una imagen de fondo al menú principal

Esto es menos común, pero quizás quiera añadir una imagen decorativa al fondo de su menú...

/* ajouter une image de fond dans le menu principal */
#main-header {
background-size: initial;
background-repeat: no-repeat;
background-image: url(placez ici l'URL de votre image) !important;
background-position: center;
}

💡 Coloca este código en el hoja de estilo de su tema hijo - o en el Divi > Opciones del tema > Personalizar CSS - o en la pestaña Apariencia > Personalizar > CSS adicional.

Para añadir imágenes de fondo en el fondo de sus páginas, es aquí.

7 - Consigue un menú que cambie de color automáticamente

Si quiere animar su sitio, puede optar por un menú principal con colores cambiantes, como aquí:

/* couleurs changeantes dans le menu principal */
#main-header {
-webkit-animation: random 15s infinite;
animation: random 15s infinite;
}
@keyframes random {
15% { background-color: #e3ff87; } 
30% { background-color: #ff7c96; } 
45% { background-color: #6ffffa; }
60% { background-color: #ef6b30; } 
75% { background-color: #bf69b1; } 
}

💡 Coloca este código en el hoja de estilo de su tema hijo - o en el Divi > Opciones del tema > Personalizar CSS - o en la pestaña Apariencia > Personalizar > CSS adicional.

Si desea aplicar esta cambiar los colores en otros elementos de su sitio, lea este tutorial.

8 - Arreglar la barra de herramientas del módulo de texto de Divi

Si utilizas el Constructor Divi para escribir textos largos, habrás notado que tienes que desplazarte hacia arriba para dar formato al texto que estás escribiendo.

Es molesto si tu texto es largo...

La solución es añadir este pequeño Snippet:

/* toolbar sticky au scroll */
.mce-top-part {
	position: sticky !important;
	top: -60px;
}

💡 Coloca este código en el hoja de estilo de su tema hijo - o en el Divi > Opciones del tema > Personalizar CSS - o en la pestaña Apariencia > Personalizar > CSS adicional.

Tenga en cuenta que este código sólo funciona si está utilizando Divi en el Front Office. Para otras situaciones, vaya al artículo dedicado al barra de herramientas fija.

9 - Dejar de recortar las imágenes en el módulo Blog

Es posible que hayas notado que las imágenes destacadas en tus entradas pueden aparecer recortadas en la página de tu blog utilizando el módulo Blog de Divi Builder...

Es fácil arreglar esto con este fragmento de PHP:

// Begin stop cropping featured image in Divi Blog Module

function ld_blog_crop_image_width($width) {
	return 9999;
}
function ld_blog_crop_image_height($height) {
	return 9999;
}
add_filter( 'et_pb_blog_image_width', 'ld_blog_crop_image_width' );
add_filter( 'et_pb_blog_image_height', 'ld_blog_crop_image_height' );

// End stop cropping featured image in Divi Blog Module

💡 Copia y pega el código anterior en el archivo functions. php de tu tema hijo.

Para más consejos, consulte el artículo sobre Recortar imágenes en Divi.

No se demore. Descubra el tema Divi aquí !

10 - Mostrar la fecha de actualización de una entrada del blog

Si también quieres mostrar la fecha de actualización de una entrada del blog, como aquí en Divi Tips, debes saber que no es complicado...

function ad_last_updated_post( $the_date ) {
    if ('post' === get_post_type() ) {
        $nb_days_between = (get_post_modified_time() - get_post_time())/86400;
        $nb_days_to_compare = '5';
        $last_modified =  sprintf( __( 'Mis à jour le %s', 'Divi' ), esc_html( get_post_modified_time( 'd/m/Y' ) ) );
        $published =  sprintf( __( 'Publié le %s', 'Divi' ), esc_html( get_post_time( 'd/m/Y' ) ) );
        $date = $nb_days_between > $nb_days_to_compare ? $last_modified . ' | ' .  $published : $published;
        return $date;
    }
}
add_action( 'get_the_date', 'ad_last_updated_post' );
add_action( 'get_the_time', 'ad_last_updated_post' );

💡 Copia y pega este fragmento en el archivo functions. php de tu tema hijo.

Para más consejos sobre fecha de actualización de un artículo, vaya aquí.

11 - Cambiar el color de la insignia de WooCommerce Promo

Si tu tienda te da problemas y no puedes personalizarla como quieres, aquí tienes un fragmento para cambiar el color de esta insignia en CSS:

/* changer la couleur du badge promo woocommerce */

 .woocommerce span.onsale, .woocommerce-page span.onsale {
     background: #974df3 !important;
 }

💡 Coloca este código en el hoja de estilo de su tema hijo - o en el Divi > Opciones del tema > Personalizar CSS - o en la pestaña Apariencia > Personalizar > CSS adicional - No olvides cambiar el código de color (#974df3) por el tuyo.

12 - Permitir el parallax en las pantallas de los móviles

Si has creado un diseño con efectos de paralaje, es posible que no funcionen correctamente en las pantallas de los móviles. Si quieres mantener tus efectos de paralaje en este tipo de pantalla, tendrás que añadir el siguiente código:

💡 Coloca este snippet de Divi en un módulo de Code dentro del layout donde se encuentra el parallax o coloca este snippet en el Divi > Opciones del tema > Integración ficha: añada este código a la ficha "cabeza" sección de su sitio. En este caso, el efecto de paralaje se aplicará a todo el sitio.

Para más información, consulte el tutorial sobre el Parallax para Divi.

13 - Abrir los iconos del pie de página en una nueva pestaña del navegador

Si no está utilizando el Theme Builder para construir el pie de página de su sitio, es posible que desee que los iconos del pie de página se abran en una nueva pestaña (nueva ventana), en cuyo caso necesitará este fragmento de Divi:

/* Ouvrir les icônes du footer dans une nouvelle fenêtre */

💡 Coloca este código en el Divi > Opciones del tema > Integración ficha: añada este código a la ficha "cabeza" sección de su sitio.

Para obtener más consejos, vaya al tutorial sobre iconos en el pie de página.

14 - Inserta un año dinámico en tus publicaciones

Si quieres que tus publicaciones estén siempre "al día" y no quieres que las fechas insertadas parezcan anticuadas, puedes crear fácilmente un shortcode para mostrar una fecha dinámica. Por ejemplo, esto es útil si publicas un artículo como "la mejor guía de 2021 para...", para que en 2022 no tengas que volver y cambiar la fecha, será automático...

// Créer le shortcode [year] pour afficher l’année courante

function year_shortcode() {
$year = date('Y');
return $year;
}
add_shortcode('year', 'year_shortcode');

💡 Copia y pega este fragmento en el archivo functions. php de tu tema hijo, luego coloca el shrotcode [year ] dentro de tus posts cuando lo necesites. PD: esto no funciona en el pie de página de Divi.

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales. O aprenda a utilizar este tema de forma eficaz con mi formación en Divi !

15 - Eliminar el tooltip que aparece al pasar por encima de una imagen

Quieres eliminar el tooltip que aparece cuando pasas el ratón por encima de una imagen en tu sitio Divi. Es muy fácil de hacer.

Il suffit d’ajouter le code suivant dans la section <head> de votre site :

💡 Propongo dos métodos para implementar este JavaScript: con o sin plugin. Lo mejor es leer detenidamente el artículo sobre el eliminación del título de la imagen al pasar el ratón por encima.

Snippets para Divi: en conclusión...

Tal y como se explica al principio de este artículo, permanezca atento, ya que este artículo evolucionará con el tiempo. Iré añadiendo regularmente nuevos fragmentos que sean sencillos, útiles y fáciles de usar.

Y no dudes en dejar un pequeño comentario de ánimo y compartir este artículo en tus redes, puede ser útil para tu público 😉