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 el primer paso y comienza a crear un sitio web, comienza a preguntarse cómo 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 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. Desea que su sección de suscripción sea llamativa y, lo que es más importante, desea que su sección de suscripción genere conversiones. Para este tutorial, hemos creado una impresionante sección de suscripción que, sin lugar a dudas, captará la atención de sus visitantes. Estamos combinando un diseño ingenioso con argumentos sobre por qué registrarse en una lista de correo electrónico. Además de eso, también compartiremos tres paletas de colores que puede elegir mientras crea el diseño.
¡Hagámoslo!
Suscríbete a nuestro canal de Youtube
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla.
Paleta de colores #1
- Color #1: rgba(79,35,255,0.88)
- Color n.° 2: #e09900
- Color #3: #4f23ff
Paleta de colores #2
- Color #1: rgba(255,35,97,0.75)
- Color n.° 2: #e09900
- Color #3: #d80e00
Paleta de colores #3
- Color #1: rgba(41,17,147,0.75)
- Color n.º 2: n.º 00ffd8
- Color n.° 3: n.° 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 #1, #2 o #3 cuando estemos usando un color en nuestra configuración. También estamos haciendo que el módulo de suscripción superponga dos columnas y enfatizamos los beneficios de suscribirse a una lista de correo electrónico.
Recrear 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: 200px
- Voltear el divisor: Vertical
Divisor inferior
Agregue el mismo tipo de divisor al final de su sección:
- Estilo de divisor: Buscar en la lista
- Color del divisor: #FFFFFF
- Altura del divisor: 200px
- Voltear el 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 la sección, podemos agregar una nueva fila. Elija la siguiente estructura de columna para ello
Fondo degradado
Abra la configuración de su fila y continúe agregando el siguiente fondo degradado:
- Primer color degradado: color n.º 1
- Segundo Color de Degradado: Color #2
- Dirección del gradiente: 123 grados
- Coloque el 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 ‘Cubierta’ como Tamaño de 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 del canalón: 1
- Igualar alturas de columna: Sí
Espaciado
Lo último que deberá hacer dentro de la configuración de la fila es agregar un relleno personalizado:
- Relleno superior e inferior: 0px
- Columna 1 Relleno superior: 200px
- Relleno inferior de la columna 1: 100px
- 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 de Blurb #1 a la Columna 1
Agregar título de Blurb
¡Ahora comencemos a agregar nuestros módulos! Comenzaremos con la primera columna agregando un módulo de Blurb. Una vez que hayamos terminado de modificar ese módulo de Blurb, también reutilizaremos su configuración para los otros dos. Después de agregar un módulo de Blurb, asígnele un título.
Añadir icono de publicidad
A continuación, agregue un ícono a su Módulo de Blurb. Hemos utilizado el siguiente icono para el primer módulo:
Configuración de iconos
Cambie la apariencia del ícono agregando las siguientes configuraciones:
- Color del icono: #FFFFFF
- Ubicación del icono: superior
- Usar tamaño de fuente de icono: Sí
- Tamaño de fuente del icono: 43px
Configuración del texto del título
Solo estamos usando un título publicitario. Es por eso que solo necesitaremos modificar la configuración de texto del H4:
- Fuente del título: Yeseva One
- Alineación del texto del título: Centro
- Color del texto del título: #FFFFFF
- Espaciado entre letras del título: -1px
Dimensionamiento
También modificaremos el ancho de nuestro Módulo Blurb según los diferentes tamaños de pantalla:
- Ancho del contenido: 150 px
- 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 de Blurb:
- Relleno superior e inferior: 50px
Clonar el módulo de Blurb dos veces y modificar el módulo de Blurb destacado
Cambiar icono y contenido
Ahora puede continuar 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, continúe y cambie el ícono y el título para que coincida con el mensaje que desea enviar.
Agregar color de fondo
Vamos a resaltar el Módulo de Blurb del medio. Para hacerlo, comenzaremos agregándole un color de fondo blanco.
Cambiar el icono y el color del texto del título
También cambiaremos el color del ícono 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 usando 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. Después de agregar su contenido, aplique la siguiente configuración de texto:
- Fuente del texto: Yeseva One
- Color del texto: #000000
- Tamaño del texto: 54px
- Altura de línea de texto: 1em
Agregue el Módulo de Texto #2 a la Columna 2
Espaciado
Justo debajo de ese módulo de texto, agregaremos otro módulo de texto para la descripción. Después de agregar su contenido, agregue ’20px’ al margen superior.
Agregue el módulo de opción de correo electrónico a la columna 2
Color de fondo
El siguiente módulo que tendremos que agregar es un módulo de suscripción por 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
Agregue su cuenta de correo electrónico y elija el proveedor de servicios de su elección.
Campos
Continúe abriendo la configuración del campo y deshabilite los campos Nombre y Apellido.
Configuración de campo
También modificaremos la configuración del campo. Elimina 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 #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
- Solo mostrar icono al pasar el mouse sobre el botón: No
- Box Shadow: 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 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. Lo 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 hermoso diseño con las ventajas de registrarse. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!