WebMasterService N3rds@Work

PS PopUp

Gewinne neue Kunden mit Sonderaktionen und verwandle einmalige Besucher mit PS PopUp in treue Follower.

Mit seinen anpassbaren Vorlagen, dem intuitiven Designansatz und der Smart-Exit-Intent-Technologie bietet PS PopUp eine effektive Möglichkeit, zur richtigen Zeit am richtigen Ort zu werben.

Erstelle schöne Popups in wenigen Minuten

Baue Vertrauen in Deine Marke mit einem durchdachten Popup auf, das eine natürliche Erweiterung Deiner Website darstellt. PS PopUp bietet alle Designoptionen, die Du benötigst, um jedes Detail des Aussehens und der Funktionsweise Deiner Popups anzupassen.

3-templates-735x470
3 Vorlagen mit unbegrenzten Konfigurationsmöglichkeiten.

PS PopUp BASIC DownloadPS PopUp PRO kaufen

Atemberaubende Vorlagen

Beginne mit einer von drei vorgefertigten Vorlagen, von denen jede vollständig angepasst werden kann, um genau so auszusehen, wie Du es möchtest.

Jede Vorlage verfügt über einen eigenen Kopfzeilenstil und ein eigenes Layout für die schnelle Platzierung von Text und Bildern, sodass Du in wenigen Minuten wunderschöne Popups erstellen kannst.

Flip-image-735x470
Konfiguriere die Bildplatzierung mit einem Klick.

Vollständig anpassbar

Passe genau an, wie Dein Popup aussieht. Füge benutzerdefinierte Farben hinzu, lege die Anzeigegröße fest und füge sogar abgerundete Ecken hinzu.

Wenn Du möchtest, dass sich Benutzer ohne Ablenkung auf Dein Popup konzentrieren, deaktiviere das Scrollen, solange es sichtbar ist.

animation-735x470
Wähle eine sanfte, subtile Überblendung oder ziehe die Aufmerksamkeit Deiner Benutzer mit einer atemberaubenden Animation auf sich.

Eingangsanimationen

Füge Deinem Popup etwas Flare hinzu und hebe es mit integrierten Enthüllungs- und Nahanimationen hervor.

Wähle aus der Liste von 37 Animationen, einschließlich Bounce, Zoom, Fade, Flip, Wobble und Slipping.

preview-735x470
Klicke jederzeit auf Vorschau, um genau zu sehen, wie Dein Popup aussehen wird.

Vorschau Änderungen – Live

Während Du Deine Popups bearbeitest, kannst Du mit PS PopUp schnell eine Vorschau anzeigen – live – ohne zuerst auf Speichern zu klicken.

Liebst Du eines Deiner vorhandenen Popup-Designs? Dupliziere es und spare Zeit beim Erstellen Deiner nächsten Kampagne.

pop-up-color-picker-735x470
Style PS PopUp mit Farben, die perfekt zu Deinem Branding passen.

Unbegrenzte Farben

Übernehme die Kontrolle darüber, wie Dein Popup aussieht. Colormatch-Erscheinungsbild mit Deinem Marken- und Seiten-Farbschema.

Mit dem benutzerdefinierten Farbwähler kannst Du aus einer Palette auswählen. Wenn Du genau weißt, was Du möchtest, kannst Du einen Hexadezimalcode eingeben.

coffee-popup-735x4701
Bewährte Marketingtechniken, die Deine Zielgruppe effektiv erreichen.

Responsive und Retina Ready

Erstelle reaktionsschnelle Popups, die nicht nur fantastisch aussehen, sondern auf jedem Gerät lesbar und zugänglich sind.

Während Retina-Bilder auf großen Bildschirmen gut aussehen, kannst Du sie auf Mobilgeräten ausblenden, damit Benutzer die beste Version Deiner Kampagne sehen, die auf ihr Gerät zugeschnitten ist.

Timing ist alles

Wenn Du ein Popup anzeigst, kann dies genauso wichtig sein wie der Inhalt selbst. Aus diesem Grund haben wir erweiterte Optionen zum präzisen Auslösen von Popups basierend auf Zeit, Position auf der Seite und sogar CSS-Selektoren und Klicks hinzugefügt.

Smart Exit-Intent Technology

Die Exit Intent-Technologie von PopUp Pro erkennt das Benutzerverhalten und fordert sie mit einem sorgfältig zeitgesteuerten Popup auf, wenn sie Deine Website verlassen.

Melde Dich bei Deinem Admin-Panel für WordPress oder Multisite an und aktiviere das Plugin:

  • On regular WordPress installs – visit Plugins and Activate the plugin.
  • For WordPress Multisite installs – Activate it site-by-site (say if you wanted to make it a Pro Sites premium plugin), or visit Network Admin -> Plugins and Network Activate the plugin.

Getting Started

Once activated, you’ll see a new menu item in your dashboard: PopUp

PopUp Pro Menu

Adding a PopUp

Click on PopUp > Add New to open up the PopUp Editor.

PopUp Pro - Add New Menu

Here you will see a number of sub-sections for creating PopUps.

PopUp Name

