Cómo crear una opción de correo electrónico pegajoso en Divi que llame la atención
Publicado: 2020-09-30Las opciones de posición adhesiva de Divi le permiten hacer que cualquier elemento de su página sea adhesivo. Esto le permite arreglar elementos en la página en ciertos intervalos a medida que el usuario se desplaza hacia abajo en la página para que permanezcan visibles por más tiempo. Y para los blogueros, tiene mucho sentido agregar una opción de suscripción de correo electrónico pegajoso a su plantilla de publicación de manera sutil, pero efectiva, para mantener ese formulario importante en la vanguardia.
En este tutorial, le mostraremos cómo agregar una suscripción de correo electrónico fijo a su plantilla de publicación de blog Divi que atraiga más atención y, con suerte, atraiga más clientes potenciales. ¡Incluso le mostraremos cómo agregar un efecto de desplazamiento emergente a la suscripción de correo electrónico fijo también!
¡Empecemos!
Vistazo
Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.
Descargue la plantilla de publicación Sticky Email Optin GRATIS
Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Cómo cargar la plantilla de publicación con la opción de correo electrónico fijo a su sitio
Para cargar la plantilla, navegue hasta Divi Theme Builder en el backend de su sitio web de WordPress.
Luego, en la esquina superior derecha, verá un ícono con dos flechas. Haga clic en el icono.
Vaya a la pestaña de importación, cargue el archivo JSON que pudo descargar en esta publicación y haga clic en 'Importar plantillas Divi Theme Builder'.
Una vez que haya cargado el archivo, notará una nueva plantilla con una nueva área del cuerpo que se ha asignado a Todas las publicaciones. Guarde los cambios de Divi Theme Builder tan pronto como desee que se active la plantilla.
Vayamos al tutorial, ¿de acuerdo?
Parte 1: Importar la plantilla de publicación de blog prediseñada
Para este tutorial, usaremos la plantilla de publicación de blog para el paquete de diseño de consultor de negocios de Divi, que puede descargar de esta publicación de blog.
Una vez que descargue el archivo zip, deberá descomprimirlo e importarlo al Divi Theme Builder.
He aquí cómo hacerlo ...
- navegue a Divi> Theme Builder.
- Haga clic en el icono de portabilidad en la parte superior derecha.
- Seleccione la pestaña de importación en la ventana emergente de portabilidad.
- Elija el archivo json del archivo que descargó.
- Haga clic en el botón Importar.
Parte 2: Agregar la opción de correo electrónico fijo a la plantilla
Una vez que se haya importado el archivo JSON, haga clic en el icono de edición para editar el diseño de la plantilla de cuerpo personalizado.
En la parte inferior del diseño de la plantilla de publicación, encontrará la sección con el formulario de suscripción de correo electrónico que usaremos para nuestra suscripción de correo electrónico fijo.
Para este ejemplo, queremos que la posición fija de la suscripción por correo electrónico en una sección para que el usuario no vea la suscripción por correo electrónico hasta que se desplace a la sección con la suscripción por correo electrónico adhesivo. Sin embargo, debido a que la suscripción por correo electrónico se encuentra en su propia sección, la suscripción por correo electrónico no tendrá suficiente espacio para moverse. Por lo tanto, debemos llevarlo a la sección anterior que contiene la sección de comentarios para que la suscripción por correo electrónico se coloque sobre esa sección antes de descansar en su lugar original.
Agregar nueva fila en la sección anterior
Para hacer esto, cree una nueva fila de una columna directamente debajo de la fila que contiene el módulo de comentarios.
Agregar estilo de fila
Luego abra la configuración de la nueva fila y agregue un color de fondo de la siguiente manera:
- Color de fondo: # 282828
En la pestaña de diseño, actualice el siguiente tamaño y espaciado de la fila:
- Ancho: 100%
- Ancho máximo: 100%
- Margen: 15vw superior
- Relleno: 0px arriba, 0px abajo
Mover la suscripción de correo electrónico a la fila nueva
Una vez que el estilo de la fila esté en su lugar, mueva la suscripción de correo electrónico en la sección inferior a la nueva fila que acaba de crear.
Elimina la sección inferior (ya no la necesitamos).
Actualizar la suscripción de correo electrónico con posición fija
Luego, abra la configuración para la suscripción de correo electrónico ahora dentro de la nueva fila y actualice las opciones de posición del stick de la siguiente manera:
- Posición adhesiva: pegarse a la parte inferior
- Límite de adherencia superior: sección
Esto hará que la suscripción al correo electrónico se quede en la parte inferior de la ventana del navegador al desplazarse por la sección antes de detenerse en su fila principal.
Actualizar el estilo de suscripción de correo electrónico
En la pestaña de diseño, actualice el diseño de la suscripción de correo electrónico de la siguiente manera:
- Disposición: cuerpo en la parte superior, forma en la parte inferior
Luego actualice el siguiente estilo:
- Tamaño del texto del título: 32px
- Ancho máximo: 600px
- Alineación del módulo: centro
Luego, establezca el estilo de animación en ninguno.
Resultado
En este punto, podemos verificar el resultado viendo una publicación en otra ventana del navegador.
Agregar estilo de posición fija
Cuando la suscripción por correo electrónico está en la posición fija, podemos agregar un estilo específico al módulo que solo se aplicará al estado fijo. Esto nos permite agregar diferentes esquemas de color para compensar el fondo blanco para que se destaque un poco más.
Para agregar un color de fondo diferente para el estado fijo, abra la configuración de suscripción de correo electrónico y seleccione el icono de miniatura (icono fijo) junto a la opción de fondo. Luego haga clic en la pestaña adhesiva y agregue el siguiente color de fondo:
- Color de fondo (pegajoso): # 282828
Continúe con este mismo proceso para agregar un estilo pegajoso a las siguientes opciones en la pestaña de diseño:
- Color del texto del título (pegajoso): #ffffff
- Color del texto del cuerpo (pegajoso): #ffffff
- Ancho máximo (pegajoso): 500px
- Relleno (adhesivo): 18 px en la parte superior, 30 px en la parte inferior, 30 px a la izquierda, 30 px a la derecha
Resultado
Ahora veamos el resultado en una publicación en vivo.
Agregue el efecto emergente flotante a la suscripción de correo electrónico fijo
Para agregar un efecto de ventana emergente en la suscripción de correo electrónico fijo, abra la configuración de suscripción de correo electrónico y actualice la traducción de transformación de palo de la siguiente manera:
- Transformar el eje Y de la traducción (pegajoso): 85%
Esto hará que la suscripción de correo electrónico se reduzca (fuera de la ventana gráfica) en un 85% de su propia altura, exponiendo lo suficiente de la opción de correo electrónico para que el usuario pueda desplazarse sobre el título.
Luego, agregue un estado de desplazamiento a la opción de transformación para que la posición de conversión de transformación vuelva a su posición original al desplazar el cursor:
- Transformar el eje Y de traslación (desplazamiento): 0%
Resultado
Aquí esta el resultado final.
Resultados finales
Aquí están las tres versiones de nuestro encabezado fijo que creamos.
Pensamientos finales
Afortunadamente, Divi facilita la adición de suscripciones de correo electrónico fijo a su sitio. Esto libera más tiempo para ajustar el diseño de su elemento adhesivo y obtener formas más exclusivas de mostrar su formulario. Con suerte, esta técnica le servirá bien en los próximos proyectos de blogs.
Espero tener noticias tuyas en los comentarios.
¡Salud!