metaslider-lightbox Docs
All products

How to Preview Your Gallery While You Edit It

The gallery editor shows a live preview of your MetaSlider Gallery right beside your settings, so you can see exactly how it will look on your site before you save. The preview updates as you change the layout, columns, spacing, appearance, and media styles, and you can open the lightbox straight from the preview to check it the way a visitor would.

How to Switch Between Preview and Arrange

The main pane of the gallery editor has two buttons at the top: 'Preview' and 'Arrange'. Preview renders the gallery as it appears on the front end, while Arrange shows the thumbnail grid where you add, remove, and reorder images. A gallery that already has images opens in Preview; an empty one opens in Arrange so you can start adding photos.

  1. Open a gallery from your Galleries list to reach the editor, then look for the 'Preview' and 'Arrange' buttons above the images.

    Preview and Arrange buttons above the gallery

  2. Choose 'Preview' to see the live rendering of your gallery, or 'Arrange' to go back to the thumbnail grid and change which images are included or the order they appear in.

    Live preview of the gallery in the editor

How to See Your Settings Applied Live

Every control in the settings sidebar feeds the preview. Change the layout, column count, gap, appearance, or media styles and the preview refreshes to match, so you never have to save and reload to check a change.

  1. Adjust any setting in the sidebar on the right and watch the preview update to reflect it.

    Gallery settings sidebar beside the live preview

  2. In Preview, click any image to open the lightbox exactly as your visitors will see it, then close it and keep editing.

    Image opening in the lightbox from the live preview

How to Preview at Desktop and Mobile Width

Preview includes a desktop and a mobile width switch in the top right, so you can check both without leaving the editor. The mobile view uses your 'Columns on mobile' setting, matching how the gallery reflows on a phone.

With Preview selected, use the desktop and mobile buttons in the top right to check your gallery at each width.

Desktop and mobile width buttons in the preview

Your gallery editor now shows every change as you make it, so you can arrange images, tune the settings, and confirm the result at both widths before you save.