Creación de banners receptivos con las nuevas opciones de fondo de Divi

En mi última publicación, le mostré cómo diseñar botones usando la interfaz de opciones de fondo de Divi colocando el módulo de botones sobre fondos de columnas y filas. Hoy, le mostraré cómo diseñar banners receptivos en los que se puede hacer clic utilizando la interfaz de opciones de fondo de Divi.

Usaremos las mismas técnicas que usamos para los fondos de los botones con algunos ajustes menores. Básicamente, voy a mostrarte cómo crear botones realmente grandes y diseñarlos un poco más como pancartas. El factor importante aquí es que se puede hacer clic en toda la superficie del banner. Sin embargo, debes saber desde el principio que solo podemos hacer banners simples usando este método. Debido a que estamos limitados por la entrada de texto del módulo de botones, solo podemos crear banners con una cadena de texto. Sin embargo, al utilizar las opciones de fondo de la columna, podemos crear algunos banners de aspecto atractivo en poco tiempo utilizando Visual Builder.

Banners HTML frente a Banners de imagen

Hay muchas ventajas en el uso de banners html (banners construidos con elementos html) sobre banners de imagen (banners construidos como una sola imagen sin elementos html). En el caso de los banners HTML, los navegadores web reconocen el texto (esencial para los traductores de páginas y lectores de pantalla). Se escalan con el tamaño de las ventanas del navegador para que siempre se vean nítidas, a diferencia de las imágenes que pueden distorsionarse o resultar ilegibles. Y quizás mi aspecto favorito de usar pancartas html sobre pancartas con imágenes es que html es realmente fácil de cambiar. Puedo cambiar el texto con unas pocas teclas en lugar de buscar en las profundidades de mi disco duro un archivo original que necesitaré editar en un editor de fotos. Y puedo hacer rápidamente otra versión del banner para hacer una prueba dividida usando Divi Leads.

Este método de convertir botones en pancartas abre la puerta a algunas aplicaciones útiles, como crear una publicación destacada, categoría o serie personalizada para su blog (o podcast).

Empecemos.

Vistazo

Antes de que nos echen oficialmente. Aquí hay un adelanto de los carteles que crearemos en esta publicación.

Implementando el diseño con Divi

Suscríbete a nuestro canal de Youtube

Ejemplo n. ° 1: Banner con logotipo

Con Visual Builder, agregue una sección regular con una columna y una fila.

A continuación, agregue un módulo de botones a la fila.

Luego actualice la configuración del módulo de botones de la siguiente manera:

Opciones de contenido

Texto del botón: [ingrese el texto que desea usar para su mensaje de banner]
URL del botón: [ingresar URL]

Opciones de diseño

Alineación de botones: centro
Color del texto: claro
Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 32px
Ancho del borde del botón: 0px
Fuente del botón: Arvo
Icono de botón: [añadir icono. Estoy usando el icono del cursor]
Mostrar solo el icono al pasar el mouse para el botón: NO

Opciones avanzadas

Necesitamos establecer el ancho del botón al 100% para llenar el ancho de la columna. También necesitamos expandir la altura de nuestro botón para proporcionar suficiente espacio para el contenido de nuestro banner. Para hacer esto, ingrese el siguiente CSS personalizado en el cuadro Elemento principal:

 Width: 100%;
padding: 20px 0 200px; 

Nota : El relleno personalizado aquí es la clave para ajustar dónde desea que se muestre el texto del banner. Dado que la alineación del botón ya está centrada, todo lo que necesito hacer es ajustar el texto verticalmente. Por lo tanto, darle al texto del botón un relleno más corto en la parte superior y un relleno más largo en la parte inferior ajustará el texto hacia la parte superior del banner.

Guardar ajustes

Las cosas todavía son blancas e invisibles en este momento, pero está bien. Vamos a agregar un fondo para el módulo de botones dentro de la configuración de filas y columnas.

