Auto Play Videos on Hover - Static & Loop Grid (Elementor Tutorial)
3.3 هزار بار بازدید -
11 ماه پیش
-
In this Elementor tutorial I
In this Elementor tutorial I will show you how to create a video hover grid showcase. This can be a great way to showcase your video or animation projects. I will show you 2 ways to pull this off.
The first way will be a static version where you can place this video hover effect anywhere on your website.
The second way will be more dynamic and using ACF, Code Snippets and the Loop Grid.
Timestamps:
0:00 Introduction
0:31 Static Video Grid Tutorial Begins
4:18 Dynamic Loop Grid Tutorial Begins
5:24 ACF Post Type (Loop Grid)
6:16 ACF Field Groups (Loop Grid)
8:22 Video Hover Code Snippet (Loop Grid)
10:45 Setup Loop Grid Widget and Template
13:35 Bonus Looping Video Hover Effect
Download Video Hover Code:
https://wickydesign.com/auto-play-vid...
Code Snippets Plugin:
https://wordpress.org/plugins/code-sn...
Advanced Custom Field:
https://wordpress.org/plugins/advance...
Purchase Elementor Pro:
https://wickydesign.com/get-elementor
Our Recommended Tools
Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!
WE NOW HAVE MERCH:
https://wickydesign.myspreadshop.com/
WORDPRESS PLUGINS:
✔️ Elementor: https://wickydesign.com/get-elementor
✔️ Crocoblock: https://crocoblock.com/?ref=2562
✔️ Ultimate Add Ons: https://ultimateelementor.com/pricing...
✔️ Elementor Custom Skin: https://gumroad.com/a/545789043
✔️ All In One SEO: https://www.shareasale.com/r.cfm?b=14...
BUSINESS TOOLS:
✔️ Dubsado: https://www.dubsado.com/?c=wickydesign
✔️ MailerLite: https://www.mailerlite.com/a/jrdqblbizo
✔️ Wave: https://waveapps.com/
GRAPHICS:
✔️ Adobe: http://clkuk.tradedoubler.com/click?p...
WEBSITE HOSTING:
✔️ KnownHost: https://www.knownhost.com/?aid=71319c26
------
For more information regarding our web design and branding services, please visit https://wickydesign.com
The first way will be a static version where you can place this video hover effect anywhere on your website.
The second way will be more dynamic and using ACF, Code Snippets and the Loop Grid.
Timestamps:
0:00 Introduction
0:31 Static Video Grid Tutorial Begins
4:18 Dynamic Loop Grid Tutorial Begins
5:24 ACF Post Type (Loop Grid)
6:16 ACF Field Groups (Loop Grid)
8:22 Video Hover Code Snippet (Loop Grid)
10:45 Setup Loop Grid Widget and Template
13:35 Bonus Looping Video Hover Effect
Download Video Hover Code:
https://wickydesign.com/auto-play-vid...
Code Snippets Plugin:
https://wordpress.org/plugins/code-sn...
Advanced Custom Field:
https://wordpress.org/plugins/advance...
Purchase Elementor Pro:
https://wickydesign.com/get-elementor
Our Recommended Tools
Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!
WE NOW HAVE MERCH:
https://wickydesign.myspreadshop.com/
WORDPRESS PLUGINS:
✔️ Elementor: https://wickydesign.com/get-elementor
✔️ Crocoblock: https://crocoblock.com/?ref=2562
✔️ Ultimate Add Ons: https://ultimateelementor.com/pricing...
✔️ Elementor Custom Skin: https://gumroad.com/a/545789043
✔️ All In One SEO: https://www.shareasale.com/r.cfm?b=14...
BUSINESS TOOLS:
✔️ Dubsado: https://www.dubsado.com/?c=wickydesign
✔️ MailerLite: https://www.mailerlite.com/a/jrdqblbizo
✔️ Wave: https://waveapps.com/
GRAPHICS:
✔️ Adobe: http://clkuk.tradedoubler.com/click?p...
WEBSITE HOSTING:
✔️ KnownHost: https://www.knownhost.com/?aid=71319c26
------
For more information regarding our web design and branding services, please visit https://wickydesign.com
11 ماه پیش
در تاریخ 1402/06/20 منتشر شده
است.
3,308
بـار بازدید شده