Popups

There is also an option to have the popup only appear between specific dates - great for time-promotions.

Each of the popup types have a specific practical use. Typically, the Modal / Lightbox type would be used where you want to display your popup in isolation - in other words, the page stops scrolling until the popup is closed. This is why this type of popup has a dimmed background - it signifies to users that the popup must be closed before they can continue browsing your website.

The Fixed in Window option would typically be used where you want to allow users to continue browsing your site whilst the popup is open. It remains fixed in the browser window until closed and all page content will scroll behind it.

The normal option allows you to get really creative, particularly if you want to add something like a mega-menu to your page. For example, clicking a main menu link could open a normal popup containing your other menu choices. This will remain open and fixed to your main navigation link until it is closed.  Here is an example of that option in action. (Click the Mega Menu Link)

Creating the Popup Content

You create content in your popups in exactly the same way as you create your normal web pages. Simply add elements to the popup, style them how you wish , and you’re good to go. You can add images, buttons, video, text, forms and anything else you care to include. 

When your’e done editing the content, you can remove the popup from the canvas by clicking on the close button at the top-left of the canvas. This hides it from view so you can continue designing the rest of your webpage. If you wish to go back to editing your popup at any time, just select it from the popup icon at the top-left of the canvas.

Triggering the Popup

In order to make popups viewable in your website, they have to be triggered by an action. In most cases, that action will be users clicking a link of some sort, whether that be a menu, a button or text link. The on-click action will be  Open Popup. When selected, you will see an additional option to select the popup you want displayed.

Already open popups will also need some sort of trigger to dismiss, or close them. Again, this can be done via a link that Closes the popup. In most cases, the same link can be used to open and close a popup. Just click the Close When Clicked Again checkbox on the opening link.

Modal / Lightbox popups can also be closed by clicking outside the modal (on the dimmed portion of the page). In most instances, the popup itself will contain a close button (included by default when you create a new popup). This can be replaced with a text link, as illustrated on the mega menu example above, or replaced with a normal button if preferred. Whatever link type you choose, the on-click action will always be Close Popup.

Nested Popups

A nested popup is one that contains links/triggers to other popups. An example may be a popup that displays an index of image or video files, or maybe a list of different contact forms for different departments.  Clicking those links would open another popup in which the content has been embedded. In the example below, the link will open a popup with two image thumbnails. Clicking on the thumbnails will open the respective image in another lightbox. Furthermore, a second link in each of the image lightboxes returns the user to the index lightbox. 

This example illustrates the default behaviour of light boxes in Sitely. As one lightbox opens, any currently open one closes. This happens because lightboxes are treated as groups in which only one lightbox in the group can be opened at any one time.  Groups are identified by a Group ID as shown here - you’ll find the option in the style panel.

If you wish to override this behaviour, you can assign a different ID to each lightbox. However, doing so may cause several light boxes to be opened simultaneously - leading to user confusion, and forcing users to close each lightbox manually. Of course, there may be instances where you want to keep one lightbox open - maybe one offering instructions. Click the link below to see this in action.

Popup Placement

The Horizontal Placement options are:

• Use Canvas Position and Width - this will open the popup in the same position and width as you placed it on the canvas.
• Center Horizontally - This will centre the popup horizontally in the browser window.
• Align Left and Align Right - This will align the lightbox to the left or the right of the browser window. Selecting this option allows you to set a margin to the left or right of the browser window.

The Vertical Placement options are:

• Use Canvas Height - This will display the popup at the height it was created on the canvas.
• Adjust to Browser Height - This will extend the popup to the full height of the browser window. Selecting this option allows you to set a top and bottom browser margin.
• Fixed Height - This option allows you to specify an exact pixel height for the popup.

Additionally, the vertical placement option let you specify whether to Center the popup Vertically, or to have it align to the Top or Bottom of the browser window - again giving you the option of setting a top or bottom margin.

NOTE: All of the above options apply to Modal/Lightbox and Fixed in Window type popups - they are both relative to the Browser Window size. The Normal popup type doesn’t use these options because normal popups are relative to the page - not the browser. Therefore, wherever they are placed on a page, that is where they will appear.

DID YOU NOTICE?

A small icon appeared on the left of the screen. This is another popup to signify that a slide-in menu is available. The menu is also a popup. The icon is set to appear at a 90% scroll position, but once it appears, it will stay on the page. The side menu itself is a Fixed in Window popup, aligned to the left of the browser window and is full browser height. It’s triggered by Clicking the icon. Such is the versatility of Sitely popups. In a real site you would probably want the icon to be visible from the get go, rather than appear at a specific scroll position, But everything is possible.