Jerod Butler
Jerod Butler
  • Видео 24
  • Просмотров 24 961
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 ...
Просмотров: 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
The TOP Web Design Trends for 2023
Просмотров 16Год назад
The TOP Web Design Trends for 2023
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
Mt Hood Trip - January 2019
Просмотров 154 года назад
Mt Hood Trip - January 2019

Комментарии

  • @jerodjax
    @jerodjax 10 дней назад

    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!

  • @decrea8439
    @decrea8439 10 дней назад

    Awesomeee bro

  • @Yesar1
    @Yesar1 11 дней назад

    It would be great if you could create a full playlist on it, So that I can learn somthing new

  • @ASSAD1445-z4j
    @ASSAD1445-z4j 12 дней назад

    realy only this?

  • @mohsinmuhammad3487
    @mohsinmuhammad3487 22 дня назад

    HI thats awesome, but the json file is not working as intented, can you please check

    • @jerodjax
      @jerodjax 22 дня назад

      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!

    • @mohsinmuhammad3487
      @mohsinmuhammad3487 22 дня назад

      @@jerodjax sure ill check, thanks for the reply.

  • @antonior1601
    @antonior1601 23 дня назад

    looks SNAZZY

  • @SuburbanPhilosophy
    @SuburbanPhilosophy 23 дня назад

    that's whey Ementor is so powerfull: you can inserd HTML everywhere! Ty for share this trick. love it!

  • @alexvizcaino1888
    @alexvizcaino1888 25 дней назад

    This helped a lot. Thanks for sharing!

  • @GabDinDe
    @GabDinDe Месяц назад

    You should make a longer vid brosky!

    • @jerodjax
      @jerodjax Месяц назад

      @@GabDinDe what would you like to see?

    • @GabDinDe
      @GabDinDe Месяц назад

      @@jerodjax same subject but more detailed

  • @jacktheripper3444
    @jacktheripper3444 Месяц назад

    Thank you man, i was searching this for ages. Nice and simply explained. Thank you x 100000 times

    • @jerodjax
      @jerodjax Месяц назад

      @@jacktheripper3444 anything else you want to see tutorials for?

  • @designbookInc
    @designbookInc Месяц назад

    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!

  • @heinvanvlastuin4954
    @heinvanvlastuin4954 Месяц назад

    Thank you for your thorough review. I really appreciate this overview.

  • @uzydkownik6018
    @uzydkownik6018 Месяц назад

    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

    • @jerodjax
      @jerodjax Месяц назад

      Thank you! Is there anything specific you'd like to see?

    • @uzydkownik6018
      @uzydkownik6018 Месяц назад

      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

    • @uzydkownik6018
      @uzydkownik6018 Месяц назад

      Ofcourse i mean in elementor becaouse nobody is doing it and it has a lot of potential

    • @uzydkownik6018
      @uzydkownik6018 Месяц назад

      Not nessesery creative websites but good one

    • @uzydkownik6018
      @uzydkownik6018 Месяц назад

      I m 100% sure that you will get a lot of subs very soon

  • @fatjay9402
    @fatjay9402 Месяц назад

    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.

    • @jerodjax
      @jerodjax Месяц назад

      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

    • @fatjay9402
      @fatjay9402 Месяц назад

      @@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.

  • @luqmanbola-umar9327
    @luqmanbola-umar9327 2 месяца назад

    This is great. Love it 👍💯

  • @RaymondAinyam
    @RaymondAinyam 2 месяца назад

    for some reason, this didn't work for me. I used an image instead of video

    • @jerodjax
      @jerodjax 2 месяца назад

      @@RaymondAinyam which part of it didn’t work? Make sure you’re adding that global page css

  • @Serioustroop
    @Serioustroop 2 месяца назад

    How many monitors do do you work off of?

    • @jerodjax
      @jerodjax 2 месяца назад

      @@Serioustroop I actually use one monitor and my MacBook. With my monitor being above my laptop. Having your monitor eye level helps with alertness!

    • @Serioustroop
      @Serioustroop 2 месяца назад

      @@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

  • @Serioustroop
    @Serioustroop 2 месяца назад

    Siccckkkkkkk bro

  • @TheMoneyMakerOnline
    @TheMoneyMakerOnline 2 месяца назад

    You just got a subscriber dude

  • @kensosaramos
    @kensosaramos 4 месяца назад

    (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

    • @jerodjax
      @jerodjax 4 месяца назад

      They are in the description too but thanks for watching!

  • @blueinarts_
    @blueinarts_ 4 месяца назад

    Thank you Jerod Butler. Your are the best.

  • @orgariani4309
    @orgariani4309 4 месяца назад

    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 :)

  • @antonior1601
    @antonior1601 4 месяца назад

    Nice video, Premium Addons is also another good one for Elementor it adds a lot of useful widgets!

  • @imraan_alam
    @imraan_alam 4 месяца назад

    you dont need svg exporter plugin for figma, figma has inbuilt svg export

    • @jerodjax
      @jerodjax 4 месяца назад

      Figma natively exports SVG code?

  • @WorthysVue
    @WorthysVue 4 месяца назад

    The second step worked great for me, thank you!

  • @abdulazizalrashed7558
    @abdulazizalrashed7558 4 месяца назад

    So beautiful

  • @moka5450
    @moka5450 4 месяца назад

    Omg thanks !!! Can you do a tutorial to do the menu in the demo ? With rounded corner and transparent backaground, and fixed ?

  • @dariuslucianlazea2657
    @dariuslucianlazea2657 4 месяца назад

    can you make the same design with the mask option from elementor ?

    • @jerodjax
      @jerodjax 4 месяца назад

      you can use do masks nativly in elementor only on image widgets

  • @mohalandwer
    @mohalandwer 4 месяца назад

    finaly people who makes wordpress elementor modern designs 🤩🤩🤩

  • @mikezero7422
    @mikezero7422 4 месяца назад

    Clean. Just what i was looking for.

    • @jerodjax
      @jerodjax 4 месяца назад

      Thanks - I hope it helped!

  • @bazemojoshua
    @bazemojoshua 4 месяца назад

    Thank you @Jerod Butler

    • @jerodjax
      @jerodjax 4 месяца назад

      Appreciate the watch!

  • @alexsmith9126
    @alexsmith9126 5 месяцев назад

    I've been looking for a way to do this for a long time. Thanks

    • @jerodjax
      @jerodjax 4 месяца назад

      Glad I could help - I was too which is why I figured this would help!

  • @Aminewebdesign
    @Aminewebdesign 5 месяцев назад

    Great video budd, thanks!

  • @andremello849
    @andremello849 5 месяцев назад

    very good man!

  • @nonstopgamingreactions9130
    @nonstopgamingreactions9130 5 месяцев назад

    Thanks sir so much 😊

  • @mkbusiness3561
    @mkbusiness3561 5 месяцев назад

    sir can i make money use this skill web design ?like10k/m possiple or not?

    • @jerodjax
      @jerodjax 5 месяцев назад

      Of course you can. You can with any skill!

  • @osamitafr
    @osamitafr 5 месяцев назад

    lets do that! thanks

  • @osamitafr
    @osamitafr 5 месяцев назад

    nice work! thanks

    • @jerodjax
      @jerodjax 5 месяцев назад

      No problem

  • @franktielemans6624
    @franktielemans6624 5 месяцев назад

    nice work!

    • @jerodjax
      @jerodjax 5 месяцев назад

      thanks!

  • @franktielemans6624
    @franktielemans6624 5 месяцев назад

    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.

  • @giangvutruong674
    @giangvutruong674 5 месяцев назад

    I love it

  • @julianchaux
    @julianchaux 6 месяцев назад

    thanks a lot, very useful!

    • @jerodjax
      @jerodjax 5 месяцев назад

      Glad it was helpful!

  • @antonior1601
    @antonior1601 6 месяцев назад

    Cool effect!

    • @jerodjax
      @jerodjax 5 месяцев назад

      Thanks!

  • @daxton7462
    @daxton7462 6 месяцев назад

    'Promo SM' 💋

  • @antonior1601
    @antonior1601 6 месяцев назад

    Worth the watch! Keep it up

  • @colby-wegter
    @colby-wegter 6 месяцев назад

    Glad I stayed til the end. The internet ain't pretty but it is powerful. Tops man. More please.

  • @matthiassventoest6800
    @matthiassventoest6800 6 месяцев назад

    whoa..I am going to stick to 50k's for a while, after seeing the aftermath of your ultra. great stuff.. way to finish

    • @jerodjax
      @jerodjax 6 месяцев назад

      if you can run a 50k you can do an ultra! Just run slower 😀

  • @BelispreeChannel
    @BelispreeChannel 2 года назад

    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

  • @Yamingolperjhuri
    @Yamingolperjhuri 2 года назад

    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

  • @Nifaratheicon
    @Nifaratheicon 2 года назад

    Where can I go to find brands that need UGC?