Imagen
Aquí puedes diseñar la imagen de perfil.

• Esquinas redondeadas de la imagen – Si quieres redondear las esquinas de la imagen, escribe un valor numérico. Mientras mayor sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se ve en el ícono de cadena azul resaltado en el medio); sin embargo, si quieres valores diferentes para cada esquina, haz clic en la cadena 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 se cambia uno.

• Estilos del borde de la imagen – Aquí puedes agregar un borde a la imagen. Puedes añadir un borde en todos los lados o en lados individuales (arriba, derecha, abajo e izquierda).

• Ancho del borde de la imagen – Aquí defines el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos 1px para mostrarse.

• Color del borde de la imagen – Aquí puedes elegir el color del borde. Puedes seleccionar un color de la paleta de colores predeterminada de tu sitio o usar el icono del cuentagotas para encontrar un nuevo color.

• Estilo del borde de la imagen – Aquí puedes seleccionar el estilo del borde que prefieras: sólido, discontinuo, punteado, doble, canalado, con relieve, incrustado, sobresaliente o ninguno.

• Sombra del cuadro de la imagen – Elige el estilo de sombra que quieres aplicar a la imagen. Por defecto, no se aplica ninguna sombra.

• Posición horizontal de la sombra del cuadro – Controla la posición horizontal de la sombra.

• Posición vertical de la sombra del cuadro – Controla la posición vertical de la sombra.

• Fuerza del desenfoque de la sombra – Controla la intensidad del desenfoque de la sombra. Mientras mayor sea el número, mayor será el desenfoque.

• Fuerza de expansión de la sombra – Controla el alcance de la sombra alrededor de la imagen.

• Color de la sombra – Elige el color de la sombra de la imagen.

• Posición de la sombra del cuadro – Elige si la sombra se aplica dentro o fuera de la imagen.

• Tono de la imagen – Ajusta el tono de la imagen.

• Saturación de la imagen – Ajusta la saturación de la imagen.

• Brillo de la imagen – Ajusta el brillo de la imagen.

• Contraste de la imagen – Ajusta el contraste de la imagen.

• Invertir imagen – Invierte los colores de la imagen.

• Sepia de la imagen – Controla el nivel de tono sepia aplicado a la imagen.

• Opacidad de la imagen – Controla la opacidad (transparencia) de la imagen.

• Desenfoque de la imagen – Controla el nivel de desenfoque de la imagen.

• Modo de fusión de la imagen – El modo de fusión define cómo el módulo se mezcla con las capas debajo. Por defecto, está seleccionado normal.

• Alineación de la calificación con estrellas – Alinea la calificación a la izquierda, derecha, centro o justificado.

• Color de la calificación con estrellas – Elige un color para la calificación. Usa la paleta de colores o el cuentagotas para encontrar un nuevo color.

• Tamaño de la calificación con estrellas – Elige el tamaño arrastrando el control deslizante o escribiendo un valor numérico.

• Espaciado entre letras de la calificación con estrellas – Ajusta el espacio entre cada letra. Mientras mayor sea el número, más espacio habrá.

• Color de la etiqueta de oferta – Selecciona el color de la etiqueta. Puedes elegir de la paleta de colores o usar el cuentagotas para un nuevo color.

• Margen de la etiqueta de oferta – Aplica márgenes escribiendo valores numéricos. El margen añade espacio fuera del elemento. Para mantener los valores iguales (arriba y abajo o izquierda y derecha), haz clic en el icono de cadena entre las cajas de entrada. Esto vincula los valores para que al cambiar uno, el otro se ajuste igual.

• Relleno de la etiqueta de oferta – Aplica relleno escribiendo valores numéricos. El relleno añade espacio dentro del elemento. También puedes vincular valores con el icono de cadena.

• Fuente de la etiqueta de oferta – Por defecto, se usa la fuente del sitio. Puedes elegir una fuente diferente desde el menú desplegable.

• Grosor de fuente de la etiqueta de oferta – Determina el grosor del texto: Ligero, Regular, Semi Negrita, Negrita o Ultra Negrita.

• Estilo de fuente de la etiqueta de oferta – Selecciona el estilo: cursiva, mayúsculas, versalitas, subrayado o tachado.

• Color del texto de la etiqueta de oferta – Elige el color del texto desde la paleta o con el cuentagotas.

• Tamaño del texto de la etiqueta de oferta – Ajusta el tamaño con el control deslizante o escribiendo un valor numérico.