Vaya a la Configuración de fila en la que se encuentra su módulo de botones y actualice lo siguiente:

Opciones de contenido

Debajo de la pestaña de imagen de fondo

Imagen de fondo: [insertar imagen]
Posición de la imagen de fondo: [utilice esta opción para ajustar la imagen de su banner. Quería que se mostrara la parte inferior de mi imagen, así que seleccioné "Centro inferior".]

Ahora desplácese un poco hacia abajo para actualizar las opciones de fondo de la Columna 1.

Seleccione la pestaña Degradado de fondo de la columna 1 y luego haga clic en el botón circular gris con un símbolo más blanco.

Actualice lo siguiente:

Colores de degradado de fondo: rgba (131,0,233,0.92), rgba (0,0,0,0.69)
Dirección del gradiente de la columna: 180 grados
Posición inicial de la columna: 50%
Posición final de la columna: 0%

Guardar ajustes

A continuación, agregaremos un logo al banner. Haga clic en la pestaña Imagen de fondo y actualice lo siguiente:

Columna 1 Tamaño de la imagen de fondo: Tamaño real (mi logotipo es un png de 120 x 120)

Columna 1 Posición de la imagen de fondo: Centro

Eso es todo. Ahora tiene un banner simple en el que se puede hacer clic y que responde. Puede usar la configuración del Módulo de botones para agregar cualquier efecto de desplazamiento que desee para que el banner se destaque.

Hagamos otro ejemplo.

Ejemplo n. ° 2: Banner de texto simple

Para este próximo banner, dupliquemos toda la sección que contiene el primer banner que acaba de diseñar. Esto le ahorrará algo de tiempo de configuración.

Luego vaya a la configuración de la fila y actualice lo siguiente:

Opciones de contenido

Imagen de fondo: [ingresar nueva imagen]
Posición de la imagen de fondo: Centro
Columna 1 Colores de degradado de fondo: rgba (0,0,0,0.41), rgba (12,113,195,0.66)
Dirección del gradiente de la columna: 270 grados

A continuación, haga clic en la pestaña de imagen de fondo de la columna 1 y elimine la imagen / logotipo.

Guardar ajustes

Vaya a Configuración del módulo de botones y actualice lo siguiente:

Opciones de contenido

Texto del botón: [ingrese texto para su banner]
URL del botón: [ingrese la URL del banner]

Opciones de diseño

Tamaño del texto del botón: 42px
Ancho del borde del botón: 19px
Color del borde del botón: rgba (0,0,0,0.17)
Espaciado de letras de botones: 8px
Fuente del botón: Montserrat, Negrita (B)
Agregar icono de botón: NO
Color del borde de desplazamiento del botón: rgba (0,0,0,0.46)
Radio del borde de desplazamiento del botón: 0px
Espacio entre letras del botón de desplazamiento: 12px

Como puede ver, este banner de ejemplo tiene un efecto de desplazamiento único que cambia el color del borde y aumenta el espacio entre letras:

Cómo hacer que su banner sea de ancho completo

Para que este banner sea de ancho completo, todo lo que tiene que hacer es actualizar la Configuración de la sección en la pestaña Diseño de la siguiente manera:

Relleno personalizado: 0px arriba, 0px derecha, 0px abajo, 0px izquierda

Guardar ajustes

Ahora vaya a la Configuración de filas y actualice las opciones de Diseño de la siguiente manera:

Hacer esta fila de ancho completo: SÍ
Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 1

Ahora el banner se extiende por todo el ancho de la pantalla en todos los dispositivos.

Cómo hacer una pancarta adhesiva

Si lo desea, puede hacer que este banner sea fijo (pegajoso) y arreglarlo en la parte superior de la ventana de su navegador. Sugeriría disminuir el relleno para acortarlo mucho y no bloquear demasiado la ventana.

Para disminuir la altura, vaya a la Configuración del módulo de botones en la pestaña Avanzado y agregue el siguiente CSS en el cuadro Elemento principal :

