Divi Snippets: Fragmentos de código CSS.

Divi Snippets son pequeños fragmetos de código CSS 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.

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

::-webkit-scrollbar {
    width: 15px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0;
    border-radius: 0;
    background: #f92c8b;
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #f92c8b;
    opacity: .5;
}

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 {
    border-radius: 50%;
    right: 10px;
    font-size: 50px;
    color: #f92c8b;
    background: transparent;
}
.et_pb_scroll_top:before {
    content: "\e039";
}
}

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

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

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

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

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

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

FRAGMENTOS PARA EL MENÚ MÓVIL

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

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: 0;
right: 45px;
line-height: 2em;

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

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

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…

*Puedes reemplazar el nombre del identificador (#id-galeria) si lo deseas.

@media only screen and (min-width: 768px) {
#id-galeria .et_pb_gallery_item {
width: 22.75%;
margin-right: 3%;
margin-bottom: 3%;
clear: none;
}

#id-galeria .et_pb_gallery_item:nth-child(4n+0) {
margin-right:0!important;}
}

Galería a cuatro columnas sin 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…

*Puedes reemplazar el nombre del identificador (#id-galeria) si lo deseas.

@media only screen and (min-width: 768px) {
#id-galeria .et_pb_gallery_item {
width: 25%;
margin: 0!important;
clear: none; }
}
@media only screen and (max-width: 768px) {
#id-galeria .et_pb_gallery_item {
width: 50%;
margin: 0!important;
clear: none; }
}
@media only screen and (max-width: 480px) {
#id-galeria .et_pb_gallery_item {
width: 100%;
margin: 0!important; }
}

Galería a tres 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…

*Puedes reemplazar el nombre del identificador (#id-galeria) si lo deseas.

@media only screen and (min-width: 768px) {
#id-galeria .et_pb_gallery_item {
	width: 31.3%;
	margin-right: 3%;
	margin-bottom: 3%;
	clear: none;
}

#id-galeria .et_pb_gallery_item:nth-child(3n+0) {
	margin-right:0!important;}
}

Galería a tres columnas sin 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…

*Puedes reemplazar el nombre del identificador (#id-galeria) si lo deseas.

@media only screen and (min-width: 768px) {
#id-galeria .et_pb_gallery_item {
width: 33.3%;
margin: 0!important;
clear: none; }
}
@media only screen and (max-width: 768px) {
#id-galeria .et_pb_gallery_item {
width: 50%;
margin: 0!important;
clear: none; }
}
@media only screen and (max-width: 480px) {
#id-galeria .et_pb_gallery_item {
width: 100%;
margin: 0!important; }
}

Galería a dos 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…

*Puedes reemplazar el nombre del identificador (#id-galeria) si lo deseas.

@media only screen and (min-width: 768px) {
#id-galeria .et_pb_gallery_item {
width: 48.5%;
margin-right: 3%;
margin-bottom: 3%;
clear: none;
}

#id-galeria .et_pb_gallery_item:nth-child(2n+0) {
margin-right:0!important;}
}

Galería a dos columnas sin 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…

*Puedes reemplazar el nombre del identificador (#id-galeria) si lo deseas.

@media only screen and (min-width: 480px) {
#id-galeria .et_pb_gallery_item {
width: 50%;
margin: 0!important;
clear: none; }
}
@media only screen and (max-width: 480px) {
#id-galeria .et_pb_gallery_item {
width: 100%;
margin: 0!important; }
}

Cambiar el color de fondo de la ventana emergente de la galería

 .mfp-bg {
background: #5853e3;
}

FRAGMENTOS WOOCOMMERCE

Ocultar el icono del carrito woocommerce en el menú de divi

#et-top-navigation .et-cart-info { 
 display: none;
}

Agregar el botón "Agregar al carrito" en los productos de tienda divi

Debes pegar el siguiente código en las funciones de tu tema hijo o bien instala el plugin Code Snippets.

// Agregar botón de "añadir a carrito" en los productos del módulo tienda
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Centrar menú inferior

 #menu-menu-footer {
text-align: center;}
#menu-menu-footer .menu-item:last-child {
padding-right:0;}

Sino funciona reemplaza “footer” por “inferior”. Ejemplo:

 #menu-menu-inferior {
text-align: center;}
#menu-menu-inferior .menu-item:last-child {
padding-right:0;}

Remover los bullets o viñetas de los widgets del footer

 #footer-widgets .footer-widget li:before {
    display: none;
}
#footer-widgets .footer-widget .et_pb_widget:not(.woocommerce) ul li {
    line-height: 26px;
    padding-left: 0px;
}

Barra inferior de derechos de autor con anchura completa

#footer-bottom .container{
margin-right: 2.773%; 
margin-left: 2.773%; 
width:94.454%!important;
max-width: 94.454%;
}

Pie de página con anchura completa (widgets y barra inferior)

#footer-bottom .container, #main-footer .container{
margin-right: 2.773%; 
margin-left: 2.773%; 
width:94.454%!important;
max-width: 94.454%;
}
#main-footer .fwidget.et_pb_widget {
width: 100%!important;
max-width: 100%!important;
}

Pin It on Pinterest