jueves, 19 de mayo de 2022

Cómo crear un POP UP que funcione con un clic en un BOTÓN [GRATIS EN WORDPRESS]

Cómo crear un POP UP que funcione con un clic en un BOTÓN [GRATIS EN WORDPRESS]


Queridos lectores resulta que estoy desarrollando un sitio web para una empresa de reciclaje de productos electrónicos y necesitaba hacer que un Pop Up o pantalla emergente apareciera al darle clic a una imágen, texto o botón es por eso que decidi escribir este tutorial por si se les presenta el mismo caso.

  1. Instalamos el PLUG IN, POPUP Maker y lo activamos.Instalamos el PLUG IN, POPUP Maker y lo activamos.
  2. Se creará en el menú un acceso en la derecha "Pop up Maker", aquí seleccionas la opción "Crear Ventana Emergente".Se creará en el menú un acceso en la derecha "Pop up Maker", aquí seleccionas la opción "Crear Ventana Emergente".
  3. En la pantalla que se te va a desplegar colocas el nombre, el título y aquello que deseas que contenga tu Pop Up, o pantalla emergente: texto, imágenes, etc.En la pantalla que se te va a desplegar colocas el nombre, el título y aquello que deseas que contenga tu Pop Up, o pantalla emergente: texto, imágenes, etc.
  4. Luego te desplazas hacia abajo y en el menú de la izquierda seleccionas "Activadores", en la pantalla que se va a desplegar escoges la opción al "Hacer clic", le das clic al botón "Añadir".Luego te desplazas hacia abajo y en el menú de la derecha seleccionas "Activadores", en la pantalla que se va a desplegar escoges la opción al "Hacer clic".
  5. En la siguiente pantalla seleccionas la flecha hacia abajo y entre las opciones escoges "Enlace Termina en".En la siguiente pantalla seleccionas la flecha hacia abajo y entre las opciones escoges "Enlace Termina en".
  6. Ahora reemplzas el texto que se muestra como a[href$="ends_with"] por una etiqueta que puedes llamar como prefieras debería quedar algo así: a[href$="#etiqueta"] Ahora reemplzas el texto que se muestra como a[href$="ends_with"] por una etiqueta que puedes llamar como prefieras debería quedar algo así: a[href$="#etiqueta"]
  7. Este será el resultado de tu activación del Pop up. Este será el resultado de tu activación del Pop up.
  8. Hecho esto ya solo te faltará colocar la acción en el elemento que servirá de disparador ya sea un texto con hipervinculo, imagén o botón, para lo cual deberás colocar que tenga el hipervinculo a la etiqueta que acabas de poner, en mi caso yo utilice el constructor elementor pero puedes hacerlo de cualquier manera, lo importante es que tu hipervinculo sea como esteeste "#etiqueta". Entonces al darle clic el resultado será este. Este será el resultado de tu activación del Pop up. Hecho esto ya solo te faltará colocar la acción en el elemento que servirá de disparador ya sea un texto con hipervinculo, imagén o botón, para lo cual deberás colocar que tenga el hipervinculo a la etiqueta que acabas de poner, en mi caso yo utilice el constructor elementor pero puedes hacerlo de cualquier manera, lo importante es que tu hipervinculo sea como esteeste "#etiqueta". Entonces al darle clic el resultado será este.
  9. Si deseas cambiar el aspecto de tu Pop Up o  pantalla emergente en el mismo menú inferior que usaste para crear la acción encontrarás las opciones de Visualización: Apariencia, tamaño, animación, sonidos, etc.Si deseas cambiar el aspecto de tu Pop Up o  pantalla emergente en el mismo menú inferior que usaste para crear la acción encontrarás las opciones de Visualización: Apariencia, tamaño, animación, sonidos, etc.


Espero que con este tutorial de paso a paso como crear un Pop Up que se active con un botón o hipervinculo puedas utilizarlo de manera estratégica para resaltar alguna información o solicitar nuevos suscriptores.



¡Nos vemos pronto! 



No hay comentarios.:

Publicar un comentario

Déjame tu comentario o consulta.