Turn Your Minimum Efforts Into Maximum Results

Table Of Contents

Doodle grid gallery

How to use and customize the Doodle grid gallery for Elementor

If you’re looking for a functional and custom WordPress grid gallery for Elementor, you can choose the Doodle grid gallery widget from Pixel Gallery. This is a minimalistic yet attractive gallery with cool animation effects that boost your site’s user experience.

Keep reading to learn how to use it, as well as all the details about this widget and its features.

Inserting the Doodle Grid Gallery

inserting the Doodle grid gallery for Elementor

You can use this image grid gallery for Elementor by going to the page you want to use it on and opening it with Elementor. Then, simply drag and drop the Doodle widget into the page. Keep in mind that you need 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 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

After you add the grid gallery for Elementor to your page, you’ll see that it comes with 6 images by default. You can change the number of images depending on how many you want to display. There is also a hover effect that pops up from within the background image. This displays the title and meta texts.

Customize the layout of the Doodle grid gallery

Go to Content> Layout

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

You can easily turn on or off the title and meta text elements with just a click and select a custom HTML tag for the title if you want to.

The grid gallery’s image dimensions in Elementor can be customized from the Image Size option. The ‘Link‘ field at the bottom of the page will enable you to turn on the media file linking function for the grid items. Just click on the ‘Link‘ field and choose ‘Media File’ or ‘Custom URL‘ to open the link fields on the items.

Here, you can choose a Lightbox to open the link. There is no button on the grid, instead, the whole item will act as a link button. Clicking anywhere on the individual grid item will trigger the link.

Customize Doodle grid gallery items individually

Go to Content> Items

This is where you’ll find all of your grid gallery items in one place. They’re displayed as small white boxes with a title 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

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

There are some fields located here that will allow you to customize the image, title, and meta description to your liking. There’s also a custom URL field along with an item hidden switcher.

By selecting Video as the Media Type, you will change the set of controls to embed a video to the individual Elementor grid gallery item. In addition to the previous control options, you will also get a video Source option, source link, aspect ratio control, Autoplay, loop, player controls, and mute switcher.

Grid subsection controls

The grid controls let you choose the dimensions for each item, such as how many columns or rows it 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 8 and the row span to 2. Now, the first item will occupy 8 of the 12 column bars and 2 rows. By default, the column span is set to 4 and the row span is set to 1. That’s why the next two items appear on the right side of the first grid gallery item.

After you customize the grid items, the interface will look like this. You can easily create this layout by adjusting the grid controls for individual items in the Doodle grid gallery widget.

Style tab for customizing widget interface appearance

As Pixel Gallery is known for its 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, follow the steps below:

Items section customizations

Go to Style> Items

On the top, you will see the overlay option for the grid. The overlay color becomes visible when hovered on the grid items. Then there is the background type option that lets you choose a single color or a gradient for the background of the items. As each gallery item has images occupying the whole area, you can only see the changed background color after adding some padding.

Then, we will add a thin border around the items with a semi-transparent color to match it. With some border radius value, we can curve the edges of the items of the grid gallery for Elementor starting with the border.

Grid gallery title customization

Go to Style> Title

Here, you can change the title text to better match your brand colors, add more space around the text with padding or margins, or adjust the font size, weight, and family with typography. You can also add a text shadow or stroke for extra effect.

Content area line customizations

Go to Style> Line

There is a line between the title and the meta which separates the two. You can customize the line by changing its color, height, width, and spacing.

Meta description text customizations

Go to Style> Meta

Here, you can change the meta text to better suit your needs. You have options for color, margin, and typography so that you can get the perfect look for your website.

After you’ve made all the necessary customizations to the Doodle grid gallery, it’s time to see the results.

The final design turned out great! Just hover over the grid items and see how awesome it looks.

Video Assist

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

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.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.

Subscribe to newsletter

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Join Now

Join Thousands of Happy Users

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge