Hello, friends! I suggest we talk about creating modal windows in WordPress. Pop-up (modal) windows significantly expand the capabilities of the site. Do you have a message or ad that every website visitor should see? Do you need to make your campaign visible? Do you want to make a pop-up registration form on your website or a form for sharing content on social networks? Create a modal window!

Pop-up modals are designed to attract attention. Appearing on the page, they block the main content and force the user to familiarize themselves with their content (text, video, call to action, etc.).

Attention! Don't be intimidated by the length of this lesson - there are no difficulties in creating modal windows (read and see for yourself), I just describe each step in detail.

Algorithm for creating modal windows in WordPress

WordPress does not have built-in tools for working with pop-ups. We will design and customize them using a plugin Popup Maker. Let's, for example, create a modal window with a video, pop-up when clicking a button(you can configure it later automatic appearance).

1. Install Popup Maker plugin. Activate his. Let me remind you: we learned how to install plugins.
   
2. Find the section in the side menu on the left of the admin panel Popup Maker and go to its subsection Add Popup.
3. The modal window editor opens. Enter the name of the window in the field at the top of the page (the name will only be displayed in the admin panel - users will not see it).
4. Come up with window title(will be visible to users) and enter it in the field above the button Add media file.
5. In the block Conditions Select from the drop-down menu the pages (categories) on which the window will appear. If the plugin should work on all pages of the site, select Format:All.
6. Add to the large field below the toolbar text, images, video or audio– any content that will be shown in the pop-up window. In the example under consideration, I added the code for a video from YouTube (we studied adding videos to a WordPress site).
   
7. In the block Triggers There are settings for manual or automatic opening (self-activation) of the pop-up window. In our example, I chose the value Click Open.
8. Please indicate below popup size(in pixels or percentages). When choosing an option Auto The plugin will resize the modal window automatically.
9. Check the box in the line Disable background so that the site page is visible behind the pop-up window (I recommend).
10. Set up animation type and speed(not necessary: ​​optimal values ​​are already set by default).
    
11. Adjust the position of the window on the screen. Initially the plugin positions it at the top center.
12. Property value z-index, set by default, usually does not need to be changed.
    
13. Select options to close the pop-up window. Check the checkboxes in the lines with "birds" Click Overlay to Close(the window will close when you click on the background around it), Press F4 to Close(the window will close with the key F4), Press ESC to Close(the window will close with the key ESC). In order not to annoy site visitors with the puzzle of closing the modal window, I recommend checking all the boxes.
    
14. Click Publish. Congratulations, your modal window has been created!

About customizing the popup window design

To change the design of the created modal window, go to the subsection Theme section Popup Maker side menu of the admin panel (left).

In the editor that opens, configure desired window background, color And font sizes, padding, shadows, button name closing. The taste and color… you know, so I won’t go into detail about customizing the design of the pop-up window. If you have questions, ask them in the comments.

How to set up a pop-up window

Remember, we didn’t enable the function of automatically opening a modal window in the plugin settings? Therefore, we need to figure out how our window will open. Let's set up a window to pop up when you click on a link, picture or button.

The Popup Make plugin assigns each window two unique CSS classes. If you add any of these classes to a web page element, then when you click on this element, a modal window will open.

Where and how to boost Instagram comments – all methods. The portal pricesmm.com found out what is cheaper and better: to increase comments on Instagram yourself, with programs, to receive in exchange or to order a service on the SMM service. Pros and cons of each method.

Examples of adding modal window CSS code to a link, image, and button:

< a href = "#" class = >Open modal window< / a >

A modal window will appear when you click on the image

< img src = "popup-primer.jpg" class = "popmake-obrazets-modalnogo-okna"/ >

Modal window is activated after button click

< button class = "popmake-obrazets-modalnogo-okna"> Open modal window< / button >

Click on the HTML element after adding a CSS class to it popmake-obrazets-modalnogo-okna. A modal window similar to this should appear:

Has it appeared? Great! Now you can configure pop-up windows. If the window does not open, describe the problem in the comments - we will launch it together!

