WP Popup Magic User Guide Introduction Thank you so much for your purchase! We're excited to present you with the most magical popup solution for WordPress! If you have any questions, please email us at support@wppopupmagic.com. Installation Download the file as indicated in email you received from your purchase. If you did not receive an email, please check your spam folder. Login to your site Go to Plugins >> Add New Click the upload link near the top of the page Click Browse to located the attached file you downloaded, click the Open button or double click the.zip file you downloaded Click the Upload button Click the Activate link Choose WP Popup Magic from the left admin menu to manage your popups WP Popup Magic User Guide Page 1
Rocket Fast Start - Import Our Demo Popups The quickest way to get started is to install all of the demos from our website. Please login to your account to download the latest Demo Import XML File. 1. Once you have downloaded the Demo Import XML File from your account, make sure you are logged into your WordPress Site 2. Go to Tools >> Import 3. Click the "WordPress" link - if you do not already have the import plugin installed you will be prompted to install it. Please install that plugin now if needed and then continue. 4. As noted in the image above, click the Choose File button and locate the Import Demo XML File you downloaded. 5. Click the Upload file and Import button 6. Under Assign Authors, I recommend using the dropdown and assigning the author to an admin account 7. Check the "Download and import file attachments" checkbox 8. Click the Submit button 9. That's it! All of the demos are now available under the WP Popup Magic link from the admin bar Important notes: We have put all demos into "Draft" mode so none of the popups are live on your site. Feel free to delete and modify these popups to meet your needs WP Popup Magic User Guide Page 2
Importing & Exporting One of the outstanding features of this plugin is it gives you the ability to import and export your own popups. Importing uses the same process posted above for importing our demo popups. To Export your popups, however, just do this: 1. Go To Tools >> Export 2. Select the Popups option 3. Click the Download Export File This will allow you to easily migrate your popups from one site to another without the hassle of recreating your popups. Also, when you import your popups, they will be put into "Draft" mode, keep the popups from appearing on your new site until you have approved them for publishing. Popup Visibility Management WP Popup Magic uses the same status tools as a standard WP page or post uses to manage its visibility to your site's visitors. Manage Popup Visibility Draft - disables the plugin from appearing Published - means the plugin is "live" and can be seen by your site's visitors Delete a popup Move to trash - Want to remove a popup? Click the Move to Trash link and it will be removed from your active list of plugins, and instead will be placed in the "trash" until emptied. WP Popup Magic User Guide Page 3
User Interface Part I Next I will indentify each area of the plugin to give you an understanding how each setting impacts your popup. The descriptions below are referenced in the image above. 1. Title - Just like with and Page or Post, your Popup needs a name. The name is only used to help you identify the plugin when managing your plugins. It is not viewable to your visitors. 2. Editor - Use this space to edit the content of your popup, just like you would do for a page or post. You can embed videos, images, text, etc. 3. CSS - The custom CSS comes in handy for advanced users. It allows you to add classes to the popup, as well as write custom styles. If you do not know what CSS is or how to write the code, no worries. It's only there as a feature for those who need it. 4. Attributes / Order - Our plugin allows you to place multiple popups on the same page. The order setting gives you control over the popups' stacking order. Low to High is respectively Bottom to Top. Example: You have a full page popup with another centered page popup on top of it. Assign the full page popup an order number lower (e.g. 1) than the centered popup's number (e.g. 2). If you reverse the order, the centered popup will not be visible as it will be hidden under the full page popup. 5. Size - We've included a few options here for the size of your popup. Fit Contents will automatically create a tight wrapped popup using the elements you have placed within the editor. I suggest using this feature first to see if it meets your needs, as this automates the process for you. Use background image size should be selected if you opt to use a background image for your popup's background. Please refer to the Background section in Part II for more information on how that works. This setting determines the size of your background image and sets the size of your popup to those dimensions. Custom size overrides all automated settings and enables you to put in whatever fixed (px) or percentage based height and width values you desire. WP Popup Magic User Guide Page 4
6. Overlay - With this option you can enable or disable an overlay from appearing under your popup. This gives the popular "Lightbox" / dim the lights effect that many folks love because it helps highlight the popup. When enabled, you can also select the color and opacity percentage. 7. Border - Want a border around your popup? Use these settings to manage the border width, style and color. Don't want a border? Just set the width to "0" or style to none. WP Popup Magic User Guide Page 5
User Interface Part II 8. Border / Content Padding - Use these settings to set the amount of padding between the edge of your popup and the content inside. Note: This is particularly important when you are using background images. You may need to move the content around within the background image to get it's placement correct. 9. Position - Check the "Center on screen" box if you want your popup to automatically be centered on the page for you. Otherwise, you can use these settings to determine the placement of the popup, and the distance from its respective edge you want it to appear. 10. Slide Animation - We offer a variety of effects with how your popup enters and exits a page. Select your desired Effect from the top dropdown, and then select / set the remaining options 11. Close Button - We have included a couple of "close button" designs for you to use with your popups. However, you can upload your own buttons too by clicking the Upload Images button and selecting your file. Under the "Show / Hide Advanced Options, you can alter the CSS / HTML of close button if needed. This again is intended for advanced users. There is also a "Revert close button HTML to default" link should you need to go back to our default button's code. 12. Background - Choose "Color" to simply change the background color of your popup. We've included a color picker for you to help you choose your color. If you want to use a background image, select the "Image". This allows you to use one of the images we've provided you in the image library or the ability to upload your own image using the Upload Images button. Once you upload an image, it will be accessible for all your popups. Please note that you can upload your own images directly into the "close button" and "background" image libraries using FTP software. Just upload your images into their respective folders and they will appear as selectable options for you to use. background images folder: wp-content/plugins/wp-popup-magic/images/backgrounds close button images folder: wp-content/plugins/wp-popup-magic/images/close-buttons Deleting images from your libraries WP Popup Magic User Guide Page 6
You can only delete images in your library by navigating to the folders above and deleting your images. We have done this by dedign to prevent any accidental deletion of images, as deleting a background or close image would impact all popups that are configured to use those images. WP Popup Magic User Guide Page 7
User Interface Part III (Triggers) Triggers allows you to do the following: Determine what devices to show your popup How often to show your popup Where on your site your popups will appear How the popup is triggered or initiated Let's dig into these options so you can set your plugin at the optimal settings for your needs. Mobile Show on mobile - will display your popup on all viewports including a mobile device Disable on mobile - your popup will not be displayed on a mobile device Show on mobile only - your popup will only be displayed on a mobile device Frequency No limit - means your popup will display every time the page is loaded. Great to use in testing. In a live environment, be careful with this setting as you don't want to annoy your visitors with the same repeated popup appearing over and over. Limit - Allows you to set the number of times per day(s) that the popup will be displayed across your site. Pages / Posts From the dropdown select the pages and posts where your popup should appear or not appear. If you choose to show/ hide on specific pages/posts, you will see another textbox appear labeled: Page/post IDs. To quickly find your page and post IDs, you can use the "Click here to view the list of all pages/posts and their IDs." You'll see a couple of options from the dropdown that refer to shortcodes. Shortcodes are snippets of text that you can include within one or many pages or posts to trigger when the popup will be displayed. If you include shortcodes within your site's pages / posts, it will always render. More on this in the next section: Events Events The event is what needs to occur in order for a popup to be displayed. There are 3 event types: 1. Timing 2. Exit Popup 3. Browser Scroll WP Popup Magic User Guide Page 8
Please see the next section for an in-depth look at Events WP Popup Magic User Guide Page 9
The Events Trigger There are 3 types of events: 1. Timing - Set the number of milliseconds (1000 = 1 second) to wait once the page is finished loading. This is great if you want to delay the popup to show only if the user has been on your site for a specific period of time. Set to "0" to show the popup immediately upon loading the page. 2. Exit Popup - Great way to present your visitor with one final popup before they leave your site. This feature works by determining when a user's mouse has left the content section of your site, and they are headed towards the navigation buttons in their browser. 3. Browser Scroll - This is one of the cool features of our plugin. It allows you to specifically target when a popup will be displayed within a page or post, and when it should be hidden. When you check the Browser Scroll checkbox, you will see the following options appear: Start Trigger Target (where a popup is activated) & End Trigger Target (where a popup is deactivated) Important note: If you are using this on a page that does not have a lot of content, meaning the entire page or post is viewable without the need to scroll, the popup may be activated upon page load, or it may not be able to be activated depending on your scroll settings. Also, please keep in mind that the users screen resolution will impact their experience. I would recommend using this option is you have multiple pages of content Now, let's explore the options available for the start and end triggers: HTML element (by CSS selector) - you can type in a specific ID or class name of a CSS element. Once that element becomes visible on the user's screen, the popup will be activated. y-offset (in pixels) from top of webpage - you can specify the number of pixels from the top of the page that the user needs to scroll the page to trigger the start, and optionally, the end, of the popups visibility. y-offset (in pixels) from bottom of webpage - you can specify the number of pixels from the bottom of the page that he user needs to scroll the page to trigger the start, and optionally, the end, of the popups visibility. Shortcode - copy and paste the Start Trigger Target shortcode and optionally the End Trigger Target shortcode to manually assign the locations of where you want your popups to be displayed, and hidden, as a user scrolls up and down your page. WP Popup Magic User Guide Page 10
Duplicating an existing popup We've made it a snap to duplicate an existing popup. It's one of the little feattures that saves you tons of time and hassle. 1. Just Click on the WP Popup Magic >> All Popups link 2. Hover over the title of the popup you wish to duplicate 3. Click the Duplicate link A new popup will appear. Just open it and edit away. Inserting shortcodes into popups We have enabled shortcodes from other plugins and themes to run inside of the popup. For example, you could insert a contact form inside one of your popups using the shortcode your form plugin provides. Image Packs Coming soon. Not a designer? Image packs will provide you with a variety of graphics to make your popups style and pizzaz. Feedback / Improvements We are open to any of your ideas on how we can improve the plugin. We have spent months getting the plugin to this point, but we know there is always room for improvement. Please send your requests to support@wppopupmagic.com. We appreciate your feedback! If you like working with us, you may also want to check out AlohaThemes.com to give your WordPress site a cool new look or check out FirstPageMobile.com to discover how to create an amazing mobile friendly landing page for your website in minutes. Thank you again for the opportunity to serve you. - Scott Bernadot WP Popup Magic User Guide Page 11