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.