Cómo diseñar una sección de suscripción atractiva para cualquier tipo de sitio web con Divi

Una de las principales razones por las que las personas crean sitios web es para encontrar una nueva forma de acercarse a su público objetivo. Una vez que da ese primer paso y comienza a construir un sitio web, comienza a preguntarse cómo exactamente podrá ponerse en contacto con sus clientes potenciales. Una de las cosas que ha demostrado ayudar a muchos propietarios de sitios web es la creación de listas. Se trata de recopilar direcciones de correo electrónico de los visitantes, convertirlos en clientes potenciales (y eventualmente en clientes) con el marketing por correo electrónico.

Y con la creación de listas viene la creación de atractivas secciones de suscripción en su sitio web. Quieres que tu sección de suscripción sea llamativa y, lo que es más importante, quieres que tu sección de suscripción se convierta. Para este tutorial, hemos creado una impresionante sección de suscripción que sin duda llamará la atención de sus visitantes. Estamos combinando un diseño elegante con argumentos sobre por qué suscribirse a una lista de correo electrónico. Además de eso, también compartiremos tres paletas de colores entre las que puede elegir mientras crea el diseño.

¡Hagámoslo!

Suscríbete a nuestro canal de Youtube

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla.

Paleta de colores n. ° 1

• Color # 1: rgba (79,35,255,0.88)
• Color # 2: # e09900
• Color # 3: # 4f23ff

Paleta de colores n. ° 2

• Color # 1: rgba (255,35,97,0.75)
• Color # 2: # e09900
• Color # 3: # d80e00

Paleta de colores n. ° 3

• Color n. ° 1: rgba (41,17,147,0.75)
• Color # 2: # 00ffd8
• Color # 3: # 291193

Acercarse

Elija una de las paletas de colores anteriores (o cree una propia) y use estos colores a lo largo del tutorial. Nos referiremos al color n. ° 1, n. ° 2 o n. ° 3 cuando usemos un color en nuestra configuración. También estamos haciendo que el Módulo de suscripción se superponga a dos columnas y enfatizamos los beneficios de registrarse en una lista de correo electrónico.

Recrear la sección de suscripción

Agregar una nueva sección

Divisor superior

Abra la página a la que desea agregar su sección de suscripción y agregue una nueva sección estándar. Abra la configuración de su sección de inmediato y agregue el siguiente divisor superior:

• Estilo de divisor: Buscar en la lista
• Color del divisor: #FFFFFF
• Altura del divisor: 200 px
• Flip divisor: Vertical

Divisor inferior

Agrega el mismo tipo de divisor al final de tu sección:

• Estilo de divisor: Buscar en la lista
• Color del divisor: #FFFFFF
• Altura del divisor: 200 px
• Flip divisor: Vertical

Espaciado

Abra la configuración de Espaciado a continuación y elimine todo el relleno predeterminado de su sección agregando '0px' al relleno superior e inferior.

Agregar una nueva fila

Estructura de la columna

Ahora que hemos terminado con todas las configuraciones de sección, podemos agregar una nueva fila. Elija la siguiente estructura de columnas para ello

Fondo degradado

Abra la configuración de su fila y continúe agregando el siguiente fondo degradado:

• Primer color de degradado: color n. ° 1
• Segundo color de degradado: color n. ° 2
• Dirección del gradiente: 123 grados
• Colocar degradado sobre la imagen de fondo: Sí

Imagen de fondo

Continúe agregando una imagen de fondo de su elección. Esta imagen de fondo solo se mostrará un poco. Elija 'Portada' como el Tamaño de la imagen de fondo también.

Color de fondo de la columna 2

A continuación, agregue 'rgba (255,255,255,0.87)' como Color de fondo de la columna 2.

Dimensionamiento

También vamos a reducir el espacio entre ambas columnas y hacer que la fila ocupe todo el ancho de la pantalla aplicando la siguiente configuración de tamaño:

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

Lo último que deberá hacer dentro de la configuración de la fila es agregar un relleno personalizado:

• Acolchado superior e inferior: 0px
• Relleno superior de la columna 1: 200 px
• Relleno inferior de la columna 1: 100 px
• Relleno superior de la columna 2: 300 px (escritorio) 50 px (tableta y teléfono)
• Relleno inferior de la columna 2: 100 px (tableta y teléfono)
• Columna 2 Relleno izquierdo y derecho: 50px

Agregue el módulo Blurb n. ° 1 a la columna 1

Agregar título de propaganda

¡Ahora comencemos a agregar nuestros módulos! Comenzaremos con la primera columna agregando un módulo Blurb. Una vez que hayamos terminado de modificar ese módulo Blurb, también reutilizaremos su configuración para los otros dos. Después de agregar un módulo Blurb, asígnele un título.

Agregar icono de propaganda

A continuación, agregue un icono a su módulo Blurb. Hemos utilizado el siguiente icono para el primer módulo:

Configuración de iconos

Cambie la apariencia del icono agregando la siguiente configuración:

