A todos nos encantan los nuevos suscriptores de nuestra lista de correo electrónico. Y una de las principales formas de obtener nuevos suscriptores es proporcionar a sus visitantes un formulario de suscripción de correo electrónico bien diseñado. Es por eso que en este tutorial, le mostraré cómo lograr cinco diseños diferentes con el módulo de suscripción de correo electrónico Divi para ayudarlo a despertar su imaginación sobre lo que es posible con este módulo poderoso y flexible.
Aquí hay una vista previa de los cinco diseños del módulo de suscripción de correo electrónico Divi que abordaremos hoy.
Opción #1 de Shadow Stacks
Empezar a diseñar #1
#2 Opt-in grande y mínimo
Empezar a diseñar #2
#3 Suscripción flaca
Empezar a diseñar #3
#4 Oferta de reserva Opt-in
Empezar a diseñar #4
# 5 Opción de marco recortado
Empezar a diseñar #5
Lo que necesitas para empezar
Suscríbete a nuestro canal de Youtube
Para este tutorial, todo lo que necesitarás es Divi. Construiremos cada uno desde cero, por lo que no es necesario un diseño prefabricado. Sin embargo, usaré algunas imágenes de algunos de nuestros paquetes de diseño, pero puedes usar las tuyas si quieres.
Además, es importante saber que no podrá ver los campos del formulario de suscripción en el sitio en vivo hasta que asigne un proveedor/lista de correo electrónico a su módulo de suscripción de correo electrónico. Puede hacer esto en la configuración de suscripción de su correo electrónico en Cuenta de correo electrónico.
¡Ahora vayamos a esos diseños!
Opción #1 de Shadow Stacks
Este diseño agrega dos sombras de cuadro al módulo de suscripción de correo electrónico de Divi para lograr un efecto de apilamiento único que hace que el formulario destaque. La primera sombra de cuadro se agrega al módulo de suscripción de correo electrónico y la segunda sombra de cuadro se agrega a la fila que tiene un tamaño y un borde personalizados para que funcione.
Así es como se hace.
Primero cree una nueva sección con una fila de una columna y agregue el módulo de suscripción de correo electrónico a la fila.
Abra la configuración de suscripción de correo electrónico y actualice lo siguiente:
Color de fondo: #1a0a38
Diseño: Cuerpo en la parte superior, Formulario en la parte inferior
Campos Esquinas redondeadas: 0px
Orientación del texto: Centro
Peso de la fuente del título: Título ligero
Tamaño del texto: 36px
Color del texto del botón: #ffffff
Color de fondo del botón: #00ac69
Ancho del borde del botón: 0px
Radio del borde del botón: 0px
Relleno personalizado: 3vw arriba, 3vw abajo, 5vw izquierda, 5vw derecha
Ahora agreguemos nuestra primera capa de sombra de cuadro detrás de nuestro módulo de suscripción de correo electrónico.
Sombra de cuadro: ver captura de pantalla
Posición horizontal de sombra de cuadro: 25px
Posición vertical de sombra de cuadro: -25px
Color de sombra: rgba(26,10,56,0.82)
Ahora agreguemos un pequeño fragmento de CSS personalizado para eliminar el relleno izquierdo que se agrega al formulario de forma predeterminada. Vaya a la pestaña avanzada y agregue el siguiente CSS en Formulario de suscripción.
|
01
|
padding-left: 0px !important; |
Eso se encarga de la configuración del módulo de suscripción de correo electrónico. Ahora vamos a editar nuestra fila. Abra la configuración de la fila y actualice lo siguiente:
Ancho personalizado: 600 px
Relleno personalizado: 25 px arriba, 0 px abajo, 25 px derecho
Ancho del borde inferior: 25 px
Color del borde inferior: rgba(0,0,0,0)
Ancho del borde izquierdo: 25 px Color del
borde izquierdo: rgba(0,0,0) ,0)
Ahora podemos agregar la sombra del cuadro a la fila.
Sombra de cuadro: ver captura de pantalla
Posición horizontal de sombra de cuadro: 50 px
Posición vertical de sombra de cuadro: -50 px
Fuerza de propagación de sombra de cuadro: -25 px
Color de sombra: rgba (26,10,56,0.55)
Ahora veamos el diseño final.
#2 Opt-in grande y mínimo
Este diseño de suscripción de correo electrónico es mínimo, limpio y grande. Los campos del formulario se escalan con el tamaño del navegador para que se vea bien en todos los dispositivos. Y no es demasiado grande como para obligar al usuario a desplazarse.
Aquí está cómo hacerlo.
Primero cree una nueva sección con una fila de una columna y agregue el módulo de suscripción de correo electrónico a la fila.
Abra la configuración de suscripción de correo electrónico y actualice el contenido para incluir su título y texto de pie de página.
Luego actualice el fondo con un color oscuro o una imagen:
Color de fondo: #121212
Imagen de fondo: Esto es opcional. Estoy usando uno del Podcast Layout Pack
Antes de continuar con la pestaña de diseño para una mayor personalización, debemos dejar espacio para los elementos de forma grande que agregaremos. Para hacer esto, vaya a la configuración de la fila y actualice lo siguiente:
Ancho personalizado: 100%
Sugerencia: usar un ancho 100% personalizado es una excelente manera de asegurarse de que su diseño no tenga ningún margen derecho o izquierdo en dispositivos móviles. Si usa la opción «Hacer ancho completo», su ancho máximo será del 89%, por lo que aún tendrá márgenes en dispositivos móviles.
Ahora regrese a la configuración del módulo de suscripción de correo electrónico y actualice el siguiente diseño:
Diseño: cuerpo en la parte superior, formulario en la parte inferior
Color de fondo del campo de formulario: rgba(0,0,0,0)
Esquinas redondeadas de los campos: 0px
Ancho del borde inferior de los campos: 2px
Color del borde inferior de los campos: #ffffff
Orientación del texto: Centro
Fuente del título: Lato
Peso de la fuente del título: Luz
Estilo de fuente del título: TT
Tamaño del texto del título: 4vw
Altura de la línea del título: 1em
Color de texto de campo: #ffffff
Fuente de campo: Lato
Peso de fuente de campo: Claro
Tamaño de texto de campo: 3.5vw
Espaciado entre letras de campo: 0.1em
Altura de línea de campo: 1.3em
Espaciado entre letras del cuerpo: 0,5 em
Tamaño del texto del botón: 4vw
Radio del borde del botón: 0px
Espaciado entre letras del botón: 0,1em
Fuente del botón: Lato
Peso de la fuente: Ligero
Relleno personalizado: 10vw arriba, 10vw abajo, 10vw izquierda, 10vw derecha
Observe el uso de la unidad de longitud vw para el tamaño de fuente combinada con la unidad de longitud em para la altura de línea y el espaciado entre letras. Esto permite que el texto y el diseño se escalen sin problemas al ajustar su navegador.
El último paso incluye algunos fragmentos de CSS personalizado para pulir el diseño. Vaya a la pestaña avanzada y agregue el siguiente CSS personalizado en Campos de formulario de suscripción:
|
01
|
font-size: 3.5vw; |
Esto permitirá que el tamaño del texto al escribir coincida con el texto del marcador de posición en los campos de su formulario.
Luego, agreguemos un margen personalizado sobre el botón para darle un poco de espacio para respirar. Agregue lo siguiente en el botón Suscribirse:
|
01
|
margin-top: 3.5vw; |
Ahora veamos el diseño final.
#3 Suscripción flaca
Este próximo diseño seguramente será una solución popular para empresas y blogs que buscan ahorrar algo de espacio vertical en sus publicaciones o páginas de destino. Aunque el módulo de suscripción de correo electrónico de Divi es mejor para los formularios verticales más tradicionales, en realidad puede convertir el formulario en un formulario horizontal delgado con solo un pequeño fragmento de CSS.
Aquí está cómo hacerlo.
Cree una nueva sección con una fila de una columna y agregue el módulo de suscripción de correo electrónico a la fila.
Abra la configuración de suscripción de correo electrónico y actualice el contenido para incluir un título, pero nada más.
Luego actualice el diseño con un fondo y un color de botón de la siguiente manera:
Color de fondo: #54677d
Diseño: cuerpo en la parte superior, forma en la parte inferior Orientación del texto:
Botón
central Color de fondo: #b0c94f
Ancho del borde del botón: 0px
Ahora es el momento del CSS personalizado. Dado que queremos el diseño de formulario delgado solo en el escritorio (y no en el móvil), agregaremos el CSS a la página (en la configuración de la página) usando una ID de CSS personalizada para apuntar al estilo del formulario.
Para hacer esto, vaya a la pestaña avanzada y asigne al módulo de suscripción una ID de CSS personalizada.
ID de CSS: flaco
Esto se usará para orientar este formulario con el CSS externo que agregaremos a la página.
Ahora abra la configuración de la página Divi Builder y agregue el siguiente CSS en la pestaña Avanzado.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
@media (min-width: 980px){#skinny.et_pb_newsletter .et_pb_newsletter_fields { flex-wrap: nowrap !important;}#skinny.et_pb_newsletter .et_pb_newsletter_fields>* { flex-basis: 23%;}}#skinny .et_pb_newsletter_form { padding-left: 0px;} |
Dado que Divi ya usa flex para diseñar el formulario en el backend, este CSS elimina la propiedad de ajuste flexible que hace que los campos del formulario se alineen verticalmente. El resultado es un diseño horizontal de los campos del formulario. Ajustar la propiedad de base flexible al 23% básicamente establece el ancho de cada uno de los campos del formulario. Y debido a que agregamos el CSS dentro de una consulta de medios, el diseño solo se realizará en el escritorio con el diseño predeterminado del formulario que se muestra en el dispositivo móvil.
Aquí está el diseño final.
#4 Oferta de reserva Opt-in
Este diseño incorpora algunas imágenes dentro del módulo de suscripción de correo electrónico con el fin de promover una oferta de libro gratis para registrarse. Para hacer esto, todo lo que necesita hacer es agregar una imagen usando el editor wysiwyg incorporado para agregar una descripción y contenido de pie de página. Es cierto que puede lograr este mismo diseño al combinar el módulo de suscripción de correo electrónico con otros módulos en una fila de dos columnas, pero pensé que sería útil mostrar cómo hacerlo todo en el mismo módulo.
Aquí está cómo hacerlo.
Cree una nueva sección con una fila de una columna y agregue el módulo de suscripción de correo electrónico a la fila.
Abra la configuración de suscripción de correo electrónico y quédese en la pestaña de contenido.
En descripción, acorte el texto predeterminado a solo un par de oraciones. Luego agregue una imagen de su biblioteca de medios haciendo clic en el botón Agregar medios.
Desea asegurarse de que la imagen no tenga más de 200 px de ancho. Para este ejemplo, estoy usando el tamaño medio de la imagen.
En Pie de página, agregue algunas oraciones para el contenido del texto del pie de página y luego haga clic en el botón Agregar medios para agregar una imagen de logotipo debajo del texto (esto es opcional, por supuesto).
Para asegurarse de que la imagen esté centrada, establezca la opción de alineación en el centro al agregar la imagen desde la biblioteca de medios.
Ahora está listo para actualizar el resto del diseño. Comience por darle al módulo una imagen de fondo y un degradado de fondo sobre la imagen para que el texto sea más legible.
Imagen de fondo: [añadir imagen]
Degradado de fondo Color izquierdo: rgba(0,0,0,0.5)
Degradado de fondo Color derecho: rgba(0,0,0,0.5)
Colocar degradado arriba Imagen de fondo: SÍ
Luego actualice el resto del diseño de la siguiente manera:
Color del texto del botón: #333333
Color de fondo del botón: #ffcb7a
Ancho del borde del botón: 0px
Espaciado entre letras del botón: 5px
Peso de la fuente: Ultra Negrita
Estilo de fuente: TT
Ancho: 700px
Alineación del módulo: centro
Relleno personalizado: 3vw arriba, 3vw abajo, 3vw izquierda, 3vw derecho
Aquí está el diseño final.
# 5 Opción de marco recortado
Esta técnica de diseño simple es una excelente manera de darle a su correo electrónico una apariencia única. El truco consiste en utilizar separadores de sección que tengan el mismo color que el fondo de la sección. Luego, al ajustar la altura de los divisores, puede superponer el formulario de suscripción de correo electrónico para cortar los bordes de una manera única para lograr un bonito efecto de encuadre.
Aquí está cómo hacerlo.
Cree una nueva sección con una fila de una columna y agregue el módulo de suscripción de correo electrónico a la fila.
Abra la configuración de suscripción de correo electrónico y dele a su módulo un degradado de fondo.
Degradado de fondo Color izquierdo: #8300e9
Degradado de fondo Color derecho: #06c8ff
Tipo de degradado: Radial
Dirección radial: Superior izquierda
Luego actualice el resto del diseño de la siguiente manera:
Peso de la fuente del título: Negrita
Tamaño del texto del título: 36 px
Ancho: 70 % (escritorio), 100 % (tableta y teléfono inteligente)
Alineación del módulo: centro
Relleno personalizado: 6vw arriba, 6vw abajo, 6vw izquierda, 6vw derecha
Esquinas redondeadas: 50 px arriba a la izquierda, 0px arriba a la derecha, 50px abajo a la derecha, 0px abajo a la izquierda
Guarde su configuración.
Luego actualice la configuración de su fila con un ancho personalizado.
Ancho personalizado: 100%
Ahora estamos listos para personalizar la configuración de la sección para agregar nuestro efecto de marco recortado con esos divisores de sección.
Abra la configuración de la sección y actualice lo siguiente:
Color de fondo: #222222
Estilo del divisor superior: vea la captura de pantalla
Color del divisor superior: #222222 (asegúrese de que coincida con el color de fondo de la sección)
Altura del divisor superior: 12vw (escritorio), 150 px (tableta y teléfono inteligente)
Disposición del divisor superior: En la parte superior del contenido de la sección
Estilo del divisor inferior: vea la captura de pantalla
Color del divisor inferior: #222222 (asegúrese de que coincida con el color de fondo de la sección)
Altura del divisor inferior: 12vw (escritorio), 150 px (tableta y teléfono inteligente)
Repetición horizontal del divisor inferior: 0,8x
Giro del divisor inferior: vertical y Disposición del divisor inferior horizontal
: En la parte superior del contenido de la sección
Ahora veamos el diseño final.
Consulte la publicación sobre la creación de diseños de marcos únicos para obtener más información sobre esta técnica de diseño.
Pensamientos finales
Estos diseños de suscripción por correo electrónico son realmente solo la punta del iceberg cuando piensas en todas las opciones de estilo disponibles en Divi. A propósito, mantuve los diseños lo suficientemente simples como para darte una idea general de lo que puedes hacer. Siéntase libre de explorar diseños más pulidos por su cuenta agregando nuevas fuentes, colores y efectos de desplazamiento. Y no te olvides de divertirte en el proceso.
Espero escuchar de usted en los comentarios.
¡Salud!