Como habrá podido adivinar, el módulo Anuncios le permite mostrar publicidad en los diseños de categoría. Puede subir imágenes y definir a qué URL estarán vinculadas, o puede insertar código HTML personalizado.

Cómo insertar un módulo Anuncios

Antes de poder añadir un módulo Anuncios, 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 Anuncios 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

• Texto del encabezado – Escriba un texto para mostrar como encabezado. Dejar en blanco para no mostrar ningún título en el módulo.
• 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 Anuncios en el constructor. La etiqueta de administración le permite cambiar el nombre para identificar el módulo más fácilmente.

Opciones de diseño

Diseño

• Eliminar sombra – Elija si desea mostrar o no la sombra de la sección.

Encabezado Texto

• Color de texto de Encabezado – Si desea cambiar el color de texto del título, elija el color del selector en esta opción.
• Fuente de Encabezado – Puede cambiar la fuente del texto del módulo Carrusel, 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.
• Encabezado Peso de fuente – Esto controla el peso de la fuente del texto del encabezado. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
• Encabezado Estilo de fuente – Esto controla el estilo de la fuente del texto del encabezado. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
• Alineación del texto de Encabezado – Esto controla la alineación del texto del encabezado: izquierda, derecha, centrada o justificada.
• Tamaño de texto de Encabezado – Aquí puede ajustar el tamaño del texto del encabezado. 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.
• Espacio entre letras de Encabezado – El espacio entre letras es la separación entre cada uno de los caracteres del texto del encabezado. 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 – La altura de línea afecta el espacio entre cada una de las líneas de texto del encabezado. 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 – Elija un estilo de sombra de texto para activar en el encabezado de este módulo. 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 de Encabezado – 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 de Encabezado – 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 de Encabezado – Cuanto mayor sea el valor, mayor será el desenfoque; la sombra se hace más amplia y clara.
• Color de sombra de texto de Encabezado – Elija el color de la sombra del selector.

Borde

• ¿Mostrar borde superior? – Esto añadirá un borde a la parte superior del módulo.
• 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.

Tamaño

• Ancho máximo – Cualquier valor que introduzca aquí limitará el ancho del contenido de este módulo. Por ejemplo, si introduce 50%, el contenido del módulo será de la mitad de la columna donde esté colocado.

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.

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

• ID CSS – Escriba una ID CSS opcional para usar en este módulo. 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 este módulo. Una clase CSS puede ser usada para aplicar estilos. Puede añadir múltiples clases, separadas por un espacio. Estas clases pueden ser usadas en el tema hijo o en el recuadro CSS personalizado para añadir a la página (desde los ajustes de la página) o al sitio entero (desde las opciones del tema).
• CSS personalizado – Puede aplicar CSS personalizado al módulo desde aquí. Dentro de la sección CSS personalizado encontrará un campo de texto donde podrá añadir el código directamente a cada elemento. El código que se añada a estos campos ya está envuelto en sus respectivas etiquetas, por lo que solo deberá introducir reglas de CSS separadas por punto y coma.

Opciones de contenido de anuncio individual

• ¿Comenzar en una nueva línea? – Esto hace que el anuncio se coloque en una línea nueva.
• HTML del anuncio – Use este campo para insertar código HTML personalizado para el anuncio, en lugar de definir una imagen y una URL de enlace.
• URL de la imagen – Use una URL válida de una imagen aquí, o suba una desde la biblioteca de medios.
• URL del enlace – Use una URL válida para el enlace que se debe abrir al hacer clic en la imagen.

Opciones avanzadas de anuncio individual

• CSS personalizado – Puede aplicar CSS personalizado al elemento desde aquí. Dentro de la sección CSS personalizado encontrará un campo de texto donde podrá añadir el código directamente a cada elemento. El código que se añada a estos campos ya está envuelto en sus respectivas etiquetas, por lo que solo deberá introducir reglas de CSS separadas por punto y coma.
• Texto alternativo de la imagen – El texto alternativo proporciona información necesaria en caso de que la imagen no cargue, no aparezca correctamente, o en cualquier otra situación en la cual no se pueda visualizar. También permite que la imagen sea leída y reconocida por los motores de búsqueda.

Ver demostración en vivo del módulo