Puede usar este módulo para insertar texto en los diseños de categoría. Esto puede ser útil, por ejemplo, si necesita mostrar un aviso legal en ciertas categorías de entradas, como las de reseñas o recomendaciones de productos.

Cómo insertar un módulo Texto

Antes de poder añadir un módulo Texto, deberá abrir un diseño de categoría o crear uno nuevo, desde el menú Extra > Constructor de categoría. Haga clic en Insertar módulo/s, localice el módulo Texto dentro de la lista de módulos y haga clic sobre el botón gris para añadirlo al diseño.

Opciones del módulo

Opciones de contenido

• Contenido – En este campo deberá introducir el contenido del cuerpo del texto. El texto ocupará el ancho completo de la columna que lo contiene.
• Fondo – Aquí puede definir un fondo para el módulo. Las opciones son las mismas que para los demás fondos: color, degradado, imagen y vídeo.
• Etiqueta de administración – De manera predeterminada, este módulo aparecerá con el nombre Texto en el constructor. La etiqueta de administración le permite cambiar el nombre para identificar el módulo más fácilmente. Cuando use la vista de estructura, estas etiquetas aparecerán dentro del bloque del módulo en la interfaz del constructor.

Opciones de diseño

Texto

• Color de texto – Si el módulo se muestra sobre un fondo claro, el color del texto debería ser oscuro. Si se muestra sobre un fondo oscuro, el color del texto debería ser claro.
• Fuente de Texto – Puede cambiar la fuente del texto, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
• Texto Peso de fuente – Esto controla el peso de la fuente del texto. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
• Texto Estilo de fuente – Esto controla el estilo de la fuente del texto. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
• Tamaño de texto de Texto – Aquí puede ajustar el tamaño del texto. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
• Color de texto de Texto – Si desea cambiar el color de texto, elija el color del selector en esta opción.
• Espacio entre letras de Texto – El espacio entre letras es la separación entre cada uno de los caracteres del texto. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
• Altura de línea de Texto – La altura de línea afecta el espacio entre cada una de las líneas de texto. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
• Sombra de texto – Elija un estilo de sombra de texto para activar en este elemento. Una vez activado, podrá personalizar aún más el estilo de la sombra del texto. Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
• Posición horizontal de sombra de texto – La distancia horizontal de la sombra respecto del texto. Un valor negativo colocará la sombra a la izquierda del texto.
• Posición vertical de sombra de texto – La distancia vertical de la sombra respecto del texto. Un valor negativo colocará la sombra arriba del texto.
• Fuerza de desenfoque de sombra de texto – Cuanto mayor sea el valor, mayor será el desenfoque; la sombra se hace más amplia y clara.
• Color de sombra de texto – Elija el color de la sombra del selector.
• Orientación del texto – Esto controla la alineación del texto dentro de este módulo: izquierda, derecha, centrada o justificada.
• Fuente de Enlace – Puede cambiar la fuente de los enlaces, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
• Enlace Peso de fuente – Esto controla el peso de la fuente de los enlaces. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
• Enlace Estilo de fuente – Esto controla el estilo de la fuente de los enlaces. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
• Tamaño de texto de Enlace – Aquí puede ajustar el tamaño de los enlaces. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
• Color de texto de Enlace – Si desea cambiar el color de los enlaces, elija el color del selector en esta opción.
• Espacio entre letras de Enlace – El espacio entre letras es la separación entre cada uno de los caracteres de los enlaces. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
• Altura de línea de Enlace – La altura de línea afecta el espacio entre cada una de las líneas de los enlaces. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
• Sombra de texto de Enlace – Elija un estilo de sombra para activar en el texto del enlace. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
• Fuente de Lista sin ordenar – Puede cambiar la fuente de las listas <ul>, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
• Lista sin ordenar Peso de fuente – Esto controla el peso de la fuente de las listas <ul>. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
• Lista sin ordenar Estilo de fuente – Esto controla el estilo de la fuente de las listas <ul>. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
• Tamaño de texto de Lista sin ordenar – Aquí puede ajustar el tamaño de las listas <ul>. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
• Color de texto de Lista sin ordenar – Si desea cambiar el color de las listas <ul>, elija el color del selector en esta opción.
• Espacio entre letras de Lista sin ordenar – El espacio entre letras es la separación entre cada uno de los caracteres de las listas <ul>. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
• Altura de línea de Lista sin ordenar – La altura de línea afecta el espacio entre cada una de las líneas de las listas <ul>. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
• Sombra de texto de Lista sin ordenar – Elija un estilo de sombra para activar en el texto de las listas <ul>. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
• Tipo de estilo de lista sin ordenar – Aquí puede seleccionar el estilo de viñeta de las listas <ul>: Disco, Círculo, Cuadrado o Ninguna.
• Posición de estilo de lista sin ordenar – Aquí puede seleccionar el estilo de viñeta de las listas <ul>: Fuera o Dentro.
• Sangría de elemento de lista sin ordenar – Aquí puede seleccionar el valor en píxeles de la sangría de las listas <ul>.
• Fuente de Lista ordenada – Puede cambiar la fuente de las listas <ol>, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
• Lista ordenada Peso de fuente – Esto controla el peso de la fuente de las listas <ol>. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
• Lista ordenada Estilo de fuente – Esto controla el estilo de la fuente de las listas <ol>. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
• Tamaño de texto de Lista ordenada – Aquí puede ajustar el tamaño de las listas <ol>. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
• Color de texto de Lista ordenada – Si desea cambiar el color de las listas <ol>, elija el color del selector en esta opción.
• Espacio entre letras de Lista ordenada – El espacio entre letras es la separación entre cada uno de los caracteres de las listas <ol>. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
• Altura de línea de Lista ordenada – La altura de línea afecta el espacio entre cada una de las líneas de las listas <ol>. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
• Sombra de texto de Lista ordenada – Elija un estilo de sombra para activar en el texto de las listas <ol>. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
• Tipo de estilo de lista ordenada – Aquí puede seleccionar el estilo de viñeta de las listas <ol>: decimal, armenian, cjk-ideographic, decimal-leading-zero, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-greek, upper-latin, upper-roman o none.
• Posición de estilo de lista ordenada – Aquí puede seleccionar el estilo de viñeta de las listas <ol>: Fuera o Dentro.
• Sangría de elemento de lista ordenada – Aquí puede seleccionar el valor en píxeles de la sangría de las listas <ol>.
• Fuente de Bloque de cita – Puede cambiar la fuente de los elementos <blockquote>, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
• Bloque de cita Peso de fuente – Esto controla el peso de la fuente de los elementos <blockquote>. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
• Bloque de cita Estilo de fuente – Esto controla el estilo de la fuente de los elementos <blockquote>. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
• Tamaño de texto de Bloque de cita – Aquí puede ajustar el tamaño de los elementos <blockquote>. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
• Color de texto de Bloque de cita – Si desea cambiar el color de los elementos <blockquote>, elija el color del selector en esta opción.
• Espacio entre letras de Bloque de cita – El espacio entre letras es la separación entre cada uno de los caracteres de los elementos <blockquote>. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
• Altura de línea de Bloque de cita – La altura de línea afecta el espacio entre cada una de las líneas de los elementos <blockquote>. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
• Sombra de texto de Bloque de cita – Elija un estilo de sombra para activar en el texto de los elementos <blockquote>. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
• Peso del borde del bloque de cita – Elija un valor en píxeles para el grosor del borde alrededor de los elementos <blockquote>.
• Color de borde del bloque de cita – Elija un color para el borde alrededor de los elementos <blockquote>.

Texto del encabezado

• Fuente de Encabezado H1, H2, H3, H4, H5, H6 – Puede cambiar la fuente del texto de los seis niveles de encabezados, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
• Alineación del texto de Encabezado H1, H2, H3, H4, H5, H6 – Esto controla la alineación del texto de los seis niveles de encabezados: izquierda, derecha, centrada o justificada.
• Tamaño de texto de Encabezado H1, H2, H3, H4, H5, H6 – Aquí puede ajustar el tamaño del texto de los seis niveles de encabezados. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
• Color de texto de Encabezado H1, H2, H3, H4, H5, H6 – Si desea cambiar el color de texto de los seis niveles de encabezados, elija el color del selector en esta opción.
• Espacio entre letras de Encabezado H1, H2, H3, H4, H5, H6 – El espacio entre letras es la separación entre cada uno de los caracteres del texto de los seis niveles de encabezados. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
• Altura de línea de Encabezado H1, H2, H3, H4, H5, H6 – La altura de línea afecta el espacio entre cada una de las líneas de texto de los seis niveles de encabezados. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
• Sombra de texto de Encabezado H1, H2, H3, H4, H5, H6 – Elija un estilo de sombra para activar en el texto de los seis niveles de encabezados. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.

Tamaño

• Ancho – De manera predeterminada, los elementos se ampliarán al ancho completo de su elemento contenedor. Si desea establecer un ancho estático personalizado, puede hacerlo con esta opción.
• Ancho máximo – Si se establece un ancho máximo, se evitará que el elemento sobrepase el valor de ancho definido. El ancho máximo se puede usar en combinación con el ajuste estándar de ancho. El ancho máximo reemplaza el valor de ancho normal.
• Alineación del módulo – Aquí puede elegir la posición del módulo en caso de que haya modificado el ancho en el ajuste anterior: alineado a la izquierda, al centro o a la derecha.
• Altura mínima – Cuando se establece una altura mínima, el elemento siempre tendrá una altura de al menos la cantidad definida. Esto reemplaza los valores de altura estática más pequeños. A diferencia de la altura, la altura mínima no da como resultado un desbordamiento de contenido y permitirá que la altura del elemento permanezca dinámica.
• Altura – Esto establece un valor de altura estática para el elemento. Una vez establecida, la altura del elemento ya no será determinada por su contenido interno. El contenido que supere la altura estática del elemento desbordará el contenedor del elemento.
• Altura máxima – Si se establece una altura máxima, se evitará que el elemento sobrepase el valor de altura definido. A medida que el contenido del módulo aumenta y supera la altura máxima, desbordará el contenedor del elemento.

