Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

Cómo crear ventanas emergentes espectaculares en WordPress con Elementor Pro

by
Difficulty:BeginnerLength:MediumLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Carlos (you can also view the original English article)

Hoy te voy a enseñar cómo hacer algunas ventanas emergentes funcionales y de excelente aspecto en WordPress, utilizando Elementor Pro.

elementor popup homepage
Te va a encantar esa página de aterrizaje

Elementor es un constructor de páginas para WordPress. Te permite utilizar bastantes plantillas gratuitas y premium, para que puedas crear efectivamente cualquier tipo de sitio web que desees. Para obtener más información sobre Elementor, revisa los enlaces al final de este tutorial.

Recientemente, la versión Pro de Elementor recibió una actualización que te permite diseñar y crear ventanas emergentes. Eso es lo que vamos a ver hoy, cubriendo los siguientes puntos:

  • Ventanas emergentes y experiencia del usuario
  • Cómo crear una ventana emergente simple con Elementor
  • Personalizar ventanas emergentes y añadir contenido dinámico

Impresionantes ventanas emergentes en WordPress con Elementor Pro

Ventanas emergentes y experiencia del usuario

Cuando se trata de ventanas emergentes, probablemente te encuentres en uno de los dos bandos: los que les gustan o los que no. Los diseñadores y cualquier persona involucrada en Marketing a menudo encuentran que las ventanas emergentes son una forma útil de poner un mensaje frente a los usuarios y animarlos a actuar. No obstante, los usuarios finales tienden a no apreciar las ventanas emergentes que interrumpen su experiencia de navegación y los obligan, como mínimo, a cerrar el modal.

Sin embargo, si se diseñan con consideración, las ventanas emergentes pueden ser muy útiles. Pueden beneficiar tanto al sitio web (y sus índices de conversión) como al usuario por igual.

Este no es un tutorial sobre UX (experiencia de usuario) de ventanas emergentes, ese es un tema entero en sí mismo, pero definitivamente vale la pena mencionar que las ventanas emergentes deben utilizarse de manera considerada, no intrusiva y siempre pensando en el usuario.

Buenos ejemplos de ventanas emergentes

Por ejemplo, si alguna vez visitaras el sitio web de Tim Ferriss, quizá estarías buscando consejos sobre productividad y emprendimiento. En el sitio web hallarás, si estás por salir de él, algo llamado «ventana emergente de intención de salida». Es una ventana emergente que aparece cuando tu cursor sale de la ventana del navegador, mostrando contenido relevante para el sitio web de Tim y, por tanto, probablemente también para el usuario.

Peter Shankman es otro buen ejemplo. Su sitio web presenta una ventana emergente deslizable sutil. No oculta lo que estás mirando, y ofrece algo que quizá sea relevante para lo que estés buscando.

Cómo crear una simple ventana emergente con Elementor Pro

Estoy utilizando la última versión del plugin de WordPress Elementor (en el momento de escribir esta publicación) que es v2.4.3, junto con la última versión de Elementor Pro v.2.4.0.

latest version of the Elementor plugin

Con esto instalado, para crear una ventana emergente vamos a Plantillas > Ventanas emergentes (Popups). Se te mostrará una lista de todas sus ventanas emergentes, y si todavía no has creado una, verás algo como esto:

create first popup

Presiona AÑADIR NUEVA POPUP (está bastante claro) y se te pedirá que le des un nombre, luego selecciona una plantilla de los ejemplos prefabricados que se muestran. Hay diferentes plantillas para diferentes usos; algunos serán adecuados para anuncios, otros para promocionar un descuento, otros son perfectos para animar a los usuarios a suscribirse a algo, e incluso hay ejemplos para advertir a los usuarios sobre el uso de cookies u otras notificaciones GDPR.

Cuando encuentres algo apropiado, haz clic para tener una vista previa más grande, luego presiona Insertar (Insert).

Bienvenido al constructor de ventanas emergentes

Serás llevado al constructor de ventanas emergentes en el backend de WordPress.

Welcome to the Popup Builder

Si has usado Elementor anteriormente, estarás familiarizado con la interfaz, las opciones y cómo se presenta todo. Es esencialmente lo mismo que crear plantillas para páginas de Elementor.

A la derecha de la pantalla tiene el lienzo principal que muestra una vista previa de lo que estás creando. Puedes seleccionar cada elemento individualmente para editarlo y cambiarlo como gustes. Verás los controles y las preferencias que se muestran en la barra lateral a la izquierda, con la opción de Publicar (Publish) cuando hayas finalizado.

Configuración del Popup

Algunos ejemplos de los ajustes que puedes modificar:

  • Anchura
  • Altura (que puede ser fija o relativa a la pantalla)
  • Posición (horizontal y vertical)
  • Superposición (puedes escoger si ocultar lo que está detrás de la ventana emergente; también hay opciones de estilo para esto)
  • Botón de cierre (si quieres mostrar uno o no; también hay más opciones de estilo para esto)
  • Animación de entrada (¡se cuidadoso con algunas de estas!)
  • Duración de la animación
  • Título (cómo te refieres a él)
  • Tipo de fondo (color, degradado, imagen)
  • Tipo de borde
  • Radio del borde
  • Sombra de la caja

