Espaciado

El margen agrega espacio fuera del módulo, y el relleno agrega espacio dentro del módulo. Para bloquear proporciones y mantener los valores iguales, haz clic en el ícono de eslabón de cadena entre los valores que siempre quieres que sean idénticos (por ejemplo, arriba y abajo).

Los valores predeterminados de margen para el módulo son 0.

Los valores predeterminados de relleno para el módulo son 0.

Borde

Esquinas redondeadas – Escribe un valor numérico para redondear las esquinas del borde. Cuanto mayor sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están automáticamente vinculados (como se ve en el eslabón de cadena azul resaltado en el medio); sin embargo, si deseas tener valores diferentes para cada esquina, simplemente haz clic en el eslabón azul para desvincular los valores. Si los valores están vinculados automáticamente, siempre tendrán el mismo valor y se actualizarán automáticamente si cambias uno.

Estilos de borde – Agrega un borde a todos los lados del módulo o a lados individuales (arriba, derecha, abajo, izquierda).

Ancho del borde - Establece el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos 1 px para mostrarse.

Color del borde – Elige el color del borde. Puedes seleccionar un color de la paleta de colores predeterminada de tu sitio que ya se muestra o hacer clic en el ícono del cuentagotas para encontrar un nuevo color.

Estilo del borde – Selecciona el estilo de borde que prefieras: sólido, discontinuo, punteado, doble, ranura, relieve, incrustado, sobresaliente o ninguno.

Sombra de caja

Posición horizontal de la sombra de caja – Define la posición horizontal de la sombra proyectada.

Posición vertical de la sombra de caja – Define la posición vertical de la sombra proyectada.

Intensidad de desenfoque de la sombra de caja – Define la fuerza del desenfoque de la sombra. Cuanto mayor sea el valor, más grande será el desenfoque y la sombra será más amplia y ligera.

Intensidad de expansión de la sombra de caja – Define la fuerza de expansión del desenfoque. Aumentar la expansión incrementa la densidad de la sombra de caja. Mayor densidad resulta en una sombra más intensa.

Color de la sombra – Define el color de la sombra.

Posición de la sombra de caja – Define la posición de la sombra. Puede estar dentro del módulo o fuera de él.

Filtros

• Tono – Define el ángulo del tono de un color.

• Saturación – Define la intensidad de la saturación del color.

• Brillo – Define qué tan brillante deben ser los colores.

• Contraste – Define qué tan distintas deben ser las áreas claras y oscuras.

• Invertir – Invierte el tono, saturación y brillo por el valor especificado.

• Sepia – Define una apariencia más cálida, con tonos amarillos/marrones.

• Opacidad – Define qué tan transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).

• Desenfoque – Define la cantidad de desenfoque gaussiano aplicado al módulo.

El Modo de fusión se refiere a cómo se mezcla el módulo con las capas que están debajo. Por defecto, está seleccionado el modo normal.

Transformar

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Navega por cada opción usando tabulación. Configura cada opción introduciendo valores numéricos o arrastrando y expandiendo el cuadro o círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el ícono de eslabón de cadena en la esquina inferior derecha.

Animación

• Duración de la animación – Define el tiempo que tarda la animación en completar un ciclo.

• Retraso de la animación – Define cuánto tiempo esperar desde que se aplica la animación al elemento antes de que comience a ejecutarse. La animación puede comenzar después, inmediatamente al principio, o inmediatamente en medio de la animación.

• Opacidad inicial de la animación – Define el valor inicial de opacidad.

• Curva de velocidad de la animación – Define el método de suavizado de la animación. Suavizar la animación al inicio y final crea un efecto más fluido que una velocidad lineal.

• Repetición de la animación – Por defecto, las animaciones se reproducen solo una vez. Si quieres que la animación se repita continuamente, elige la opción de bucle.

Pestaña Avanzada

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases y IDs CSS personalizados al módulo, que pueden usarse para personalizar estilos con propiedades CSS más avanzadas o para aplicar código CSS personalizado usando la clase CSS del módulo.

