- Видео 24
- Просмотров 24 961
Jerod Butler
Добавлен 1 июн 2012
Creating TRANSPARENT Videos in Elementor: The Ultimate Lottie Alternative!
I was trying to work on some Lotti files in Elementor for a client's website when the Lotti's weren't working. So I ended up finding an alternative making videos transparent. It's a pretty simple solution however you'll need a couple programs to do it.
You'll need a way to export WebM or Lottis - I'm using After Effects and Adobe Media Encoder to export. Links to extensions below ↓
Timestamps:
00:00 Intro
00:17 Tools you'll need (linked below ↓)
01:00 Demo
01:34 Ideas on how to use this
02:12 After Effects Transparent Background
03:20 After Effects Rendering (Lottis/JSON or WebM)
05:07 Adobe Media Encoder Settings
05:55 Elementor Build
07:00 Copy/paste CSS code + Explaining code
08:22 Outro
Follow me ...
You'll need a way to export WebM or Lottis - I'm using After Effects and Adobe Media Encoder to export. Links to extensions below ↓
Timestamps:
00:00 Intro
00:17 Tools you'll need (linked below ↓)
01:00 Demo
01:34 Ideas on how to use this
02:12 After Effects Transparent Background
03:20 After Effects Rendering (Lottis/JSON or WebM)
05:07 Adobe Media Encoder Settings
05:55 Elementor Build
07:00 Copy/paste CSS code + Explaining code
08:22 Outro
Follow me ...
Просмотров: 290
Видео
MODERN DYNAMIC TABS for STACKING CONTAINERS ON SCROLL - Elementor WordPress Flexbox Tutorial
Просмотров 50121 день назад
Here's a fun tutorial about making some dynamically changing tabs when your stacked containers are on the top of the screen. Sorry for the audio delay that's started happening. Will fix that bug in the future! Timestamps: 0:00 Intro 0:12 Demo 0:43 Conceptual on What We're Doing 1:55 JSON FILE (Link In the Description) 2:10 Building It 11:36 How we figured this out and how you can too 13:37 Java...
How to PRICE websites for beginners | FREELANCE Web Designers & Developers
Просмотров 164Месяц назад
Pricing websites is actually a pretty basic thing that I think gets overthought. In this video, I'll explain a basic method of pricing websites. Next, I'll be back to making some tutorials for y'all! Timestamps: 0:00 Intro 0:10 First Pricing Feature 0:20 Second Pricing Feature 1:13 Third Pricing Feature 2:04 Fourth and FINAL Feature Siteground hosting Affiliate: www.siteground.com/index.htm?afc...
The STATE OF ELEMENTOR in 2024 | What NEEDS to be DONE
Просмотров 127Месяц назад
Elementor has been doing some fantastic updates this year but how useless are they for people actually using them for clients? I will run through Elementor's updates at a base level and talk about the pros and cons of what they are doing. Timestamps: 00:00 Intro 00:42 Elementor 3.20 | Dynamic Conditions (Needs improvements) 01:46 Elementor 3.21 | Loop Filtering (A great start) 02:48 Elementor 3...
Must-Have: Top 5 Plugins for Your Elementor WordPress Site
Просмотров 5134 месяца назад
Nearly every fresh WordPress install I add these 5 plugins and of course the trusty Elementor & Elementor Pro. I am not associated with any plugins mentioned but actually use these. Here's the top 5 plugins: 1. Duplicator - wordpress.org/plugins/duplicate-page/ 2. Snippets - wordpress.org/plugins/code-snippets/ 3. ACF - wordpress.org/plugins/advanced-custom-fields/ 4. WP Help - wordpress.org/pl...
INSIDE LOOK at Creating an Automated Website Outreach System + AI in 2024
Просмотров 1774 месяца назад
In this video, I'm giving you an exact example of how I've utilized automation and AI. This process is semi-automated and is actually delegated to a VA for the most part. We are constantly trying to improve upon it. On the campaign shown we're getting a 31% open rate with a 13% reply rate (although not all of them are good replies). Like any process, the goal is to iterate and make it more effe...
Fix Custom Fonts that DON'T LOAD on the Front End in Elementor | WordPress
Просмотров 6185 месяцев назад
I was again working on a client site and had some issues with fonts not loading on the front end but loading in the Elementor editor. I found out it all basically comes down to one simple fix - mixed content errors. But I also briefly touch on what may also cause this issue. Timeline: 00:00 Intro 00:31 Issue Explanation 01:03 How to fix the issue 01:44 Issue resolved demo 02:00 Second Way to So...
TEXTURE OVERLAY on ENTIRE WEBSITE | Elementor WordPress Flexbox Tutorial
Просмотров 1,1 тыс.5 месяцев назад
I was working on my personal website when I came across this effect I wanted to replicate. It's actually very simple and takes one small CSS code snippet and an extra container on whatever page you want to achieve this on. You could hardcode this whole effect into your site CSS if you wanted to but I did it this way right now. Timestamps: 00:00 Intro 00:26 Demo 00:57 Page structure to get the l...
MODERN INVERTED BORDER on CONTAINERS - Elementor WordPress Flexbox Tutorial
Просмотров 13 тыс.6 месяцев назад
I was creating a website with the trendy inverted border effects but could only find ways to do it built into Elementor using the photo widget. I wanted to do it to full containers and this is how I settled. Basically an SVG mask on a container with CSS code Timestamps: 00:00 Intro 00:31 Demo 01:37 Tools you'll need (linked below) 01:58 Making SVG Shapes 05:00 Elementor (HTML) Structure 06:24 C...
MODERN RUN CLUB WEBSITE | Speed Build FIGMA to ELEMENTOR | Elementor Expert
Просмотров 3126 месяцев назад
This is the start of me building a website for a local run club. I first designed this website in Figma and am translating that to Elementor. Come along as I figure some things out live like the inverted border effects. Elementor tutorials to come Follow me on Instagram for lifestyle content jer0d Follow my business Instagram for business/website content: jer0.d
What would popular CMS's be if they were cars?
Просмотров 208 месяцев назад
If we carified (personified) popular CMS’s what car would they be? What do you think they would be? #webdeveloper #websevelopment #webagency #websiteagency #smma #marketingagency #elementor #wordpress #webflow #squarespace #wix #cms
WHAT BIKING A CENTURY (100 MILES) TAUGHT ME
Просмотров 6Год назад
In this video, we delve into the incredible experience of completing a century and unexpected lesson it taught us. Don't forget to like, share, and subscribe for more 🚴♂️💪
5 Reasons to Use a CMS for Your Website Build
Просмотров 16Год назад
5 Reasons to Use a CMS for Your Website Build
Should You Whitelabel? How to know if its the right time or project
Просмотров 10Год назад
Should You Whitelabel? How to know if its the right time or project
5 Reasons Nonprofits NEED a GOOD website
Просмотров 11Год назад
5 Reasons Nonprofits NEED a GOOD website
What is User-Generated Content? How to create good UGC (with examples)
Просмотров 7 тыс.4 года назад
What is User-Generated Content? How to create good UGC (with examples)
Sensory Deprivation Tank (Float) REACTION
Просмотров 344 года назад
Sensory Deprivation Tank (Float) REACTION
Colorado Trip January 2020 - Keystone, Breckenridge, and Red Rocks Park
Просмотров 724 года назад
Colorado Trip January 2020 - Keystone, Breckenridge, and Red Rocks Park
Mt Hood January 2019 - Winter Break Trip
Просмотров 294 года назад
Mt Hood January 2019 - Winter Break Trip
While doing some QA for the website that inspired this I realized Safari does NOT support transparent WebM videos. A workaround for this is rendering the video in ANY format with a black background and adding mix-blend-mode:screen!
Awesomeee bro
It would be great if you could create a full playlist on it, So that I can learn somthing new
realy only this?
HI thats awesome, but the json file is not working as intented, can you please check
try uploading it into the Elementor Templates in the backend. Then you can edit that template or copy/paste the content onto new pages. I just tried it and it seems to be working on my end. Let me know if that helps!
@@jerodjax sure ill check, thanks for the reply.
looks SNAZZY
that's whey Ementor is so powerfull: you can inserd HTML everywhere! Ty for share this trick. love it!
This helped a lot. Thanks for sharing!
You should make a longer vid brosky!
@@GabDinDe what would you like to see?
@@jerodjax same subject but more detailed
Thank you man, i was searching this for ages. Nice and simply explained. Thank you x 100000 times
@@jacktheripper3444 anything else you want to see tutorials for?
Thanks for share this bro. I see this effect a lot in design sites but I had no idea how to do it outside of Photoshop. Simply great!
Thank you for your thorough review. I really appreciate this overview.
great job but to be more usefull for your viewers it's better to be slower. And if you can talk what you are doing it will be great. There is not a lot of such as professinal tutorials on youtube
Thank you! Is there anything specific you'd like to see?
To be honest i don't know. I see that you are very good specialist and it will be awesome if i could learn from your tutorials. Maybe you can recreate live websites from scratch like "codegrid" account. He has 120k subs now, but he is doing great job. So maybe you can do as he does. He look in creative awwwards and try to create. I think that you could get a loooot of subs very soon
Ofcourse i mean in elementor becaouse nobody is doing it and it has a lot of potential
Not nessesery creative websites but good one
I m 100% sure that you will get a lot of subs very soon
Elementor does a lot of basic widget that only have basic funktion but missing a lot of things you would need to use if you make website. What honestly is really anoying.
Completely agree. However in the past year or so they've been frequently updating it to make it comparable. As an Elementor user for 4 years I appreciate the effort now
@@jerodjax Yes .. they do a lot of updates.. but they also do a lot of random stuff.. and none of their widgets is done right .. just one example you know for your own working... Why does the Icon List widget dont allow to put the icons on the right or Left :) .. you know a simple thing .. but sometimes i cant use it because of that. Elementor still has a lot of things to change and fix. Also the past 2 years they did not bring anything new to the Builder that made it standing out from other ones.
This is great. Love it 👍💯
for some reason, this didn't work for me. I used an image instead of video
@@RaymondAinyam which part of it didn’t work? Make sure you’re adding that global page css
How many monitors do do you work off of?
@@Serioustroop I actually use one monitor and my MacBook. With my monitor being above my laptop. Having your monitor eye level helps with alertness!
@@jerodjax thank you. I am trying to gauge as to what I need to be comfortable. At my normal job I work with three monitors. But I curious on the workflow for home 🤣 btw awesome videos
Siccckkkkkkk bro
You just got a subscriber dude
(To my future self after saving this video) Well, here's the names. 1- Duplicate Page 2- ACF 3- Code Snippets 4- WP Help 5- Dynamic Visibility for Elementor Honorable mentions 1- Safe SVG 2- Converter for media 3- Page scroll to id 4- Sticky header effects for Elementor. 5- Motion page
They are in the description too but thanks for watching!
Thank you Jerod Butler. Your are the best.
looking good, can you explain how you reach the mobile result? i mean, i know you exlaind this, but maybe an exmple would be nice :)
Nice video, Premium Addons is also another good one for Elementor it adds a lot of useful widgets!
you dont need svg exporter plugin for figma, figma has inbuilt svg export
Figma natively exports SVG code?
The second step worked great for me, thank you!
So beautiful
Omg thanks !!! Can you do a tutorial to do the menu in the demo ? With rounded corner and transparent backaground, and fixed ?
can you make the same design with the mask option from elementor ?
you can use do masks nativly in elementor only on image widgets
finaly people who makes wordpress elementor modern designs 🤩🤩🤩
Clean. Just what i was looking for.
Thanks - I hope it helped!
Thank you @Jerod Butler
Appreciate the watch!
I've been looking for a way to do this for a long time. Thanks
Glad I could help - I was too which is why I figured this would help!
Great video budd, thanks!
You bet!
very good man!
Thanks sir so much 😊
sir can i make money use this skill web design ?like10k/m possiple or not?
Of course you can. You can with any skill!
lets do that! thanks
nice work! thanks
No problem
nice work!
thanks!
Interesting approach with the video. I create this kind of TV noise effect with CSS and an SVG filter snippet. Here is the CSS code: body::before { content: ""; position: fixed; left: -50px; top: -50px; width: calc(100% + 50px); height:calc(100% + 50px); background: repeating-linear-gradient(#111, #111 50%, #fff 50%, #fff); background-size: 2px 2px; filter: url(#noise) ; mix-blend-mode:overlay; z-index: 9999999; pointer-events: none; opacity: 0.5; } #noise-overlay { width: 0; height: 0; You can adjust the strength of the TV noise by changing the opacity. Here it's 0.5, which is pretty intense. You can increase size of the grain with background-size. Here it's 2px by 2px. When you make it really big like 15px you can even show TV lines in the TV static Next, place an HTML widget and add this SVG code <svg id="noise-overlay"> <filter id="noise"> <feTurbulence id="turbulence"> <animate attributeName="baseFrequency" dur="5s" values="0. 0.9 0.9;0.8 0.8;0.9 0.9;" repeatCount="indefinite"></animate> </feTurbulence> <feDisplacementMap in="SourceGraphic" scale="60"></ feDisplacementMap> </filter> That all! You can also add the CSS code in the HTML widget when you wrap it between <style> tags. So you can keep all code in the same place.
I love it
thanks a lot, very useful!
Glad it was helpful!
Cool effect!
Thanks!
'Promo SM' 💋
Worth the watch! Keep it up
Glad I stayed til the end. The internet ain't pretty but it is powerful. Tops man. More please.
whoa..I am going to stick to 50k's for a while, after seeing the aftermath of your ultra. great stuff.. way to finish
if you can run a 50k you can do an ultra! Just run slower 😀
Hey Jerod, not sure why my comment was removed, but was wondering if you'd be keen to work on a UGC for us? we specialise in watch customisation and the product i'm offering is worth $167. Would be glad to send this to you for your UGC and let me know how we can work together. ruclips.net/video/MbM3330_2dQ/видео.html
Am a freelancer...and i got order for ugc video ads for FB...but i dont know how to do it? He just gave me his site link...i dont know how to make ugc videos with these???? Plz help
Where can I go to find brands that need UGC?