1. Home
  2. Docs
  3. XYZ Popup
  4. User Guide
  5. Quick Box

Quick Box

Quick Box is another type of popup which is used to display quick access contents like contact, feedback, social media links etc. in the pages.
It has 2 sections, a title and the body.
The title section only will display in the pages when it loads. We can view the content when we click on the title.
The settings for the Quick Box are given below.
To create a quick box, enter a name and select the display layout “Quick Box”.
XYZ Popup-Quickbox
Title Settings
The title settings of the quick box are given below.
XYZ Popup-Quickbox title
Title : We can enter the title of the Quick Box here.
Title font size : This is the font size of the title.
Title color : We can select the Title color here.
Content
The quick box content can be entered here.
XYZ Popup-Quickbox content
Show referrer messages? yes/no : To show referrer URL based messages in Quick Box, select ‘yes’. Otherwise, select ‘No’.
Content : Enter your Quick Box content here.
Position Settings
We can display the Quick Box in 12 positions.
For the position, we want to select the Quickbox Display Positions and alignment.
For the top and bottom positions, there are 3 alignments. Left, center and right.
So we can select top left, top center or top right positions. The same case with bottom positions.
XYZ Popup-Quickbox position
Other positions are left and right positions with top, center and bottom alignment.
We can select left top, left center or left bottom positions and right top, right center or right bottom positions.
We can also set the width and height of the quick box.
Effect settings
XYZ Popup-Quickbox effect
Slidable option : This is the option of sliding the quick box from outside the webpage. If the sliding option is ‘No’, the quick box will display without a sliding effect.
Display Logic Settings
XYZ Popup-Quickbox display
If the quickbox popup content is larger than the window, we can hide the extra content or allow a scrollbar.
You can select your option for “If content is larger than window?
Target Device – You can target the quickbox in your website for users using different devices. The possible devices are desktop/laptop, mobile and tablet. You can select the target devices here.
If you have selected all devices, the quickbox will display if viewed from all these devices.
Display as iframe – We can display the quick box in iframe or in the same page.
If you are using the iframe, any link or buttons in the quick box will open in the same quick box.
To open a link in a window outside the quick box or to use a social media button, please disable the iframe display.
Style Settings
Here we can select the style of the quick box.
XYZ Popup-Quickbox style
Z index – Z index determines whether the quick box display under or above the pages.
As the value of z index increases, the quick box become on top(above) of all page contents.
Background color – We can select the Quickbox Popup content background using a color picker.
Popup Opacity (0-100) – This is the opacity level of the popup. If the value of opacity is ’0′, the popup should be a transparent one. If the value is ’100′, the popup should be opaque.
Border color – This is the color of the Quickbox Popup border.
Border width – We can set the width/thickness of the quick box border here.
Border radius – If you want a rounded corner for the quick box, use this option. As the radius increases, the roundness also increases. Use ’0 (zero)’ for rectangular edges.
Was this article helpful to you? Yes No