5 modelos de inscripción de correo electrónico que puede crear con el módulo de correo electrónico de correo electrónico

Todos amamos a los nuevos suscriptores a nuestra lista de correo electrónico. Y una de las principales formas de obtener nuevos suscriptores es proporcionar a sus visitantes un formulario de registro de correo electrónico bien diseñado. Por lo tanto, en este tutorial, le mostraré cómo hacer cinco modelos diferentes con el módulo de correo electrónico de correo electrónico para estimular su imaginación sobre lo que es posible con este módulo poderoso y flexible. Eye es una vista previa de los cinco modelos de correo electrónico de correo electrónico que nos acercaremos hoy. Opt-In # 1 Sombra Stacks

Comience a diseñar # 1 # 2 optando grande y mínimo

Comience a diseñar # 2 # 3 Skin-opt-In

Comience a diseñar # 3 # 4 firmar en la oferta de libros

Iniciar Diseño # 4 # 5 Inscripción al marco de corte

Comience a diseñar # 5 Lo que necesita para comenzar a suscribirse a nuestro canal de YouTube para este tutorial, todo lo que necesita es Div. Construiremos cada uno de ellos desde cero, para que ya no necesitemos una apariencia prefabricada. Sin embargo, usaré algunas imágenes de algunos de nuestros paquetes de apariencia, pero puede usar las suyas si lo desee. También es importante saber que no podrá ver los formularios de formularios en el sitio web en vivo hasta que asigne una lista de proveedores / correo electrónico a su módulo de registro de correo electrónico. Puede hacer esto en la configuración de optimización de correo electrónico en la cuenta de correo electrónico.

¡Ahora pasemos a esos modelos! Opt-In # 1 Sombra Stacks

Este diseño agrega dos sombras de caja al módulo de correo electrónico de correo electrónico para un efecto de apilamiento único que hace que el formulario aparezca. La primera sombra de la caja se agrega al módulo de registro por correo electrónico y la segunda sombra de la caja 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 con una columna y agregue el módulo de correo electrónico en una fila. Abra la configuración de inscripción al correo electrónico y actualice lo siguiente: Color de fondo: # 1A0A38 Apariencia: Cuerpo en la parte superior, forma en los campos inferiores Corronías redondeadas: 0 PX Fuente de orientación de texto: Título de tamaño fácil: 36 PX El color del texto del texto El botón: #ffffff el color del fondo de fondo: # 00AC69 Ancho del botón: 0 PX Button Rayo: 0 PX Finamiento personalizado: 3VW hacia arriba, 3VW hacia abajo, 5VW izquierda, 5VW Derecha
Ahora agregemos nuestra primera capa de sombra de caja detrás de nuestro módulo de correo electrónico. Sombra de la caja: ver Captura de pantalla Posición horizontal de la caja: 25 PX Box Sombra Posición vertical: -25px Color de sombra: RGBA (26,106.0.82)

Ahora agregemos un pequeño fragmento CSS personalizado para eliminar el relleno izquierdo que se agrega de forma predeterminada. Vaya a la pestaña avanzada y agregue el siguiente CSS al formulario de inscripción. ROLDE-LEFT: 0PX! IMPORTANTE;

Se encarga de la configuración del módulo de registro de correo electrónico. Ahora editemos nuestro turno. Abra la configuración de la fila y actualice lo siguiente: Ancho personalizado: 600 px trenza personalizada: 25 px arriba, 0 px abajo, 25 px ancho del borde derecho: 25 px borde inferior: rgba (0.0,0,0) ancho de cereza izquierda: 25 px Color del borde izquierdo: RGBA (0.0,0,0) Ahora podemos agregar la sombra de la caja en una fila. Sombra de la caja: ver Captura de pantalla Posición horizontal de la caja: 50 PX Box Sombra Posición vertical: -50px Potencia de la sombra de la caja: -25px Color de sombra: RGBA (26,10,56.55)

Ahora, revisemos el diseño final.

# 2 ocho pulgadas grandes y mínimas

Este diseño de registro de correo electrónico es mínimo, limpio y grande. Los campos de formulario son escalas con el tamaño del navegador para que se vean muy bien en todos los dispositivos. Y no es demasiado grande que el usuario fuere a ejecutar. Aquí le mostramos cómo hacerlo. Primero cree una nueva sección con una fila con una columna y agregue el módulo de correo electrónico en una fila.

Abra la configuración de registro por correo electrónico y actualice el contenido para incluir el título y el texto del sótano.