• Espaciado entre letras del texto de la etiqueta de oferta – Ajusta el espacio entre letras; más número, más espacio.

• Altura de línea del texto de la etiqueta de oferta – Ajusta el espacio entre líneas de texto; más número, más espacio.

• Sombra del texto de la etiqueta de oferta – Añade sombra al texto. Puedes configurar dirección horizontal, vertical, intensidad del desenfoque y color de la sombra.

• Esquinas redondeadas de la etiqueta de oferta – Si quieres esquinas redondeadas, escribe un número. Más alto, más redondeadas. Los valores están vinculados por defecto, puedes desvincular haciendo clic en la cadena azul.

• Estilos de borde de la etiqueta de oferta – Añade borde a todos los lados o a lados individuales (arriba, derecha, abajo, izquierda).

• Ancho del borde de la etiqueta de oferta – Ajusta el grosor con número o control deslizante. Debe ser al menos 1px para verse.

• Color del borde de la etiqueta de oferta – Selecciona el color desde la paleta o con el cuentagotas.

• Estilo del borde de la etiqueta de oferta – Elige entre sólido, discontinuo, punteado, doble, canalado, con relieve, incrustado, sobresaliente o ninguno.

• Sombra del cuadro de la etiqueta de oferta – Aplica sombra. Puedes configurar posición, intensidad, extensión y color. Puedes elegir si la sombra va dentro o fuera del contenedor.

• Alineación del texto – Elige entre: izquierda, centro, derecha o justificado.

• Sombra del texto – Aplica sombra a todo el texto dentro del módulo (número y título).

• Fuente del título – Elige la fuente; por defecto se selecciona automáticamente, pero puedes cambiar o subir una fuente personalizada.

• Grosor de fuente del título – Selecciona el grosor del texto del título.

• Estilo de fuente del título – Elige el estilo: cursiva, mayúsculas, versalitas, subrayado o tachado.

• Alineación del texto del título – Elige la alineación solo para el título: izquierda, centro, derecha o justificado.

• Color del texto del título – Elige un color específico para el título.

• Tamaño del texto del título – Ajusta el tamaño con control deslizante o valor numérico.

• Espaciado entre letras del título – Ajusta el espacio entre letras.

• Altura de línea del título – Ajusta el espacio entre líneas del título.

• Sombra del texto del título – Añade sombra y configura dirección, intensidad y color.

• Fuente del precio – Elige la fuente para el texto del precio.

• Grosor de fuente del precio – Selecciona el grosor.

• Estilo de fuente del precio – Elige entre cursiva, mayúsculas, versalitas, subrayado o tachado.

• Alineación del texto del precio – Específica solo para el precio: izquierda, centro, derecha o justificado.

• Color del texto del precio – Elige color específico.

• Tamaño del texto del precio –

Ajusta tamaño.

• Espaciado entre letras del precio – Ajusta el espacio entre letras.

• Altura de línea del precio – Ajusta el espacio entre líneas.

• Sombra del texto del precio – Añade sombra y configura parámetros.

---

• Fuente del precio en oferta – Elige la fuente.

• Grosor de fuente del precio en oferta – Selecciona el grosor.

• Estilo de fuente del precio en oferta – Elige estilo: cursiva, mayúsculas, versalitas, subrayado o tachado.

• Alineación del texto del precio en oferta – Específica alineación.

• Color del texto del precio en oferta – Elige color.

• Tamaño del texto del precio en oferta – Ajusta tamaño.

• Espaciado entre letras del precio en oferta – Ajusta espacio entre letras.

• Altura de línea del precio en oferta – Ajusta espacio entre líneas.

• Sombra del texto del precio en oferta – Añade sombra con configuración.

• Ancho – Define el ancho del módulo. Para más información, consulta la documentación oficial.

• Ancho máximo – Define el ancho máximo del módulo.

• Alineación del módulo – Si se establece ancho o ancho máximo, puedes alinear el módulo a: izquierda, centro o derecha.

• Altura mínima – Define la altura mínima del módulo.

• Altura – Define la altura del módulo.

• Altura máxima – Define la altura máxima del módulo.

• El margen añade espacio fuera del módulo.

• El relleno añade espacio dentro del módulo.

Para bloquear valores y mantenerlos iguales (ej. arriba y abajo), haz clic en el icono de cadena entre los valores.

• Los valores predeterminados de margen y relleno son 0.

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 vinculados automáticamente (como se muestra en el icono de cadena azul resaltada en el medio); sin embargo, si quieres valores diferentes para cada esquina, haz clic en la cadena 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 se cambia uno.

