Fuente del texto – Elige la fuente que quieres usar para el texto. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el menú desplegable.

Peso de la fuente del texto – Haz clic en el menú desplegable para seleccionar el grosor de la fuente del texto.

Estilo de la fuente del texto – Elige el estilo de la fuente del texto:

• Cursiva

• Mayúsculas

• Versales

• Subrayado

• Tachado

Alineación del texto – Elige la alineación específica para el texto:

• Izquierda

• Centro

• Derecha

• Justificado

Color del texto – Elige un color específico para el texto. Selecciona desde la paleta de colores de tu sitio o haz clic en el icono del cuentagotas para elegir un color nuevo.

Tamaño del texto – Elige el tamaño de la fuente del texto arrastrando el control deslizante o escribiendo un valor numérico.

Espaciado entre letras del texto – Elige el espaciado entre letras del texto arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. A mayor número, mayor espacio.

Altura de línea del texto – Elige la altura de línea del texto arrastrando el control deslizante o escribiendo un valor numérico. La altura de línea es el espacio entre cada línea de texto. A mayor número, mayor espacio.

Sombra del texto – Añade una sombra al texto. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la fuerza del desenfoque de la sombra y el color de la sombra.

Alineación del texto – Elige cómo se alinea el texto:

• Izquierda

• Centro

• Derecha

• Justificado

Color del texto – Establece el color general del texto a claro u oscuro.

Fuente del atributo – Elige la fuente que quieres usar para el texto de los atributos. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el menú desplegable.

Peso de la fuente del atributo – Haz clic en el menú desplegable para seleccionar el grosor de la fuente del texto de atributos.

Estilo de la fuente del atributo – Elige el estilo de la fuente del texto de atributos:

• Cursiva

• Mayúsculas

• Versales

• Subrayado

• Tachado

Alineación del texto del atributo – Elige la alineación específica para el texto del atributo:

• Izquierda

• Centro

• Derecha

• Justificado

Color del texto del atributo – Elige un color específico para el texto del atributo. Selecciona desde la paleta de colores de tu sitio o haz clic en el icono del cuentagotas para elegir un color nuevo.

Tamaño del texto del atributo – Elige el tamaño de la fuente del texto del atributo arrastrando el control deslizante o escribiendo un valor numérico.

Espaciado entre letras del atributo – Elige el espaciado entre letras del texto del atributo arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. A mayor número, mayor espacio.

Altura de línea del atributo – Elige la altura de línea del texto del atributo arrastrando el control deslizante o escribiendo un valor numérico. La altura de línea es el espacio entre cada línea de texto. A mayor número, mayor espacio.

Sombra del texto del atributo – Añade una sombra al texto del atributo. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la fuerza del desenfoque de la sombra y el color de la sombra.

Color de fondo de la tabla – Establece el color del fondo de la tabla eligiendo desde la paleta de colores o haciendo clic en el icono del cuentagotas para encontrar un color nuevo.

Margen de la tabla – Establece los márgenes de la tabla. Los márgenes añaden espacio fuera del elemento.

Esquinas redondeadas de la tabla – Escribe un valor numérico si quieres que las esquinas de la tabla sean redondeadas. A mayor número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se ve en el icono 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, siempre tendrán el mismo valor y se actualizarán automáticamente si cambias uno.

Estilos de borde de la tabla – Añade un borde a la tabla. Puedes añadir borde a todos los lados o a lados individuales (arriba, derecha, abajo e izquierda).

Ancho del borde de la tabla – Establece 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 tabla – Elige el color del borde. Puedes seleccionar un color de la paleta predeterminada de tu sitio o hacer clic en el icono del cuentagotas para encontrar un color nuevo.

Estilo del borde de la tabla – Selecciona el estilo de borde que deseas: sólido, discontinuo, punteado, doble, estriado, en relieve, embutido, sobresaliente o ninguno.

Sombra del cuadro de la tabla – Elige el estilo de sombra que deseas aplicar a la tabla. Por defecto, no se aplica sombra.

Color de fondo de la fila de tabla – Establece el color del fondo de la fila de tabla eligiendo desde la paleta de colores o haciendo clic en el icono del cuentagotas para encontrar un color nuevo.

Margen de la fila de tabla – Establece los márgenes de la fila de tabla. Los márgenes añaden espacio fuera del elemento.

Esquinas redondeadas de la fila de tabla – Si quieres que las esquinas de la fila de tabla sean redondeadas, escribe un valor numérico. A mayor número, más redondeadas serán las esquinas. Los valores están vinculados automáticamente (como se ve en la cadena azul); si quieres valores diferentes para cada esquina, haz clic para desvincular.

Estilos de borde de la fila de tabla – Añade un borde a la fila de tabla. Puedes añadir borde a todos los lados o a lados individuales.

Ancho del borde de la fila de tabla – Aquí estableces el ancho del borde. Para un borde más grueso, aumenta el número. Debe ser al menos 1px para mostrarse.

Color del borde de la fila de tabla – Elige el color del borde. Puedes seleccionar de la paleta predeterminada o usar el cuentagotas.

Estilo del borde de la fila de tabla – Elige el estilo de borde: sólido, discontinuo, punteado, doble, estriado, en relieve, embutido, sobresaliente o ninguno.

Sombra del cuadro de la fila de tabla – Elige el estilo de sombra que deseas aplicar. Por defecto, no hay sombra.

Color de fondo de la celda de tabla – Establece el color de fondo eligiendo de la paleta o usando el cuentagotas.

Margen de la celda de tabla – Establece los márgenes. Los márgenes añaden espacio fuera del elemento.

