• Esquinas redondeadas de la imagen – Si quieres redondear las esquinas de la imagen, escribe un valor numérico. Cuanto mayor sea el número, más redondeadas estarán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se muestra por el icono de cadena azul resaltado en el centro); sin embargo, si deseas tener 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 cambias uno de ellos.

• Estilos de borde de la imagen – Añade un borde a la imagen. Puedes agregar un borde a todos los lados de la imagen o a lados individuales (arriba, derecha, abajo y izquierda).

• Ancho del borde de la imagen – Elige el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos de 1 px para que se muestre.

• Color del borde de la imagen – 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 icono del cuentagotas para buscar un nuevo color.

• Estilo del borde de la imagen – Selecciona el estilo de borde que prefieras: sólido, punteado, con guiones, doble, ranura (groove), relieve (ridge), embutido (inset), sobresaliente (outset) o ninguno.

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

• Posición horizontal de la sombra de caja – Controla la posición horizontal de la sombra de la caja de la imagen.

• Posición vertical de la sombra de caja – Controla la posición vertical de la sombra de la caja de la imagen.

• Fuerza de desenfoque de la sombra de caja – Controla la intensidad del desenfoque de la sombra. Cuanto mayor sea el número, más difusa será la sombra.

• Fuerza de expansión de la sombra de caja – Controla la fuerza de expansión de la sombra sobre la imagen.

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

• Posición de la sombra de caja – Elige la posición de la sombra aplicada a la imagen: sombra interior o sombra exterior.

• 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 la 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 se refiere a cómo el módulo se mezcla con las capas debajo. Por defecto, está seleccionado normal.

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

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto – Elige el color del texto: claro u oscuro.

• Sombra del texto – Aplica una sombra proyectada a todo el texto dentro de este módulo. Cuando seleccionas un tipo de sombra, se aplicará a todo el contenido textual del módulo.

• Nivel del encabezado del contador de reseñas – Elige el nivel del encabezado asignado al texto del contador de reseñas: h1, h2, h3, h4, h5 o h6.

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

• Grosor de fuente del contador de reseñas – Selecciona la negrura de la fuente del texto del contador.

• Estilo de fuente del contador de reseñas – Elige el estilo de fuente para el texto del contador:

  • Cursiva

  • Mayúsculas

  • Versales pequeñas

  • Subrayado

  • Tachado

• Alineación del texto del contador de reseñas – Elige la alineación específica para el texto del contador:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto del contador de reseñas – Elige un color específico para el texto del contador. Selecciona de la paleta de colores del sitio o haz clic en el cuentagotas para elegir un color nuevo.

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

• Espaciado entre letras del contador de reseñas – Elige el espaciado entre letras arrastrando el control o escribiendo un valor numérico. El espaciado es el espacio entre cada letra. A mayor número, mayor espacio.

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

• Sombra del texto del contador de reseñas – Añade sombra proyectada al texto del contador. Al seleccionar un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

• Fuente del título del formulario – Elige la fuente para el texto del título del formulario. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir otra o subir una personalizada.

• Grosor de fuente del título del formulario – Selecciona la negrura de la fuente del título.

• Estilo de fuente del título del formulario – Elige el estilo de la fuente:

  • Cursiva

  • Mayúsculas

  • Versales pequeñas

  • Subrayado

  • Tachado

• Alineación del texto del título del formulario – Elige la alineación del texto:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto del título del formulario – Elige un color específico del título. Selecciona de la paleta o usa el cuentagotas.

• Tamaño del texto del título del formulario – Define el tamaño de fuente mediante el control deslizante o un valor numérico.

• Espaciado entre letras del título del formulario – Controla el espaciado entre letras arrastrando el control o ingresando un valor numérico.

• Altura de línea del título del formulario – Controla la altura de línea del texto.

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

• Fuente meta – Elige la fuente para el texto meta. Predeterminada o personalizada.

• Grosor de fuente meta – Selecciona la negrura de la fuente meta.

