Etiqueta de administrador
La etiqueta de administrador sirve para asignar un nombre al módulo que solo tú verás, ayudándote a mantener el orden y comprensión en el backend. Por defecto, la etiqueta es el nombre del módulo, aunque puedes cambiarla para lo que prefieras.

Pestaña diseño

En esta pestaña hallarás todos los estilos y configuraciones de diseño para este módulo.

• En línea – Selecciona esta opción si deseas que la valoración con estrellas y el número de opiniones aparezcan uno al lado del otro en la misma línea.

• Centrada – Selecciona esta opción si prefieres que la valoración con estrellas y el número de opiniones estén centrados y apilados verticalmente.

• Alineación de las estrellas – Permite elegir cómo se alinean las estrellas:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color de las estrellas – Define el color seleccionando de la paleta del sitio o usando el cuentagotas.

• Tamaño de las estrellas – Ajusta el tamaño escribiendo un valor numérico o moviendo el control deslizante. A mayor número, mayor tamaño.

• Espaciado entre estrellas – Define el espacio entre cada estrella con el deslizante o un valor numérico. A mayor número, mayor espacio.

• Fuente del texto – Elige la fuente para el texto. Por defecto se selecciona automáticamente, pero puedes elegir otra o subir una personalizada.

• Grosor de fuente – Selecciona el grosor desde el menú desplegable.

• Estilo de fuente – Elige entre:

  • Cursiva

  • Mayúscula inicial

  • Versalitas

  • Subrayado

  • Tachado

• Color del texto – Elige un color específico para el texto desde la paleta o con el cuentagotas.

• Tamaño del texto – Ajusta el tamaño con el deslizante o escribiendo un valor.

• Espaciado entre letras – Define el espacio entre letras con el deslizante o valor numérico.

• Altura de línea – Ajusta el espacio entre líneas con el control o un valor numérico.

• Sombra del texto – Añade sombra al texto: puedes configurar la dirección horizontal y vertical, la intensidad del desenfoque y el color.

• Alineación del texto – Elige entre:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

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

• Ancho máximo – Establece el límite de ancho 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 que puede tener el módulo.

• El margen añade espacio fuera del módulo, y el relleno añade espacio dentro.

• Para mantener proporciones iguales, haz clic en el ícono de cadena entre los valores (por ejemplo, arriba y abajo).

• Los valores por defecto son 0 en margen y relleno.

• Esquinas redondeadas – Escribe un valor numérico para redondear las esquinas; a mayor valor, más redondeadas. Para separar valores por esquina, haz clic en la cadena azul.

• Estilos de borde – Aplica borde a todos los lados o a lados específicos.

• Ancho del borde – A mayor número, más ancho; debe ser al menos 1px.

• Color del borde – Selecciona un color o usa el cuentagotas.

• Estilo del borde – Elige: sólido, discontinuo, punteado, doble, ranurado, en relieve, embutido, saliente o ninguno.

Sombra de caja

• Posición horizontal

• Posición vertical

• Intensidad del desenfoque

• Intensidad de propagación

• Color de la sombra

• Posición – Dentro o fuera del módulo

• Tono

• Saturación

• Brillo

• Contraste

• Invertir

• Sepia

• Opacidad

• Desenfoque

El modo de mezcla define cómo interactúa el módulo con capas inferiores; por defecto, normal.

• Escalar

• Trasladar

• Rotar

• Sesgar

• Punto de origen

Configura cada opción escribiendo valores o arrastrando. Para mantener proporciones idénticas, haz clic en la cadena inferior derecha.

Animación

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

• Duración de la animación – Define la duración de tiempo que toma una animación para completar un ciclo.

• Retraso de la animación – Define la cantidad de tiempo que se esperará desde que se aplica la animación a un elemento antes de que comience a ejecutarse. La animación puede comenzar después, inmediatamente desde el inicio o inmediatamente desde un punto intermedio.

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

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

• Repetición de la animación – Por defecto, las animaciones solo se reproducen una vez. Si deseas que tu animación se repita continuamente, elige la opción Bucle aquí.