Hello, dear readers of the blog site. Do you notice pop-ups on some websites? Questions arose: how are they made and why are they even needed? I have yes.

So friends, today I will tell you exactly about them. But! Let's first find out why we need them at all? What can you get from them and what will be the result? I answer.

Through such pop-ups, the impact effect is very large. They say that sometimes it happens that the number of subscribers increases 4 times. Cool! Is not it? Using pop-up windows (popunders) is a very effective way to attract a huge number of visitors. They are usually used for:

• newsletter;
• PR for paid training courses;
• promotion of groups in social networks networks;

I must remind you that sometimes such pop-up advertisements can harm the site. This is due to the fact that some users find it very annoying. What can I say, I am also very angry at such methods of attracting attention. In response to all this, there is an increase of 100% failures on the site, which is harmful.

But! All these problems can be circumvented if the pop-up window is configured correctly.

So let's get back to our main question.

Popups on WordPress

1.WP-MK

Cool plugin that I came across by accident. Easy to set up, Russian-language interface and a whole set of tools. It's perfect for:

• Advertising (for example, Google Adsense);
• PR of your groups on social media. networks;
• Simple subscription form.

You can download the plugin from . Then we install it and activate it in the usual way. Go to settings on the left? pop-up window and we see the following:

In my opinion, everything is simple here; I don’t see the point in disassembling everything separately. If you have any questions, you can ask them in the comments.

2. Ninja Popups.

If you want users to go “Wow” when they visit your site and see a pop-up window, install this mega cool plugin. Ninja Popups is a pop-up monster on . Compared to WP-MK, it is far superior in terms of functionality. I noticed that Ninja Popups are used by masters of their craft. Why? The plugin is paid and not everyone can afford it. I can say from myself that their prices are reasonable, they don’t ask for much. You can find out more about the cost Here.

Well, let's find out what exactly we get from this plugin:

• ease of settings;
• more than 100 ready-made templates for subscriptions and other types of advertising (competitions, promotions, training courses, etc.);
• statistics;
• mobile version of the pop-up window;
• advanced setting of display times;
• And much more.

If you want to learn about all the benefits of the plugin, go to this link.

How to customize the plugin for yourself? I suggest the following... Instead of annoying text, it is better to watch a training video:

That's all, friends, as far as settings are concerned. But still, if you have any questions, ask them in the comments.

3. Popup Maker (modal window)

A plugin that has the function of creating a modal popup window. In our case, pop-ups will be displayed when clicking on:

• link;
• button;
• picture.

So how do you set it up?

1. Download plugin;

2. Install and activate;

3. On the left in the menu we look for: Pupup Maker -> Add new.

4. A page like this will appear in front of us:

Doesn't remind you of anything? The page is exactly the same as the form for publishing articles on WordPress. As you can see, some additional functions (settings) have been added here.

Let's look at them in more detail.

Popup window (name)- will not be displayed anywhere, here we give a name to our popunder in the plugin.

Enter the window title here- write the name (for example: subscription to news).

Targeting conditions- check the box where our window will be displayed.

Theme settings - no options here yet. Select by default. Friends, in the future you can create your own template to design a modal window. By the way, the function is very cool. You can find it: Pupup Maker -> All themes.

Code - what will be displayed in the window. In our case, video from YouTube:

Below, other settings await us (window size, transparency, display time, etc.). There is nothing complicated there. I hope you can handle it. If you have any questions, feel free to ask them in the comments.

After all the settings are made, all we have to do is publish the pop-up window.

But friends aren't everything. Go to the section Pupup Maker -> All Popups. We are looking for CSS Classes. We are interested in code like this: popmake-xxx.

We need this code to display a window when clicking on a link, picture or button (I said at the beginning).

Opening a window when you click on the image:

Opening by pressing a button:

< button class = "popmake-xxx" >Open window

This code can be inserted anywhere (for example, in an article or widget). No difference. If you have any problems or questions, ask in the comments, I will be happy to help.

On this cheerful note, the list of popup plugins for WordPress ends. I hope that from these three you will find yours that you like. Thank you for being with me until the end.