• Estilo de fuente meta – Elige el estilo:

  • Cursiva

  • Mayúsculas

  • Versales pequeñas

  • Subrayado

  • Tachado

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

• Tamaño del texto meta – Controla el tamaño de fuente.

• Espaciado entre letras meta – Controla el espaciado entre letras.

• Altura de línea meta – Controla la altura de línea.

• Sombra del texto meta – Añade sombra proyectada y configura dirección, fuerza y color.

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

• Grosor de fuente del comentario – Selecciona la negrura.

• Estilo de fuente del comentario – Elige el estilo:

  • Cursiva

  • Mayúsculas

  • Versales pequeñas

  • Subrayado

  • Tachado

• Alineación del texto del comentario – Elige alineación:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto del comentario – Elige un color específico.

• Tamaño del texto del comentario – Controla el tamaño de fuente.

• Espaciado entre letras del comentario – Controla el espaciado entre letras.

• Altura de línea del comentario – Controla la altura de línea.

• Sombra del texto del comentario – Añade sombra proyectada y configura dirección, fuerza y color.

• Alineación de la valoración con estrellas – Elige cómo se alinea:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color de la valoración con estrellas – Define el color de las estrellas.

• Tamaño de la valoración con estrellas – Define el tamaño numérico o con el control.

• Espaciado entre letras de la valoración con estrellas – Controla el espaciado entre letras.

• Usar estilos personalizados para el botón – Por defecto, los botones se diseñan globalmente vía el personalizador del tema. Para estilos únicos, activa esta opción.

• Tamaño del texto del botón – Define el tamaño del texto.

• Color del texto del botón – Elige un color para el texto.

• Fondo del botón – Estiliza el fondo. Puedes usar color sólido, degradado o imagen.

• Ancho del borde del botón – Define el grosor del borde.

• Color del borde del botón – Elige el color del borde.

• Radio del borde del botón – Determina cuán redondeadas están las esquinas del botón.

• Espaciado entre letras del botón – Controla el espaciado entre letras.

• Fuente del botón – Elige la fuente.

• Grosor de fuente del botón – Selecciona negrura.

• Estilo de fuente del botón – Elige estilo: cursiva, mayúsculas, versales pequeñas, subrayado o tachado.

• Mostrar icono del botón – Activa o desactiva el icono del botón.

• Icono del botón – El icono predeterminado es >, pero puedes elegir otro.

• Color del icono del botón – Selecciona color del icono.

• Ubicación del icono del botón – Elige si el icono va a la derecha o izquierda.

• Mostrar solo icono al pasar el ratón en el botón – Por defecto, el icono solo aparece al pasar el cursor; desactiva para que siempre sea visible.

• Alineación del botón – Elige alineación:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Sombra del texto del botón – Añade sombra y configura dirección, fuerza y color.

• Margen del botón – Añade margen (espacio fuera del botón). Puedes bloquear valores para que se mantengan iguales (por ejemplo, arriba y abajo).

• Relleno del botón – Añade relleno (espacio dentro del botón). También puedes bloquear valores iguales.

• Sombra de caja del botón – Añade sombra al botón. Personaliza posición, fuerza, expansión y color. Elige si la sombra es interna o externa.

• Ancho – Define el ancho del módulo.

• Ancho máximo – Define el ancho máximo.

• Alineación del módulo – Si se define ancho o ancho máximo, el módulo puede alinearse:

  • Izquierda

  • Centro

  • 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 agrega espacio fuera del módulo; el relleno agrega espacio dentro. Para bloquear valores iguales, usa el icono de cadena entre valores (por ejemplo, arriba y abajo).

• Valores predeterminados de margen y relleno para el módulo son 0.

• Esquinas redondeadas – Escribe un valor numérico para redondear esquinas. Cuanto mayor el número, más redondeadas. Los valores están vinculados automáticamente (cadena azul); para valores diferentes en cada esquina, desvincula la cadena.

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

• Ancho del borde – Ajusta el grosor del borde; debe ser al menos 1 px para mostrarse.

• Color del borde – Elige el color del borde.