Pestaña Avanzado

Dentro de la pestaña Avanzado, encontrarás opciones útiles para diseñadores web con más experiencia, como CSS personalizado.

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

ID y Clases CSS

Asigna un ID CSS o Clase CSS específica a este módulo. Esto es útil al aplicar CSS personalizado a un módulo usando la hoja de estilos del tema hijo.

CSS Personalizado

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

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

Condiciones

Las condiciones de visualización te permiten elegir cuándo mostrar este módulo con base en un conjunto de condiciones, como si un usuario está visitando la página, si ya ha comprado anteriormente, qué navegador está utilizando, qué sistema operativo usa, y más.

Puedes agregar una o múltiples condiciones.

Visibilidad

• Deshabilitar en – Define la visibilidad del módulo. Puedes deshabilitarlo (ocultarlo) cuando la ventana de visualización sea un Teléfono, Tableta o Computadora, haciendo clic en la casilla correspondiente.

• Desbordamiento horizontal – Define qué se muestra cuando el contenido sobrepasa los bordes izquierdo y derecho de un elemento de bloque. Esto puede ser:

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

  • Desplazar – Si el contenido se desborda, se usará una barra de desplazamiento para visualizarlo.

  • Oculto – El contenido que se desborde será ocultado.

  • Automático – El navegador decidirá si mostrar o no una barra de desplazamiento.

• Desbordamiento vertical – Define qué se muestra cuando el contenido sobrepasa los bordes superior e inferior:

  • Visible

  • Desplazar

  • Oculto

  • Automático

Transiciones

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

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

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

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

Posición

Posición – Esto define la posición del módulo:

• Relativa (valor predeterminado) – El módulo se posiciona según el flujo normal del documento, y los valores de desplazamiento son relativos a sí mismo, basados en el Desplazamiento Vertical y Horizontal. No afecta a otros elementos.

• Absoluta – El módulo se elimina del flujo normal del documento y no ocupa espacio. Se posiciona relativo al ancestro posicionado más cercano o al bloque contenedor inicial.

• Fija – El módulo se elimina del flujo normal del documento, no ocupa espacio y se posiciona en relación con la ventana del navegador. Puede utilizarse para crear un módulo "pegajoso".

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

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

• Índice Z (Z-index) – 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 los de índice más bajo.

Efectos de desplazamiento

Esta sección define el comportamiento del módulo cuando el usuario se desplaza por la página. Puedes hacer que el módulo sea pegajoso en la parte superior, inferior o en ambas, y decidir si el módulo se transforma mientras se desplaza.

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

La función Efecto de activación por desplazamiento te permite elegir cuándo se activa el efecto aplicado. Puedes activarlo cuando la parte superior, media o inferior del elemento esté a la vista.

Guardar y salir

Una vez que hayas terminado de diseñar y configurar el módulo, haz clic en la flecha verde en la esquina inferior derecha del módulo para guardar tu diseño. Si cierras el módulo sin guardar, perderás tu trabajo.

Guardar el diseño de la página

Para guardar el diseño de la página, puedes presionar CMD + S en una Mac o CTRL + S en una PC. También puedes usar la barra inferior de Divi para guardar tu diseño haciendo clic en el ícono morado en forma de círculo con tres puntos para expandir la barra de herramientas y luego hacer clic en el botón verde de Guardar en la esquina inferior derecha.

Salir del Constructor Visual

Ahora que todos tus cambios están guardados, haz clic en Salir del Constructor Visual en la barra de herramientas superior del administrador.

Más recursos para el módulo de calificación de producto Divi Woo

• Cómo instalar WooCommerce y configurar tu tienda

• Cómo configurar los ajustes de WooCommerce

• 5 ideas de personalización de comercio electrónico para WooCommerce

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

• Guía sencilla sobre las páginas predeterminadas de WooCommerce

• Actualizar WooCommerce: mejores prácticas a seguir siempre

Sigue aprendiendo

Mantente al día con nuestros últimos tutoriales sobre el módulo de calificación de productos de Divi visitando nuestra página de Calificación de Producto Woo.