Etiqueta del administrador

La etiqueta del administrador es donde puedes asignar un nombre al módulo que solo será visible para ti, con el fin de mantener todo organizado y fácil de entender en el área de administración. Por defecto, la etiqueta del administrador será el nombre del módulo. Puedes cambiar el texto de la etiqueta del administrador para reflejar lo que desees.

Pestaña de diseño

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

Imagen

Este grupo de configuraciones te permite diseñar la apariencia de las imágenes del producto.

• Forzar ancho completo – Al activarlo, el ancho de la imagen ocupará el 100 % de su contenedor.

• Esquinas redondeadas de la imagen – Si deseas redondear las esquinas de la imagen, introduce 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 lo indica el icono de eslabón azul resaltado); sin embargo, si deseas tener valores diferentes para cada esquina, haz clic en el eslabón azul para desvincularlos.

• Estilos de borde de imagen – Agrega un borde a la imagen. Puedes agregar un borde a todos los lados de la imagen o solo a lados individuales (superior, derecho, inferior e izquierdo).

• Ancho del borde de imagen – Define el ancho del borde. Para un borde más grueso, aumenta el número. El borde debe tener al menos 1px para ser visible.

• Color del borde de imagen – Elige el color del borde. Puedes seleccionar un color de la paleta de colores de tu sitio o usar el cuentagotas para elegir uno nuevo.

• Estilo del borde de imagen – Selecciona el estilo de borde que prefieras: sólido, discontinuo, punteado, doble, surco, cresta, interior, exterior o ninguno.

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

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

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

• Nivel de desenfoque de la sombra – Controla el nivel de desenfoque. Cuanto mayor sea el número, más borrosa será la sombra.

• Intensidad de dispersión de la sombra – Controla cuánto se extiende la sombra.

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

• Posición de la sombra – Elige si la sombra será interior o exterior.

Texto del distintivo de oferta (etiqueta de rebaja)

• Color del distintivo de oferta – Define el color del distintivo seleccionando un color de la paleta o usando el cuentagotas.

• Margen del distintivo de oferta – Agrega un margen introduciendo un valor numérico. El margen añade espacio fuera del elemento. Para mantener proporciones iguales, haz clic en el icono de eslabón entre los valores (por ejemplo, arriba y abajo).

• Relleno del distintivo de oferta – Agrega relleno introduciendo un valor numérico. El relleno añade espacio dentro del elemento. Puedes bloquear los valores como en el margen.

• Fuente del texto del distintivo – Elige la fuente del texto del distintivo. Por defecto, se selecciona la fuente predeterminada, pero puedes elegir otra o subir una fuente personalizada desde el menú desplegable.

• Peso de la fuente del distintivo – Selecciona qué tan gruesa será la fuente del texto.

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

  • Cursiva

  • Mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

• Alineación del texto del distintivo – Elige cómo se alineará el texto del distintivo:

  • Izquierda

  • Centrado

  • Derecha

  • Justificado

• Color del texto del distintivo – Selecciona el color del texto desde la paleta del sitio o usa el cuentagotas.

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

• Espaciado entre letras del distintivo – Ajusta el espaciado entre letras.

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

• Sombra del texto del distintivo – Agrega una sombra al texto del distintivo. Puedes definir la dirección (horizontal y vertical), el desenfoque y el color.

• Esquinas redondeadas del distintivo – Redondea las esquinas del distintivo con un valor numérico.

• Estilos de borde del distintivo – Agrega un borde a todos los lados o solo a algunos.

• Ancho del borde del distintivo – Ajusta el ancho del borde.

• Color del borde del distintivo – Selecciona un color para el borde.

• Estilo del borde del distintivo – Elige entre sólido, discontinuo, punteado, doble, surco, cresta, interior, exterior o ninguno.

• Sombra del distintivo – Aplica un estilo de sombra. Por defecto, no se aplica ninguna.

Tamaño

• Ancho – Define el ancho del módulo.

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

• Alineación del módulo – Si se define un ancho, puedes alinear el módulo a la izquierda, al centro o a la derecha.

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

• Altura – Define la altura exacta del módulo.

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

Espaciado

Puedes añadir márgenes o relleno al módulo introduciendo valores numéricos.

• Margen – Añade espacio fuera del módulo.

• Relleno – Añade espacio dentro del módulo.

Por defecto, el margen y el relleno son 0. Puedes bloquear proporciones como en otras opciones.

Borde

Agrega un borde al módulo. Puedes aplicar bordes a todos los lados o solo a uno.

• Esquinas redondeadas – Introduce un valor numérico para redondear las esquinas.

• Estilos de borde – Selecciona los lados donde se aplicará el borde.

• Ancho del borde – Ajusta el grosor del borde.

• Color del borde – Selecciona un color desde la paleta o el cuentagotas.

• Estilo del borde – Elige entre sólido, discontinuo, punteado, doble, surco, cresta, interior, exterior o ninguno.

Sombra de Caja

Agrega una sombra al módulo completo.

• Posición horizontal de la sombra – Define la ubicación horizontal.

• Posición vertical de la sombra – Define la ubicación vertical.

• Nivel de desenfoque – Ajusta qué tanto se difumina la sombra.

• Intensidad de dispersión – Controla la expansión de la sombra.

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

• Posición de la sombra – Puede ser interna o externa.

Filtros

Ajusta los filtros del módulo:

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

• Saturación – Define la intensidad del color.

• Brillo – Ajusta el nivel de luminosidad.

• Contraste – Controla la diferencia entre zonas claras y oscuras.

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

• Sepia – Aplica un efecto cálido de tonos marrones/amarillos.

• Opacidad – Define qué tan transparente u opaco es el fondo.

• Desenfoque – Aplica desenfoque gaussiano.

• Modo de fusión – Define cómo se mezcla el módulo con las capas inferiores. Por defecto es "normal".

Transformar

Opciones disponibles:

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Puedes configurar cada opción con valores numéricos o arrastrando los controles. También puedes vincular las transformaciones usando el icon

o de eslabón.

Animación

Aquí puedes aplicar animaciones al módulo. Una vez elegida la animación, puedes ajustar:

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

• Retraso de la animación – Cuánto tiempo esperar antes de iniciar la animación.

• Opacidad inicial de la animación – Valor de opacidad al comenzar.

• Curva de velocidad de la animación – Define cómo se acelera y desacelera la animación.

• Repetición de la animación – Por defecto, la animación solo se reproduce una vez. Puedes activar la opción de bucle para repetirla continuamente.

Pestaña Avanzado

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

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases CSS e ID personalizados al módulo, lo cual es útil para personalizar sus estilos con propiedades avanzadas de CSS o para aplicar código CSS usando la clase del módulo.

ID y Clases CSS

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

---

CSS Personalizado

• CSS de forma libre – Escribe CSS libre usando la palabra clave 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 pegando el código en esta pestaña. Al hacer clic en la pestaña de Elementos del módulo, verás secciones individuales donde puedes añadir propiedades CSS personalizadas.

Condiciones

Las Condiciones de visualización te permiten elegir cuándo mostrar este módulo según un conjunto de condiciones, como si el usuario ha visitado la página anteriormente, si ya ha comprado en tu tienda, qué navegador está utilizando, qué sistema operativo tiene, y más.

Puedes añadir una sola condición o múltiples condiciones.

Visibilidad

• Desactivar en – Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) cuando la ventana se visualiza en un teléfono, tablet o escritorio haciendo clic en las casillas correspondientes.

• Desbordamiento horizontal – Define lo que se muestra cuando el contenido se desborda hacia los lados del módulo:

  • Visible – El contenido se muestra si se desborda del módulo.

  • Desplazamiento – Se aplica una barra de desplazamiento horizontal.

  • Oculto – El contenido desbordado no se mostrará.

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

• Desbordamiento vertical – Define lo que se muestra cuando el contenido se desborda verticalmente:

  • Visible

  • Desplazamiento

  • Oculto

  • Automático

Transiciones

Controla la animación al pasar el cursor (hover):

• Duración de la transición – Define cuánto tiempo dura la transición (en milisegundos).

• Retraso de la transición – Define cuánto tiempo esperar antes de iniciar la transición (en milisegundos).

• Curva de velocidad de transición – Define la forma en que la animación acelera y desacelera.

Posición

• Posición – Define la ubicación del módulo en la página:

  • Relativa (valor predeterminado) – El módulo sigue el flujo normal del documento, y se puede ajustar con los valores de desplazamiento vertical y horizontal.

  • Absoluta – El módulo se retira del flujo normal y se posiciona en relación con su contenedor más cercano.

  • Fija – El módulo se posiciona en relación con la ventana del navegador. Útil para crear módulos "pegajosos".

• 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 de apilamiento del módulo. Un valor más alto hace que el módulo se superponga sobre otros.

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 arriba, abajo o ambos. También puedes habilitar el movimiento vertical, lo que permite que el módulo tenga una velocidad de desplazamiento diferente a los elementos cercanos.

La opción Efecto de activación por movimiento te permite elegir cuándo se activa el efecto: cuando la parte superior, media o inferior del módulo esté visible en la pantalla.

Guardar y salir

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

Guardar el diseño de la página

Para guardar el diseño de la página puedes presionar:

• CMD + S en Mac

• CTRL + S en PC

También puedes usar la barra de herramientas inferior de Divi haciendo clic en el icono púrpura de círculo con tres puntos para expandir la barra, y luego hacer clic en el botón verde de Guardar en la esquina inferior derecha.

Salir del constructor visual

Después de guardar todos los cambios, haz clic en Salir del Constructor Visual en la barra de administración superior.

Más recursos para el módulo de imágenes 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 comercio electrónico en WooCommerce

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

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

• Actualizar WooCommerce: buenas prácticas a seguir siempre

Sigue aprendiendo

Mantente al día con todos nuestros tutoriales sobre el módulo de imágenes de productos de Divi Woo visitando nuestra página de Imágenes de productos Woo.