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
::-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
.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.
display: flex; align-items: center;
Cambiar el orden de las columnas en móvil
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
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
<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
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
#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
// 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
<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
<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
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
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
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
/** 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
/** 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
#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
@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
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
@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
/* 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
@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ú
#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
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
*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
*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
*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
*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
*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
*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 );
Mostrar las categorías en los productos del módulo tienda en divi
Debes pegar el siguiente código en las funciones de tu tema hijo o bien instala el plugin Code Snippets.
/** Mostrar categorias en productos woo **/ function ov_mostrar_categorias_productos_tienda() { global $product; ?> <h6 class="cat-producto-tienda"> <?php echo wc_get_product_category_list( $product->get_id() ); ?> </h6> <?php } add_action( 'woocommerce_shop_loop_item_title', 'ov_mostrar_categorias_productos_tienda', 9 );
Mostrar las etiquetas en los productos del módulo tienda en divi
Debes pegar el siguiente código en las funciones de tu tema hijo o bien instala el plugin Code Snippets.
/** Mostrar etiqueta (tag) en productos woo **/ function ov_mostrar_etiquetas_productos_tienda() { global $product; ?> <h6 class="tag-producto-tienda"> <?php echo wc_get_product_tag_list( $product->get_id() ); ?> </h6> <?php } add_action( 'woocommerce_after_shop_loop_item_title', 'ov_mostrar_etiquetas_productos_tienda', 9 );
Añadir un contador de productos al icono de carrito del menú principal por defecto de divi
/* Agregar un contador al icono de carrito del menú principal en divi */ function et_show_cart_total( $args = array() ) { if ( ! class_exists( 'woocommerce' ) || ! WC()->cart ) { return; } $defaults = array( 'no_text' => false, ); $args = wp_parse_args( $args, $defaults ); $items_number = WC()->cart->get_cart_contents_count(); $url = function_exists( 'wc_get_cart_url' ) ? wc_get_cart_url() : WC()->cart->get_cart_url(); printf( '<a href="%1$s" class="et-cart-info"> <span>%2$s</span> </a>', esc_url( $url ), esc_html( sprintf( _nx( '%1$s item', '%1$s items', $items_number, 'WooCommerce items number', 'Divi' ), number_format_i18n( $items_number ) ) ) ); }
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; }