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

Una de las principales razones por las cuales las personas crean sitios web es encontrar una nueva forma de abordar al público objetivo. Una vez que diga el primer paso y comience a construir un sitio web, comience a preguntar exactamente cómo puede ponerse en contacto con sus clientes potenciales. Una de las cosas que han demostrado ayudar a muchos propietarios de sitios web es crear listas. Se trata de recopilar direcciones de correo electrónico de los visitantes, convertirlos en clientes potenciales (y finalmente clientes) con marketing de correo electrónico. Y con la creación de las listas viene la creación de atractivas secciones de suscripción en su sitio web. Desea que la sección de suscripción sea atractiva y, lo que es más importante, desea que la sección de suscripción se convierta. Para este tutorial, hemos creado una increíble sección de suscripción que sin duda atraerá la atención del visitante. Combinamos un diseño elegante con argumentos sobre por qué se registra para obtener una lista de correos electrónicos. Además, compartiremos tres paletas de colores desde las que puede elegir al crear el diseño.
¡Vamos a eso! Suscríbase a nuestra vista previa del canal de YouTube antes de arrojar nuestras cabezas en el tutorial, eche un vistazo al resultado en diferentes tamaños de pantalla.

Paleta de colores # 1

Color # 1: RGBA (79,35,255,0,88)
Color # 2: # E09900
Color # 3: # 4f23ff
Paleta de colores # 2

Color # 1: RGBA (255,35,97,0.75)
Color # 2: # E09900
Color # 3: # D80E00
Paleta de colores # 3

Color # 1: RGBA (41,17,147,0,75)
Color # 2: # 00ffd8
Color # 3: # 291193
Enfoque Elija una de las paletas de colores anteriores (o cree las suyas) y use estos colores durante el tutorial. Nos referiremos al color # 1, # 2 o # 3 cuando use un color en nuestra configuración. También hacemos que el módulo de suscripción se superponga entre dos columnas y enfatizamos las ventajas del registro para una lista de correos electrónicos. Registre la sección de suscripción Agregue una nueva sección del divisor superior Abra la página a la que desea agregar la sección de suscripción y agregar una nueva sección estándar. Abra inmediatamente la configuración de su sección y agregue el siguiente separador superior:
Estilo divisor: encontrar en la lista
Color divisor: #ffffff
Altura del divisor: 200 PX
Divisor de flip: vertical
Separador inferior Agregue el mismo tipo de divisor al fondo de la sección:

Estilo divisor: encontrar en la lista
Color divisor: #ffffff
Altura del divisor: 200 PX
Divisor de flip: vertical
El espacio luego abra la configuración del espacio y elimine todo el revestimiento predeterminado de su sección agregando “0px” al revestimiento superior e inferior.

Agregue una nueva línea a la estructura de la columna ahora que hemos terminado con todas las configuraciones de la sección, podemos agregar una nueva línea. Elija la siguiente estructura de columna para esto

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

El color del primer gradiente: Color # 1
Color de segundo gradiente: Color # 2
Dirección de gradiente: 123deg
Coloque el gradiente sobre la imagen de fondo: sí
Imagen de fondo Continuar agregando una imagen de fondo a su elección. Esta imagen de fondo solo se mostrará un poco. Elija “Cubierta” como tamaño de la imagen de fondo.

Colum 2 Color de fondo luego, agregue “RGBA (255,255,25,0,87)” como 2 color de fondo. Dimensión también, reduciremos el espacio entre ambas columnas y haremos que el giro ocupe todo el ancho aplicando la siguiente configuración de tamaño. :

Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Espacio de lo último que debe hacer en la configuración de la fila es agregar algunos rellenos personalizados:
Revestimiento superior e inferior: 0 px

Columna 1 revestimiento superior: 200 px
Columna 1 revestimiento inferior: 100 px
Columna 2 revestimiento superior: 300 px (escritorio) 50 px (tableta y teléfono)
Columna 2 revestimiento inferior: 100 px (tableta y teléfono)
Columna 2 Revelaje izquierdo y derecho: 50 PX
¡Agregue los módulos de blurb # 1 a la columna 1 Agregue el título de la propaganda ahora para comenzar a agregar nuestros módulos! Comenzaremos con la primera columna agregando un módulo de propaganda. Una vez que hayamos terminado de cambiar ese modo de desenfoque, reutilizaremos su configuración para los otros dos. Después de agregar un módulo de propaganda, dale un título.
Agregue el icono de la propaganda Agregue un icono al siguiente módulo de propaganda. Usé el siguiente icono para el primer módulo:

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

