Cómo crear una ventana emergente de artículos relacionados

Cree una ventana emergente al final de un artículo para mostrar a los usuarios artículos relacionados.

Aprenderá a crear una ventana emergente que:

1. Es de ancho completo
2. Anima al visitante a quedarse después de leer un artículo.
3. Proporciona una mejor experiencia de usuario a sus visitantes.

---

Diseñe la ventana emergente y su contenido

1. Ir Plantillas> Ventanas emergentes> Agregar nuevo y dale un nombre a tu nueva ventana emergente. (Un método alternativo es presionar CMD + E o CTRL + E abrir Descubridor, buscar Surgir, escoger Agregar nueva ventana emergentey darle un nombre.)
2. Elija una plantilla emergente prediseñada o cierre la superposición de la biblioteca y diseñe su ventana emergente desde cero. Para este ejemplo, diseñaremos el nuestro.
3. En el Configuración emergente, debajo Diseño, cambiar el Anchura a 100vw, por lo que se mostrará en el 100% del ancho de la ventana gráfica.
4. A continuación, configure el Diseño> Posición horizontal a Centrar, y el Diseño> Posición vertical a Fondo.
5. Haga clic en el icono Agregar nueva sección para agregar una nueva sección con 4 columnas.
6. Edite cada columna, estableciendo el ancho de la primera columna al 55% y cada una de las otras columnas al 15%.
7. Agregue un widget de encabezado y un widget de editor de texto a la primera columna.
8. Agregue un widget de imagen a cada una de las otras columnas.
9. Ingrese la URL del enlace para cada uno de los widgets de imagen, cada uno apuntando al artículo relevante.
10. Agrega efectos de imagen. Para una imagen, vaya a la Normal pestañas Estilo> Filtros CSS y cambie la Saturación a 0. Entonces, bajo el Flotar pestaña, ir a Estilo> Filtros CSS y asegúrese de que la saturación todavía esté en 100.
11. Haga clic con el botón derecho en el widget de imagen y elija Copiar.
12. Haga clic con el botón derecho en cada uno de los otros widgets de imagen y elija Pegar estilo.
13. Haga clic en el icono de engranaje para abrir el Configuración emergente panel. Ir Animación de entrada y elige Deslizar hacia arriba.
14. Selecciona el Cubrir a Esconder.

Establecer las opciones de publicación

1. Agregar una nueva Condición como Incluir> Singular> Todas las páginas> Nombre de página
2. Agregar una nueva Desencadenar. Conjunto On Scroll to Element a si e ingrese un nombre de clase CSS de su elección en el Selectocampo r.
3. Haga clic en el icono de engranaje para abrir el Configuración emergente panel.
4. Edite la página donde desea que aparezca la ventana emergente. Una vez allí, edite el elemento que activará el Popup cuando el usuario se desplace hacia él.
5. Ir al elemento Avanzado> Clases CSS e ingrese el mismo nombre de clase CSS que ingresó en el Desencadenar encima.

Todo listo. Ahora visite la página en vivo, desplácese hacia abajo hasta el final del artículo y vea su Popup de artículos relacionados en acción.