Skip to main content
8 minutes reading time (1569 words)

Create stunning Galleries with the best gallery manager for Elementor

CREATE-STUNNING-GALLERIES-WITH-THE-BEST-GALLERY-MANAGER-FOR-ELEMENTO_20210609-071032_1

Page Builders and galleries are the most part of the time significant for WordPress websites, as galleries allow you to show images/products in a good way and page builders allow you to create and add the content to your page professionally.

The page builders like Elementor, usually, have tools/blocks to create galleries, but these are not the best as they don't have many options to customize them but don't worry as WP Media Folder will help you on this ;)

WP Media Folder offers you a Gallery addon that allows you to create and customize using spectacular tools and features in your galleries.

In this post, we are going to see how to use them with Elementor, Google Photos, and also your cloud folders so let's start!

Say goodbye to messy media library.

WP Media Folder lets you categorize files, sync folders with cloud storage, create amazing galleries and even replace images without breaking links.
Optimize your media workflow today

GET THE PLUGIN NOW

Galleries with widget for Elementor in video

Setting up the WordPress Google Photos Integration

First of all, I'll let you know the plugins that we are using for this tutorial, these are Elementor, WP Media Folder, and the 2 Pro Addons(one for galleries, and the other one for cloud connection).

Now that we know it, let's start, we are going to create the gallery from Google Photos, for this, we have to connect our WordPress site to our Google Photos account, let's see how to do it.

First of all, we need a Google Dev APP for this, go here: https://console.developers.google.com/project and create a new Project.

Add a name to the project, you can add whatever you want.

Now wait a moment for the project to be created.

If it is the first time that you are using this Photos Library API, you will need to activate it, in order to activate it, go to the MarketPlace at the left menu.

Now, in the search box, type Photos Library API and search it.

Click on it, and then, on Enable.

Now that it is enabled, click on "API and Services" in the left menu, on this panel, go to Credentials.

Now that you are here, at the top panel, go to + Create Credentials > OAuth client ID, if asked, add a name to your OAuth consent screen.

Now, setup the credentials like the following:

  • Select "Web application" and add a name of your choice.
  • Authorized JavaScript origin: https://your-domain.com (replace by your domain name, with no trailing slash).
  • Authorized redirect URIs: https://your-domain.com/wp-admin/options-general.php?page=option-folder&task=wpmf&function=wpmf_google_photo_authenticated
(replace by your domain name)

Keep in mind that Google has changed their policy so you need to fill your Authorized domains at OAuth consent screen tab > Edit App.

At the Authorized domains section, click on +Add Domain and add your domain.

Add it also to the Domain Verification section.

And done! You'll get your ID and Secret to add in WP Media Folder's configuration :)

Now, let's connect your Google Photos account to your WordPress site, for this go to Settings > WP Media Folder > Cloud > Google Photo tab.

You can use the Automatic mode that is the easiest one as you will only need to log in to your Google account, for this, choose Automatic in the "Connecting mode" and then Connect Google Photo

A Pop Up will appear, click on Agree.

The last step will be, log in to your Google Account, allow the permissions, and finish the connection.

That's all, really easy and fast, isn't it? :)

Elementor + Gallery Plugin, the Best Combination

Now that we finished the connection, go to Media > Media Folder Galleries, on this section, click on + Add New Gallery and give your new gallery a name, for the tutorial, we will name it Google P Gallery, and also, we are going to use the Square Grid gallery.

Now you will have all the options to set up and add images to your gallery, you will see the Google Photo logo, click on it.

This will load a popup with all the images available on your Google Photos account, you have the option to select many images from an album or select a complete album, on this tutorial, we are going to select a complete Album, for this, select the Album and then, Import Album.

You will see a notification about the Album being imported.

Wait a few minutes, and done! You will see all the images uploaded in the gallery dashboard, you can make all the modifications like select a new gallery.

Now, you can go to the Display settings & Shortcode tab to completely customize your gallery, you have settings like the order, number of columns, and the Action On Click.

After finishing the gallery settings, click on Save, and, you can go to the page/post where you want to add the gallery and click on Edit with Elementor so the page Builder load.

Now select the section where you want to add the gallery and look for the WP Media Folder blocks.

As you can see, there are 4 available blocks, for this tutorial we are going to use the one called WP Media Folder Gallery Addon, this will load the Gallery Addon in the page builder.

After moving the block to the section, you will see an option for preview, and, on the left side, the option to choose a gallery, select the gallery that we created before.

On the right section, you will see the preview of the gallery and it is going to be automatically updated when you select a new option at the left section so check it, confirm that everything is fine, and click on Publish.

That's it! You have created a professional gallery with a few clicks and configured it directly from the Page Builder :)

Using Elementor to Create Google Drive Galleries in WordPress

 As a plus, we are going to see how to create galleries using images from the cloud as WP Media Folder allows you to connect your media library with Cloud Services(Dropbox, Google Drive, OneDrive, and AWS).

In this example, we will use the Google Drive connection, you can see how to connect it here, you will notice that the process is really similar to the Google Photos connection :)

When it is set and you sync/create the Google Drive folders, you can go to the page/post that you want to dit and click on Edit with Elementor.

At the left section look for the WP Media Folder section and click on the WP Media Folder Gallery block.


Now, click on + at the "Add Images" section.

This will open a pop-up with the Media Library, select the Cloud Folder, all the images that you want to add by clicking on them, and finally Create a new Gallery > insert Gallery.

This will create a gallery using the images directly from the cloud, so after adding it, you can set up the gallery settings in the left section, and check the preview of the gallery in the right section so it will be really easy to edit and check that the gallery will look how we want :)

Now you can create galleries with the power of WP Media Folder, in a really easy way using Elementor, and also, save storage space using Google Drive, what else you can ask for? :)

Calling all webmasters!

Save time and boost productivity with WP Media Folder. Effortlessly organize client media files, create custom galleries, and provide a seamless user experience.
Upgrade your website projects now!

GET THE PLUGIN NOW

Start using the best WordPress Gallery Plugin

In this post, we have explained only a few features from WP Media Folder and, as you can see, it has made things really easier than how it should and more now with the new theme and interface! So what are you waiting for? Go here and obtain your own membership, you will see that there are more galleries than the ones shown in this post and a lot of tools that are just awesome :)

2
Stay Informed

When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.

Related Posts

 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Wednesday, December 18, 2024

Captcha Image