En el tutorial de hoy, le mostraremos cómo crear formularios de suscripción a pantalla completa, transparentes y de ancho completo con Bloom , un complemento que lo ayuda a agregar formularios de suscripción a su sitio web. Lo guiaremos, paso a paso, a través del proceso de diseño y configuración de dos formularios de suscripción de ejemplo. Si sigue esta publicación detenidamente, podrá crear los formularios de suscripción transparentes usted mismo y usarlos en cualquier sitio web que tenga instalado el complemento Bloom, ya sea su propio sitio web o el de un cliente.
Tener uno o varios formularios de suscripción en su sitio web es algo que no solo lo ayuda a mantenerse en contacto con sus visitantes, sino también a interactuar con ellos. Es difícil encontrar un sitio web que no tenga un formulario de suscripción hoy en día debido a los datos orientados a resultados que trae. Al obtener la dirección de correo electrónico de sus visitantes en el momento y lugar correctos, estará un paso más cerca de conocerlos y convertirlos en clientes y/o visitantes leales.
Sin embargo, si prefiere apartarse de los formularios de suscripción estándar, puede optar por un formulario de suscripción de pantalla completa, transparente o de ancho completo. Le mostraremos los dos ejemplos de antemano.
Ejemplo 1
Ejemplo 2
Creación de un formulario de suscripción transparente y de pantalla completa con Bloom: consejos
El complemento Bloom ofrece varias posibilidades para diseñar sus formularios de suscripción y atraer a su audiencia de la manera que mejor funcione para usted y sus visitantes. Además de las plantillas opcionales existentes que ofrece Bloom, también hay opciones integradas que facilitan la creación de diseños personalizados. También puede agregar un código CSS personalizado para obtener resultados más avanzados.
Sin embargo, cuando intente realizar algunos ajustes en el diseño a través del código CSS, hay algunas cosas que debe tener en cuenta para no perder tiempo tratando de hacer que las cosas funcionen.
Active primero el formulario de suscripción
Cuando está diseñando su formulario de suscripción, tiene un botón de vista previa en la parte superior de la pestaña Diseño. Esto le ayuda a obtener una vista previa de los resultados que obtiene mientras diseña. Aunque los cambios de diseño incorporados también cambian automáticamente en la vista previa, eso no cuenta para el código CSS. Si está realizando ciertos cambios a través de su campo CSS personalizado dentro de su pestaña Diseño, es posible que algunos de esos cambios no se apliquen al formulario de vista previa, pero sí al formulario de suscripción en su sitio web.
Es por eso que primero deberá activar el formulario de suscripción y hacer que se aplique a una de sus páginas. Para asegurarse de que sus visitantes no se enfrenten al formulario de suscripción mientras aún está trabajando en él, puede obtener una vista previa en una nueva página que no haya compartido con sus visitantes.
(O, por supuesto, en un sitio de ensayo/prueba).
Comience creando una nueva página y dándole un nombre. No tienes que poner nada en esa página; simplemente tiene que existir. Mientras diseña su formulario de suscripción, vaya a la pestaña Configuración de pantalla. Establezca el tiempo de demora en 1 segundo para que no tenga que esperar el formulario de suscripción cada vez que desee verificar el resultado.
Desplácese hacia abajo en esa pestaña y cuando se encuentre con la opción ‘Mostrar en’, seleccione ‘Página’. Una vez que haya seleccionado ‘Página’, verá aparecer una lista de páginas que están activas en su sitio web. Elija la página que ha creado recientemente. Asegúrese de mostrar el formulario de suscripción solo en esa página.
Realice los cambios de acuerdo con su formulario activado
Los cambios que realice con el código CSS no se aplican a todos los formularios de suscripción; solo se aplican a ese formulario de suscripción en el que está trabajando específicamente. Es por eso que algunas de las clases que necesitamos serán únicas.
Más adelante en esta publicación, le mostraremos cómo hacerlo para los ejemplos que estamos recreando.
Comience a crear el primer ejemplo
El primer ejemplo que le mostramos sobre cómo recrear es el de la pantalla de impresión anterior. Puede ver que el formulario de suscripción parece estar en pantalla completa. Aunque pueda parecer así, solo hemos creado un formulario de suscripción transparente y hemos cambiado los colores de fondo.
Agregar el formulario de suscripción
Comencemos agregando un nuevo formulario de suscripción a su sitio web yendo a su panel de control de WordPress> Bloom> Haga clic en ‘Nueva opción’ en la esquina derecha> Seleccione ‘Ventana emergente’.
Escriba un nombre para su formulario y seleccione su proveedor de correo electrónico en la pestaña Configuración. Cuando haya terminado, puede ir a la pestaña Diseño. Esa es la pestaña principal en la que nos centraremos en esta publicación. Seleccione una de las plantillas que se proporcionan y continúe. Para los ejemplos que estamos haciendo, estamos eligiendo el primero de la fila.
Configuración de diseño
Cuando obtenga una vista previa del formulario en la pestaña Diseño sin realizar ninguna modificación, verá aparecer el siguiente formulario de suscripción:
Se ve bastante diferente de cómo se verá el resultado, pero también puede notar que la base del formulario de suscripción es la misma.
Título y mensaje de suscripción
Ahora, para que nuestro formulario de suscripción se parezca al ejemplo que le mostramos anteriormente, comience por realizar las siguientes modificaciones en la configuración de diseño estándar del Título de la opción y el Mensaje de la opción dentro de la pestaña Diseño:
- Color del texto: #FFFFFF
- Estilo de texto: Negrita
- Orientación del texto: Centro
Configuración de imagen y estilo Optin
Desplácese hacia abajo en la misma pestaña y realice los siguientes ajustes en la configuración de la imagen, el estilo Optin y el estilo del borde:
- Orientación de la imagen: Sin imagen
- Color de fondo: Claro
- Fuente del encabezado: Lato
- Fuente del cuerpo: Lato
- Color del texto: Texto oscuro
- Estilo de esquina: Esquinas cuadradas
- Orientación del borde: Borde superior + inferior
- Color del borde: #FFFFFF
- Estilo de borde: borde discontinuo
Estilo de borde, configuración de formulario y estilo de formulario
Continúe desplazándose hacia abajo y realice las siguientes modificaciones en la configuración del formulario y el estilo del formulario también:
- Orientación del formulario: formulario en la parte inferior
- Campo(s) de nombre: Sin campo de nombre
- Texto del correo electrónico: Correo electrónico
- Texto del botón: ¡SUSCRÍBETE!
- Orientación de campo de formulario: Campos de formulario apilados
- Estilo de esquina de campo de formulario: esquinas redondeadas
- Color del texto del formulario: Texto claro
- Color de fondo del formulario: Claro
- Color del botón: #6a18a0
- Color del texto del botón: Claro
Estilo de borde de forma
El último cambio manual que tendrá que realizar en el formulario de suscripción es elegir el estilo del borde del formulario que es, en este caso, una línea recta.
CSS personalizado
Por último, necesitamos hacer algunas modificaciones de CSS en el formulario para configurar todo en su lugar. Copie y pegue las siguientes líneas de código en el campo CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
.et_bloom .et_bloom_popup:after{background: -webkit-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;background: -o-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;background: -moz-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;background: linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important; }.et_bloom .et_bloom_form_container {background-color: none !important;background: none !important;-moz-box-shadow: none !important;box-shadow: none !important;-webkit-box-shadow: none !important;}.et_bloom .et_bloom_form_container .et_bloom_form_content{ background-color: none !important;background: none !important;}.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {background: none !important;}.et_bloom .et_bloom_form_container.et_bloom_form_right {background-color: none !important;background: none !important;}.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {background-color: none !important;background: none !important;}.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {font-size: 50px !important;text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);}.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {font-size: 30px !important;text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);}.et_bloom .et_bloom_form_container.et_bloom_form_text_light .et_bloom_form_content input {text-align: center !important;color: #FFFFFF !important;}.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {width: 50% !important;margin-left: 25%;}.et_bloom .et_bloom_form_container.et_bloom_rounded button {width: 50% !important;margin-left: 25%;}.et_bloom .et_bloom_form_container .et_bloom_form_content {padding: 0 0 40px 0 !important;} |
Cambie el código de acuerdo con su propio formulario de suscripción de Bloom
En el código que hemos compartido contigo, tendrás que hacer tres ajustes. Algunas clases de CSS solo se aplican a un formulario de suscripción, por eso necesitaremos saber en qué formulario de suscripción estamos trabajando. Lo único que tendrás que hacer es cambiar un número tres veces:
El número al final de la parte resaltada en la pantalla de impresión anterior es 6 porque es el sexto de la fila:
Entonces, dependiendo de qué posición tenga dentro de tu lista de formularios, tendrás que ajustar el número.
Resultado final
Si obtiene una vista previa de su formulario de suscripción ahora, notará que se han realizado todas las modificaciones y que su formulario de suscripción se ve así:
Configuración de pantalla
Ahora puede ir a la configuración de Pantalla y hacer las modificaciones necesarias para configurar su formulario de suscripción de Bloom. No vamos a entrar en detalles más profundos, ya que esta publicación solo se ocupará de la parte del diseño de estos formularios de suscripción.
Comience a crear el segundo ejemplo
El siguiente ejemplo que le mostraremos no es de pantalla completa sino de ancho completo. Para demostrar cómo podemos lograr el resultado, usaremos el mismo formulario de suscripción que en el ejemplo anterior, pero haremos algunos cambios pequeños y agregaremos un código CSS diferente.
Configuración de diseño
Solo hay tres cosas que necesitaremos hacer de manera diferente dentro de las configuraciones de diseño integradas. Recordar; estamos usando el formulario de suscripción que hemos creado en el ejemplo anterior. Aparte de las tres cosas que vamos a mencionar, se aplican las mismas configuraciones integradas que para el primer ejemplo. Lo primero que tendrá que hacer es poner la Orientación del borde en ‘Sin borde’.
Desplácese hacia abajo y seleccione ‘Texto oscuro’ para el Color del texto del formulario y use ‘#724501’ como Color del botón.
CSS personalizado
Por último, necesitaremos agregar algunas líneas de código CSS al cuadro CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
|
@media only screen and (min-width: 981px){ .et_bloom .et_bloom_popup:after{ margin-top: 12% !important; height: 50% !important; background: url(""); border-top: 3px solid #b29470 !important; border-bottom: 3px solid #b29470 !important; box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); -webkit-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); -moz-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); }.et_bloom .et_bloom_form_container .et_bloom_close_button {right: -250px !important;top: -20% !important;}}@media only screen and (max-width: 981px){.et_bloom .et_bloom_popup:after{background: url("");} }.et_bloom .et_bloom_form_container .et_bloom_popup_input {background: #FFFFFF !important;}.et_bloom .et_bloom_form_container {background-color: none !important;background: none !important;-moz-box-shadow: none !important;box-shadow: none !important;-webkit-box-shadow: none !important;}.et_bloom .et_bloom_form_container .et_bloom_form_content {background-color: none !important;background: none !important;}.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {background: none !important;}.et_bloom .et_bloom_form_container.et_bloom_form_right {background-color: none !important;background: none !important;}.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {background-color: none !important;background: none !important;}.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {font-size: 50px !important;text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);}.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {font-size: 30px !important;text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);}.et_bloom .et_bloom_form_container.et_bloom_form_text_dark .et_bloom_form_content input {text-align: center !important;color: #FFFFFF !important;}.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {width: 50% !important; margin-left: 25%;}.et_bloom .et_bloom_form_container.et_bloom_rounded button {width: 50% !important;margin-left: 25%;}.et_bloom .et_bloom_form_container .et_bloom_form_content {padding: 0 0 40px 0 !important;} |
Reemplazar imágenes de fondo
Lo último que deberá hacer es reemplazar las imágenes de fondo que está utilizando una de las URL en su carpeta wp-content o en otro lugar. La primera URL que está marcada en la pantalla de impresión a continuación se aplica al escritorio y la segunda a la tableta y el teléfono.
Resultado final
¡Y tu estas listo! Su segundo formulario de suscripción ahora debería verse así:
Pensamientos finales
Las posibilidades que tiene con bloom para crear hermosos formularios de suscripción con los que sus usuarios interactuarán son infinitas. Los que le mostramos cómo hacer en esta publicación son solo un ejemplo de cuán creativo puede ser. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!