• Color del icono: #FFFFFF
• Ubicación del icono: Arriba
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 43px

Configuración del texto del título

Solo estamos usando un título de propaganda. Es por eso que necesitaremos modificar la configuración de texto del H4 únicamente:

• Fuente del título: Yeseva One
• Alineación del texto del título: centro
• Color del texto del título: #FFFFFF
• Espaciado de letras de título: -1px

Dimensionamiento

También modificaremos el ancho de nuestro módulo Blurb de acuerdo con los diferentes tamaños de pantalla:

• Ancho del contenido: 150px
• Ancho: 33% (escritorio), 40% (tableta), 60% (teléfono)
• Alineación del módulo: centro

Espaciado

Por último, agregue también el siguiente relleno personalizado a su módulo Blurb:

• Acolchado superior e inferior: 50px

Clonar el módulo Blurb dos veces y modificar el módulo Blurb destacado

Cambiar ícono y contenido

Ahora puede seguir adelante y clonar el módulo Blurb dos veces. Manténgalos todos en la primera columna. Para cada uno de los nuevos módulos de Blurb, siga adelante y cambie el icono y el título para que coincida con el mensaje que desea enviar.

Agregar color de fondo

Vamos a resaltar el módulo Blurb del medio. Para hacer eso, comenzaremos agregando un color de fondo blanco.

Cambiar el color del texto del icono y del título

También cambiaremos el color del icono y el título H4 a '# 000000'.

Agregar esquinas redondeadas

A continuación, agregaremos '5px' a cada una de las esquinas en la configuración de Borde.

Sombra de la caja

Por último, pero no menos importante, agregaremos un poco de profundidad utilizando la primera opción de sombra de cuadro.

Agregue el módulo de texto n. ° 1 a la columna 2

Configuración de texto

¡Pasemos a la segunda columna! El primer módulo que necesitaremos es un módulo de texto. Una vez que haya agregado su contenido, aplíquele la siguiente configuración de texto:

• Fuente de texto: Yeseva One
• Color del texto: # 000000
• Tamaño del texto: 54px
• Altura de la línea de texto: 1em

Agregue el módulo de texto n. ° 2 a la columna 2

Espaciado

Justo debajo de ese módulo de texto, agregaremos otro módulo de texto para la descripción. Una vez que haya agregado su contenido, agregue '20px' al margen superior.

Agregue el módulo Optin de correo electrónico a la columna 2

Color de fondo

El siguiente módulo que necesitaremos agregar es un módulo Optin de correo electrónico. Una vez que lo agregue, continúe y cambie el color de fondo a 'rgba (255,255,255,0)'.

Cuenta de correo electrónico

A continuación, agregue su cuenta de correo electrónico y elija el proveedor de servicios de su elección.

Los campos

Continúe abriendo la configuración de Campo y deshabilite los campos Nombre y Apellido.

Configuración de campo

También modificaremos la configuración del campo. Elimine las esquinas redondeadas agregando '0px' a cada una de las esquinas. Agregue también la primera opción de sombra de cuadro.

Configuración de botones

A continuación, cambie la apariencia de su botón:

• Color del texto del botón: #FFFFFF
• Color de fondo del botón: Color n. ° 3
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px
• Fuente del botón: Yeseva One
• Mostrar icono de botón: Sí
• Color del icono del botón: #FFFFFF
• Ubicación del icono del botón: Izquierda
• Mostrar solo el icono al pasar el mouse para el botón: No
• Sombra de cuadro: seleccione la primera opción

Espaciado

Por último, haga que el módulo de suscripción se superponga a ambas columnas utilizando la siguiente configuración de espaciado:

• Margen superior: 20 px (escritorio), 0 px (tableta y teléfono)
• Margen izquierdo: -60% (escritorio y tableta), 0px (teléfono)
• Margen derecho: 60% (escritorio), 50% (tableta), 0px (teléfono)

Agregue el módulo de seguimiento de redes sociales a la columna 2

Agregue tantas redes sociales como desee

Por último, pero no menos importante, agregaremos un módulo de seguimiento de redes sociales. Continúe y agregue las redes sociales que desea que aparezcan.

Esquinas redondeadas

Una vez que haya agregado todas las redes sociales, agregue '50px' a cada una de las esquinas en la configuración de Borde.

Espaciado

También empujaremos hacia abajo el módulo agregando '50px' al margen superior.

Cambiar el color de fondo de cada red social individualmente

Por último, pero no menos importante, cambia el color de fondo de cada una de las redes sociales individualmente a '# 000000'.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales

Las secciones de suscripción son una parte importante de su sitio web. Le ayudan a crear listas de correo electrónico, habilitar el marketing por correo electrónico y convertir clientes potenciales en visitantes en cuestión de tiempo. En esta publicación, le mostramos cómo crear una impresionante sección de suscripción que coincidirá con cualquier tipo de sitio web. Hemos combinado el uso de un diseño magnífico con las ventajas del registro. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!