Let’s start by giving the popup a name, this will help to keep organized if you have lots of popups.

PopUp Pro - Add New - Name
PopUp Contents

Here you provide the contents of the popup.

PopUp Pro - Add New - PopUp Contents
  1. Heading – you can optionally add a heading and subheading, nothing will display if these are both left blank.
  2. Subheading – optional, as with the heading.
  3. PopUp Feature Image – optionally, you can add a feature image as well. When using a feature image, you’ll see a few more options for customizing the appearance or for hiding it on mobile devices.
    PopUp Pro - Add New - Featured Image options
  4. PopUp Content – use the power of the visual editor to add practically any content you want.
  5. Call To Action Button Label – another optional element, you can easily add a button to link to a call to action URL.
  6. Call To Action Button Link – the URL to link to when the button is pressed.

How these elements display will depend on the settings you provide below as well your theme or any custom CSS you may have added.

Appearance

This section will provide a number of settings for customizing the popup’s look and feel.

You can always use custom CSS to full customize the appearance of the popup as well. We’ll gladly assist with that through the support forums!

PopUp Pro - Add New - Appearance

Select a Style from the following:

  • Simple
    PopUp Pro Preview - Simple
  • Minimal
    PopUp Pro Preview - Minimal
  • Cabriolet
    PopUp Pro Preview - Cabriolet

Tick the ‘No rounded corners‘ option to turn off rounded corners.

Tick the ‘Use custom colors‘ option to specify custom colors. Doing so will allow you to select colors using a color dialog.

PopUp Pro - Add New - Appearance - Colors

Tick the ‘Use custom size‘ option to specify a custom width and height, otherwise, the popup will be responsive (it will adapt in width based on the browser and viewing device).

The ‘Allow page to be scrolled‘ option will allow users to still scroll the page when the popup is displayed.

Behavior

Customize how you want the popup to behave using settings in this section.

PopUp Pro - Add New - Behavior
  • Enter a value for ‘Appear after x seconds’ and the popup will display after that number of seconds has passed.
  • Enter a percentage value and select either percentage or px for the ‘Appear after x%/px of the page has been scrolled‘ setting and the popup will display once that portion of the page has been scrolled.
  • Specify a CSS element for the ‘Appear after user scrolled until CSS selector’ option and the popup will be displayed until the user scrolls up to that element. It will then close automatically.
  • Easily add a “Never see this message again” link. Users can click the link and never see the popup again.
  • Tick the ‘Close button acts as “Never see this message again” link‘ in order to have the popup’s close button act as that link.
  • By default, popups will be closed when the user clicks anywhere in the background outside of the popup. The ‘Click on the background does not close PopUp‘ option turns that off.

If you’ve ticked the JavaScript Events condition in the settings (PopUp > Settings > Available Conditions), you’ll see some additional settings here.

PopUp Pro - Add New - Behavior - Javascript events
  • Specify a CSS element in the ‘Appear after user scrolled until CSS selector‘ field in order to show the popup after the user scrolls to the specified element on the page.
  • The ‘Appear when the mouse leaves the browser window‘ option lets you show the popup only when the mouse leaves the window on desktop computers. This provides a great sort of exit-intent functionality.
  • Specify a CSS elements in the ‘Appear when user clicks on a CSS selector‘ to show the popup when the specified element is clicked.
Displaying Conditions

This section will show a list of options you can use to display popups based on certain conditions. The conditions available here will depend on the conditions you select from the settings page at PopUp > Settings.

PopUp Pro - Add New - Displaying Conditions

To activate a condition, simply select it from the Available Conditions list. You’ll then be able to interact with any additional settings it provides in the opposite pane.

The available conditions are based on the conditions you select at PopUp > Settings > Available Conditions.

The following tips can be helpful when specifying your conditions:

  • Try not to use too many or you may set a condition that cancels itself, causing the pop up to not display when you want it to.
  • When adding URLs to conditions, be sure to include the http:// part at the beginning, and a trailing slash (/) at the end.
  • However, as an exception, when using the “approximate URL” & “specific URL” conditions, any URLs entered should not include “http://” or “https://” at the beginning.
Preview and Save

While editing a PopUp, you’ll always see options for previewing, saving and activating it.

PopUp Pro - Add New - Save
  • Click the Preview PopUp button to see a quick preview right in your admin area.
  • Use the Status switch to Activate or Deactivate the popup. If it is Inactive, it will not be displayed in your site’s front-end.
  • Click the ‘Move to Trash‘ link if you wish to delete it.
  • Click the Save button to save any changes.

Here’s an example of how the popup can look:

Click 'Preview PopUp' to see it in action.

Editing a PopUp

You can easily edit PopUps by going to PopUp > PopUps.

PopUp Pro Menu

You’ll see a list of them along with various details and options.

PopUp Pro - PopUps

The Conditions column shows you all the conditions in use for the popup.

The Order column shows you the order, helpful for display purposes since you can have multiple popups in one page. The order will designate which is displayed first. The order can be changed by hovering over a popup and dragging the bar icon.

The Active column lets you know if the popup is Active or Inactive.

