How to create a pop-up window in WordPress without a plugin?

Who I am
Philippe Gloaguen
@philippegloaguen
EXTERNAL REFERENCES:

vgr.com gamedesigning.org Reddit.com

Author and references

WordPress is one of the best platforms in the world, this is due to its functions, which allow its users to edit whatever they want on their websites and blogs. It also has a simple interface. So that you gain a little more knowledge today, you will learn how create a pop-up window in WordPress without plug-in.

How to create a pop-up window in WordPress without a plugin

And is that if you are new to this world of work in the pages and in the creation of your blogs, it will be useful to help you achieve all your tasks. Since although it is very easy to use WordPress it is necessary first to adapt to the system it uses with codes and plugins (after having managed it well you can also insert an mp4 video in an entry or page, or insert an excel spreadsheet, among many other things).



    Create a pop-up window in WordPress without a plugin

    For those unfamiliar with the terminology, a POP UP is basically a resource that allows you to insert pictures or calls, which grab the reader's attention, both when a certain button is pressed, and after a certain time. Most commonly, these appear in the center and below the PC screen.

    create a pop-up window in WordPress without plugins there are several procedures, some simpler than others, the first of these is with an HTML code.

    This must be integrated into the footer di page of your blog or within the HTML block of it. Putting it in the first will allow it to appear on any page, on the other hand if you put it in the block it will only appear on the page of it. The code is:



    × //Here you insert the code of the form, the azione call or whatever you are going to add

    CCS code for POP UP to be displayed in the center

    To create a pop-up window in WordPress without a plugin, can also use CCS codes. To add them you have to go to your control panel and then in the " Appearance ", then on" Customize "and finally on "Additional CCS" , when you are there paste the following:

    # background {display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background color: RGB (0,0,0,0.7); z-index: 1111111;} # pop-up {background-color: white; width: 800 px; position: absolute; top: 200 px; left: 50%; left margin: -400 px; padding: 30px; edge-radius: 10px; } # cerrar-pop-up {position: absolute; top: 0; right: 0; background color: transparent;

    } # cerrar-pop-up span {display: flex; width: 50px; height: 50px; background color: gray; justify-content: center; align-content: center; direction of flexion: column; text alignment: center; White color; font size: 40px; font-weight: bold; border radius: 1000%;

    } @media (maximum width: 800 px) {# pop-up {top: 0; left: 0; width: 100%; margin: 0; bottom: 0; overflow-y: scroll; }}

    Read How to create an online academy or course platform in Wordpress

    Once this is done, schedule the event you want to occur and save the changes. With this, your POP UP pop-up window will be created , being able to post the messages you want on your blog.

    CCS in the lower right corner

    If what you want is to put the POP aside so that it is less invasive for the reader, you should also go to the section "Additional CSS" as in the previous one, but this time you have to enter the following code:



    #background {display: none; position: fixed; bottom: 50 pixels; right: 50 pixels; index z: 1111111; width: 400 px; height: 400px; border radius: 10px; padding: 30px; background color: white; overflow-y: scroll; } cerrar-pop-up {position: absolute; top: 0; right: 0; background color: transparent;


    } # cerrar-pop-up span {display: flex; width: 50px; height: 50px; background color: gray; justify-content: center; align-content: center; direction of flexion: column; text alignment: center; White color; font size: 40px; font-weight: bold; border-radius: 1000%} @media (max width: 460px) {# background {right: 0; width: 70%; }}

    And voila, with the latter you already know what is needed to be able to create a pop-up window in WordPress without plugins , you just have to configure the event you want to happen and it will come out immediately with the help of these codes.


    Now that you are a little familiar, you can move on to more difficult things like: insert YouTube videos in WordPress with the plugin, or add borders around images with CSS, remember that the sky is the limit.

    add a comment of How to create a pop-up window in WordPress without a plugin?
    Comment sent successfully! We will review it in the next few hours.