• Estilo del borde – Elige el estilo: sólido, punteado, guiones, doble, ranura, relieve, embutido, 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 intensidad del desenfoque de la sombra. A mayor valor, mayor desenfoque y la sombra se vuelve más ancha y ligera.

• Intensidad de Extensión de la Sombra de Caja - Define la fuerza de propagación del desenfoque. Al aumentar esta intensidad, aumenta la densidad de la sombra de caja. Mayor densidad produce 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 del módulo.

Filtros
Ajusta los filtros del módulo:

• 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 distintivas deben ser las áreas claras y oscuras.

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

• Sepia - Define un aspecto más cálido, 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 Mezcla se refiere a cómo el módulo se mezcla con las capas debajo de él. Por defecto, estará seleccionado “normal”.

Transformar
Opciones para transformar el módulo:

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Puedes navegar con la tecla Tab para acceder a cada opción. Configura 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 eslabón de cadena en la parte inferior derecha.

Animación
Aquí puedes aplicar animación al módulo. Una vez que eliges un estilo, puedes ajustar las siguientes opciones:

• Duración de la Animación - Define la duración que tarda la animación en completar un ciclo.

• Retraso de la Animación - Define el tiempo que se espera desde aplicar la animación al elemento hasta que comience a ejecutarse. La animación puede comenzar más tarde, inmediatamente o parte del camino a través de ella.

• Opacidad Inicial de la Animación - Define el valor de opacidad al inicio.

• 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 una sola vez. Si quieres que se repita continuamente, elige la opción “Bucle”.

Pestaña Avanzada

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

CSS Personalizado

• CSS Libre - Escribe CSS libre usando el selector “selector” 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.

Puedes agregar una o varias condiciones.

• Deshabilitar en - Define la visibilidad del módulo. Puedes deshabilitarlo (ocultarlo) cuando la ventana de visualización sea un teléfono, tableta o escritorio, marcando la casilla correspondiente.

• Desbordamiento Horizontal - Define qué sucede cuando el contenido desborda los bordes izquierdo y derecho de un elemento de nivel bloque. Puede ser:

  • Visible: El contenido se mostrará si desborda la altura del módulo.

  • Desplazar: Si el contenido desborda la altura, aparecerá una barra de desplazamiento vertical para navegar.

  • Oculto: Si el contenido desborda, la parte excedente se ocultará.

  • Automático: El navegador decidirá si mostrar barra de desplazamiento.

• Desbordamiento Vertical - Define qué sucede cuando el contenido desborda los bordes superior e inferior de un elemento de nivel bloque. Puede ser:

  • Visible

  • Desplazar

  • Oculto

  • Automático

• 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 animación al pasar el cursor.

Posición
Define la posición del módulo:

• Relativa (valor por defecto) - El módulo se posiciona según el flujo normal del documento y los valores de desplazamiento son relativos a sí mismo. El espacio reservado para el módulo es el mismo que si la posición fuera estática.

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

• Fija - El módulo se remueve del flujo normal y no crea espacio. Se posiciona basado en la ventana del navegador, útil para crear un módulo fijo o adhesivo.

• 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. Los módulos con índice z más alto se superponen a los de índice menor.

Efectos de Desplazamiento

Además, puedes activar movimiento vertical en el módulo, ajustando la velocidad de desplazamiento sin afectar a los elementos circundantes.

La función de activador de efecto de movimiento permite elegir cuándo se activa el efecto de scroll aplicado, ya sea cuando la parte superior, media o inferior del elemento está visible.

Guardar y Salir

Guardar el Diseño de la Página

S en PC. También puedes usar la barra de herramientas inferior de Divi, haciendo clic en el ícono circular morado con tres puntos para expandir la barra y luego clic en el botón verde Guardar en la parte inferior derecha.

Salir del Constructor Visual

Más Recursos para el Módulo de Reseñas de Productos Divi Woo

• Cómo instalar WooCommerce y configurar tu tienda

• Cómo configurar los 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

• Actualizar WooCommerce: mejores prácticas a seguir siempre

Continúa Aprendiendo