padding: 0px 0px !important;

Ahora, para hacer que toda la sección sea pegajosa, vaya a Configuración de la sección y actualice las Opciones de la pestaña Avanzadas con el siguiente CSS personalizado en el cuadro Elemento principal :

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

Ahora toda su sección se adherirá a la parte superior de la página y permanecerá allí cuando se desplace hacia abajo en la página.

Este tipo de banner funcionaría bien para artículos promocionales en una página de destino sin una barra de navegación, ya que el banner adhesivo terminaría ocultando la barra de navegación.

Adición de pancartas a diseños de varias columnas

También puede crear pancartas en una estructura de filas de varias columnas. Esto sería útil si desea incluir algunos elementos en la parte inferior de su página o blog.

Vamos a intentarlo.

Agregue otra sección regular con una estructura de fila de 1/2 1/2 columna.

Por cuestión de tiempo, siga adelante y copie o duplique un módulo de botones que acabamos de crear y péguelo o arrástrelo a la primera columna.

Para obtener el diseño del fondo del banner, usaremos los fondos de las columnas en la Configuración de filas. Vaya a la Configuración de filas y actualice lo siguiente:

Opciones de contenido

En la pestaña Imagen de fondo

Columna 1 Fondo: [ingresar imagen de fondo]
Columna 1 Posición de la imagen de fondo: [ajusta la posición de la imagen a tu gusto]
Columna 1 Mezcla de imagen de fondo: multiplicar

Debajo de la pestaña Gradiente de fondo

Columna 1 Colores de degradado: rgba (255,255,255,0), # e02b20
Columna 1 Dirección de gradiente: 180 grados
Posición inicial de la columna 1: 70%
Posición final de la columna 1: 0%

El último paso es actualizar la configuración del módulo de botones :

Opciones de contenido

Texto del botón: Serie de viajes

Opciones de diseño

Tamaño del texto del botón: 32px
Ancho del borde del botón: 2px
Espaciado entre letras del botón: 0px
Color del borde de desplazamiento del botón: # edf000
Espacio entre letras del botón de desplazamiento: 0px

Opciones avanzadas

CSS personalizado en el cuadro Elemento principal:

padding: 350px 0px 50px;
width: 100%;

Este CSS personalizado ajusta el relleno del módulo Botón para que el texto esté en la parte inferior, justo detrás del degradado de fondo.

Siéntase libre de duplicar este proceso para el banner en la siguiente columna y actualizar el contenido como desee.

Mira el resultado.

Nota : No usaría la altura de la columna de ecualización cuando use esta funcionalidad. La columna se extenderá más allá del módulo de botones. Si desea que las alturas de la pancarta coincidan perfectamente, es posible que tenga que jugar con el relleno en el módulo de botones para hacerlo bien.

¿Sensible?

Si. Debido a que los botones están construidos dentro de la estructura de columnas de Divi, los botones responderán bien en todos los dispositivos. Para los banners horizontales, tendría cuidado con la ubicación de su logotipo y su texto, ya que pueden superponerse en el móvil.

A continuación, se muestra un ejemplo de cómo se ven cuando se reduce a tamaños de pantalla más pequeños:

Compatibilidad del navegador

Actualmente, la propiedad CSS del modo de combinación de fondo no es compatible con Internet Explorer o Edge y Safari tiene opciones de combinación limitadas. Sin embargo, en mi experiencia, la alternativa no es considerable en la mayoría de los casos.

Pensamientos finales

Espero que hayas disfrutado de este pequeño pero útil truco de diseño para crear banners receptivos. Siempre que comprenda las limitaciones involucradas y lo mantenga simple, puede crear algunos banners bastante interesantes. Además, esta solución se implementa fácilmente y se personaliza rápidamente.

Y estoy seguro de que existen otras aplicaciones útiles para esto. Espero escuchar sus ideas en los comentarios.

¡Salud!