Cómo hacer cualquier cosa emergente al hacer clic en WordPress










    • Todos hemos visto cuadros emergentes en sitios web antes. Algunos de ellos son molestos y otros son atractivos, solo depende del propósito. Sin embargo, en general, tener un elemento emergente con un clic es una buena manera de hacer que los usuarios de su sitio web interactúen en la página y mantenerlos en su sitio web por más tiempo.
    La mayoría de las veces, una imagen emergente es lo que vería en un sitio web. Dicho esto, en realidad hay herramientas que le permiten hacer que cualquier cosa aparezca emergente al hacer clic. Solo tienes que encontrar la manera correcta de hacerlo.
    Por supuesto, puedes codificar lo que quieras desde cero. Es decir, si sabes y entiendes cómo escribir código. Si no lo hace, entonces necesita algo que le permita crear fácilmente elementos emergentes con cualquier tipo de clic. Esto puede incluir imágenes, botones, una ventana emergente HTML y más.
    Encontré un complemento fantástico que de hecho le permitirá hacer que cualquier cosa en su sitio web aparezca con un clic. Vamos a explorar ese complemento juntos en unos minutos, así como a revisar la configuración para que funcione en su sitio web de WordPress.

    ¿Por qué crear ventanas emergentes al hacer clic?

    Hay varias razones por las que puede querer crear ventanas emergentes en su sitio web de WordPress . Una de las cosas más atractivas es cuando un usuario del sitio web puede hacer clic en un botón o en un enlace, y aparece algún tipo de información emergente para leer y ver.
    La información puede ser la que quieras. Usted crea y muestra la información en el cuadro emergente. Puede mostrar cualquier cantidad de elementos e información dentro de ese cuadro emergente para que las personas los vean. Esto también significa que puede mantener su publicación o página de WordPress libre de desorden adicional porque ha elegido crear elementos que aparecen con un clic.
    Muchos sitios web usan la ventana emergente de imágenes de WordPress al hacer clic para cosas como galerías y portafolios . Sin embargo, hoy queremos ir un paso más allá y mostrarle cómo puede crear una ventana emergente al hacer clic utilizando varios elementos diferentes en una página web.
    Quizás el nuevo tipo de cuadro emergente más popular que puede crear es un cuadro emergente de texto. Lo que esto significa es que cuando haces clic en el texto resaltado, aparecerá un cuadro emergente basado en la configuración que creas.
    Echemos un vistazo al complemento que estamos explorando hoy y repasemos toda la funcionalidad que proporcionará.

    Emerge cualquier cosa al hacer clic

    Emerge cualquier cosa al hacer clic en el complemento
    Popup Anything on Click  es un complemento de módulo emergente muy poderoso, pero liviano, para su sitio web de WordPress. Básicamente, le permite agregar tipos ilimitados de ventanas emergentes a su sitio web utilizando su propio diseño, configuración, configuraciones y pantallas.
    El complemento le dará la posibilidad de crear ventanas emergentes altamente personalizables. Luego puede agregarlos en cualquier lugar de su sitio web usando códigos cortos. Estos se generan automáticamente cada vez que crea una nueva ventana emergente dentro de su panel de administración.
    Quizás lo mejor de este complemento es que no hay limitaciones para lo que puede poner dentro del cuadro emergente. Texto HTML , imágenes, códigos cortos, lo que quieras. Usted crea la ventana emergente utilizando el editor de texto proporcionado y la presenta y diseña como mejor le parezca.
    El complemento Popup Anything on Click viene con muchas funciones. Podrá colocar el cuadro emergente donde desee. También es un complemento de cuadro emergente totalmente receptivo y compatible con dispositivos móviles. Esto significa que sus cuadros emergentes se verán bien en cualquier dispositivo.
    Algunas de las otras funciones y características principales del complemento incluyen:
    • Ventanas emergentes de enlaces, HTML, botones e imágenes
    • Títulos de imágenes y subtítulos
    • Administrar el ancho de la ventana emergente
    • Establecer posiciones emergentes
    • Personalizar el aspecto de los enlaces y las ventanas emergentes
    • Crea tantas ventanas emergentes como quieras
    • Funciona con complementos de formulario de contacto
    • Mostrar códigos cortos
    • Animaciones personalizadas
    • Efectos emergentes
    • Opciones de ubicación emergente
    • Ventana emergente de pantalla completa disponible
    • Las ventanas emergentes son receptivas

    Básicamente, tiene todo lo que necesita para crear cuadros emergentes dinámicos e interactivos que se abrirán cada vez que se haga clic en los enlaces.

    Nota: El complemento también funciona perfectamente en el editor de bloques de Gutenberg . Simplemente use el bloque de "código abreviado" e inserte el código abreviado de su cuadro emergente donde lo desee.

    Echemos un vistazo a cómo instalar y activar el complemento antes de que lo analicemos juntos.

    Instalar y activar el complemento

    Para crear su primera ventana emergente en el cuadro de clic, primero debe instalar y activar el complemento. Puede hacerlo yendo a la página Complementos en su panel de administración de WordPress. Simplemente busque el nombre del complemento e instálelo directamente desde allí.

    Instalar y activar la ventana emergente al hacer clic en el complemento

    Una vez que el complemento se haya instalado y activado, desea acceder a la página de configuración principal antes de comenzar a agregar ventanas emergentes. Para hacer esto, haga clic en Popup Anything > Settings. Verá esto ubicado en el menú del lado izquierdo de su panel de control después de que se haya activado el complemento.

    Haga clic en cualquier cosa emergente y luego haga clic en configuración

    Nota: Es posible que se le lleve automáticamente a la página "Esto es lo que debe hacer a continuación" después de activar el complemento. Eres más que bienvenido a hacer clic en eso. Accederá a la página de inicio del sitio web principal para el complemento. Le ofrecerán la versión pro del complemento.

    Sin embargo, este tutorial se basa en la versión gratuita, que le brinda todo lo que necesita para crear ventanas emergentes dinámicas en las áreas de clic.

    Esto es lo que debe hacer en la página siguiente

    Avancemos y configuremos el complemento y construyamos un cuadro emergente juntos.

    Agregar un cuadro emergente

    En este punto, debería estar en la página de configuración del complemento. Antes de agregar nuestro primer cuadro emergente, ocupémonos del único elemento en la configuración. La única configuración que elige es si desea o no deshabilitar o incluir Manage Polyfill JS.

    Configuración general para la ventana emergente en el complemento de cuadro de clic

    Adelante, haz tu elección y guárdala. Ahora, agreguemos su primer cuadro emergente juntos. Haga clic en la selección "Agregar una ventana emergente" que se encuentra en el menú del lado izquierdo.

    Haga clic en agregar una ventana emergente

    Se le presentará un editor de texto o visual (su elección), donde ahora puede construir y diseñar su primer cuadro emergente. Piense en ello como agregar una nueva publicación o página. El concepto es el mismo, excepto que cuando haya terminado, toma el código abreviado y lo agrega donde quiera que se muestre la ventana emergente en su sitio web.

    Continúe y asigne un nombre a su cuadro emergente, y luego cree y diseñe el contenido como desee.

    Agregar nombre y contenido al cuadro emergente

    Ahora desplácese hacia abajo y comience con la configuración de su cuadro emergente. Continúe y elija qué tipo de ventana emergente desea crear, y luego comience a completar el resto de sus configuraciones desde allí.

    Ventana emergente en la configuración del cuadro de clic

    Continúe completando todos los ajustes de la pantalla del cuadro emergente, el efecto y las posiciones a su gusto. Elija verdadero o falso para "Habilitar superposición". y estás a punto de terminar.

    Habilitar superposición

    Puede continuar desplazándose hacia abajo algunos. Sin embargo, el resto de la configuración aparecerá atenuada a menos que esté ejecutando la versión pro del complemento. Entonces, con eso, continúe y haga clic en el botón "Publicar" para que su cuadro emergente se active.

    Ahora que el cuadro emergente está publicado, lo verá en su lista de elementos emergentes. Aquí es donde se mostrarán todas sus cajas cuando las construya.

    Ventana emergente en la lista de códigos cortos del cuadro de clic

    Puede copiar y pegar el código abreviado generado en cualquier publicación o página que desee. Ahí es donde se mostrará su cuadro emergente según la forma en que lo creó.

    Demostración de cuadro emergente de texto de enlace

    ¡Eso es todo! Ha instalado con éxito el complemento y ha creado su primera ventana emergente en el cuadro de clic. Puedes repetir este proceso tantas veces como quieras para añadir más cajas.

    Pensamientos finales

    Tener cuadros emergentes dinámicos en su sitio web es una excelente manera de aumentar la cantidad de tiempo que los usuarios permanecen en una página. También les permite interactuar con su sitio web de una manera diferente a como lo harían normalmente.
    No necesita saber cómo escribir código para agregar cuadros emergentes dinámicos a su sitio web. Con el complemento anterior, puede crear tantos cuadros como desee para que todos aparezcan con un clic del mouse.
    ¿Ha intentado agregar cuadros emergentes de una manera diferente antes? ¿Encontró que este complemento hizo que todo el proceso fuera más rápido y fácil?

     










    • Subir