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.

Still need help? Contact Us Contact Us