Flo Popups

With the latest Flex Update, there's a new functionality that allows you to create a Pop-Up menu using a Flexblock. This is an option that was highly requested, and we're so excited to finally have it available for all Pronto theme owners!

Adding a Popup

To add a popup:

Press the “Add Block” button.
Click on the “Flo Popup” button inside the “Flo Blocks” category.

Opening Popup Options

Inside the builder, you’ll find the “Popup Settings". By clicking it a modal with animation, appear, disappear options will open.

Appear Options

Popup ID. This option is used to give the popup a unique id which can be later used/linked with the Popup Toggle (also known as burger navigation menu) or text links to open this specific popup.
Auto Appear. If turned on, the popup will appear on page load after the set delay (set by the“Delay” slider).
Allow Page Scroll. This options controls whether the page will be scrollable while the popup is open.
Appear when Scrolled to Block. Inside this option you can set the id of a Gutenberg block, that when scrolled to, will make the popup open.
Animation. Inside this option you can set the appear animation type and it’s properties.

Disappear Option

Auto Disappear. If turned on, the popup will disappear on page load after the set delay (set by the “Delay” slider).
Disappear when Scrolled to Block. Inside this option you can set the id of a Gutenberg block, that when scrolled to, will make the popup close.
Disappear when Clicked Outside. If turned on, any click outside the popup area will close it.

Updating Popup Options

Updating popup options is a two step process. After making changes to the popup options, click on the “Update” button and next the “Save” button inside the Flex builder.

Working with the Editor

The Canvas. When editing a popup, the canvas of the builder represents the screen on which the popup will appear. Taking that into consideration, you have the freedom to plan, configure and design the popup in any possible way.
Shape Element. In the example above, the area of the actual popup is defined by a “Shape” element. All elements will appear on your page as you position them on the canvas.
Close Button Element. In addition to auto-disappear options, the popup can be closed using the “Close Button” element.

Positioning and Sizing Elements Relative to the Screen

Popups are different from ordinary blocks by the fact that they are displayed on top of the page and should be completely visible. Thus, they should be designed taking into consideration the screen rather than the content itself. As screen sizes / browser windows differ in width and height, i.e. the elements inside the popup that should appear in center should be aligned to the center of the screen (1). Popups / Elements that should cover the screen entirely or just vertically should have the “Fullscreen Height” option enabled (2).

Set Fullscreen Height. Elements with this option turned on will always match their height to the height of the screen / browser window.
Vertical Alignment. Elements inside the popup can be positioned relative to the top (default), center and bottom of the screen. The effect is visible when resizing the browser window or on screens of different height.

Example:

Opening Popups From Other Blocks

Method 1. Via the “Popup Toggle” element (also known as burger navigation menu)

Popup Toggle Element (also known as burger navigation menu). For the toggle element you can use the icon or text layout and adjust the settings: alignment, icon size, fonts & colors.
Popup ID Field. Here you can set the id of the popup that needs to be opened.

Method 2. Via link.

Any element that has link functionality (i.e. a “Text” element (1) ) can be used to open a popup by setting url as “#” + the popup id(2).

Global and Local Popups

Global Popups. Popups that are created inside headers and footers can be shown on any page where the corresponding header or footer appears.
Local Popups. Popups that are created on a page, post or gallery will appear only on these specific pages.