Divi y sus opciones de posición fija te permiten hacer que cualquier elemento de tu página sea fijo. Esto le permite corregir 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 fijo a su plantilla de publicación de manera sutil, pero efectiva, para mantener ese formulario importante a 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!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Descargue la plantilla de publicación Sticky Email Optin GRATIS
Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Cómo cargar la plantilla de publicación con la opción de correo electrónico adhesivo en 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ás 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 de 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 prefabricada
Para este tutorial, vamos a utilizar 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 importar el archivo a Divi Theme Builder.
Aquí está cómo hacerlo…
- navega a Divi > Generador de temas.
- 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 del 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 adhesivo.
Para este ejemplo, queremos que la posición fija de la suscripción de correo electrónico en una sección para que el usuario no vea la suscripción de correo electrónico hasta que se desplace a la sección con la suscripción de correo electrónico fija. Sin embargo, debido a que la suscripción de correo electrónico está en su propia sección, la suscripción de 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 de correo electrónico se desplace 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 suscripción de correo electrónico a una fila nueva
Una vez que el estilo de 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 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 palo de la siguiente manera:
- Posición pegajosa: Stick to Bottom
- Límite fijo superior: Sección
Esto hará que la suscripción de 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 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:
- Diseño: cuerpo en la parte superior, formulario 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 al ver una publicación en otra ventana del navegador.
Agregar estilo de posición fija
Cuando la suscripción de 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 adhesivo) 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 este mismo proceso para agregar un estilo adhesivo a las siguientes opciones en la pestaña de diseño:
- Color del texto del título (adhesivo): #ffffff
- Color del cuerpo del texto (pegajoso): #ffffff
- Ancho máximo (adhesivo): 500 px
- Relleno (adhesivo): 18 px arriba, 30 px abajo, 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 emergente a la suscripción de correo electrónico fijo
Para agregar un efecto de ventana emergente flotante 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 Traducir eje Y (pegajoso): 85%
Esto traerá la suscripción de correo electrónico hacia abajo (fuera de la ventana gráfica) en un 85% de su propia altura, exponiendo solo lo suficiente de la suscripción de correo electrónico para que el usuario pueda pasar el cursor sobre el título.
Luego agregue un estado de desplazamiento a la opción de transformación para que la posición de traducción de transformación vuelva a su posición original al pasar el mouse:
- Transformar Trasladar el eje Y (pasar el mouse): 0%
Resultado
Aquí esta el resultado final.
Resultados finales
Aquí están las tres versiones de nuestro encabezado adhesivo que construimos.
Pensamientos finales
Afortunadamente, Divi facilita la adición de opciones de correo electrónico fijo a su sitio. Esto libera más tiempo para modificar el diseño de su elemento fijo para obtener formas más exclusivas de mostrar su formulario. Con suerte, esta técnica le será útil en los próximos proyectos de blog.
Espero escuchar de usted en los comentarios.
¡Salud!