Divi Snippets: Fragmentos de código CSS.

Divi Snippets son pequeños fragmentos de código CSS, JS o PHP para aumentar la personalización de tu sitio web creado con Divi. Simplemente tienes que copiar y pegar el fragmento de código en el personalizador de temas o en las opciones del tema / CSS Personalizado. En algunos casos tendrás que pegar el código en un módulo código o en las funciones de tu tema hijo.

FRAGMENTOS GENERALES

Cambiar el color del texto seleccionado

Reemplaza el código hexadecimal de color y background:

::-moz-selection {
color: #ffffff;
background: #fe2990;
}
::selection {
color: #ffffff;
background: #fe2990;
}

Personalizar la barra de desplazamiento

/* Estilos scrollbar */
::-webkit-scrollbar {
  width: 10px; /* ancho barra */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* color fondo barra */
}

::-webkit-scrollbar-thumb {
  background: #f92c8b; /* color barra */
  border-radius: 10px; /* borde barra */
}

::-webkit-scrollbar-thumb:hover {
  background: #4741d7; /* color barra hover */
}

Cambiar el color del icono volver arriba

Reemplaza el código hexadecimal de color y background:

.et_pb_scroll_top.et-pb-icon {
color: #ffffff;
background: #5853e3;
}

Modificar los estilos del icono volver arriba

.et_pb_scroll_top.et-pb-icon {
  height: 50px;
  width: 50px;
  border-radius: 100px;
  right: 15px;
  background: #fe2990;
}
.et_pb_scroll_top:before {
  content: "\21";
  font-size: 35px;
  color: #ffffff;
  position: absolute;
  top: 7px;
  left: 7px;
}

.et_pb_scroll_top.et-pb-icon:hover {
  background: #4741d7;
  transition: all 300ms ease 0ms;
}

Hacer más ancho el contenedor de todo el sitio en móviles

@media only screen and (max-width: 680px) {
 .container {
    width: 90%;
  }
}

Centrar verticalmente el contenido de cualquier sección, fila o columna.

Pega el siguiente código en los Ajustes de cualquier sección, fila o columna / Avanzado / CSS Personalizado / Elemento principal:

display: flex;
align-items: center;

Cambiar el orden de las columnas en móvil

1. Pega el siguiente código en los Ajustes de la fila / Avanzado / CSS Personalizado / Elemento principal:

display: flex;
flex-wrap: wrap;

2. Y en los ajustes de cada columna / Avanzado / CSS Personalizado / Elemento principal (tableta y móvil) usa esta línea:

order: 1;

3. Cambia el número de «order: 1» dependiendo el orden en el que quieras mostrar tus columnas en versión tableta y móvil.

Cambiar los bullets de una lista creada con el módulo texto

1. Coloca la clase «ov-clase-lista» al módulo texto desde Ajustes del módulo / Avanzado / ID y Clases de CSS / Clase CSS.

2. En el personalizador de temas / CSS Adicional pega el siguiente código:

.ov-clase-lista li {
  display: flex;
  list-style: none;
  margin-bottom: 8px; /* separación entre listas */
}
.ov-clase-lista li:before {
  font-family: etmodules;
  content: '\45'; /* icono listas */
  font-size: 20px; /* tamaño icono */
  margin-left: -20px;
  margin-right: 6px;
}

3. Si quieres reemplazar el icono por uno diferente visita este enlace y cambia el código de la línea content.

Soluciona el contenido sin estilos que se muestra al cargar la página en divi

Dirígete a Divi / Opciones del tema / Integración y en Agregar código al «head» de su blog pegas el siguiente script:

<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
</script>

FRAGMENTOS PARA EL MÓDULO BOTÓN

Alinear un botón a lado de otro en divi

1. Agrega la clase «btn-enlinea» en los ajustes de la fila o columna / avanzado / ID y clases de css / Clase CSS.

2. Copia y pega el siguiente código en CSS personalizado:

 .btn-enlinea .et_pb_button_module_wrapper {
    display: inline-block;
}