Además de poder añadir algunos CSS personalizados, también existen algunas opciones avanzadas. Por ejemplo:

  • Mostrar botón de cierre solo después de un retardo especificado
  • Cerrar automáticamente después de cierto tiempo
  • Impedir el cierre en la superposición (por consiguiente, únicamente utilizando el botón de cierre o la tecla ESC)
  • Prevenir el cierre con la tecla ESC (aún más extremo)
  • Deshabilitar el desplazamiento de la página
  • Evitar múltiples ventanas emergentes (una es suficiente, ¿no?)
  • Propiedades de margen y relleno

Configuración de publicación

Cuando estés satisfecho con lo que has creado, querrás publicarlo. Al presionar PUBLICAR (PUBLISH), se te mostrarán algunas preguntas. Por ejemplo:

  • ¿Cuáles son las condiciones en que deseas mostrar la ventana emergente? Aquí puedes incluir o excluir ciertas páginas. Añade tantas condiciones como requieras.
  • Después, ¿qué activa que se muestre la ventana emergente? Puedes elegir mostrar la ventana emergente inmediatamente al cargar la página, al desplazarse, o cuando el usuario se desplace a un elemento específico, etc. Todas estas opciones tienen ajustes propios para una personalización perfecta.
  • Por último, se te indican algunas reglas avanzadas, como mostrar la ventana emergente solo para devolver visitantes, o solo mostrar la ventana emergente un número determinado de veces, o quizá mostrar la ventana emergente solo cuando un visitante es referido a tu sitio web desde una URL específica. Y hay más. Este ajuste realmente puede mejorar la experiencia de usuario (UX) de tu ventana emergente, diseñándola con verdadera integridad y consideración para tus usuarios.

Finaliza la configuración que quieres, luego presiona GUARDAR Y CERRAR (SAVE & CLOSE). Se te mostrará un ejemplo de cómo se ve tu ventana emergente.

Personalizar las ventanas emergentes y añadir contenido dinámico

Llevemos las cosas al siguiente nivel. Hasta el momento hemos seleccionado una plantilla, hemos modificado uno o dos ajustes, y eso es todo. Ahora imaginemos que queremos personalizar aún más nuestra ventana emergente.

De vuelta a la fase de AÑADIR NUEVA POPUP del proceso, podemos especificar nuevamente un título y seleccionar una plantilla.

Select template

Luego podemos seleccionarla, editar la configuración básica como anteriormente y de nuevo presionamos PUBLICAR.

Muy bien, ahora se pone interesante. Elementor nos permite obtener datos dinámicos de nuestra instalación de WordPress e insertarlos en nuestra ventana emergente. Podemos insertar cosas como el nombre del usuario, el título de la página, etc.

Imaginemos que estamos utilizando WooCommerce y queremos mostrarle a un usuario que hay un descuento en el producto específico que está viendo. Empieza seleccionando un fragmento de texto en la plantilla, luego haz clic en Dinámico (Dynamic) en la barra lateral:

click dynamic in the sidebar

Se nos proporciona una amplia variedad de cosas para escoger: detalles de la publicación, detalles del sitio en su conjunto, información de medios, detalles del autor e incluso detalles de WooCommerce. Seleccionaremos el título del producto, tras lo cual se añadirá a nuestro bloque de contenido de texto.

Aquí podemos especificar algo antes del texto, algo después del texto y un texto alternativo (en caso de que los detalles de la base de datos no se recuperen correctamente)

A continuación hagamos lo mismo con el botón, que muestra el precio del producto en sí. Podemos indicar el texto anterior como COMPRAR AHORA, para tener un llamado a la acción convincente:

dynamic product price

¡Todavía podemos ir un paso más allá e incluir la imagen del producto como fondo de la ventana emergente!

Cuando presionamos PUBLICAR, se nos proporcionan los ajustes de publicación otra vez, por lo que podemos especificar que queremos mostrar la ventana emergente solo en las páginas de WooCommerce. Configuraremos el desencadenante en 15 segundos de inactividad. Así es como se ve al finalizar:

final popup design with dynamic data

Posiblemente el diseño necesite un poco de refinamiento, pero puedes ver que estamos mostrando el nombre del producto, su precio y su imagen como fondo emergente. ¡Brillante!

Conclusión

¡Eso concluye este tutorial! Tomamos el constructor de ventanas emergentes de Elementor pro y lo utilizamos para crear rápidamente dos ventanas emergentes, una de las cuales incluía datos dinámicos. Para conseguir más ventanas emergentes de Elementor, descarga el plugin de Envato Elements y tendrás acceso a todavía más kits de plantillas. ¡Pruébalo y cuéntanos qué te parece!

Más sobre Elementor

Para aprender más acerca de Elementor, qué es y qué puede hacer para tu sitio web de WordPress, echa un vistazo a los recursos que se enumeran a continuación:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.