Luego actualice el fondo con un color o imagen oscura: Color de fondo: # 121212 Imagen de fondo: esto es opcional. Utilizo uno de los paquetes de apariencia de podcast antes de continuar con la pestaña de diseño para varias personalizaciones, 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% Consejo: El uso de un ancho 100% personalizado es una excelente manera de asegurarse de que su diseño no obtenga un margen recto o izquierdo en el móvil. Si usa la opción “Hacer el ancho completo”, el ancho máximo será del 89%, por lo que aún tendrá bordes móviles. Ahora, vuelva a la configuración del módulo de registro por correo electrónico y actualice el siguiente diseño: apariencia : Cuerpo de arriba, forma en la parte inferior Color de fondo Forma de color: RGBA (0.0,0,0) Cornillas redondeadas Campos: 0 PX Campos Margen inferior Ancho: 2 PX Campos de borde inferior: #FFFFFFF Faff Orientación de texto: Título de la fuente Centro: Lato Título: Lato Título Fuente de peso: Título fácil Fuente Estilo: TT Tamaño de texto Título: 4VW Título de la línea Altura: 1em Color del campo Texto: #ffffffffffffffffffffffffft font: lato Fire Font Peso: Tamaño de luz Tamaño de luz Campo: 3.5VW Espacio de letras de campo: 0.1EM de la altura de Línea de campo: 1.3em
Espaciado de las letras del cuerpo: 0.5em Botón de tamaño de texto: 4 VW Botón Chener: 0 PX Distancia entre letras y botones: 0.1em Fuente Botón: Lato Fuente Peso: Luz de luz Lingo personalizado: 10 VW hacia arriba, 10 VW Down, 10 VW, 10 VW Derecho

Tenga en cuenta el uso de la unidad de longitud VW para el tamaño de la fuente combinada con la unidad de longitud EM para la altura de la línea y el espacio de las letras. Esto permite que el texto y el diseño se adapten perfectamente al ajustar su navegador. El último paso incluye algunos fragmentos CSS personalizados para pulir el diseño. Vaya a la pestaña avanzada y agregue los siguientes CSS personalizados en campos para el formulario de registro: Fuente del tamaño: 3.5VW;

Esto permitirá que el tamaño del texto cuando se escriba coincida con el texto sustituto en los campos de formulario. Luego agregue un margen personalizado sobre el botón para darle un pequeño espacio de respiración. Agregue lo siguiente debajo del botón de suscripción: Margen-Top: 3.5VW;
Ahora, revisemos el diseño final.

# 3 Skin-Eight
El próximo diseño definitivamente será una solución popular para empresas y blogs que desean guardar un espacio vertical en sus publicaciones o en las páginas de destino. Incluso si el módulo de registro de correo electrónico de la división es el mejor para formas verticales más tradicionales, puede convertir la forma en una forma horizontal débil, con solo un pequeño fragmento CSS.
Aquí le mostramos cómo hacerlo. Cree una nueva sección con una fila con una columna y agregue el módulo de correo electrónico en una fila. Abra la configuración de registro al 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 color del botón, de la siguiente manera: Color de fondo: # 54677D Apariencia: Cuerpo en la parte superior, forma en el texto inferior Orientación: Centro de fondo de fondo: # B0C94F Botón Ancho: 0 PX

Ahora es el momento de CSS personalizado. Como queremos el diseño delgado del formulario solo en el escritorio (y no en el móvil), agregaremos CSS a la página (en la configuración de la página) utilizando una ID personalizada para apuntar al estilo de estilo. Para hacer esto, vaya a la pestaña Avanzada y brinde al módulo de registro una identificación personalizada. ID CSS: débil Esto se usará para apuntar a este formulario con CSS externo que agregaremos a la página. Ahora abra la configuración de la página Div Div Builder y agregue el siguiente CSS a la pestaña avanzada. @Media (min-width: 980px) {#skinny.et_pb_newsletter .et_pb_newsletter_fields {

Flex-Wrap: Nowrap! IMPORTANTE;

}

#skinny.et_pb_newsletter .et_pb_newsletter_fields>* ​​{

Flex-Básis: 23%;
}
}
#skinny .et_pb_newsletter_form {
Relleno-izquierda: 0px;
}
Debido a que la división ya usa Flex para estilizar la forma en el Backynd, este CSS elimina la propiedad Flex-Wrap que determina la alineación vertical de los campos de forma. El resultado es un aspecto horizontal de los campos de forma. El ajuste de la propiedad de base flex al 23% prácticamente establece el ancho de cada campo de formulario. Y debido a que agregué CSS a una consulta de medios, el diseño solo ocurrirá en el escritorio con el aspecto predeterminado del formulario que se muestra en el móvil. Aquí está el diseño final.
# 4 Registro de la oferta del libro
Este diseño incorpora algunas imágenes en el módulo de registro de correo electrónico para promover una oferta de libro gratuita para el registro. Para hacer esto, todo lo que tiene que hacer es agregar una imagen utilizando el editor WYSIWYG BRISTURADO para agregar una descripción y contenido de activos. Es cierto que puede hacer el mismo diseño combinando el módulo de registro con otros módulos seguidos con dos columnas, pero pensé que sería útil mostrar cómo hacer todo en el mismo módulo. Aquí le mostramos cómo hacerlo. Cree una nueva sección con una fila con una columna y agregue el módulo de correo electrónico en una fila. Abra la configuración de inscripción al correo electrónico y manténgase en la pestaña de contenido. Bajo la descripción, acorta el texto predeterminado a solo unas pocas oraciones. Luego agregue una imagen de su biblioteca de medios haciendo clic en el botón Agregar soporte de medios. Asegúrese de que la imagen no tenga más de 200px de ancho. Para este ejemplo, uso el tamaño de imagen promedio.
En el sótano, agregue algunas oraciones para el contenido del texto del sótano, luego haga clic en el botón Agregar soporte de medios para agregar una imagen de logotipo en el texto (esto es opcional, por supuesto).
Para asegurarse de que la imagen esté centrada, establezca la opción de alineación en el centro cuando agregue la imagen desde la biblioteca de medios.

