How can I create traditional video gallery?

Hi,

Enfold does not come with such a video gallery out of the box. The website you showed us uses this plugin: https://vimeography.com/ to create the gallery.

I played around a bit and this code gave me similiar results (you can use the debug mode to add the code to your advanced layout builder – see https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#debug-mode but you need to replace the images with images from your server):

[av_image src='https://mywebsite.com/image.jpg' attachment='32815' attachment_size='full' align='center' styling='' hover='' link='manually,https://vimeo.com/119811742' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av_uid='av-jlotu786' custom_class='' admin_preview_bg=''][/av_image]

[av_one_third first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' link='' linktarget='' link_hover='' padding='0px' border='' border_color='' radius='0px' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-1h5ukco']

[av_image src='https://mywebsite.com/image.jpg' attachment='32815' attachment_size='full' align='center' styling='' hover='' link='manually,https://vimeo.com/119811742' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av_uid='av-jlotu786' custom_class='' admin_preview_bg=''][/av_image]

[/av_one_third][av_one_third min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' link='' linktarget='' link_hover='' padding='0px' border='' border_color='' radius='0px' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-13zvdns']

[av_image src='https://mywebsite.com/image.jpg' attachment='32815' attachment_size='full' align='center' styling='' hover='' link='manually,https://vimeo.com/119811742' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av_uid='av-jlotu786' custom_class='' admin_preview_bg=''][/av_image]

[/av_one_third][av_one_third min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' link='' linktarget='' link_hover='' padding='0px' border='' border_color='' radius='0px' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-29iwzs']

[av_image src='https://mywebsite.com/image.jpg' attachment='32815' attachment_size='full' align='center' styling='' hover='' link='manually,https://vimeo.com/119811742' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av_uid='av-jlotu786' custom_class='' admin_preview_bg=''][/av_image]

[/av_one_third]

I simply added 4 image elements (Media elements) to the page builder and linked all of them to vimeo videos. Then I added 3 columns to the page builder and drag’n’droped 3 images into the columns. The remaining image stays at the top of the columns and is displayed as full size image.

Best regards,
Dude

Hi,

You can use this code to remove the 6% margin:

#top #wrap_all div .av_one_third {
    margin-left: 1px;
    width: 33%;
}

I’d recommend to set a custom css class ( https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements ) for the columns, otherwise the code will affect all columns and not only the thumbnail columns.

The code would then look like

#top #wrap_all div .av_one_third.customclass {
    margin-left: 1px;
    width: 33%;
}

(of course you need to replace customclass with your css class).

You could also use this code to adjust the space between 3 images and the big image:

#top #wrap_all div .av_one_third.customclass {
    margin-left: 1px;
    width: 33%;
    margin-top: -10px;
}

(of course you need to replace customclass with your css class). You can also replace the margin-left and width values to adjust the space between columns. The margin-top value will change the space between the big image and the columns.

If you want to make the images bigger you need to increase the size of the surrounding column – at the moment you added all images into a 1/2 column which results in 1/6 width thumbnails (1/2 * 1/3 column). You could i.e. increase the 1/2 column to full width (1/1) to make the thumbnails bigger.

Also, how could I add a white caption, lower third, centered to all?

You can’t easily add a caption inside the images but you could i.e. use a textblock elements to add some text (caption) below or above the images. The wordpress editor also enables you to center the text.

Best regards,
Peter