Layout overview

The layout section of the lightbox editor has everything you need to get the general look and feel of the lightbox set up the way you want. Below you'll find a breakdown of what you'll find in the layout section. 

Container

Dimensions

The dimensions section has a slider for the height and the width. Slide either of them to the right to make the lightbox taller or wider, and to the left to make it shorter or narrower. 

Border

Use the style dropdown to pick the type of border you want, and then set the color in the color field. The width will determine how thick the border around your lightbox is, and the radius will determine how rounded the corners are. 

Background

Here you can set the color of the background. If you want to use a gradient, be sure to select a gradient color, and set the "use gradient" button to On. If you want to use a background image, select the image you want to use from the dropdown, or click the Add button to upload an image. Be sure to set the use image button to On. You can also set whether the image will repeat, and where it will be positioned. 

Text

The text tab contains everything you need to add blocks of text to your lightbox. 

The text tab lets you add four different blocks of text. Click on the text block you want to edit to get started. 

Display Mode

Set the display mode to On to display the text on your lightbox, and set it to Off to hide it. 

Text

As you might have guessed, this is where your text goes ;)

Font

Set the font you want to use, the color, and the size. Use the alignment buttons (left, center, right, and none) to determine the text alignment, and the Style buttons to set whether the text is bold, italic, or underlined. 

Buttons

The buttons tab gives you all the tools you'll need to add a button to your lightbox, and set its functionality. 

You can add up to four buttons to your lightbox. Pick the button you want to edit by clicking one of the button links at the top of this section of the editor. 

Display Mode

Set this to On to display the button you're working with on your lightbox. 

Text

Use this field to add text to your button. 

Click Action

Select the action you want to happen when the button is clicked using this field. You can set the button to submit the form, to close the lightbox, to redirect to a website, or to download a file. Depending on the option you choose you'll get additional options (like the Redirect URL field in the picture above). 

Font

Set the font, the font size, and the font color in this section. Then use the alignment options to set whether the text on the button will be aligned left, center, right, or whether it will have no alignment. Then select whether you want the font to be bold, italic, or underlined. 

Border

Use the style dropdown to pick the type of border you want, and then set the color in the color field. The width will determine how thick the border around your button is, and the radius will determine how rounded the corners are. Next to the word Border, you'll see four links - all, normal, hover, and focus. These refer to the color settings for each mouse action. the All section will apply your color selections to the button no matter what mouse action is being performed. Normal will let you set the color when the mouse pointer isn't on the button. Hover will let you set the color when the mouse is over the button. Focus will let you set the color for when the visitor clicks the button. 

Background

Here you can set the color of the background. If you want to use a gradient, be sure to select a gradient color, and set the "use gradient" button to On. If you want to use a background image, select the image you want to use from the dropdown, or click the Add button to upload an image. Be sure to set the use image button to On. You can also set whether the image will repeat, and where it will be positioned. you'll see four links - all, normal, hover, and focus. These refer to the color settings for each mouse action. the All section will apply your color selections to the button no matter what mouse action is being performed. Normal will let you set the color when the mouse pointer isn't on the button. Hover will let you set the color when the mouse is over the button. Focus will let you set the color for when the visitor clicks the button. 

Images

The images section lets you add up to four images to your lightbox Click one of the four image links at the top to get started editing your images. 

Display Mode

Set the display button to On to show the image on your lightbox, and set the maintain aspect ratio button to on to keep the image from getting skewed or stretched when you resize it. 

Image Source

Select the image you want to use from the dropdown menu, or click the Add button to upload a new image. 

Border

Use the style dropdown to pick the type of border you want, and then set the color in the color field. The width will determine how thick the border around your image is, and the radius will determine how rounded the corners are.

Border Padding

Slide the slider to increase the padding around the border, and slide it left to decrease the padding.

HTML

The HTML tab lets you add up to four pieces of HTML to your lightbox.

Display Mode

Set the display mode button to On to enable the HTML on your lightbox. 

HTML

Add your HTML code to this box.