Adding a Background Image
This tutorial covers how to add a backfgound image in the Builder
- Add New Page.
- Browse Images.
- Filter results.
- Select & Import.
- Expand Library.
- Select Layer.
- Drag and Drop.
- Background Folder.
- Select All Layers.
- Place Buttons.
- Buttons Added.
- Add Commands.
- Functional Buttons.
- Complete Buttons.
Step One: Add New Page
In the Panels tree, right click on your page type and select Add page from the list.
Step Two: Backgrounds
Within the Page is a Backgrounds folder. Background images are in a layer separate
Step Three: Browse Images
Click on the Actions arrow in the Images tab and select Browse libraries.
Step Four: Filter results
You can filter the image libraries displayed by typing the word "backgrounds" into the filter area and press the show button. The filter will only display image libraries with the word backgrounds in the description or name.
Step Five: Select & Import
Select the library you wish to import by checking the box next to the name of the Device. Click on the Import button to import the image library into your Builder interface.
Step Six: Expand Library
In the Images tab, you can now view the newly imported library.
Step Seven: Select Layers
The background images are in the background layer while buttons, links and labels are in the foreground layer. Select the background layer to enable the placement of background images. Any image placed in this layer will be a background image and can not have any device commands associated with it. Background images are for visual effect only.
Step Eight: Drag and Drop
Drag and drop a background image into the main interface window. When a background image is placed, the word Background is displayed to indicate that it is a background and not a button.
Step Nine: Background Folder
In the Panels tree, you will now see the background image that was placed in the interface window.
Step Ten: Select All Layers
Select the all layers option to exit the backgrounds layer.
Step Eleven: Place Buttons
From the Images tab, drag and drop images to be used as buttons in the main interface.
Step Twelve: Buttons added
In the Panels tree, you can view the buttons added. Notice that the buttons are separated from the background images and have a different icon.
Step Thirteen: Add Commands
From the Devices tab, drag and drop device codes to the buttons. This process is the same as any other button and will not be affected by a background image.
Step Fourteen: Functional Button
After Device codes are added to a button it will no longer be grayed out and is a functional button. Repeat adding Device codes to the remaining buttons on the Page.
Step Fifteen: Complete Buttons
All of the buttons have a Device code associated with them and are now functional.