Drag and drop the Gallery widget to the canvas and customize it
The Gallery widget is perfect for visual creators or entrepreneurs willing to showcase their services, team members, and projects via appealing images. You can create a beautiful portfolio by choosing one of the gallery layout templates, managing images, and adjusting format and animation settings.
With Boxmode, it’s possible to decorate your website with a gallery, including eye-catching images, and make it more attractive for visitors.
Adding the Gallery widget to the page
To add the Gallery widget to the page, follow these simple steps:
- In the editor, click the “+” icon in the left sidebar
- In the “widgets” tab, click the “Gallery” and choose a suitable layout template
- To add the Gallery widget, hover over the layout template, drag it to the canvas and drop it wherever you need it (the layout will highlight the drop area)
Note: To cancel the process, press “Esc” on your keyboard while dragging the widget.
Moving the widget
To relocate the widget, click on it to call out its controls. Click and hold the “crossed arrows” icon and drag the widget to any other location on the page. The canvas will highlight the drop area.
Resizing the widget
To resize the widget, simply highlight it and drag one of its anchor points up/down or left/right until you get the desired result. You can also adjust the widget’s padding and margin in a similar way. Hover your cursor over the area around the anchor point (a green or red semicircle will highlight it) and drag it up/down or left/right, accordingly.
Editing the widget
To start editing the Gallery widget, click on it to call out its controls. Then hit the “Settings” button to open the editing menu.
The widget editing menu contains three tabs that allow you to customize the widget in multiple ways.
Here you can see all the elements of the gallery, add a new one, change the order, and customize each of the items.
To edit the item, click the “ellipsis” icon on the right, and you’ll see the “Change Media,” “Text Settings,” and “Delete” options. Click one of them and configure the required parameters.
In the “Change Media,” you can replace the existing image with another image from your computer or Boxmode assets library.
Note: You can add images in png, jpg, jpeg, gif, and svg formats. Or you can specify the fill color of the item.
In the “Text Settings,” you can add a title, description, and a tooltip (hover over text) to the item and insert alt text for optimizing the image for search engine crawlers.
Click the “Delete” button to remove the item from the gallery.
Here, you can set the gallery items’ format by moving the corresponding toggles.
Enable the “Open in Lightbox” option if you want to display the images in the lightbox.
Enable the “Image Hover” to highlight the images when hovering over them.
The “Add text” option allows you to show the item’s title and description. When you enable the “Title” and “Description” options, you’ll see the list of additional settings for the title and description, such as typeface, format (bold, oblique, underline, strikethrough), size, and text color.
Note: You can set text and description settings only in the Custom Grid, Masonry, and Mosaic layout templates.
Here, you can choose a suitable animation effect for your gallery.
Note: This option is available only in the Slides, Slides 2, and Thumbnails layout templates.
This option is available only when you enable the animation. You can activate the autoplay if you want to demonstrate the gallery images in the slideshow format.
Click the “brush” icon and the design settings appear. You can customize the widget’s appearance by adding borders, shadow, and a background image or fill color.
Set up the widget’s alignment, text alignment, and paddings in the Custom Grid, Mansory, and Mosaic layout templates.
In the Grid layout template, you can only adjust the widget’s alignment and paddings.
In the Slides, Slides 2, and Thumbnails layout templates it is possible to define the widget’s alignment, timeout, and paddings.
The “Templates” block is next to the “Settings” block on the panel. Here you can change the layout template.
Deleting the widget
To delete the gallery from the canvas, click on the widget to call out its controls and hit the “trash bin” icon or press the delete (backspace) button on the keyboard.
Theory is good, but practice is better!