Snippets - Agencia de publicidad y diseño viralike



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

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;

Para no tapar carrito con las cookies

/* cookies */
.cli-style-v2 .cli-bar-message {
font-size: 13px;
}

#cookie-law-info-bar[data-cli-style=»cli-style-v2″] {
padding-top: 20px;
padding-bottom: 20px;
padding-right: 90px;
padding-left: 20px;
}

Evitar scroll horizontal - Pegar en Opciones de Divi CSS personalizado

#page-container {
overflow-x: hidden;
}

Botones

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.

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.

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.

Crear un menú fijo transparente que cambie a un color al hacer scroll

1. Código jQuery que tienes que pegar en las opciones del tema divi / Integración / Agregar código al <head> de su blog:

jQuery(document).ready(function( $ ) {
  $(window).scroll(function(){
  	var scroll = jQuery(window).scrollTop();
	  if (scroll >= 100) {
	    $("#menuFijo").addClass("menu-color-fijo-scroll");
	  }

	  else{
		$("#menuFijo").removeClass("menu-color-fijo-scroll");  	
	  }
  });
});
2. Pegamos este código css en el CSS personalizado de divi:

#menuFijo {
  background-color: transparent;
  transition: background-color 0.5s ease;
}

.menu-color-fijo-scroll {
	background-color: rgba(0,0,0,0.9)!important;
  transition: background-color 1s ease;
}

Ocultar menú al desplazarse hacia abajo y mostrar menú al desplazarse hacia arriba

Pegar código en opciones de divi / integración / agregar código al body:

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navPrincipal").style.top = "0";
  } else {
    document.getElementById("navPrincipal").style.top = "-100px";
  }
  prevScrollpos = currentScrollPos;
}
</script>

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

Menú móvil hamburguesa de ancho completo

.et_mobile_menu {
margin-left: -100vh;
padding: 5%;
width: 200vh;
}

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

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

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

Submenu Collapse móvil

1. Pegar código en opciones de divi / integración / Add code to the < head > of your blog
<script > 
jQuery(function($) 
{ $(document).ready(function() 
{ $("body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children").append('<a href="#" class="mobile-toggle"></a>'); 
$('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle').click(function(event) { event.preventDefault(); 
$(this).parent('li').toggleClass('dt-open'); $(this).parent('li').find('ul.children').first().toggleClass('visible'); 
$(this).parent('li').find('ul.sub-menu').first().toggleClass('visible'); }); iconFINAL = 'P'; 
$('body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children').attr('data-icon', iconFINAL); 
$('.mobile-toggle').on('mouseover', function() { $(this).parent().addClass('is-hover'); }).on('mouseout', function() { 
$(this).parent().removeClass('is-hover'); }) }); });  
</script>

2. Pegar código css en opciones divi / personalización css
/*change hamburger icon to x when mobile menu is open*/
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before, .et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before { content: ‘\4d’; }

/*adjust the new toggle element which is added via jQuery*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle { width: 44px; height: 100%; padding: 0px !important; max-height: 44px; border: none; position: absolute; right: 0px; top: 0px; z-index: 999; background-color: transparent; }

/*some code to keep everyting positioned properly*/
ul.et_mobile_menu>li.menu-item-has-children, ul.et_mobile_menu>li.page_item_has_children, ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children, .et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children, .et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children, .et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children { position: relative; }

/*remove default background color from menu items that have children*/
.et_mobile_menu .menu-item-has-children>a, .et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a { background-color: transparent; } /*hide the submenu by default*/ ul.et_mobile_menu .menu-item-has-children .sub-menu, #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu, .et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu, .et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu { display: none !important; visibility: hidden !important; }

/*show the submenu when toggled open*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible, #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible, .et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible, .et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible { display: block !important; visibility: visible !important; }

/*adjust the toggle icon position and transparency*/ ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle { text-align: center; opacity: 1; }

/*submenu toggle icon when closed*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after { top: 10px; position: relative; font-family: «ETModules»; content: ‘\33’; color: #00d263; background: #f0f3f6; border-radius: 50%; padding: 3px; }

/*submenu toggle icon when open*/
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after { content: ‘\32’; }

/*add point on top of the menu submenu dropdown*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after { position: absolute; right: 5%; margin-left: –20px; top: –14px; width: 0; height: 0; content: »; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #ffffff; }

/*adjust the position of the hamburger menu*/
.mobile_menu_bar { position: relative; display: block; bottom: 10px; line-height: 0; }