Ahora está listo para actualizar el resto del diseño. Comience dándole al módulo una imagen de fondo y un gradiente de fondo sobre la imagen para hacer que el texto sea más legible. Imagen de fondo: [Agregar imagen] Color izquierdo del gradiente de fondo: RGBA (0.0,0,5.5) Color derecho del gradiente de fondo: RGBA (0.0,0,5) Coloque el gradiente de arriba arriba imagen de fondo: Sí


Luego actualice el resto del diseño de la siguiente manera: El color del texto del botón: # 333333 El color del fondo del botón: # ffcb7a El ancho del nudo: 0 px distancia entre letras y botones: 5 px de peso de fuente : Ultra Bold Font Style: TT Ancho: 700 PX Alineación del módulo: Centro de revestimiento personalizado: 3VW arriba, 3VW hacia abajo, 3VW izquierda, 3VW de diseño final a la derecha.

# 5 Inscripción al marco de firma

Esta simple técnica de diseño es una excelente manera de darle a su correo electrónico un aspecto único. El truco es usar separadores de secciones que tengan el mismo color que el fondo de la sección. Luego, al ajustar la altura de los separadores, puede superponer el formulario de registro por correo electrónico para cortar los bordes de una manera única para un hermoso efecto de clasificación. Aquí le mostramos cómo hacerlo. Cree una nueva sección con una fila con una columna y agregue el módulo de correo electrónico en una fila. Abra la configuración de registro al correo electrónico y le dé a su módulo un gradiente de fondo. Color izquierdo del fondo de fondo: # 8300E9 Color derecho del fondo Gradiente: # 06C8FF Tipo de gradiente: Radial Radial: Upper de izquierda

Luego actualice el resto del diseño de la siguiente manera: El peso de la fuente del título: Título del texto en negrita Título: 36 PX Ancho: 70% (escritorio), 100% (tableta y teléfono inteligente) Alineación del módulo: Centro de forro personalizado: 6VW , 6 VW a la izquierda, 6 VW, esquinas redondeadas a la derecha de 6 VW: 50 px arriba a la izquierda, 0 px a la derecha, 50 px hacia abajo, 0 px abajo a la izquierda

Guarde la configuración. Luego actualice la configuración con un ancho personalizado. Ancho personalizado: 100%

Ahora estamos listos para personalizar la configuración de la sección para agregar el efecto del corte de marco con esos separadores de la sección. Abra la configuración de la sección y actualice lo siguiente: Fondo de pantalla: # 222222 Estilo de divisor más alto: consulte Captura de pantalla El color del separador superior: # 222222 (asegúrese de que coincida con el color de fondo de la sección) 150 PX (tableta y teléfono inteligente) Disposición de divisor superior) : En la parte superior del contenido del estilo del divisor inferior: vea la captura de pantalla del divisor inferior: # 22222 (asegúrese de que coincida con el color de fondo de la sección) la altura del divisor inferior: 12VW (escritorio), 150 px ( Tableta y teléfono inteligente) Repetición horizontal del compartimento inferior: 0.8x Flip divisor inferior: vertical y horizontal La disposición del divisor inferior: en la parte superior del contenido de la sección, para verificar el diseño final.

Vea la publicación sobre la creación de modelos de cuadros únicos para obtener más información sobre esta técnica de diseño. Pensamientos finales Estos modelos de registro de correo electrónico son solo la punta del iceberg cuando piensa en todas las opciones de estilo disponibles dentro del DIV. Hemos mantenido intencionalmente proyectos lo suficientemente simples como para brindarle amplias líneas de lo que puede hacer. Siéntase libre de explorar modelos más pulidos por su cuenta agregando nuevas fuentes, colores y efectos flotantes. Y no olvides divertirte en este proceso. Espero tener noticias suyas en los comentarios. ¡Suerte!