Descargue un diseño de banner de ventas multipropósito GRATUITO para Divi
Publicado: 2018-11-18Tener un banner de ventas multipropósito definitivamente será útil (y le ahorrará tiempo) durante esos momentos cruciales del año en los que 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 adaptarse a sus necesidades con solo unos pocos ajustes de texto y una imagen de fondo. Diseñar el banner de ventas en Divi es lo suficientemente fácil como para que no tenga que conformarse con banners de imagen que a menudo se ven un poco granulosos en la web. Entonces, además de la descarga gratuita, les mostraré cómo diseñar el banner de ventas en Divi desde cero.
¡Empecemos!
Qué está incluido
Aquí hay un vistazo al diseño del banner de ventas incluido en la descarga.
Descargue el diseño del banner de ventas GRATIS
Para tener en sus manos el diseño del 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Cargar el diseño en la biblioteca Divi
Después de descargar el archivo, descomprímalo. Verá que contiene un archivo llamado “sales-banner-design.json”. Esto es lo que cargará en su biblioteca Divi. Ahora vaya a su panel de WordPress y navegue a Divi> Biblioteca Divi. Luego haga clic en el botón de importación 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 constructor visual. A continuación, seleccione "Elegir un diseño predefinido". En la ventana emergente de carga desde la biblioteca, seleccione la pestaña "Sus diseños guardados" y luego haga clic en el diseño de diseño de banner de ventas de la lista. ¡Eso es todo!
Cómo crear el banner de ventas desde cero en Divi
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 constructor visual y seleccione la opción "Construir desde cero". Luego agregue una nueva sección con una fila de una columna.
Antes de comenzar a agregar módulos a la fila, dé a su sección un color de degradado de fondo (el color no importa en este punto. Solo necesitamos un color de fondo para ver todos los elementos de diseño blanco que usaremos para nuestras ventas bandera.)
Personalización de las filas para el banner de ventas
Antes de agregar nuestros módulos a la fila, primero démosle a nuestra fila un ancho personalizado de 700px 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: 700px
Ancho de canalón: 1
Margen personalizado: 0px superior, 0px, inferior
Relleno personalizado: 0px arriba, 0px abajo
Ahora duplica la fila dos veces para que tengas 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 algo de 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 la fuente del texto: negrita
Estilo de fuente de texto: TT
Texto Color del texto: rgba (255,255,255,0.9)
Tamaño del texto del texto: 15px
Espaciado de letras de texto: 2px
Altura de la línea de texto: 1em
Ancho: 22% (escritorio), 25% (tableta), 40% (teléfono inteligente)
Alineación del módulo: izquierda
Margen personalizado: 0px arriba, -15px abajo
Relleno personalizado: 0px arriba, 0px 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 pronto se agregará.
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
Alto: 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, necesitará ajustar el ancho de su borde dependiendo del ancho de su módulo de texto cuando personalice 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: 15px
Margen personalizado: -1px 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 15px en la fila inferior. Luego ajuste 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: "Empieza el 1 de noviembre"
Ancho: 25% (escritorio), 30% (tableta), 50% (teléfono inteligente)
Alineación del módulo: derecha
Margen personalizado: -15 píxeles en la parte superior, 0 píxeles en la parte inferior
Relleno personalizado: 15px a la izquierda
Agregar los módulos de texto a la fila del medio
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. Apilaremos 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: "20% de descuento en todo"
Color de fondo: rgba (255,255,255,0.9)
Peso de la fuente del texto: Semi negrita
Estilo de fuente de texto: TT
Color del texto del texto: # 000000
Tamaño del texto del texto: 34 px (escritorio), 20 px (teléfono inteligente)
Espaciado de letras de texto: 2px
Altura de la línea de texto: 1em
Orientación del texto: centro
Relleno personalizado: 2vw superior, 2vw inferior, 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 la 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 iniciar el diseño del siguiente módulo de texto. Luego actualice el contenido con el siguiente html:
<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:
Peso de fuente del encabezado 2: Negrita
Estilo de fuente del título 2: TT
Color del texto del encabezado 2: # 000000
Tamaño del texto del encabezado 2: 100 px (escritorio), 80 px (tableta), 60 px (teléfono inteligente)
Encabezado 2 espaciado de letras: 2px
Margen personalizado: 0px arriba
Relleno personalizado: 0px arriba, 0px abajo
Para el último módulo de texto, duplique el primer módulo de texto en esta fila del medio y péguelo debajo del segundo módulo de texto.
Luego actualice lo siguiente:
Contenido: "Compre ahora"
Estilo de fuente de texto: TT, U (subrayado)
Margen personalizado: 0px arriba
Acolchado personalizado: 1vw superior, 2vw inferior
Diseñando la Fila del Medio
La fase final de este diseño es agregar un borde a la fila del medio 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: 15px
Color del borde derecho: rgba (255,255,255,0.9)
Ancho del borde izquierdo: 15px
Color del borde izquierdo: rgba (255,255,255,0.9)
Modo de fusión: pantalla
¡El modo de combinación de pantalla permite que el texto combine la imagen de fondo para mostrarse a través del texto para un efecto genial!
Mira el resultado final.
Agregar un enlace a su banner de ventas
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 del medio. 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 fondos de diferentes secciones 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á construido 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 puede agregar un fondo de video también!
Espero tener noticias tuyas en los comentarios.
¡Salud!