3. Desde los Ajustes del módulo botón / Diseño / Separación puedes cambiar los márgenes de separación de los botones.

FRAGMENTOS PARA EL BLOG POR DEFECTO

Cambiar el color de la línea vertical que divide el sidebar del blog

Reemplaza el código hexadecimal de background-color:

 #main-content .container::before {background-color: #fe2990;}

Ocultar la línea vertical que divide el sidebar del blog

 #main-content .container:before {display: none;}

Mostrar imagen en miniatura y a lado derecho el extracto en la página del blog

 @media only screen and (min-width: 980px) {
  .et_pb_post a img{
  height: 100%;
  float: left;
  width: 280px;
  left: 0;
  padding-right: 16px;}
}

Página del blog y página de entrada con anchura completa

#main-content .container:before {display: none;}

/*** Ocultar Sidebar ***/
#sidebar {display:none;}

/*** Expandir el área del blog a ancho completo ***/
@media (min-width: 981px) {
#left-area {
width: 100%;
padding: 23px 0px 0px !important;
float: none !important; }
}

Página del blog con anchura completa (sin sidebar)

.blog #main-content .container:before {display: none;}

/*** Ocultar Sidebar ***/
.blog #sidebar {display:none;}

/*** Expandir el área del blog a ancho completo ***/
@media (min-width: 981px) {
.blog #left-area {
width: 100%;
padding: 23px 0px 0px !important;
float: none !important; }
}

Página de entrada con anchura completa (sin sidebar)

.single-post #main-content .container:before {display: none;}
 
/*** Ocultar Sidebar ***/
.single-post #sidebar {display:none;}

/*** Expandir el área del blog a ancho completo ***/
@media (min-width: 981px) {
.single-post #left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important; }
}

Página de archivos con anchura completa (sin sidebar)

.archive #main-content .container:before {display: none;}
/*** Ocultar Sidebar ***/
.archive #sidebar {display:none;}

/*** Expandir el área del blog a ancho completo ***/
@media (min-width: 981px) {
.archive #left-area {
width: 100%;
padding: 23px 0px 0px !important;
float: none !important; }
}

Mostrar entradas del blog a dos columnas

@media only screen and (min-width: 981px) {
.blog .post {
width: 48%;
display: inline-block;
margin-right: 3%;}

.blog .post:nth-child(2n+0) {
	margin-right:0;}
}

Mostrar entradas del blog a tres columnas

@media only screen and (min-width: 768px) {
.blog .post {
width: 48%;
display: inline-block;
margin-right: 3%;}
.blog .post:nth-child(2n+0) {
margin-right:0;}
}

@media only screen and (min-width: 1100px) {
.blog .post {
width: 31%;
display: inline-block;
margin-right: 3%!important;}
.blog .post:nth-child(3n+0) {
margin-right:0!important;}
}

Ordenar en modo aleatorio las entradas del blog de divi

Agrega la siguiente función en el archivo functions.php de tu tema hijo o instala el plugin Code Snippets para agregarla.

// Ordenar en modo aleatorio las entradas del blog divi
add_action('pre_get_posts', 'ov_change_blog_module_order');

function ov_change_blog_module_order($query) {
$pac = get_query_var( 'post_type' );
if ( 'post' == $pac )
{

$query->set('orderby', 'rand');
$query->set('order', 'ASC');
}
}

Reemplazar el texto "leer más" de los artículos del módulo blog divi

Agrega el siguiente script en Divi / Opciones del tema / Integración / Agregar código al head de su blog….

<script>
(function ($) {
  $(document).on("ready ajaxComplete", function () {
    $(".et_pb_post a.more-link").html("Ver artículo");
  });
})(jQuery);
</script>

Reemplazar el texto "Entradas antiguas" y "Entradas siguientes" del módulo blog divi

Agrega el siguiente script en un módulo código abajo del módulo blog o portafolio….

<script>
(function ($) {
  $(document).on("ready ajaxComplete", function () {
    
    $(".pagination .alignleft").html(function(a, cambiar) {
      return cambiar.replace('Entradas más antiguas', 'Proyectos anteriores');
    }); 
    
    $(".pagination .alignright").html(function(a, cambiar) {
      return cambiar.replace('Entradas siguientes', 'Proyectos recientes');
    });
    
  });
})(jQuery);
</script>

FRAGMENTOS PARA EL MÓDULO BLOG

Cambiar entradas del módulo blog a dos columnas

1. En ajustes del módulo / Diseño selecciona rejilla.

2. En ajustes del módulo / Avanzado / ID y Clases de CSS / Clase CSS coloca la clase:

ov-blog-2

3. Y en ajustes de la página / Avanzando / CSS Personalizado pega el siguiente CSS:

@media only screen and ( min-width: 981px ) {
  .ov-blog-2 .et_pb_salvattore_content[data-columns]::before {
	  content: '2 .column.size-1of2' !important;
  }
	.ov-blog-2 .column.size-1of2 {
	  width: 48%!important;
	  margin-right: 4%;
	}
  .ov-blog-2 .column.size-1of2:nth-child(2n+0) {
    margin-right: 0 !important;
  }
}

Cambiar entradas del módulo blog a cuatro columnas

1. En ajustes del módulo / Diseño selecciona rejilla.

2. En ajustes del módulo / Avanzado / ID y Clases de CSS / Clase CSS coloca la clase:

ov-blog-4

3. Y en ajustes de la página / Avanzando / CSS Personalizado pega el siguiente CSS:

@media only screen and ( min-width: 981px ) {
  .ov-blog-4 .et_pb_salvattore_content[data-columns]::before {
	  content: '4 .column.size-1of4' !important;
  }
	.ov-blog-4 .column.size-1of4 {
	  width: 23%!important;
	  margin-right: 2%;
	}
  .ov-blog-4 .column.size-1of4:nth-child(4n+0) {
    margin-right: 0 !important;
  }
}

Igualar la altura de los artículos del blog

1. En ajustes del módulo / Avanzado / ID y Clases de CSS / Clase CSS coloca la clase:

ov_igualar_altura_art_blog

2. Agrega un nuevo módulo código y pega el siguiente script:

<script>
(function($) {
    $(document).ready(function() {
        $(window).resize(function() {
            $('.ov_igualar_altura_art_blog').each(function() {
                equalise_articles($(this));
            });
        });

        $('.ov_igualar_altura_art_blog').each(function() {
            var blog = $(this);

            equalise_articles($(this));

            var observer = new MutationObserver(function(mutations) {
                equalise_articles(blog);
            });
            
            var config = {
                subtree: true,
                childList: true 
            };

            observer.observe(blog[0], config);
        });

        function equalise_articles(blog) {
            var articles = blog.find('article');
            var heights = [];
            
            articles.each(function() {
                var height = 0;
                height += $(this).find('.et_pb_image_container').outerHeight(true);
                height += $(this).find('.entry-title').outerHeight(true);
                height += $(this).find('.post-meta').outerHeight(true); 
                height += $(this).find('.post-content').outerHeight(true);    

                heights.push(height);
            });

            var max_height = Math.max.apply(Math,heights); 

            articles.each(function() {
                $(this).height(max_height);
            });
        }

        $(document).ajaxComplete(function() {
            $('.ov_igualar_altura_art_blog').imagesLoaded().then(function() {
                $('.ov_igualar_altura_art_blog').each(function(){
                    equalise_articles($(this));
                });
            });
        });

        $.fn.imagesLoaded = function() {
            var $imgs = this.find('img[src!=""]');
            var dfds = [];

            if (!$imgs.length) {
                return $.Deferred().resolve().promise();
            }            

            $imgs.each(function(){
                var dfd = $.Deferred();
                dfds.push(dfd);
                var img = new Image();

                img.onload = function() {
                    dfd.resolve();
                };

                img.onerror = function() {
                    dfd.resolve(); 
                };

                img.src = this.src;
            });

            return $.when.apply($, dfds);
        }
    });
})(jQuery);
</script>

FRAGMENTOS PARA LOS COMENTARIOS

Estilos para el botón enviar comentarios

Reemplaza los valores (juega con ellos):

/** Estado normal botón enviar comentario **/
.form-submit .submit {
font-size: 20px;
background-color: #5853e3;
color: #ffffff;
border: 2px solid #5853e3;
border-radius: 100px; 
}

/** Estado hover botón enviar comentario **/
.form-submit .submit:hover {
background-color: #f92c8b;
color: #ffffff;
border: 2px solid #f92c8b;
border-radius: 100px; 
}

Estilos para el botón responder comentarios

Reemplaza los valores (juega con ellos):

/** Estado normal botón responder comentario **/
.comment-reply-link {
font-size: 16px;
background-color: #5853e3;
color: #ffffff;
border: 2px solid #5853e3;
border-radius: 100px;
}

/** Estado hover botón responder comentario **/
.comment-reply-link:hover {
background-color: #f92c8b;
color: #ffffff;
border: 2px solid #f92c8b;
border-radius: 100px;
}
/** Tamaño icono botón hover **/
.comment-reply-link:hover:after {
	font-size: 26px;
}

Estilos para los campos del formulario de comentarios

Reemplaza los valores (juega con ellos):

#commentform input[type=email], #commentform input[type=text], #commentform input[type=url], #commentform textarea {
    padding: 12px;
    border-width: 0;
    color: #858792;
    background-color: #f7f9fb;
    font-size: 16px;
    line-height: 1em;
}

Campos del formulario de comentarios con anchura completa

#commentform input[type=email], #commentform input[type=text], #commentform input[type=url] {
	width: 100%;
}

Campos del formulario de comentarios (nombre, correo) a dos columnas

@media only screen and (min-width: 1020px) {
.comment-form .comment-form-author, .comment-form .comment-form-email {
    display: inline-block;
    width: 48.3%;
    margin-right: 2.8%;
}
.comment-form .comment-form-email {
	margin-right: 0;
}
#commentform input[type=email], #commentform input[type=text], #commentform input[type=url] {
width: 100%;
}
}

@media only screen and (min-width: 767px) {
#commentform input[type=email], #commentform input[type=text], #commentform input[type=url] {
width: 100%;
}
}

Campos del formulario de comentarios (nombre, correo, web) a tres columnas

@media only screen and (min-width: 981px) {
.comment-form .comment-form-author, .comment-form .comment-form-email, .comment-form .comment-form-url {
display: inline-block;
width: 31%;
margin-right: 2.8%;
}
.comment-form .comment-form-url {
margin-right: 0;
}
#commentform input[type=email], #commentform input[type=text], #commentform input[type=url] {
width: 100%;
}
}

@media only screen and (min-width: 767px) {
#commentform input[type=email], #commentform input[type=text], #commentform input[type=url] {
width: 100%;
}
}

FRAGMENTOS PARA EL HEADER (MENÚ POR DEFECTO)

Ocultar header al hacer scroll

.et-fixed-header { display:none; }

Agregar un efecto subrayado (normal y hover) a las opciones del menú principal

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #fe2990; /* cambiar el color de la línea */
 height: 3px;
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

Colocar un borde inferior grueso a la barra del menú principal

#main-header {
border-bottom: 5px solid #f92c8b;
}

Eliminar la sombra inferior del menú principal

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

Cambiar el color del icono de búsqueda del menú

/* Estado normal icono buscar y cerrar búsqueda */
#et_search_icon, .et_close_search_field {
color: #f92c8b;
}
/* Estado hover icono buscar y cerrar búsqueda */
#et_search_icon:hover, .et_close_search_field:hover {
color: #4741d7;
}

Cambiar el logo al hacer scroll

.et-fixed-header #logo {
    content: url(https://###.svg) !important;
}

img#logo {
    content: url(https://###.svg) !important;
}

Reemplazar el logo en móvil

Reemplaza el # por la URL de tu logo.

@media only screen and (max-width: 480px) {
  #logo {
    content: url("#");
  }
}

Aumentar el tamaño del logo del menú fijo

.et-fixed-header #logo {
  max-height: 35px;
	 margin-top: 8px;
  margin-bottom: 8px;}

Reemplazar el icono de flecha de un submenú del menú

#et-secondary-nav .menu-item-has-children>a:first-child:after,
#top-menu .menu-item-has-children>a:first-child:after {
    content: "\45";
}

#et-secondary-nav .menu-item-has-children:hover>a:first-child:after,
#top-menu .menu-item-has-children:hover>a:first-child:after {
    content: "\43";
}

Centrar información del menú secundario (número, email, social)

/* Alinear al centro menú secundario */
#et-info {
float: none !important;
text-align: center;
}

Mostrar menú secundario en móviles

@media (max-width: 980px){
#et-secondary-nav, #et-secondary-menu {
	display: block !important;
}
#et-secondary-menu {
margin-top: 2px!important;
}
#et-secondary-menu .et_duplicate_social_icons {
margin-bottom:10px!important;
}
}

Agregar la palabra "menú" al menú hamburguesa en móviles

.mobile_menu_bar:before {
    position: relative;
    top: -8px;
    left: 0;
    font-size: 18px;
    content: 'MENU';
    cursor: pointer;
    font-family: sans-serif!important;
}

.mobile_menu_bar:after {
    position: relative;
    top: 0;
    left: 0;
    font-size: 32px;
    content: "\61";
    cursor: pointer;
    font-family: ETmodules!important;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    text-transform: none;
    speak: none;
}

Expandir el contenedor del logo y menú hamburguesa en móviles

@media only screen and (max-width: 680px) { 
#main-header .container{
	width: 94%;}
}

Menú móvil hamburguesa de ancho completo

.container.et_menu_container {
    width: calc( 100% - 60px);
}

.et_mobile_menu {
    margin-left: -30px;
    padding: 5%;
    width: calc( 100% + 60px);
}

Opciones del menú hamburguesa con anchura completa en móviles

@media only screen and (max-width: 680px) {
#main-header .container{
width: 100%;}

.et_header_style_left .logo_container {
	padding-left: 5%; }
	
#et-top-navigation {
padding-right: 5%; }
	
.et_mobile_menu {
padding: 5% 0; }
}

Reemplazar en móvil el icono de hamburguesa por una equis ( X ) cuando este abierto

.mobile_nav.opened .mobile_menu_bar:before {
	content: '\4d' !important;
}

Fijar el menú principal en la parte superior en móviles

@media only screen and (max-width: 980px) {
.et_fixed_nav #main-header {
position: fixed !important;
top: 0 !important; }
}

Fijar el menú principal y secundario en la parte superior en móviles

@media only screen and (max-width: 980px) {
#top-header, #main-header {
	position: fixed!important; }
}

Agregar la palabra "menú" al menú hamburguesa en móviles creado con el módulo menú de divi

Pega el siguiente código en los Ajustes del módulo menú / Avanzado / CSS Personalizado / Antes / Vista Tableta:

position: absolute !important;
color: #333333 !important;
font-size: 16px;
content: "Menú";
top: 8px;
right: 45px;

Bajar la posición del menú hamburguesa abierto en móvil

@media (max-width: 980px) {
.et_pb_fullwidth_menu .et_mobile_menu, .et_pb_menu 
 .et_mobile_menu {
    top: 120%;
 }
}

Mostrar el menú hamburguesa en escritorio

1. Agrega un nombre de clase CSS al módulo menú y reemplaza «ov-nombre-clase» del siguiente código:

@media (min-width: 980px) {
 .ov-nombre-clase .et_pb_menu__menu {
    display: none;
 }

 .ov-nombre-clase .et_mobile_nav_menu {
    display: flex;
    float: none;
    margin: 0 6px;
    align-items: center;
 }
  
 .ov-nombre-clase .et_mobile_menu {
    text-align: left;
    width: 240px!important;
    right: 0!important;
    left: auto!important;
    padding-bottom: 0!important;
  }

  .et_pb_menu .et_mobile_nav_menu li {
    list-style-type: none;
  }
}

2. Pega el código en el CSS Personalizado.

Cambiar el punto de interrupción del menú hamburguesa

1. Copia y pega el siguiente código en Divi > Opciones del tema > CSS Personalizado:

/* Cambiar el punto de interrupción del módulo menú hamburguesa */
@media only screen and (max-width: 1120px) {
    .et_pb_menu .et_pb_menu__menu {
        display: none;
    }
    .et_mobile_nav_menu {
        display: block;
    }
}

2. Siente libre de reemplazar 1120px por el punto de interrupción que desees (debe ser mayor a 980px).

*Nota: Si tienes un submenú dropdwon, es posible que tengas un problema con las viñetas que se agregan a los elementos de la lista del submenú. Así que solo agrega este código adicional para resolverlo:

/* Remover bullets sub menu divi */
.et_pb_menu .et_mobile_menu .entry-content ul {
  list-style-type: none;
}

.et_pb_menu .et_mobile_menu {
    padding-left: 0;
}

Desactivar el menú hamburguesa para tabletas y móviles

1. Agrega un nombre de clase CSS al módulo menú y reemplaza «ov-nombre-clase» del siguiente código:

@media(max-width:980px){
.ov-nombre-clase .et_pb_menu__menu {
    display: block;
}
.ov-nombre-clase .et_mobile_nav_menu {
    display: none;
}
}

2. Pega el código en el CSS Personalizado.

Estilos hover a los enlaces de un menú creado con el módulo menú

1. Agrega un nombre de ID al módulo menú y reemplaza «ov-nombre-id» del siguiente código por tu nombre de ID:

#ov-nombre-id .menu-item a:hover {
  background: #fe4480 !important;
  color: #ffffff !important;
  border-radius: 4px;
  opacity: 1 !important;
  transition: all .2s ease-in-out !important;
}

.et-db #et-boc #ov-nombre-id .menu-item a:hover {
  color: #ffffff !important;
}

@media(min-width:980px){ 
  #ov-nombre-id .menu-item {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  #ov-nombre-id .menu-item a {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding: 12px 16px !important;
    transition: all .2s ease-in-out !important;
  }
  #ov-nombre-id .menu-item a:hover {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding: 12px 16px !important;
  }
}

2. Pega el código en el CSS Personalizado.

Activar enlaces del menú al hacer scroll en una one page

1. Agrega un nombre de ID único a cada sección de tu página

2. Agrega la clase «ov-seccion» a todas las secciones de tu página.

3. Agrega la clase «ov-activar-menu-scroll» al módulo menú.

4. Pega el siguiente script en un módulo código en tu pie de página:

<script>
// Activar menú al hacer scroll
jQuery(document).ready(function( $ ) {
  $(window).scroll(function() {
      var position = $(this).scrollTop();

      $('.ov-seccion').each(function() {
          var target = $(this).offset().top - 160;
          var id = $(this).attr('id');

          if (position >= target) {
            $('.ov-activar-menu-scroll .menu-item a').removeClass('ov-menu-activo');
            $('.ov-activar-menu-scroll .menu-item a[href="#' + id + '"]').addClass('ov-menu-activo');
        }
      });
  });
});
</script>

5. Pega el siguiente código CSS en el CSS Personalizado:

.page .ov-activar-menu-scroll .ov-menu-activo {
  color: red !important;
}

6. Agrega el nombre de ID de cada sección en cada enlace de tu menú desde Apariencia / Menús…

FRAGMENTOS PARA EL MÓDULO GALERÍA

Galería a cuatro columnas con márgenes

Es importante agregar el Identificador «id-galeria» al módulo galería desde los ajustes del módulo / Avanzado / ID y clases de CSS / Identificador CSS…