Hover your mouse over the title of a PopUp and you’ll see a number of options to interact with that specific PopUp:

  • Bar icon – click and drag this icon to change the order of the popup in the list.
  • Edit – go to the edit page for this popup.
  • Activate/Deactivate – Turn the popup on/off.
  • Preview – easily preview the popup right from here.
  • Trash – delete the popup.

On larger viewing devices such as desktops, you’ll see a Bulk Actions drop-down with the following options:

  • Move to Trash
  • Active
  • Deactivate
  • Toggle activation

Simply select any items you’d like to use those bulk actions on, select the bulk action you want and click the Apply button.

Add another popup by clicking the Add New button.

PopUp Settings

Let’s check out the settings at PopUp > Settings.

PopUp Pro - Settings Menu

You’ll see a number of sub-sections here, we’ll go through each.

PopUp Loading Method

In this section, you’ll be able to select the method used to load popups as well as the method used for country lookups.

PopUp Pro - Settings - Loading Method

From the Load PopUp Using drop-down, you’ll be able to select from the following:

  • Page Footer: Include PopUp as part of your site’s HTML (no AJAX call).
  • WordPress AJAX: Load PopUp separately from the page via a WordPress AJAX call. This is the best option if you use caching.
  • Custom AJAX: Load PopUp separately from the page via a custom front-end AJAX call.
  • Anonymous Script: Load PopUp like WordPress AJAX, but the URL to the JavaScript file will be masked.

If you have difficulty getting your popup to display, try changing the loading method here.

And from the Country Lookup drop-down, you can select from the following:

  • Host IP – Uses the hostip.info web service.
  • Telize – Uses the telize.com web service.
  • Free Geo IP – Uses the freegeoip.net web service.
  • Local IP Lookup Table – Uses a local lookup table. Please refer to the “Using a Local Geo-Database” below for details on using this option.

Click the Test my Location button to test your location using the selected service. You’ll see a message displayed showing your IP and location details.

PopUp Pro - Settings - Test my location
Supported Shortcodes

In this section, you will see a list of all the shortcodes the plugin detects, using the Shortcode API.

PopUp Pro - Settings - Supported Shortcodes

Some plugins or themes might provide shortcodes that only work with certain loading methods, some may be designed to work only under certain conditions and may not work. This list explains which shortcodes can be used with each loading method and which shortcodes will not work.

Avaliable Conditions

In this section, you will find a list of all the conditions available for showing popups.

PopUp Pro - Settings - Available Conditions

The conditions you select here will activate certain rules and possibly other settings with the PopUp editing screen. The conditions currently available, along with the rules that are activated when using them, are as follows:

NameActivated Rules
Advanced URL Adds advanced URL matching with regex support.On approximate URL
Not on approximate URL
Basic URLSimple and fast URL matching.On specific URL
Not on specific URL
Browser typeConditions that check browser details.Only on mobile devices
Not on mobile devices
JavaScript EventsNew Behavior Options: Show PopUp when the mouse leaves the browser window or when the user clicks somewhere.
MembershipConditions based on the user’s Membership details.By Membership Level
By Membership Subscription
PopUp DetailsTest for PopUp specific values.PopUp shown less than
Post CategoriesAdds post category related rules.On post category
Not on post category
Post TypesAdds post type-related rules.For specific Post Types
Not for specific Post Types
ReferrerExamine how the visitor arrived on the current page.From a specific referrer
Not from a specific referrer
Not from an internal link
From a search engine
RolesConditions based on the user role of the current user.Visitor has role
Visitor does not have role
Screen SizeAdds a condition that can limit PopUps to certain screen sizes.Depending on screen size
User statusConditions based on the current user.Visitor is logged in
Visitor is not logged in
Visitor has commented before
Visitor has never commented
Visitor LocationConditions based on the location of the visitor.In a specific Country
Not in a specific Country
XProfile FieldsBuddyPress: Examine values in the users extended profile.On XProfile match
Not on XProfile match
Save All Changes

When you’re done adjusting the settings, be sure you click the Save All Changes button!

PopUp Pro - Settings - Save All Changes

Using a Local Geo-Database

To use the Local IP Lookup Table option in the settings (PopUp > Settings > Country Lookup), you must first add the required table to your database.

Go to https://github.com/shrkey/countrylookupfromip and download the zip file by clicking the “Download Zip” button in the sidebar. Then unzip that file on your computer. Inside the folder, you will find a file called countrylookupip.sql.

popup-4530-country-addon

Import countrylookupip.sql to your database. In phpmyadmin, be sure you are in the root of your database. Click the “Import” tab, then the “Browse” button and browse to the countrylookupip.sql file you just unzipped. Leave all other settings as they are, and click the “Go” button at the bottom.

popup-database-import

Once the new table has been added to your database, you can enable the Local IP Lookup Table option.

IMPORTANT: Always make a backup of your database before performing operations like this, just to be safe.

That’s it!

We hope you enjoy using PopUp Pro! If you have trouble with any aspect of configuration, code or general usage, or if you have a cool feature suggestion to make, please head on over to the community forums where support staff and other helpful members are waiting to lend a hand.