Espaciado

• Margen personalizado – El margen es el espacio que se agrega fuera del módulo, entre sus extremos y los elementos contiguos (arriba, abajo, a la izquierda o a la derecha). Puede añadir valores personalizados de margen a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
• Relleno personalizado – El relleno es el espacio que se agrega dentro del módulo, entre sus extremos y los elementos internos. Puede añadir valores personalizados de relleno a cualquiera de los cuatro lados del módulo. Para eliminar el relleno personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.

Borde

• Esquinas redondeadas – Aquí puede controlar el radio de la esquina de este módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
• Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
• Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
• Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
• Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.

Sombra

• Sombra – Use estos ajustes para añadir una sombra en el módulo. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).

Transformación

• Transformación – Con estos controles puede realizar ajustes visuales mediante una combinación de configuraciones de escala, traslación, rotación, sesgo y origen. Esto le permite crear efectos de diseño avanzados sin necesidad de un programa de diseño gráfico independiente.

Animación

• Estilo de la animación – Elija un estilo de animación para activar las animaciones en este elemento. Las opciones son: Desvanecer, Diapositiva, Rebotar, Zoom, Voltear, Plegar o Rodar. Una vez activado, podrá personalizar aún más el estilo de animación. Para desactivar las animaciones, elija la opción Ninguna.
• Repetición de la animación – De manera predeterminada, las animaciones solo se ejecutarán una vez. Si desea que la animación se repita continuamente puede elegir aquí la opción Repetir.
• Dirección de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer. Elija una de las cinco direcciones de animación diferentes, cada una de las cuales ajustará la posición inicial y final del elemento animado: Centrada, Derecha, Izquierda, Arriba, Abajo.
• Duración de la animación – Aumente o disminuya la velocidad mediante el ajuste de duración de la animación. Las unidades son en milisegundos y la duración predeterminada de la animación es de un segundo.
• Retardo de la animación – Si desea añadir un retardo antes de ejecutar la animación puede designar aquí ese retraso en milisegundos. Esto puede ser útil si usa varios módulos animados juntos.
• Intensidad de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer y Rebotar. La intensidad afecta la suavidad o fuerza de la animación. Si baja la intensidad, la animación será más suave y sutil. Si la aumenta, la animación será más agresiva y ágil.
• Opacidad inicial de la animación – Si aumenta la opacidad inicial, puede reducir o eliminar el efecto de desvanecido que es aplicado a todos los estilos de animación.
• Curva de velocidad de la animación – Aquí puede ajustar el método de atenuación de la animación. Las opciones son: Atenuación de entrada y salida, Atenuación, Atenuación de entrada y Atenuación de salida. Atenuar la entrada o salida de la animación creará un efecto más suave en comparación con una curva de velocidad lineal.

Opciones avanzadas

Clases & ID CSS

• ID CSS – Escriba una ID CSS opcional para usar en esta fila. Puede usar una ID para aplicarle estilos o usarla como anclaje de enlace.
• Clase CSS – Escriba una o varias clases CSS opcionales para usar en esta fila. Una clase CSS puede ser usada para aplicar estilos.

CSS personalizado

• Antes – Introduzca aquí el código CSS para aplicar antes (::before) del div de la fila principal.
• Elemento principal – Introduzca aquí el código CSS para aplicar al div de la fila principal.
• Después – Introduzca aquí el código CSS para aplicar después (::after) del div de la fila principal.

Visibilidad

• Desactivar en – Esta opción le permite controlar en qué dispositivos aparecerá la sección. Puede elegir desactivarla de manera individual en tablets, teléfonos móviles o en equipos de escritorio. Esto es especialmente útil si desea usar filas distintas para cada dispositivo, o si desea simplificar el diseño para móviles al eliminar ciertas filas de la página.
• Desbordamiento horizontal – Aquí puede controlar el desbordamiento de elementos en el eje X. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido
• Desbordamiento vertical – Aquí puede controlar el desbordamiento de elementos en el eje Y. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido.
• z-index – Aquí puede controlar la posición del elemento en el eje Z. Los elementos con valores de índice z más altos se colocarán encima de los elementos con valores de índice z inferiores.

Transiciones

• Duración de la transición – Esto controla la duración de la transición de la animación al pasar el cursor.
• Retardo de transición – Esto controla el retardo de la transición de la animación al pasar el cursor.
• Curva de velocidad de transición – Esto controla la curva de velocidad de transición de la animación al pasar el cursor.