Advanced Theme Builder Introduction
Description
Background Images
The Advanced Theme Builder allows you to attach background images to three different elements of your popup: the Popup Overlay, the Popup Container, and the Close Button. You can attach background images from the Theme Editor by selecting Popup Maker -> Popup Themes from the WordPress Admin, then clicking the theme you wish to edit.
Background Image and Overlay Popup Elements
Popup Overlay
From the Theme Editor, look for the Overlay Settings Pane:
Under the Background Type setting, select Image from the drop down menu, and you will be presented with several options to customize the appearance and behavior of your Popup Overlay background image, plus a link to select the background image. Read the full details on these settings below.
Popup Container
Background Image
From the Theme Editor, look for the Container Settings Pane:
Under the Background Type setting, select Image from the drop down menu, and you will be presented with several options to customize the appearance and behavior of your Popup Container background image, plus a link to select the background image. Read the full details on these settings below.
Background Overlay
From the same Container Settings Pane, look for the Background Overlay Settings:
By default, there is no Color selected and the Opacity handle is not displayed, but when you select a Color, the Opacity Setting will be displayed.
Close Button
From the Theme Editor, look for the Close Settings Pane:
Under the Background Type setting, select Image from the drop down menu, and you will be presented with several options to customize the appearance and behavior of your Popup Close Button background image, plus a link to select the background image. Read the full details on these settings below.
Background Image Settings
Image
Clicking the Select Image link will allow you to upload your image or select it from your WordPress Media Library
Repeat
Choose from four different Repeat Settings:
None
This will not repeat your background image and will render it on the front it only once.
Tile
This setting will repeat your background image both horizontally and vertically, spanning it the entire width and height of the chosen popup element.
Horizontal
This setting will repeat the background image only horizontally, spanning it the width of the selected popup element.
Vertical
This setting will repeat the background image only vertically, spanning it the entire height of the chosen popup element.
Position
Choose from many different Position Settings, allowing you to customize where your background image will be rendered within the popup element chosen to have a background image attached.
Attachment
By default, all background images attach as Scroll.
Scroll
The Scroll background image setting means that when you scroll up or down, the background image will scroll with the popup element that has the background image attached.
Fixed
Setting the value to Fixed means that when you scroll, the background image will stay in the same position without moving along with the scrolling action.
Size
You can choose between three different Size Settings for your background image: None, Fit, and Fill.
None
The None setting keeps your background image it's actual image size. If the image is bigger than the element it is attached to, then those out-of-bounds portions won't be seen as they are outside the bounds of the element the image is attached to.
Fit
This setting will fit the image inside the element it is attached to. So, for example, if your image is bigger than the popup element it's attached to, then it will be scaled down so that the whole image is visible inside the popup element.
Fill
The Fill Setting will fill up the popup element with the image. If you had an image that was smaller than the popup element it's attached to, then you can use the Fill Setting to make the image take up the whole popup element. Obviously, this would cause your background image to become pixelated, but can still be handy nonetheless.