ID y Clases CSS

CSS Personalizado

• CSS libre – Escribe CSS libre usando el selector keyword para apuntar a este módulo. Ejemplo: selector h1 {color: rojo;}

• Elementos del módulo – También puedes aplicar CSS personalizado pegándolo en esta pestaña. Al hacer clic en Elementos del módulo, verás secciones individuales donde puedes añadir propiedades CSS personalizadas.

Atributos

C

Condiciones

Puedes agregar una o varias condiciones.

Visibilidad

Desbordamiento horizontal – Define qué mostrar cuando el contenido sobresale de los bordes izquierdo y derecho de un elemento de nivel bloque. Puede ser:

• Visible – El contenido se mostrará si sobresale en altura.

• Desplazamiento – Si el contenido sobresale en altura, se usará una barra de desplazamiento vertical para navegarlo.

• Oculto – Si el contenido sobresale en altura, la parte que sobresale será oculta.

• Automático – El navegador decide si mostrar o no la barra de desplazamiento.

Desbordamiento vertical – Define qué mostrar cuando el contenido sobresale de los bordes superior e inferior de un elemento de nivel bloque. Puede ser:

• Visible – El contenido se mostrará si sobresale en altura.

• Desplazamiento – Si el contenido sobresale en altura, se usará una barra de desplazamiento vertical para navegarlo.

• Oculto – Si el contenido sobresale en altura, la parte que sobresale será oculta.

• Automático – El navegador decide si mostrar o no la barra de desplazamiento.

• Duración de la transición – Define la duración (en milisegundos) de la transición de la animación al pasar el cursor.

• Retraso de la transición – Define el retraso de la transición (en milisegundos).

• Curva de velocidad de la transición – Define la curva de velocidad de la transición.

Posición

• Relativa (valor predeterminado) – El módulo está posicionado según el flujo normal del documento, y los valores de desplazamiento son relativos a sí mismo basados en los valores de desplazamiento vertical y horizontal. El desplazamiento no afecta a otros elementos, por lo que el espacio dado para el módulo en el diseño es el mismo que si la posición fuera estática.

• Absoluta – El módulo se elimina del flujo normal del documento y no crea espacio en el diseño de la página. Se posiciona respecto a su ancestro más cercano que tenga posición o al bloque contenedor inicial. Las opciones de ubicación determinan su posición final.

• Fija – El elemento se elimina del flujo normal y no crea espacio. Se posiciona basado en la ventana del navegador. Esto puede usarse para crear un módulo fijo o “sticky”.

• Desplazamiento vertical – Define la posición vertical del módulo.

• Desplazamiento horizontal – Define la posición horizontal del módulo.

• Índice z – Define el orden del módulo en el diseño de la página. Módulos con un índice z más alto se superponen a módulos con un índice más bajo.

Efectos de desplazamiento

Además, puedes habilitar movimiento vertical en este módulo, lo que permite ajustar la velocidad de desplazamiento del elemento sin afectar a los elementos alrededor.

La función Disparador de efecto de movimiento te permite elegir cuándo se activa el efecto de desplazamiento aplicado. Puedes activar el efecto cuando la parte superior, media o inferior del elemento esté visible.

Guardar y salir

Guardar el diseño de la página

Salir del constructor visual

Más recursos para el módulo Divi Woo Totales del Carrito

• Cómo instalar WooCommerce y configurar tu tienda

• Cómo configurar los ajustes de WooCommerce

• 5 ideas de personalización para WooCommerce

• Optimización del rendimiento de WooCommerce: 14 consejos y buenas prácticas

• Guía simple para las páginas predeterminadas de WooCommerce

• Actualización de WooCommerce: mejores prácticas para seguir siempre

Continuar aprendiendo
Mantente al día con todos nuestros últimos tutoriales de Divi Woo Totales del Carrito visitando nuestra página de Totales del Carrito Woo.