For updates, participate in . See you soon. Bye everyone!

Best regards, Mogish Ivan

You can find out that a pop-up window is a window that opens on a computer screen as a result of performing some operation.

In this article we will look at creating PopUP pop-up windows for WordPress.

This kind of pop-up windows can be used for different purposes: you can insert a subscription form, some kind of informational message, picture, contact form, etc. into this window.

As a tool for creating pop-up windows in this article, I will consider a special plugin for WordPress called WordPress PopUp.

WordPress PopUp plugin for creating pop-ups

This plugin is available in the plugin directory right in the WordPress admin area, so installing it is easy.

Find it through the search form and click Install:

A new item will become available in the admin menu PopUp:

This item allows you to configure the plugin and manage its functionality. Let's consider all of the above in more detail.

In subparagraph PopUps point PopUp All existing pop-up windows and their management are available. Since no window has been created yet, the item is empty:

Let's correct this situation and create our first pop-up window, for this we go to the sub-item Add New and press the button of the same name:

A new window has been created. Let's immediately decide what the content of this window will be, let it be, for example, a subscription form.

Let's start setting up the created pop-up window by writing down its name, or rather a certain identifier by which we will find this window among others, if any.

This identifier is written in the column PopUp Name (not displayed on the PopUp), and, as it is not difficult to guess from the name of this column when translated into Russian, it is not displayed in the pop-up window itself:

These title and subtitle will be displayed at the very top of the pop-up window.

Just below, in an area called Main PopUp Content We need to place the main content of our popup. Since I decided to place a subscription form in this window, in this area in text editor mode I write exactly the code for the subscription form:

Here, a little to the right, in the section PopUp Feature Image (optional) You can implement the insertion of any images into the pop-up window:

I won't insert an image.

A little lower, in the section Call To Action Button (optional) It is possible to add a button with a call to some action to the created window:

Making such a button is extremely simple - you need to write the name of the button in the column Button Label, and in the graph Button Link place a link that activates the required action.

It remains to determine some parameters of the created PopUp window. Let's take a closer look at them.

Setting pop-up options

In fact, not all settings are available in the free version of the plugin, and since not every user wants to spend their own money on the paid version of the plugin, we will first look at the basic settings available in the free version of the plugin.

Let's start in order with the section Appearance:

The literal translation of the name of this item means “appearance”. It is not difficult to guess that the settings in this section determine the properties of the pop-up window.

Of the plugins available for the free version, there is only a checkbox here No rounded corners, a checkmark in which activates straight, rather than rounded, as by default, corners of the custom window, as well as the ability to manually determine the size of the custom window in the item Use custom size(a tick in the corresponding checkbox allows you to specify the width and height of the window in pixels).

Now let's look at the section Behavior, the settings in which determine the behavior of the pop-up window:

The settings available for the free version of the plugin include the following:

• When to show the PopUp:— time (in seconds or minutes, optional) from the moment the site page is opened until the pop-up window appears;
• "Never see this message again" settings:— settings that allow a visitor to click a special button to block the display of a pop-up window in the future when opening pages of this resource. Only a checkbox is available here Add “Never see this message again” link, a checkmark in which activates the appearance of a link with an anchor Never see this message again, clicking on which blocks the further display of a pop-up window to this user on the pages of this resource.

Let's move on to the settings section Displaying Conditions (optional) responsible for the conditions for displaying a custom pop-up window:

There are a significant number of points here, let’s look at them in order:

• Visitor is logged in— displaying a pop-up window to users who have been authenticated on the site (subject to the availability of such an option);
• Visitor is not logged in— displaying a pop-up window to users who are not authenticated on the site;
• PopUp shown less than— display a pop-up window until the user sees it a certain number of times (set in the column Display PopUp this often:);
• Only on mobile devices— displaying a pop-up window only for visitors from mobile devices;
• Not on mobile devices— displaying a pop-up window only for visitors from a computer or laptop (not from mobile devices);
• From a specific referrer— display a pop-up window if the user came using a special referrer
• Not from a specific referrer— hiding the pop-up window if the user came using a special referrer(referrers are set here);
• Not from an internal link— the pop-up window will not be displayed if the user came via an internal link from another page of the same resource;
• From a search engine— displaying a pop-up window for visitors who came to the site from search engines;
• On specific URL— display a pop-up window for visitors located on certain URL Full URLs;
• Not on specific URL— display a pop-up window for visitors, with the exception of those on certain URL, the list of which is specified here in the column Full URLs;
• Visitor has commented before— displaying a pop-up window to users who left comments on the site. This condition can be combined with the condition Visitor is logged in or Visitor is not logged in;
• Visitor has never commented— displaying a pop-up window to users who have not left comments on the site. This condition can be combined with the condition Visitor is logged in or Visitor is not logged in.

We have looked at all the settings available for the free version of the plugin, now let’s briefly go over the settings available only for the paid version of the plugin WordPress PopUp:

These are the bonuses that come with the paid version of the plugin in question, which, by the way, is offered for $19.

When you have completed all the necessary steps to create and configure a pop-up window, you need to save the result (button Save) and see what happened using the preview (button Preview PopUp):

If the result suits you, then you can activate the pop-up window (slider Status move to position Activ).

Ultimately, after all the above steps, I got the following result:

It turned out to be quite a comprehensive review of the plugin. WordPress PopUp, which allows you to create pop-up windows for Internet resources using the WordPress engine.

After reading the article, you can easily use the functionality of the plugin to your advantage on your website.

Recently, for one site, I was asked to create a feedback form for WordPress in a modal window. That is, when clicking on the “write to us” link, instead of going to the corresponding page, the user should open a new pop-up window, where the function of sending a message will be located. This is a more interactive solution, although not everyone likes it. I personally prefer the classic implementation with a contact page, but the forms on sites are different - so it will be useful to consider the solution to this problem. In my work I used 2 plugins: the well-known Contact Form 7 and the Easy Modal module to create a modal window in WordPress.

Update 05/18/2017: Judging by the latest reviews in the repository, in some cases there may be problems with its operation. If you are affected by this too, try a new solution from the developers called Popup Maker. Another alternative can be considered.

I won’t go into detail about installing and configuring Contact Form 7; all the information about it is here. The blog also had an article about what might be useful.

Let's move straight to the Easy Modal module. You will find him. The developers claim that this is the best solution for creating modal windows on a website with various interesting options for presenting content.

Over 10 thousand downloads, rating 4.6. Valid versions of 3.4 are 4.0.8, although I successfully ran it on WP 4.3.1. Despite the fact that the plugin has now been transformed into a new Popup Maker solution, on the website wordpress.org and when searching for plugins inside the admin panel you can still find the usual Easy Modal version 2.0.17. Using his example, I will tell you about creating a modal feedback window in WordPress.

After installation, a section of the same name will appear, where there are several items. We will need the very first of them - Modals. Click on the Add New button there.

This action will create a new modal window for your WordPress site. The element settings will have 4 tabs:

• General—general parameters.
• Display Options - display options.
• Close Options - settings for closing the window (using a click or the Esc button).
• Examples - examples of code to use.

General settings contain the window name (not displayed on the site), its title, content and download type. In the content block, switching to HTML mode, add the shortcode of your feedback form in the modal window.

Load Type has 2 options:

• Load Sitewide (for the entire site).
• Per Page/Post (for specific posts and pages).

A very interesting option. If you need a pop-up window that will be displayed on all pages of the site (the link is located in the sidebar, for example), then choose the first option. In the second case, the corresponding settings block will appear on the pages/posts of the site when editing:

You can activate and select your own pop-up window for a particular page. If you do not check the box, the element will not be loaded on the site.

The second tab of the module parameters is Display Options.

Here you indicate:

• window size - automatic, medium, adaptive, small, large, etc.;
• background - you can use a background for the form or display it without it;
• pop-up window animation;
• position (location) - top center, bottom right, etc.; fixed or not;
• indentation at the top of the screen.

