Vimeo Gallery Elementor Widget

Thank you for purchase of this plugin. If you have any questions that are beyond the scope of this help file, please feel free to send a detailed message on the following link.

• codecanyon.net/user/Tean

How to install?

Make sure you extract downloaded plugin file from Envato, inside you will find file named: 'elementor_vimeo_gallery.zip'. This is the plugin file you upload in WordPress panel when you want to install the plugin!

1. In WordPress panel go to Plugins menu
2. Under Plugins menu click "Add New"
3. Select "Upload", choose the archive elementor_vimeo_gallery.zip that you downloaded and click "Install Now"
4. After the plugin is installed click "Activate Plugin"

How to update when new plugin version has been released?

How to insert gallery in page?

1. Search for Vimeo gallery in Elementor widgets:

2. Create Vimeo credentails and add your keys in Gallery style tab:

3. In Video sources tab Add item, choose Vimeo source and add url (ONLY ID part, not full url) and source title.

This is minimum required for gallery to run. After that you can adjust other details.

1. Vimeo requires API key, register new application: https://developer.vimeo.com/apps/new

3. Generate Access Token with Public and Private scope. To get video download links you also need Video Files scope as well.

Enter Client Identifier, Client Secret and Access Token in Settings section:

Gallery layout can be grid or player with playlist on the right or bottom.

Grid layout

For Grid layout you can set number of columns and rows for different screen sizes in Breakpoints

You can also set Video display type, meaning how to display the video when the grid item thumbnail is clicked. Possible values are lightbox, inline, link and none.

Player layout

For Player layout you can choose to display playlist items in vertical layout right of the player (which on small screens becomes horizontal layout below the player) and in horizontal layout below the player.

Video will always play in the player when the thumbnail item is clicked (there is no lightbox option with player layout like in Grid layout).

Gallery structure

Gallery consists of of a header image, area beneath the header (called header content) and the player area with video (or grid, if the grid layout is chosen).

You can remove header and header content parts (or any item within) in Gallery style tab:

You can have any number of vimeo sources shown in the gallery (one at the time). To add new video source, go to Video source tab and choose Add item. Make sure you enter ONLY ID part of your Vimeo url in the field, not full url!

Gallery supports following Vimeo sources:

Vimeo channel:

Enter just ID part in the field: jesc

Vimeo group:

Enter just ID part in the field: 166603

Vimeo user album:

Enter just ID part in the field user: cameranera

Enter just ID part in the field album: 3391770

Vimeo album:

Enter just ID part in the field: 3391770

Vimeo collection / on demand:

Enter just ID part in the field: seeu

Vimeo user feed (load user videos):

Enter just ID part in the field: gopro

Vimeo Folder:

Enter just ID part in the field: user5482434

Enter just ID part in the field: 1444068

Search Vimeo videos:

Provide search query.

If you have more than single video source in the gallery, choose Use playlist selector and this will be shown above the player area. Note that if there is only single video source, playlist selector is automatically hidden.

Inside Colors tab you can choose gallery skin to use and change some gallery colors

Note that changing skin or colors sometimes might not work properly in Elementor editor and that you always need to test end results on the front page!

To play video when mouse is over the thumbnail area use this option in Gallery style tab:

When you click on the thumbnail video can be shown in the following ways (this only applies for the Grid layout):

1. In lightbox popup:

Click on the thumbnail will open lightbox:

2. Inline inside thumbnail:

Click on the thumbnail will play video inside thumbnail:

3. As a "link", clicking the thumbnail can open this video on Vimeo.

4. No action, clicking the thumbnail will do nothing.

These settings can be adjusted in Grid layout tab:

How to use custom banner image, logo, channel description?

Channel immage, logo, title and description can automatically be retrieved from Vimeo. If you want to specify your own instead you can specify them in Gallery style tab:

How to create scale thumbnail effect on hover?

Use these settings in Gallery style tab:

Note that this effect is only available on desktop browsers.

Adjust Vimeo player parameters in Vimeo Player tab:

Read more about player parameters here:

Note that sometimes some paramters may not work with specific videos (for example you may set picture in picture button to be hidden, but it will still possibly show on some video while being hidden on some other. These are simply bugs on Vimeo side and although it should work as described on the Vimeo link above, our experiences are simply not always been that way).

Insert advertising content into the gallery (Adsense, Amazon Affiliates, Commission Junction etc...). Basically any HTML is allowed. Make sure its properly formatted so it doesnt break the layout.

Use Advert tab to advertizing content to the gallery. You can add ad content that will be placed in the gallery below the grid. You can also add ad content that will be placed in the video popup window in lightbox.

Example of AdSense code to add:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="AD_CLIENT_HERE"
data-ad-slot="AD_SLOT_HERE"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Replace AD_CLIENT_HERE and AD_SLOT_HERE data.

You can translate gallery strings inside Translation tab:

Other translate options are available in relevant tabs, like Social sharing tab.

Adjust social sharing and which networks to use in Social sharing tab:

Always test gallery in real page, not in Elementor editor

Make sure you test gallery in the real page on the frontend, not in Elementor editor, because some features might not work correctly in editor!

If the gallery doesnt load?

Check that you have created Vimeo API credentials correctly, as it described in Vimeo credentails section. Sometimes if you suspect the Vimeo api keys are not valid, you can create another project in Vimeo and try with different keys.

Autoplay

The only way to autoplay is to start video muted, so if auto play is chosen, video will start muted.

Volume on mobile

Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript

Plugin does not work as expected

If the plugin does not work as expected, try the following tests to see if it makes a difference and what could be causing an issue:

1. Update to latest plugin files available on Codecanyon

2. Switch to default Wordpress theme

3. Check for errors in browser developer console (Chrome F12 key, Console tab)

4. Try to deactivate any 3rd party plugins (the ones that not come with Wordpress)

5. If you still have issues after you have done all changes above, you can send a message at http://codecanyon.net/user/Tean#contact , provide your PURCHASE KEY and a link to your live page so we can have a look.