Etiqueta de Administración

Pestaña de Diseño

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

Texto

Aquí es donde puedes diseñar el texto de este módulo. También puedes aplicar estilos únicos a enlaces, listas y citas en bloque haciendo clic en las pestañas en la parte superior.

• Fuente del Texto – Elige la fuente que deseas usar para el texto. La fuente predeterminada está seleccionada automáticamente; sin embargo, puedes elegir otra fuente 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.

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

  • Cursiva

  • Mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

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

• Tamaño del Texto – Ajusta el tamaño del texto arrastrando el control deslizante o ingresando un valor numérico.

• Espaciado entre Letras – Ajusta el espaciado entre letras arrastrando el control deslizante o ingresando un número.

• Altura de Línea – Ajusta la altura entre líneas de texto.

• Sombra del Texto – Añade una sombra al texto. Una vez seleccionado un estilo, puedes configurar su dirección, fuerza del desenfoque y color.

• Alineación del Texto – Elige la alineación del texto:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color General del Texto – Define el color general del módulo como claro u oscuro.

Texto de Encabezado

Aquí puedes aplicar estilos únicos al texto del encabezado.

• Nivel del Encabezado – Elige el nivel de encabezado: h1, h2, h3, h4, h5 o h6.

• Fuente del Encabezado – Selecciona la fuente para el encabezado.

• Peso de Fuente del Encabezado – Ajusta el grosor de la fuente del encabezado.

• Estilo de Fuente del Encabezado – Elige entre:

  • Cursiva

  • Mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

• Alineación del Encabezado – Elige cómo alinear el texto del encabezado: izquierda, centro, derecha o justificado.

• Color del Encabezado – Selecciona el color del texto del encabezado.

• Tamaño del Encabezado – Ajusta el tamaño del texto del encabezado.

• Espaciado entre Letras del Encabezado – Ajusta el espaciado entre letras.

• Altura de Línea del Encabezado – Ajusta el espacio entre líneas del encabezado.

• Sombra del Encabezado – Añade sombra al texto del encabezado con opciones de dirección, desenfoque y color.

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 establece un ancho o ancho máximo, la alineación del módulo puede configurarse como:

  • Alineado a la izquierda

  • Alineado al centro

  • Alineado a la derecha

• Altura Mínima – Define el valor mínimo de altura del módulo.

• Altura – Define la altura del módulo.

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

Espaciado

Puedes añadir márgenes o relleno escribiendo valores numéricos.

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

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

• Puedes vincular los valores (ej. arriba y abajo) haciendo clic en el icono de eslabón entre los campos.

Valores predeterminados:

• Margen: 0

• Relleno: 0

Borde

• Añade un borde completo o en un solo lado del módulo.

• Ajusta el ancho usando el control deslizante.

• Selecciona el color y estilo del borde.

Opciones:

• Esquinas Redondeadas – Escribe un valor numérico. Cuanto más alto el número, más redondeadas serán las esquinas. Puedes desvincular los valores si deseas bordes diferentes en cada esquina.

• Estilos de Borde – Puedes agregar borde a todos los lados o individualmente.

• Ancho del Borde – Debe ser al menos 1px para que se muestre.

• Color del Borde – Elige un color o usa el cuentagotas.

• Estilo del Borde – Elige entre sólido, discontinuo, punteado, doble, ranura, relieve, interno, externo o ninguno.

Sombra de Caja (Box Shadow)

Añade una sombra al módulo completo. Luego de seleccionar un estilo, puedes ajustar:

• Posición Horizontal

• Posición Vertical

• Intensidad del Desenfoque

• Intensidad de Expansión

• Color de la Sombra

• Posición de la Sombra – Dentro o fuera del módulo.

Filtros

Ajusta los filtros del módulo:

• Tono (Hue) – Ángulo del tono de color.

• Saturación – Qué tan intenso es el color.

• Brillo – Qué tan brillantes son los colores.

• Contraste – Qué tan distintos son los tonos claros y oscuros.

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

• Sepia – Añade una apariencia cálida amarilla/marrón.

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

• Desenfoque – Define el nivel de desenfoque gaussiano aplicado.

• Modo de Fusión (Blend Mode) – Define cómo el módulo se mezcla con las capas inferiores. El valor por defecto es “normal”.

Transformar

Opciones disponibles:

• Escalar

• Trasladar

• Rotar

• Inclinar

• Puntos de origen

Puedes acceder a cada opción mediante pestañas y configurar valores numéricos o arrastrar el recuadro o círculo.

Para mantener valores iguales, haz clic en el icono de eslabón en la esquina inferior derecha.

Animación

Puedes aplicar animaciones al módulo. Luego de elegir un estilo, puedes ajustar:

• Duración de la Animación – Tiempo que tarda en completarse el ciclo.

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

• Opacidad Inicial de la Animación – Define la opacidad inicial.

• Curva de Velocidad – Método de aceleración de la animación (lineal, suave, etc.).

• Repetición de la Animación – Por defecto, se reproduce una sola vez. Si deseas que se repita continuamente, selecciona la opción de bucle.

Pestaña Avanzado

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

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases e identificadores CSS personalizados al módulo, lo que permite personalizar sus estilos con propiedades CSS avanzadas o aplicar código personalizado usando 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 cuando deseas aplicar CSS personalizado a un módulo utilizando la hoja de estilos del tema hijo.

CSS Personalizado

• CSS Libre – Escribe código CSS libre utilizando la palabra clave "selector" para dirigir 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 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 basándote en un conjunto de condiciones, como por ejemplo si el usuario está visitando una página específica, si ya ha comprado antes en tu tienda, qué navegador está utilizando, qué sistema operativo usa, entre otros.

Puedes añadir una condición o varias condiciones.

Visibilidad

• Desactivar en – Define la visibilidad del módulo. Puedes ocultarlo cuando se visualice en un teléfono, tableta o escritorio, haciendo clic en la casilla correspondiente.

Desbordamiento Horizontal – Define qué se muestra cuando el contenido desborda los bordes izquierdo y derecho de un elemento a nivel de bloque. Las opciones pueden ser:

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

• Desplazable – Se añadirá una barra de desplazamiento horizontal si el contenido del módulo sobrepasa.

• Oculto – Se ocultará la parte del contenido que se desborde.

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

Desbordamiento Vertical – Define qué se muestra cuando el contenido desborda los bordes superior e inferior. Las opciones son las mismas que las del desbordamiento horizontal.

Transiciones

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

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

• Retraso de la transición – Define cuánto tiempo se espera antes de iniciar la animación.

• Curva de velocidad de la transición – Define la curva de velocidad de la animación (aceleración/desaceleración).

Posición

• Posición – 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 vertical u horizontal se aplican respecto a sí mismo.

  • Absoluta – El módulo se remueve del flujo normal y se posiciona en relación con su ancestro posicionado más cercano o el contenedor inicial.

  • Fija – El módulo se posiciona en relación con la ventana del navegador, útil para módulos que deben permanecer visibles mientras se desplaza la página (efecto "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 el diseño de la página. Un número más alto colocará el módulo por encima de otros con un número 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 quede fijo en la parte superior, inferior o ambos.

También puedes habilitar el movimiento vertical, lo cual ajusta la velocidad de desplazamiento del módulo sin afectar los elementos circundantes.

La función Activador de Movimiento permite definir cuándo se activa el efecto de desplazamiento. Puedes elegir activarlo cuando la parte superior, central o inferior del módulo esté visible.

Guardar tu Diseño

Una vez que termines de personalizar 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, se perderán los cambios.

Guardar el Diseño de la Página

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

• En Mac: pulsa CMD + S

• En PC: pulsa CTRL + S

También puedes utilizar la barra de herramientas inferior de Divi. Haz clic en el ícono púrpura con tres puntos para expandirla y luego haz clic en el botón verde de Guardar en la esquina inferior derecha.

Salir del Constructor Visual

Una vez que tus cambios estén guardados, haz clic en Salir del Constructor Visual en la barra de herramientas del administrador en la parte superior.

Continúa Aprendiendo

Mantente al día con nuestros últimos tutoriales sobre el módulo de descripción de producto de Divi Woo visitando nuestra página dedicada.

Más Recursos para el Módulo de Descripción de Producto de Divi Woo

• Cómo instalar WooCommerce y configurar tu tienda

• Cómo configurar los ajustes de WooCommerce

• 5 ideas de personalización para eCommerce con WooCommerce

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

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

• Actualización de WooCommerce: buenas prácticas para seguir siempre