How to customize Epoch photo gallery widget

  • BdThemes
  • How to customize Epoch photo gallery widget

Table Of Contents

Epoch photo gallery widget

How to customize Epoch photo gallery widget

If you’re in need of a full custom grid gallery for Elementor, the Epoch photo gallery widget from Pixel Gallery is a fantastic option. Not only is it minimalistic, but it also boasts a floating hover transition effect that really makes the images pop. In addition, the bold image title and meta information make it easy to for the visitors to get the info.

Let’s see how to customize this photo gallery widget using Elementor.

Inserting the Epoch photo Gallery widget

inserting Epoch photo gallery widget

To use this image grid gallery with Elementor, open the page you want to use it on with Elementor and drag and drop the Epoch widget into the page. Note that you must have both Elementor and Pixel Gallery installed on your WordPress website before you can use this widget.

Introduction to Layout customizations

The content tab is where you’ll find the controls for the basic structure of your photo gallery widget. Here, you can customize the dimensions, number of columns, item spacing, and individual item information to create your widget’s foundation. Let’s explore how to use these features.

Take a look at the default appearance

Epoch gallery widget 1 - BdThemes

By default, the grid gallery for Elementor comes with six images, but you have the option to change that number to display more or fewer, depending on your needs. Additionally, there’s a hover effect that pops up over the background image, which displays the title and meta texts.

Customize the layout of the Epoch photo gallery widget

Epoch gallery widget 2 - BdThemes

Go to Content> Layout

The Layout section of the photo gallery for Elementor is where you can select the number of columns for the grid template. You can also adjust the item gap, column gap, and item height to customize the look of your gallery.

You can turn on the masonry switcher in case the gallery images vary in dimension and you want a unique arrangement for them.

Epoch gallery widget 3 - BdThemes

The title and meta text switcher can be toggled on or off to control their visibility with one click. You can also select a custom HTML tag for the title. The image dimensions for the photo gallery widget can be modified from the Image Size option.

Epoch gallery widget 4 - BdThemes

The ‘Link‘ field at the bottom of the page enables you to turn on the media file linking function for the photo gallery widget grid items. Just click on the ‘Link‘ field and choose ‘Media File‘ or ‘Custom URL‘ to open the link fields on the items.

You can choose lightbox to open the images when clicked. Also, the link target can be selected as a button or the entire image.

Customize Epoch photo gallery widget items individually

Epoch gallery widget 5 - BdThemes

Go to Content> Items

You’ll find all of your photo gallery items in one place here. They appear as small white boxes with a title, avatar, and copy/close buttons. You can add more items by clicking the ‘Add Item‘ button, or close any listed item by clicking the ‘X‘ button on the item box.

Content subsection controls

Epoch gallery widget 6 - BdThemes

When you click on the item box, the options inside will be revealed to you. The Content subsection has been selected, and the Media type has been set to images. If you want, you can switch the Media type to video.

There are some fields here that will allow you to customize the image, title, meta description, and text for the zoom button and view button. There’s also a custom URL field and an item hidden switcher.

Epoch gallery widget 7 - BdThemes

By choosing Video as your Media Type, you will be able to embed an individual video within the photo gallery widget. In addition to the other control options, you’ll now have a video Source, aspect ratio control, Autoplay, loop, player controls, and mute switch at your disposal.

Grid subsection controls

Epoch gallery widget 8 - BdThemes

The grid controls let you choose how many columns or rows each item can occupy. The height option lets you change the height of each item to further adjust the size.

For example, let’s change the column span to 7 and the row span to 3. Now, the first item will occupy 8 of the 12 column bars and 3 rows. By default, the column span is set to 4 and the row span is set to 1, which is why the next three items appear on the right side of the first grid gallery item.

Epoch gallery widget 9 - BdThemes

The Epoch photo gallery widget makes it easy to create a custom layout. After you adjust the grid settings for each item, your interface will look like the example above.

Now, let’s go for the appearance customizations.

Style tab for customizing widget interface appearance

At Pixel Gallery, we’re known for our smart and beginner-friendly customizing controls. You can easily make dynamic changes to the layout to create unique interfaces.

To see how this is done, simply follow the steps below:

Items section customizations

Epoch gallery widget 10 - BdThemes

Go to Style> Items

The top section of the page features a background type option, which allows you to choose a single color or gradient for the background of the items. With each gallery item having images that occupy the entire area, you will only be able to see the changed background color once you have added some padding.

Afterward, there are border and border radius options available along with margin and box shadow options for the Epoch photo gallery addon. These options allow you to customize the look and feel of your gallery to match your website’s style.

We’ve added some padding around the images to help reveal the background color. We didn’t use a border this time.

Content area customizations

Epoch gallery widget 11 - BdThemes

Go to Style> Content

This section lets you add padding and margin to the content. Content means the title and the meta.

Image Screen Customizations

Epoch gallery widget 12 - BdThemes

Go to Style> Image

Here, you can customize the hover background color or set an image as the hover background. Also, add border, border radius, margin, and box shadow to the background you set.

Customize the play icon

Epoch gallery widget 13 - BdThemes

Go to Style> Play Icon

If you choose Video from the media type options in the items section, a play button will appear on the selected grid item. You can customize the color, margin, and size of the button to better suit your needs.

Grid gallery title customization

Epoch gallery widget 14 - BdThemes

Go to Style> Title

You can make the title text in the content box your own by changing its color, padding, margin, typography, text shadow, and stroke. This way, you can make your photo gallery widget content stand out and look more unique!

Meta text customizations

Epoch gallery widget 15 - BdThemes

Go to Style> Meta

You can make your meta text look just as good as your title by customizing the color, margin, and typography options here.

Epoch gallery widget 17 - BdThemes

The final design looks great! Just hover over the grid items to see how it looks.

Video Assist

Watch this video to see the whole tutorial of the Epoch photo gallery widget with more visual details, or check out the demo page for similar examples.

Brought to you by BdThemes.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge