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. 

You can learn about the widget’s general settings (how to add, move, resize, and delete the widget) in our Widgets Overview article. 

Editing the widget

To start editing the Gallery widget, click on it to call out its controls. The widget editing menu contains four controls: Design (the brush button), Layout, Settings, and Template. They allow you to customize the widget in multiple ways.

Design

Click the brush icon, and the design settings appear. You can customize the widget’s appearance by adding and setting:

  • Borders;
  • Shadow; 
  • A background image or fill color.

Layout

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.

Settings

Manage items

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 tabs. Click one of them and configure the required parameters.

In Change Media, you can replace the existing image with another image from your computer or Boxmode Asset Library. 

Important:

You can add images in png, jpg, jpeg, gif, and svg formats. Or you can specify the fill color of the item.

In 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 tab to remove the item from the gallery. 

Format

Here, you can set the gallery items’ format by moving the corresponding toggle switches. 

Enable the Open in Lightbox 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 toggle switch allows you to show the item’s title and description. When you switch the Title and Description toggles on, you’ll see the list of additional settings for the title and description, such as:

  • Typeface;
  • Format (bold, oblique, underline, strikethrough,);
  • Size;
  • Text color.
Caution!

You can set text and description settings only in the Custom Grid, Masonry, and Mosaic layout templates.

Animation

Here, you can choose a suitable animation effect for your gallery.

Caution!

This option is available only in the Slides, Slides 2, and Thumbnails layout templates.

Templates

The Templates control is next to the Settings button on the control panel. Here you can change the layout template.

Autoplay

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. 

We hope this article was useful for you and helped you understand how to utilize and customize the Gallery widget.

Now, it’s time to use and customize the Gallery widget on your website!

Go to Editor