Icono de color: #ffffff

Colocando iconos: arriba
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 43 PX
Configuración de texto de título Usamos solo un título de propaganda. Es por eso que solo necesitaremos cambiar la configuración del texto H4:
Fuente del título: Yeseva One

Alineación del texto del título: Centro
Color de texto del título: #ffffff
Cartas de título de espacio: -1 pxdimension Además, cambiaremos el ancho del módulo de la propaganda de acuerdo con el tamaño diferente de la pantalla:
Ancho de contenido: 150 PX
Ancho: 33% (escritorio), 40% (tableta), 60% (teléfono)

Alineación del módulo: centro
Finalmente, espaciado agregue el siguiente relleno personalizado al módulo de la propaganda:
Revestimiento superior e inferior: 50 px
Clone el módulo de la propaganda dos veces y cambie el módulo de propaganda recomendado, cambie el icono y el contenido ahora puede ir más allá y puede clonar el módulo de la propaganda dos veces. Mantenlos a todos en la primera columna. Para cada uno de los nuevos módulos de propaganda, continúe y cambie el icono y el título para que coincidan con el mensaje que desea enviar.


Agregue un color de fondo, resaltaremos el módulo de la propaganda en el medio. Para hacer esto, comenzaremos agregando un color de fondo blanco.
Cambie el icono y el color del texto del título, cambiaremos el color del icono y el título H4 a “# 000000”.

Agregue esquinas redondeadas y luego agregaremos “5px” a cada una de las esquinas en la configuración del borde.


Box Shadow por último, pero no menos importante, agregaremos un poco de profundidad usando la primera sombra de la caja.

Agregue el módulo de texto no. 1 en la configuración de texto de Colum 2 ¡Pasemos a la segunda columna! El primer módulo que necesitamos es un módulo de texto. Después de haber agregado el contenido, aplique la siguiente configuración de texto:

Texto de fuente: Yeseva One

Color de texto: # 000000

Tamaño del texto: 54 PX
La altura de la línea de texto: 1em
Agregue el módulo de texto no. 2 En 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 el contenido, agregue “20 PX” al borde superior. Agregue el módulo de correo electrónico en la columna 2 Color de fondo El siguiente modo que tendremos que agregar es un módulo de correo electrónico. Después de agregarlo, continúe y cambie el color de fondo a “RGBA (255,255,255.0).
Cuenta de correo electrónico Agregue la cuenta de correo electrónico para elegir el proveedor de servicios elegido.
Los campos continúan abriendo la configuración del campo y deshabilitan el primer nombre y los nombres.

También cambiaremos la configuración de campo. Elimine las esquinas redondeadas agregando “0px” a cada esquina. Agregue la primera opción de sombra de la caja también.

Botón de configuración y luego cambiar el botón Mira:

El color del texto del botón: #ffffff

Botón de fondo de color: Color # 3

El ancho del nudo del botón: 0 PX


El rasgo de botón de botón: 0 px
Botón de fuente: Yeseva One
Muestra el icono del botón: Sí
Botón de icono de color: #ffffff
Icono de botón de colocación: izquierda
Muestre el icono solo en el flotador para el botón: no
Box Shadow: Seleccione la primera opción
Finalmente espaciado, 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), 0 px (teléfono)
Margen derecho: 60% (escritorio), 50% (tableta), 0 px (teléfono)




Agregue el módulo de seguimiento de las redes sociales a Colum 2 Agregue cuántas redes sociales desea no durar, agregaremos un módulo de seguimiento social. Continúe y agregue las redes sociales que desea aparecer.
Esquinas redondeadas Después de agregar todas las redes sociales, agregue “50 PX” a cada una de las esquinas en la configuración del borde.
Cambie individualmente el color de fondo de cada red social, no menos importante, cambie el color de fondo de cada una de las redes sociales individualmente a “# 000000”.
Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.

Los pensamientos finales suscriben las secciones son una parte importante de su sitio web. Le ayuda a crear listas de correo electrónico, activar el marketing de correo electrónico y convertir a los clientes potenciales en visitantes en un tiempo. En esta publicación, le mostré cómo crear una sección de suscripción increíble que coincida con cualquier tipo de sitio web allí. Combinamos el uso de un gran diseño con las ventajas de registro allí. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.