/*force the background color and add a rounded border*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu, .et_pb_menu_0.et_pb_menu .et_mobile_menu ul { background-color: #ffffff!important; border-radius: 10px; }

PÁGINA REFERENCIA

How To Collapse Divi Mobile Menu Submenus

WOOCOMMERCE

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

Añadir un contador de productos al icono de carrito del menú principal por defecto de divi

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

/* 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 ) 
)  
) 
); 
}

Estilos CSS para las categorías y etiquetas de los productos de la tienda

1. Añdir ov-tienda al modulo

/* Estilos elementos card productos woocommerce */ 
.ov-tienda .product .cat-producto-tienda { 
margin-top: 12px; 
margin-bottom: 6px; 
padding-bottom: 0px; 
} 
.ov-tienda .product .cat-producto-tienda a { 
margin-top: 20px; 
font-size: 12px !important; 
color: #4d4d4d !important; 
font-weight: 400 !important; 
text-transform: uppercase; 
} 
.ov-tienda .product .tag-producto-tienda { 
margin-top: 12px; 
margin-bottom: 6px; 
} 
.ov-tienda .product .tag-producto-tienda a { 
font-size: 12px; 
font-weight: 400; 
background: #dcd5ff; 
color: #1f0796!important; 
border-radius: 4px; 
padding: 2px 6px; 
text-transform: none; 
} 
.ov-tienda .product .quantity { 
margin-top: 1em; 
float: left; 
width: 67px; 
} 
.ov-tienda .product .quantity .qty { 
width: 3em !important; 
font-size: 17px !important; 
height: 38px !important; 
} 
.ov-tienda .product .button { 
font-size: 14px !important; 
} 
.ov-tienda .product .button.product_type_variable, 
.ov-tienda .product .button.product_type_grouped { 
width: 100%; 
text-align: center; 
} 
/* Mostrar un producto por diapositiva en móvil */ 
@media (max-width: 480px) { 
.et-db #et-boc .et-l .ov-tienda ul.products.columns-4 li.product {  
width: 100% !important; 
} 
.ov-tienda .product .quantity { 
width: 25%; 
margin-left: 5%; 
} 
.ov-tienda .product .button.add_to_cart_button { 
width: 70%; 
text-align: center; 
} 
} 
@media (min-width:640px) and (max-width:980px){ 
.ov-tienda .product .quantity { 
width: 25%; 
margin-left: 5%; 
} 
.ov-tienda .product .button.add_to_cart_button { 
width: 70%; 
text-align: center; 
} 
}

Ocultar el precio fijo en el finalizar compra cuando en realidad sea gratis el envio

/** * Hide shipping rates when free shipping is available. * Updated to support WooCommerce 2.6 Shipping Zones. * * @param array $rates Array of rates found for the package. * @return array */ function my_hide_shipping_when_free_is_available( $rates ) { $free = array(); foreach ( $rates as $rate_id => $rate ) { if ( ‘free_shipping’ === $rate->method_id ) { $free[ $rate_id ] = $rate; break; } } return ! empty( $free ) ? $free : $rates; } add_filter( ‘woocommerce_package_rates’, ‘my_hide_shipping_when_free_is_available’, 100 );

OTROS

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

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

Agregar un icono al inicio de cada toggle del módulo acordeón

1. Código CSS para agregar un icono al inicio de cada título del toggle del módulo acordeón:

content: url(ENLACE_IMG_AQUI);
position: absolute;
top: 8px;
left: 12px;

2. Código jQuery base para reemplazar las imágenes correspondientes a cada conmutador del acordeón:

<script>
jQuery(document).ready(function($){

	$('.ov-acordeon .et_pb_accordion_item_0 .et_pb_toggle_title').on({
     'click': function(){
         $('#cambiarIMG img').attr('src','URL_IMAGEN');
       	 $('#cambiarIMG img').attr('srcset','URL_IMAGEN');
     }
 	});
 
});
</script>

agregar un efecto de transición entre páginas en divi

1. Agregar la clase “animate-in-ov” a la etiqueta body de nuestro sitio web. Para esto requerimos de una función que debes pegar en el archivo functions.php de tu tema hijo o si no tienes un tema hijo lo puedes hacer mediante el plugin Code Snippets.

add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {
 
    $classes[] = 'animate-in-ov';
     
    return $classes;
     
}

2 . Insertar los estilos CSS de la clase que agregamos anteriormente. Para eso solo tienes que copiar y pegar el siguiente código en el CSS Personalizado de divi:

.animate-in-ov {
    -webkit-animation: fadeIn .5s ease-in;
    animation: fadeIn .5s ease-in;
}

.animate-out-ov {
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

3. Agregar el efecto de desvanecido justo antes que se cargue la página. Esto lo haremos con el siguiente código javascript, solo tienes que copiar y pegarlo en las Opciones del tema divi / Integración / Agregar código al de su blog.

<script> 
window.addEventListener("beforeunload", function () {
  document.body.classList.add("animate-out-ov");
});
</script>

Generales