Tener un banner de ventas multipropósito definitivamente será útil (y le ahorrará tiempo) durante esos momentos cruciales del año cuando las promociones están de moda. ¡Es por eso que ofrecemos este banner de ventas multipropósito para Divi como descarga GRATUITA! Este banner de ventas se puede personalizar fácilmente para satisfacer sus necesidades con solo unos pocos ajustes de texto y una imagen de fondo. Diseñar el banner de ventas en Divi es tan fácil que no tendrás que conformarte con banners de imagen que a menudo se ven un poco granulados en la web. Entonces, además de la descarga gratuita, te mostraré cómo diseñar el banner de ventas en Divi desde cero.
¡Empecemos!
Aquí hay un vistazo al diseño del banner de ventas incluido en la descarga.
Para poner sus manos en el diseño de banner de ventas de forma gratuita, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Cargar el diseño en la biblioteca Divi
Después de descargar el archivo, descomprímalo. Encontrará que contiene un archivo llamado «sales-banner-design.json». Esto es lo que cargará en su biblioteca Divi. Ahora ve a tu tablero de wordpress y navega a Biblioteca Divi»>Divi > Biblioteca Divi . Luego haga clic en el botón Importar en la parte superior de la página. En la ventana emergente de portabilidad, seleccione la pestaña Importar y elija el archivo sales-banner-design.json. Luego haga clic en el botón Importar diseños de Divi Builder.
Ahora, para importar el diseño a su página, simplemente cree una nueva página e implemente el generador visual. Luego seleccione «Elegir un diseño prefabricado». En la ventana emergente Cargar desde la biblioteca, seleccione la pestaña «Sus diseños guardados» y luego haga clic en el diseño Diseño de banner de ventas de la lista. ¡Eso es todo!
Agregar el fondo de la sección
Para comenzar, cree una nueva página. Después de darle un título a su página, implemente el generador visual y seleccione la opción «Crear desde cero». Luego agregue una nueva sección con una fila de una columna.
Antes de comenzar a agregar módulos a la fila, dele a su sección un color degradado de fondo (el color no importa en este momento. Solo necesitamos un color de fondo para ver todos los elementos de diseño en blanco que usaremos para nuestras ventas). bandera.)
Antes de agregar nuestros módulos a la fila, primero demos a nuestra fila un ancho personalizado de 700 px y eliminemos cualquier espacio superior o inferior para que nuestra fila quede bien encima de la otra fila que agregaremos debajo. Vaya a la configuración de la fila y actualice lo siguiente:
Ancho personalizado: 700 px
Ancho de medianil: 1
Margen personalizado: 0 px arriba, 0 px, abajo
Relleno personalizado: 0 px arriba, 0 px abajo
Ahora duplique la fila dos veces para que tenga un total de tres filas idénticas. Estos se utilizarán para construir nuestro banner de ventas.
Adición del marco del borde superior con texto adyacente
Para construir nuestro banner de ventas, comenzamos con un borde superior con texto a la izquierda. Para hacer esto, usaremos un módulo divisor y un módulo de texto. Primero, cree un nuevo módulo de texto y agregue algunas palabras de contenido en el cuadro de contenido.
Contenido: «Solo en línea»
Continúe con la pestaña de diseño y actualice lo siguiente:
Peso de fuente de texto: Texto en negrita
Estilo de fuente: TT
Color de texto de texto: rgba(255,255,255,0.9)
Tamaño de texto de texto: 15px
Espaciado entre letras de texto: 2px
Altura de línea de texto: 1em Ancho
: 22% (escritorio), 25% (tableta), 40 % (teléfono inteligente)
Alineación del módulo: izquierda
Margen personalizado: 0 px arriba, -15 px abajo
Relleno personalizado: 0 px arriba, 0 px abajo
Este margen personalizado es un poco prematuro ya que nuestro divisor aún no se ha agregado, pero es necesario alinear el texto para que quede perfectamente adyacente al divisor que se agregará pronto.
Ahora agregue un módulo divisor debajo del módulo de texto en la misma fila. Luego actualice la configuración del divisor de la siguiente manera:
Color: rgba(255,255,255,0.9)
Posición del divisor: inferior
Peso del divisor: 15px
Altura: 15px Ancho
: 78% (escritorio), 75% (tableta), 60% (teléfono inteligente)
Alineación del módulo: Derecha
Margen personalizado: 0px arriba, 0px abajo
Relleno personalizado: 0px arriba, 0px abajo
Por supuesto, deberá ajustar el ancho de su borde según el ancho de su módulo de texto al personalizar el diseño para sus propias necesidades.
A continuación, debemos agregar un módulo divisor más para conectar nuestro divisor al borde derecho de la fila que diseñaremos a continuación.
Para ello, duplique el módulo divisor y actualice lo siguiente:
Ancho: 15 px
Margen personalizado: -1 px inferior
Agregar el marco del borde inferior con texto adyacente
Para crear el marco del borde inferior, podemos usar el mismo elemento que creamos en el marco del borde superior de nuestra fila superior. Solo que esta vez comenzaremos con el módulo divisor de 15px de ancho. Continúe y copie el módulo divisor de 15px y péguelo en la tercera fila (inferior). Luego actualice la alineación del módulo a la izquierda en lugar de a la derecha.
A continuación, copie el módulo divisor más largo de la fila superior y péguelo debajo del divisor de 15 px en la fila inferior. Luego ajusta lo siguiente:
Ancho: 75 % (escritorio), 70 % (tableta), 50 % (teléfono inteligente)
Alineación del módulo: izquierda
Finalmente, copie el módulo de texto en la fila superior y péguelo debajo de los dos módulos divisores en la fila inferior. Luego actualice lo siguiente:
Contenido: «Comienza el 1 de noviembre»
Ancho: 25 % (escritorio), 30 % (tableta), 50 % (teléfono inteligente)
Alineación del módulo: Derecha
Margen personalizado: -15 px arriba, 0 px abajo
Relleno personalizado: 15 px a la izquierda
Agregar los módulos de texto a la fila central
Ahora estamos listos para comenzar a agregar los módulos de texto a nuestra fila central que contendrá el texto principal de nuestro banner de ventas. Estaremos apilando tres módulos de texto uno encima del otro. Continúe y agregue el primer módulo de texto a la fila del medio.
Luego actualice lo siguiente:
Contenido: «Todo con un 20 % de descuento»
Color de fondo: rgba(255,255,255,0.9)
Grosor de la fuente del texto: Semi negrita
Estilo de la fuente del texto: TT
Color del texto del texto: #000000
Tamaño del texto del texto: 34 px (escritorio), 20 px (teléfono inteligente)
Espaciado entre letras del texto: 2 px
Altura de la línea del texto: 1 em
Orientación del texto: Centro
Relleno personalizado: 2vw top, 2vw abajo, 5vw izquierda, 5vw derecha
Darle al texto un color negro sobre un fondo blanco es esencial para maximizar el efecto del modo de fusión de pantalla que permitirá que el texto se mezcle con el fondo de la sección. Agregaremos el modo de fusión de pantalla a la fila un poco más adelante.
Ahora duplique el módulo de texto para impulsar el diseño del siguiente módulo de texto. Luego actualice el contenido con el siguiente html:
|
01
|
<h2 style="border: 7px solid #000000;">Fall Sale</h2> |
El estilo en línea simplemente agrega un borde negro alrededor del texto del título. Nuevamente, el color negro funcionará con el modo de fusión de pantalla para exponer el fondo de la sección con el texto.
Luego actualice lo siguiente:
Encabezado 2 Peso de fuente: Negrita
Encabezado 2 Estilo de fuente: TT
Encabezado 2 Color de texto: #000000
Encabezado 2 Tamaño de texto: 100 px (escritorio), 80 px (tableta), 60 px (teléfono inteligente)
Encabezado 2 Espaciado entre letras: 2 px
Margen personalizado: 0 px arriba
Personalizado Relleno: 0px arriba, 0px abajo
Para el último módulo de texto, duplique el primer módulo de texto en esta fila central y péguelo debajo del segundo módulo de texto.
Luego actualice lo siguiente:
Contenido: Texto «Comprar ahora»
Estilo de fuente: TT, U (subrayado)
Margen personalizado: 0px arriba
Relleno personalizado: 1vw arriba, 2vw abajo
Estilo de la fila central
La fase final de este diseño es agregar un borde a la fila central y un efecto de modo de fusión de pantalla. Para hacer esto, abra la configuración de la fila central y actualice lo siguiente:
Relleno personalizado: 15 px a la izquierda, 15 px a la derecha
Ancho del borde derecho: 15 px
Color del borde derecho: rgba (255 255 255 0,9)
Ancho del borde izquierdo: 15 px
Color del borde izquierdo: rgba (255 255 255 0,9)
Modo de fusión: Pantalla
¡El modo de fusión de pantalla permite que el texto se mezcle con la imagen de fondo para mostrarse a través del texto y obtener un efecto genial!
Mira el resultado final.
Dado que se trata de un banner de ventas, querrá maximizar el espacio en el que se puede hacer clic en el banner para aumentar las conversiones. Para hacer esto, puede agregar un enlace a toda la fila central. Simplemente abra la configuración de la fila central e ingrese una URL de enlace de fila para redirigir a la página deseada.
Agregar diferentes fondos de sección para diseños únicos
Con este nuevo diseño de banner de ventas, puede actualizar fácilmente la imagen de fondo para crear diseños únicos.
Aquí están algunos ejemplos.
Pensamientos finales
Espero que este diseño de banner de ventas sea útil para todas esas promociones web necesarias durante todo el año. El diseño está diseñado para servir como un banner de ventas multipropósito que se puede actualizar fácilmente con texto nuevo e imágenes de fondo de sección para una apariencia completamente nueva. ¡Incluso puedes agregar un fondo de video también!
Espero escuchar de usted en los comentarios.
¡Salud!