homefinance blog
Agregar una ventana emergente activada a las publicaciones del blog parece ser algo muy inteligente. Es posible que los haya visto cuando lea otros blogs. A medida que el usuario corre a un cierto punto de publicación (generalmente al final), aparece una caja que contiene algunas exhortaciones. Todo el propósito de una ventana emergente activada es presentar una exhortación a los visitantes en el momento exacto en que desee que lo vean en la página. En resumen, es una excelente herramienta para mejorar las conversiones o obtener clientes potenciales. Por esta razón, muchos complementos de crecimiento de conversión (como Bloom u Optin Monster) le permiten hacer lo mismo.
En este tutorial, le mostraremos cómo agregar una ventana emergente activada a las publicaciones en su blog desde cero, sin un complemento. Para hacer esto, utilizaremos Divin Theme Builder para diseñar una ventana emergente que contenga una publicación postensociada y también una ventana emergente que incluya una opción de correo electrónico. El lanzamiento del desplazamiento se realizará utilizando un pequeño fragmento de jQuery. ¡Vamos a empezar! Tire del ojo con un vistazo rápido a las ventanas emergentes activadas que crearemos. Crearemos en la ventana emergente para revelar una publicación asociada (por categorías) como se ve a continuación.
Y también le mostraremos cómo agregar una opción de correo electrónico a la ventana emergente, como vimos aquí.
Descargue la publicación gratuita de Scroll Triged PopUp Div para poner su mano en la plantilla de publicación en este tutorial, primero tendrá que descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo ZIP y agregue uno de los archivos JSON al constructor de temas de portabilidad de Divic Builder de temas.
Pasemos al tutorial, ¿no? Lo que necesita para comenzar a comenzar, deberá instalar y activar el tema de Div. Asegúrese de tener la última división de división. Deberá descargar el cuarto paquete de constructor de temas, porque utilizaremos la plantilla de publicación prefabricada para ese paquete para este tutorial. También necesitará al menos algunas publicaciones de blog creadas para fines de prueba para la plantilla de publicación para mostrar los resultados. Después de eso, estás listo para irte. La creación de una ventana emergente activada al final de las publicaciones de su blog divide la plantilla de publicación del blog del paquete de cuarto generador desde el tablero de WordPress, navegue en Div> Temo Builder. Dentro del constructor de temas, seleccione el icono de portabilidad en la parte superior derecha de la página. En la ventana de portabilidad emergente, seleccione la pestaña Importar, elija el archivo teme-bonder-4-postemplate.json y haga clic en el botón Importar. (Este archivo de importación estará en la cuarta carpeta de paquete de constructor de temas) También puede seleccionar la opción para importar el encabezado y el sótano global como modelos estáticos.
Después de importar la plantilla, haga clic en el icono para editar el área de cuerpo personalizada.
Esto lo llevará al editor de apariencia de la plantilla del cuerpo, donde agregaremos las ventanas emergentes. El diseño de la ventana emergente activada con una publicación asociada en las categorías emergentes estará contenido por una fila. Por lo tanto, una vez que hayamos instalado la funcionalidad emergente, puede completar la fila con cualquier módulo para crear cualquier contenido que desee. Para este primer ejemplo, crearemos una ventana emergente con una publicación asociada en categorías. De esta manera, cuando un visitante corre hasta la parte inferior del puesto, recibirá un puesto asociado en una ventana emergente. Agregue la fila con una columna primero agregue una fila con una columna justo debajo de la fila que contiene el módulo de publicación en la aparición de la plantilla de publicación.
Configuración de fila Antes de agregar un módulo, actualice la configuración de la fila de la siguiente manera:
Color de fondo: #ffffff
El ancho de la canaleta: 1
Ancho: 300 PX (escritorio), 200 PX (teléfono)
Revestimiento: 20 px arriba, 0 px abajo
Box Shadow: Ver captura de pantalla
Agregue un módulo de texto después de personalizar la configuración de la fila, agregue un módulo de texto en una fila. Esta será el área del título de nuestra publicación relacionada.
Contenido Actualizar el contenido del cuerpo con el texto “Publicación asociada”.
Diseñe y luego actualice la configuración de diseño de la siguiente manera:
Texto de fuente: Heebo
Text -Text Style: TT
Color de texto de texto: # F94857
Alineación de texto: Centro
Agregue un módulo de blog en el módulo de texto, agregue un módulo de blog.
Contenido Debido a que queremos mostrar solo una publicación asociada, limitar el número de publicaciones a una e incluir la “categoría actual”, de modo que la publicación que aparece en la ventana emergente para compartir la misma categoría de publicación real que se muestra en la plantilla . Actualizar lo siguiente: Número de publicaciones: 1
Las categorías incluyen: categoría actual
Elementos En el grupo de opciones de opciones, asegúrese de mostrar solo la imagen presentada. Esconder cualquier otra cosa.
Diseño en la pestaña Diseño, actualice lo siguiente:
Fuente del título: Heebo
Fuente de peso del título: Ultra Bold
Título Tamaño del texto: 16 PX
Altura de la línea de título: 1.4em
Revestimiento: 5% más, 5% izquierda, 5% derecho
Configuración de fila avanzada CSS CSS, CSS personalizado e Índice Z En la pestaña Avanzada, necesitamos ofrecer nuestra clase de fila A CSS, un poco de CSS personalizado y actualizar el índice Z para que la ventana emergente permanezca por encima de la otra en la página.
Este paso ocultará la fila de vista cuando use el generador visual en el frente. Por lo tanto, puede ser mejor implementar una vista de estructura alámbrica antes de actualizar estas opciones. Una vez que llegue al modo de vista de estructura alámbrica, abra la configuración de línea hacia atrás y agregue la siguiente clase CSS:
Clase CSS: después de la extracción
Luego agregue los siguientes CSS personalizados al elemento principal: Publicación: fijo;
Abajo: 0%;
Derecha: -300px;
Y actualizar el índice z:
IND ÍNDICE: 999
Agregue los divisores como puntos de activación de desplazamiento en este momento, nuestra ventana emergente está lista. Ahora debemos decidir dónde agregar los puntos de inicio en la plantilla de publicación, para que el usuario se mueva a estos puntos, la ventana emergente se mostrará o oculta. Los puntos de activación de desplazamiento estarán determinados por un elemento con una clase CSS. Dado que queremos que el punto de disparo de desplazamiento esté en la parte inferior de la publicación, podemos usar un divisor con una clase CSS como elemento del disparador de desplazamiento. Agregamos un módulo divisor directamente debajo del módulo contenido de poste.
Luego agregue la siguiente clase CSS:
Clase CSS: Post -Waypoint
Fue fácil. Agregue el punto de activación de desplazamiento # 2 ahora, para agregar el segundo punto de activación (el que ocultará la ventana emergente más abajo en la página), copie el módulo divisor que se acaba de crear.
Luego péguelo a un lugar a continuación en la plantilla de publicación donde desea que se cierre la ventana emergente (o oculta). Para este ejemplo, lo agrego directamente en el módulo del blog de publicaciones relacionadas y justo por encima de la sección de comentarios de la plantilla de publicación.
Agregue el código personalizado con el módulo de código, todo lo que queda por hacer para que esta ventana emergente activada se ejecute a trabajar es un código pequeño. Continúe y agregue un módulo de código a la plantilla de publicación.
Luego pegue el siguiente código en el cuadro de código:
.Post-fila {
Transición: todos .4s;
}
.post-rock.show-pos {
Derecha: 0px;
}
JQuery (documento) .Ready (function ($) {
$ (‘. Post -waypoint’). WayPoint (function () {$ (‘. Post-Row’). Togglecass (‘Show-Post’);
}, {offset: ‘97%’});
});
Resultado para ver el resultado, visite una de las publicaciones de blog y desplácese hacia abajo. Debería ver las ventanas emergentes para publicar cuando llegue a la parte inferior del contenido de publicación. Continúe desplazándolo para ocultarlo inmediatamente después de la sección de publicación postalada.
Agregar una opción de correo electrónico a la ventana emergente activó la ventana emergente para la publicación es interesante, pero es posible que desee una opción de correo electrónico. Esto es fácil de hacer. De hecho, incluso podemos usar la opción de correo electrónico ya diseñada en la apariencia del sótano prefabricado en esta plantilla. Guarde el correo electrónico de correo electrónico Optin en la biblioteca de división Guarde el aspecto y salga al generador de tareas. Luego haga clic para editar la apariencia del sótano personalizado.
Encuentre el módulo de correo electrónico y guárdelo en la biblioteca de la Divica.
Agregue la opción de correo electrónico guardada en la fila emergente ahora regrese al cuerpo personalizado del cuerpo y agregue el correo electrónico guardado en la misma fila que usa como ventana emergente. Recuerde, cualquier cosa dentro de esa fila se mostrará como contenido emergente.
Como no usa el módulo de texto y blog, puede deshabilitarlos para no ser vistos en el frente. Configuración de Optin para correo electrónico Una vez que se instala la opción de correo electrónico y los otros módulos están deshabilitados, actualice la configuración de la opción de correo electrónico de la siguiente manera:
Título: “¿Te gustó este artículo?”
Cuerpo: “¡Únete al boletín informativo!”
Luego agregue el siguiente revestimiento:
Revestimiento: 5% inactividad, 20 px correcto
El resultado ahora es verificar el resultado en una publicación en vivo. Finales Las ventanas emergentes activadas definitivamente podrían ser un activo valioso para su blog. Ofrecen una forma discreta de capitalizar a los clientes potenciales.Use una ventana emergente similar para mantenerlos involucrados en su sitio o use una opción de correo electrónico para ayudar a desarrollar su lista.Y con Div, puede agregar casi cualquier otro contenido que se le ocurra.Y puede decidir exactamente cuándo desea que el visitante vea esas ventanas emergentes que son bastante fuertes.Espero que sea útil para su propio blog o el próximo proyecto.Espero tener noticias suyas en los comentarios a continuación.¡Suerte!