Esquinas redondeadas de la celda de tabla – Escribe un valor numérico si quieres esquinas redondeadas. Valores vinculados o desvinculados como en los anteriores.

Estilos de borde de la celda de tabla – Añade borde a la celda, en todos o lados específicos.

Ancho del borde de la celda de tabla – Establece el ancho del borde. Mínimo 1px para mostrarse.

Color del borde de la celda de tabla – Selecciona el color del borde.

Estilo del borde de la celda de tabla – Elige el estilo de borde: sólido, discontinuo, punteado, doble, estriado, en relieve, embutido, sobresaliente o ninguno.

Sombra del cuadro de la celda de tabla – Elige el estilo de sombra a aplicar. Por defecto, no se aplica sombra.

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

Alineación del módulo – Si se define un ancho o ancho máximo, la alineación del módulo puede ser:

• Alineado a la izquierda

• Centrado

• Alineado a la derecha

Altura mínima – Define el valor mínimo para la altura del módulo. Más información en la documentación oficial.

Altura – Define la altura del módulo.

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

Margen añade espacio fuera del módulo, y relleno añade espacio dentro del módulo. Para bloquear proporciones y mantener los valores iguales, haz clic en el icono de cadena entre los valores que quieres mantener idénticos (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 si deseas esquinas redondeadas en el 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 ve en el ícono de cadena azul resaltado en el medio); sin embargo, si deseas valores diferentes para cada esquina, simplemente 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 – Agrega un borde a todos los lados del módulo o a lados individuales (arriba, derecha, abajo e 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 1px 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 está visible o hacer clic en el ícono del cuentagotas para encontrar un nuevo color.

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

Sombra de caja

Posición horizontal de la sombra - Define la posición horizontal de la sombra paralela.

Posición vertical de la sombra - Define la posición vertical de la sombra paralela.

Fuerza del desenfoque de la sombra - Define la intensidad del desenfoque de la sombra. A mayor valor, mayor desenfoque y la sombra se vuelve más amplia y ligera.

Fuerza de expansión de la sombra - Define la expansión del desenfoque. Incrementar este valor aumenta la densidad de la sombra. Una mayor densidad produce una sombra más intensa.

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

Posición de la sombra - Define la posición de la sombra. Puede estar dentro o fuera del módulo.

Filtros

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

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

• Brillo - Define qué tan brillantes deben ser los colores.

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

• Invertir - Invierte el tono, saturación y brillo según el valor especificado.

• Sepia - Define una apariencia más cálida, amarilla/marrón.

• 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 inferiores. Por defecto, está seleccionado "normal".

Transformar

• Escalar

• Traducir

• Rotar

• Sesgar

• Puntos de origen

Navega entre las opciones para configurarlas. Ajusta cada opción ingresando 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 cadena en la esquina inferior derecha.

Animación

• Duración de la animación - Define cuánto tiempo tarda una animación en completar un ciclo.

• Retraso de la animación - Define cuánto tiempo esperar desde que se aplica la animación a un elemento hasta que empieza a reproducirse.

• 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 para que la animación sea más fluida que una velocidad lineal.

• Repetición de la animación - Por defecto, la animación se reproduce solo una vez. Si quieres que se repita continuamente, selecciona la opción de bucle.

Pestaña Avanzada

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

ID y Clases CSS
Asigna un ID o clase CSS específica a este módulo. Esto es útil para aplicar CSS personalizado usando la hoja de estilos de tu tema hijo.

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 agregar propiedades CSS personalizadas.

Condiciones

Puedes agregar una o varias condiciones.

Visibilidad

• Desactivar en - Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) en teléfonos, tabletas o computadoras seleccionando la casilla correspondiente.

• Desbordamiento horizontal - Define qué mostrar cuando el contenido se desborda a los lados izquierdo y derecho. Puede ser:

  • Visible: el contenido se muestra aunque desborde la altura.

  • Desplazamiento: aparece una barra para desplazarse verticalmente.

  • Oculto: la parte que desborda se oculta.

  • Automático: el navegador decide si muestra barra.

• Desbordamiento vertical - Define qué mostrar cuando el contenido se desborda arriba o abajo, con las mismas opciones que el horizontal.

Transiciones
Controla la duración, retraso y curva de velocidad de la animación al pasar el cursor.

• Duración de la transición - Duración en milisegundos de la animación hover.

• Retraso de la transición - Retraso en milisegundos antes de la animación hover.

• Curva de velocidad de la transición - Curva de velocidad para la animación hover.

Posición

• Relativa (valor predeterminado) - El módulo se posiciona según el flujo normal del documento y luego se desplaza relativo a sí mismo. No afecta la posición de otros elementos y el espacio reservado es el mismo que si estuviera estático.

• Absoluta - El módulo se elimina del flujo normal y no crea espacio en el diseño. Se posiciona relativo a su ancestro posicionado más cercano o al bloque contenedor inicial.

• Fija - El módulo se elimina del flujo y no crea espacio. Se posiciona según la ventana del navegador, ideal para crear módulos fijos (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 en la superposición del módulo. Los valores más altos se muestran sobre los más bajos.

Efectos de desplazamiento

Además, puedes habilitar movimiento vertical para ajustar la velocidad de desplazamiento sin afectar elementos circundantes.

La función de disparador de movimiento permite elegir cuándo se activa 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 Product Information

• Cómo instalar WooCommerce y configurar tu tienda

• Cómo configurar ajustes de WooCommerce

• 5 ideas de personalización para WooCommerce

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

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

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

Continúa aprendiendo