Estilos de Borde – Aquí, puedes agregar un borde a todos los lados del módulo o a lados individuales (arriba, derecha, abajo y izquierda).

Ancho del Borde – Aquí defines el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos de 1px para mostrarse.

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

Estilo del Borde – Aquí puedes seleccionar el estilo del borde que desees: sólido, discontinuo, punteado, doble, ranurado, biselado, embutido, sobresaliente o ninguno.

Sombra de Caja

Una vez que seleccionas un estilo de sombra, puedes personalizar las siguientes opciones:

• 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.

• Fuerza de Desenfoque de la Sombra de Caja – Define la intensidad del desenfoque de la sombra. Cuanto mayor sea el valor, mayor será el desenfoque y más amplia y ligera será la sombra.

• Fuerza de Extensión de la Sombra de Caja – Define la fuerza de propagación del desenfoque. Aumentar esta fuerza incrementa la densidad de la sombra. 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 si la sombra está dentro del módulo o fuera del módulo.

• Matiz – Define el ángulo del matiz de un color.

• Saturación – Define qué tan intensa debe ser la saturación del color.

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

• Contraste – Define cuán distintas deben ser las áreas claras y oscuras.

• Invertir – Invierte el matiz, saturación y brillo según el valor especificado.

• Sepia – Define una apariencia más cálida, con tonos amarillentos/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 el módulo se mezcla con las capas debajo de él. Por defecto, estará seleccionado normal.

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Navega por cada opción con tabulador. Configura cada opción ingresando valores numéricos o arrastrando y expandiendo la caja o círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el icono de cadena en la parte inferior derecha.

• Duración de la Animación – Define cuánto tiempo tarda en completarse un ciclo de animación.

• Retraso de la Animación – Define cuánto tiempo esperar antes de iniciar la animación después de aplicarla al elemento.

• 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, haciendo que la transición sea más fluida que una curva lineal.

• Repetición de la Animación – Por defecto, las animaciones se reproducen solo una vez. Para que se repita continuamente, elige la opción de repetición (loop).

Pestaña Avanzada

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases e identificadores CSS personalizados al módulo, que permiten personalizar estilos con propiedades CSS avanzadas o aplicar código CSS personalizado usando la clase del módulo.

• CSS libre – Escribe CSS libre utilizando el selector palabra clave para dirigirte 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. Cuando haces clic en la pestaña Elementos del módulo, verás secciones individuales donde puedes añadir propiedades CSS personalizadas.

Puedes añadir una o varias condiciones.

• Desactivar en – Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) cuando la ventana de visualización sea teléfono, tableta o escritorio haciendo clic en la casilla correspondiente.

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

  • Visible

  • Desplazamiento (barra de desplazamiento vertical)

  • Oculto

  • Automático (el navegador decide)

• Desbordamiento Vertical – Define qué mostrar cuando el contenido sobrepasa los bordes superior e inferior. Las opciones son iguales a las del desbordamiento horizontal.

• Duración de la transición – Define la duración (en milisegundos) de la transición de la animación hover.

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

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

• Relativa (valor por defecto) – El módulo se posiciona según el flujo normal del documento y luego se desplaza relativamente según los valores de desplazamiento vertical y horizontal. Este desplazamiento no afecta a otros elementos.

• Absoluta – El módulo se elimina del flujo normal y se posiciona respecto a su ancestro posicionado más cercano o al bloque contenedor inicial.

• Fija – El módulo se elimina del flujo normal y se posiciona en relación con la ventana del navegador, útil para crear un módulo fijo o pegajoso.

• 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 la disposición de la página. Módulos con índice z mayor se superponen a los de índice menor.

Efectos de Desplazamiento

También puedes activar el movimiento vertical, ajustando la velocidad del desplazamiento del elemento sin afectar a los elementos circundantes.

El efecto de activación del movimiento permite elegir cuándo se activa el efecto de scroll: cuando la parte superior, media o inferior del elemento está en vista.

Guardar tu Diseño

Guardar el Diseño de la Página

Salir del Constructor Visual

Más Recursos para el Módulo Divi Woo Productos

• Ocho nuevos módulos Divi WooCommerce + personalización del carrito y pago

• Cómo usar la app móvil WooCommerce para gestionar tus tiendas

• Cómo instalar WooCommerce y configurar tu tienda

• Cómo configurar ajustes de WooCommerce

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

Continúa Aprendiendo