This documentation provides comprehensive insights into the Lightbox Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Lightbox block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Lightbox block.
3. After on the right side, Click on the Block. Then the Lightbox details appear.
4. Here shows all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

Toggler Section

Go to Basic > Toggler

Button Explore

Set the toggler button and work with the following controls,

1. Select Light Box: Set the lightbox as a button.
2. Show Title: Enable the switcher to show the Title.
3. Show Sub Title: Enable the switcher to show the Sub Title
4. Show Icon: Enable it to show the Icon.

5. Title: Set the title for the lightbox.
6. Sub Title: Set the sub title.
7. Selected Icon: Select the Icon.
8. Alignment: Make alignment of the lightbox.

Poster Explore

Select the poster for the lightbox and follow the controllers,

1. Select Light Box: Select the lightbox as a Poster.

2. Poster Image: Select the poster image.
3. Image Resolution: Set resolution for the image.

4. Poster Height: Set height for the poster.
5. Show Icon: Enable the switcher to show the Icon.
6. Icon: Select the icon for it.

Lightbox Content Section

Go to Basic > Lightbox Content

Button Explore

This controls appear is for the lightbox button.

1. Select Light Box Content: Select the content for the lightbox ( e.g.: Image, Youtube, Vimeo, Google Map etc.)
2. Youtube Video Url: Set the url for the youtube video.
3. Content Caption: Set the caption for the content.

Poster Explore

1. Select Light Box Content: Select the light box content image.
2. Image Source: Select the image for lightbox.
3. Content Caption: Set the caption for the content.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Button Section

Go to Style > Button

Normal State for Button

Customize the button,

1. Background Color: Set the background for the border.
2. Border Type: Set the border type.
3. Border Radius: Make the border radius.

4. Padding: Set the padding for the button.
5. Box Shadow: Make the box shadow for it.

Hover State for Button

The changes will appear on mouse hover,

6. Background Color: Set the background color for the button.
7. Border Radius: Make the border radius.
8. Box Shadow: Make the box shadow.

Button Title Section

Go to Style > Button Title

Normal State for Button Title

1. Color: Set the color for the button Title.
2. Typography: Set the typography for the button Title.

BUTTON SUB TITLE

3. Color: Set the color for the button Sub Title.
4. Typography: Set the typography for the button Sub Title.

BUTTON ICON

5. Color: Set the color for the button Icon.

Hover State for Button Title

6. Hover Color: Set the hover color for the button title.

Button Icon Section

Go to Style > Button Icon

Normal State for Button Icon

1. Color: Set the Color for the button icon.
2. Background Color: Set the background color.

Hover State for Button Icon

3. Color: Set the Color for the button icon.
4. Background Color: Set the background color.

Content Section

Go to Style > Content

1. Width: Set the width for the contnet.
2. Height: Set the height for the content.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video is Coming soon! learn about the Lightbox blocks.
Please visit the demo page for examples.

Thanks for staying with us.