Examples of displaying the output of a modal window in WordPress using the Easy Modal plugin can be found in the last tab.

You need to insert this code through a widget in the sidebar or in a text editor. It is no different from any other HTML code, the only thing is that the class of a specific modal window (eModal-1) is indicated here. For the second element you created, the class will be eModal-2, etc. To avoid making a mistake when inserting the code, the easiest way is to copy it from this page.

Editing the theme of a modal window

In the Easy Modal plugin, in addition to settings for a specific element, you can define themes for pop-up windows (Theme). The basic free version of the module has only one template, but this is more than enough.

This tool has 6 tabs:

• General - indicate the name of the topic;
• Overlay — background (here you can select the color and transparency of the form’s background);
• Container - different settings of the modal window itself (padding, frame, shadow);
• Title—popup window title parameters (font, shadow);
• Content — font and color of texts in the block;
• Close - form closing element (text and design).

As you can see, the appearance can be customized to suit your needs. I ended up with this simple WordPress form in a modal window:

After setting all the settings, don’t forget to save them (click the Save button).

Video of adding Contact Form 7 in Easy Modal popup

By the way, I found a video on working with the Easy Modal plugin, demonstrating the process of creating a modal feedback window in WordPress. There, the module interface is slightly outdated (some settings look different), but you can get the general essence. Perhaps it will be easier for someone to understand this issue with the help of a video.

Total about modal windows for WordPress

As mentioned above, now the Easy Modal plugin (judging by the official page) has been converted into Popup Maker. I managed to find a module of the same name in the repository, but I did not test it. I’m telling you about this so that you know what to look for if Easy Modal in WordPress in subsequent versions suddenly stops working.

Both solutions are free, although they have paid add-ons. They allow you to customize targeting, add more design themes, contain analytics and some other features. If you need a more advanced modal window mechanism, you can take a closer look at these extensions.

As for the task of opening the Contact Form 7 feedback form in a pop-up window, the basic capabilities of Easy Modal are sufficient. Moreover, this solution can also be used to display other modal windows in WordPress - useful tips, additional information, etc. Given the presence of an editor for inserting HTML code, you can display videos, forms, etc. in the pop-up window. Overall, a useful plugin. If you have any questions about it, write in the comments.

Hi all!

Popup plugin WordPress – layered Popups

So, after you download it from the link at the end of the post and install it on your blog or wordpress site, what do you get?

You will have the opportunity:

create a pop-up window;

use the preset popup template;

create your own popup window.

Frankly, I spent about a week in total translating this popup plugin and tried to do it well. I hope you enjoy using it.

Popup plugin settings

In the main settings, everything is in Russian, as mentioned above. There won't be anything complicated about it for you. You choose parameters, test them and choose the best option.

When creating a new popup, you will have access to a number of functions through which you can make the necessary settings in your WordPress pop-up window, thereby no one stops you from being creative.

If you see text like: “enter you message..” - don’t worry, you can replace it with any other text and in whatever language you want.

Mailing tab popup plugin

Here you have already been taken care of, but you can enter your own text as you wish.

Section Integrations popup plugin WordPress

For me personally, it is not of particular interest, but perhaps someone uses third-party services to send email.

Popups – A/B Campaigns

Here you can create companies and track which popup is most effective.

If you see that some forms are blocked, do not be alarmed, you can easily unblock them, but in a different section.

I’ll say right away that I didn’t particularly test this section.

If you click on the “create” button, additional settings will appear that you can adjust to suit your needs.

I haven’t tested the magazine either, so I’ll just mention it and nothing more..

The Popup plugin WordPress – layered Popups has a function that allows you to download and install additional popups, but the problem is, without a purchase code it is useless..

There is also a section with add-ons, but, unfortunately, they also cost money..

I would definitely look into the settings section first thing. Frankly speaking, to set all the necessary parameters.

There is also a FAQ section - “Frequently Asked Questions”, but it has nothing to do with the plugin and redirects the user to a page with answers in English, so it will not be possible to translate it.

Now I would like to give a few examples of what kind of WordPress popup window you can make, even using the popup examples built into the plugin: