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.

*Esta página se actualizará frecuentemente, así que de vez en cuando date tu vuelta por aquí 😉

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

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