En el mundo del diseño web, los popups se han convertido en una herramienta fundamental para captar la atención de los visitantes y aumentar las conversiones.
En general, los popups suelen activarse mediante botones o al hacer scroll en la página. Sin embargo, hay métodos poco conocidos que permiten convertir cualquier elemento en un popup, ya sea un texto, título, ícono o imagen. Con Elementor, ahora es posible crear popups atractivos y funcionales sin necesidad de conocimientos avanzados en código. En esta guía, te mostramos cómo hacerlo paso a paso.
Tabla de contenidos
¿Por Qué Utilizar Popups en Tu Sitio Web?
Los popups son efectivos para captar suscriptores, anunciar ofertas exclusivas, y dirigir a los usuarios a contenido específico. Al utilizar popups con Elementor, puedes aumentar la interacción en tu sitio web y mejorar la experiencia del usuario. Utilizar popups puede ayudar a:
- Aumentar las suscripciones a newsletters.
- Promocionar productos o servicios de manera efectiva.
- Dirigir a los visitantes a contenido relevante.
Preparativos: Lo Que Necesitas Antes de Empezar
Antes de empezar, asegúrate de tener Elementor Pro, ya que la función de popup de Elementor está disponible solo en esta versión. Además, verifica que tu sitio web esté configurado correctamente para alojar popups de forma óptima.
Pasos para Convertir Cualquier Elemento en un Popup con Elementor
Sigue estos pasos para crear y asignar un popup a cualquier elemento en Elementor:
Crear el popup en Elementor
- Ve a «Plantillas» y selecciona «Popups».
- Haz clic en «Añadir nuevo» y asígna un nombre al Popup.
Diseñar el contenido del popup
- Elige uno de los diseños preestablecidos de la biblioteca de Elementor, para seleccionar el diseño haz click en [Insertar].
- Si deseas crearlo por ti mismo. Añade el contenido que desees, como imágenes, texto o formularios.
Publicar el popup
Para este tutorial, no nos centraremos en cómo activar el popup mediante métodos como on-click, scroll o después de un tiempo específico. Nuestro enfoque será enseñarte a convertir cualquier elemento en un popup. Una vez que hayas terminado de diseñar el popup, simplemente haz clic en [Publicar] y luego en [Save & Close].
Asignar el popup a un botón
Selecciona una página de prueba donde publicarás un botón que active el popup. El objetivo es obtener el enlace generado por Elementor, que te permitirá activar el popup en otros elementos, como texto, títulos, íconos o imágenes.
Para comenzar:
- Añade un botón en la página.
- Selecciona el botón y en la sección de estilo donde se coloca el enlace, al lado derecho, haz clic en el ícono de «Etiquetas Dinámicas».
- Selecciona la opción «Popup» de las opciones disponibles.
- Mantén la acción en «Abrir Popup», busca el nombre del popup que asignaste y selecciónalo.
- Finalmente, publica la página y dirígete al frontend para obtener el enlace.
Obtener el enlace del popup
En el frontend de la página publicada, selecciona el botón y haz clic derecho para elegir [Copiar la dirección del vínculo]. Guarda este enlace. A continuación, realiza lo siguiente:
- Edita la URL y elimina la parte que dice «https://tudominio.com/nombre-de-la-pagina/«.
- Conserva el resto del enlace que comienza con «#elementor-action%». Asegúrate de guardar todo lo que sigue, ya que el enlace completo del popup es bastante largo.
Convierte Cualquier Elemento en un Popup
Con el enlace guardado, ahora puedes utilizarlo para activar tu popup en cualquier elemento, ya sea un título, texto, imagen, ícono, etc. Asegúrate de añadirlo en la ventana de «Estilo» en la sección donde se insertan los enlaces. También puedes usar el enlace con código HTML mediante una etiqueta de tipo <a>.
Esperamos que este tutorial te sea útil para tus proyectos web con Elementor.
Recomendaciones para el Uso de Popups en Elementor
Para asegurarte de que los popups en Elementor sean efectivos y no afecten negativamente la experiencia del usuario, sigue estas recomendaciones:
- Usa popups con moderación para no saturar al usuario.
- Asegúrate de que el popup sea relevante para el contenido.
- Diseña popups responsive para mejorar la experiencia en dispositivos móviles.
- Evita el uso de popups intrusivos para evitar penalizaciones de SEO.
- Configura triggers basados en el comportamiento del usuario (scroll, tiempo en página, etc.).
Conclusión
Con Elementor, crear popups atractivos y funcionales es fácil y accesible. Siguiendo estos pasos, podrás transformar cualquier elemento en un popup y aprovechar al máximo las ventajas que Elementor Pro ofrece en términos de personalización y facilidad de uso. Utiliza esta herramienta para mejorar la interacción y la efectividad de tu sitio web.
