Vimeo Gallery

Vimeo Gallery

Welcome to the “Vimeo Gallery” documentation. Looking to integrate Vimeo gallery into your website? With this widget, you can seamlessly integrate Vimeo videos into your website and create a visually appealing gallery. In this guide, we'll show you how to use the editor to customize your Vimeo gallery widget.

Step 1 : Open The Editor
Step2 : Add The Source
Step 3 : Adjust The Layout
Step 4 : Set Up Video
Step 5: Configure The Playlist
Step 6: Preview


Step 1 : Open The Editor
1. Go to Vimeo Gallery template.
2. Click on "Edit" after choosing your template.




Step 2: Add the source

In this panel, you can insert a Vimeo link for a channel, user, showcase, group, or a video. Afterward, specify the maximum number of videos to be displayed and their arrangement direction.






Step 3: Adjust the Layout

In the Layout panel, you have the freedom to configure how your Vimeo gallery is presented:
1. Begin by selecting the layout style for your videos: grid, carousel, or list.





2. Next, customize the background and text colors individually.





3. In this section, you can choose to show or hide specific header content, adjust button roundness, and edit button colors.





4. If you opt for a grid layout, specify the number of columns and rows to be displayed. For a list layout, determine the maximum number of results to show.




5. When you choose the carousel layout, you can also set the maximum number of columns and rows, enable loop mode, display controls and dots, and customize their colors.





6. Finally, enter the label for the "Load More" button, adjust its roundness, and edit its colors as needed.






Step 4: Set Up video

Within this panel, you have various options to fine-tune and set up your videos





1. You can start by choosing how video playback is displayed when clicked: in a popup, player, inline, or a direct link to Vimeo.





2. If you opt for the player, you can decide whether to show or hide details below the video, specify the maximum number of characters in the description, adjust the player's width and height, and choose its position.





3. When selecting the popup option, you can show or hide details and comments, adjust the width and height of the popup, and select background and text colors for the popup.





4. For Vimeo links, you can simply enable the "open in a new tab" mode.





5. Customize your follow button by choosing to show or hide it, entering a label, selecting colors, adjusting the roundness, and enabling the "open in a new tab" option.





6. Finally, you can personalize the video cards by choosing to display the full video details or just the date of creation and the user.
You can also select the details' position within the card, set the card's width and height, and enable the "scale on hover" mode.





Furthermore, adjust the spacing between cards, their roundness, and shadow, add borders, and choose how to display the play icon and video duration.





Lastly, customize the card colors to seamlessly match your website's design.






Step 5: Configure settings

1. In this section, you'll manage the playlist by enabling autoplay and choosing how your videos should end.





2. You can also activate the mute mode, decide whether to show or hide the picture-in-picture button, select control colors, and determine whether the video player should be transparent or not.






Step 6: Preview

Lastly, you can click on “Preview” to see how your Vimeo gallery widget looks on both desktop and mobile devices. After this, you can proceed to the next step.



Related Articles:
Youtube Gallery Single Video