Adding a Codepen HTML CSS JS and External JS to an Elementor Page - Elementor Wordpress Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 พ.ย. 2024

ความคิดเห็น • 53

  • @antonichristian5845
    @antonichristian5845 2 ปีที่แล้ว +8

    nice one Imran!!! one thing to note though that also trips a lot of people is quite a few codepens have CSS with (SCSS) next to them, in this case you need to click on the small down arrow and choose "view uncompiled css" otherwise it won't work...

    • @websquadron
      @websquadron  2 ปีที่แล้ว +3

      Good point on the SCSS

  • @kingsleyabang3403
    @kingsleyabang3403 ปีที่แล้ว +1

    One of the best I've come across. I've been checking for days and this is where I've found it. Thanks for this.

  • @komalzafar4799
    @komalzafar4799 หลายเดือนก่อน

    Was struggling wit it for so long 😭 thnku so much.🥰

  • @GinasticaNerd
    @GinasticaNerd ปีที่แล้ว +1

    oh bro, I was looking for days to solve this and I couldn't find it, until I found you on youtube and uncovered my doubt, thank you very much!

  • @Asad-Main
    @Asad-Main 6 หลายเดือนก่อน

    Thank you so much man, Just what I was looking for. I am new learning WordPress past 6 months and trying to come up as a Freelancer. Your contents are just too perfect for me & easy to understand. Respect 😍

    • @websquadron
      @websquadron  6 หลายเดือนก่อน

      Glad it helped!

  • @FeelingLike
    @FeelingLike ปีที่แล้ว +2

    This is amazing, straight to the point and thought out.
    Thanks, priceless information

    • @ththim7785
      @ththim7785 9 หลายเดือนก่อน

      Best tutorial ever! You are a great teacher.

  • @erichepperlewp
    @erichepperlewp 10 หลายเดือนก่อน

    Good tip about the external resource scripts!

  • @michalbartosz4878
    @michalbartosz4878 9 หลายเดือนก่อน

    Man, that's just what I needed explained! Thanks a lot.

  • @Kiweora
    @Kiweora 2 ปีที่แล้ว +1

    Thanks, man! That last part of the external source was the missing piece I've searching for.

  • @FilipJuriskovic
    @FilipJuriskovic 7 วันที่ผ่านมา +1

    You don't have to add that script part, if you have a simple js code add only in brackets...

  • @najafalibalti
    @najafalibalti ปีที่แล้ว

    bro, i am stuck in this but now i solved this issue due to you bro , loe from pakistan💕💕❣

  • @moarocha
    @moarocha ปีที่แล้ว

    Thank you. This tutorial saved my life!

  • @YagizK.
    @YagizK. ปีที่แล้ว +1

    thank you so much bro, this helped me so so much :D

  • @ASAD-gx3km
    @ASAD-gx3km ปีที่แล้ว +1

    really great work what i was looking for

  • @yousefmiri7045
    @yousefmiri7045 ปีที่แล้ว

    You are the best , Thanks a lot for your video !!!

  • @wesleylefamazibukojr5644
    @wesleylefamazibukojr5644 10 หลายเดือนก่อน +1

    Thank you So much!!!

  • @clintongallagher
    @clintongallagher 2 ปีที่แล้ว +2

    .
    The element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. Note: There can only be one element in an HTML document.
    If a element is in the widget as this demo shows that would cause two elements to be in the page. So how can this demo function with two body elements? Does Elementor filter out the redundant element from widgets or what?

    • @fd3871
      @fd3871 2 ปีที่แล้ว +1

      it doesn't unless he is using a theme template page that is devoid of a body tag (which is possible), or maybe elementor canvas?. my guess is that he just has duplicate body tags in this. the proper way to do this, without creating some sort of shortcode that loads a template part and enqueues the styles and scripts... would be to include just the div parts via the html widget (as he's done) and then offload the styles and scripts to "elementor > custom code" with a condition to include those codes only on the page(s) in which this animation is shown.

    • @Dim_the_Athenian
      @Dim_the_Athenian ปีที่แล้ว +1

      You change element to and then go on style and change body{ } to .bodysomething{ } so it doesn't overlaps your workpress

  • @RJBCapitalFunding
    @RJBCapitalFunding ปีที่แล้ว +1

    It worked!!!
    Thanx

  • @danijelbeslin7101
    @danijelbeslin7101 5 หลายเดือนก่อน

    thaankss dude a lot

  • @sarakarkhaneyousefi6138
    @sarakarkhaneyousefi6138 ปีที่แล้ว

    my html file doesnt have any body tag, may i add this to my html code and after that add style and script?

  • @pustynnyklakier4805
    @pustynnyklakier4805 11 หลายเดือนก่อน

    I have written my code in three.js , how can I add it to elementor pro? I don't have that link which you put in 3:17 - you know, it's my code, not from ready website. help

    • @websquadron
      @websquadron  11 หลายเดือนก่อน

      I can only have a look if it's part of a 1-2-1

    • @pustynnyklakier4805
      @pustynnyklakier4805 11 หลายเดือนก่อน

      sorry, but I don't know what You mean?@@websquadron

  • @rh619
    @rh619 2 ปีที่แล้ว +1

    awesome ....

  • @faizankhan-je9cf
    @faizankhan-je9cf 10 หลายเดือนก่อน

    bro my svg animation is not working, i have pasted my HTML , CSS and JS code as you have shown in the video.

    • @websquadron
      @websquadron  10 หลายเดือนก่อน

      Did you add the JS library if there were any?

  • @trendiq7169
    @trendiq7169 ปีที่แล้ว

    hello
    but on my cpanel on index.php file the page is not animated? what happned

    • @websquadron
      @websquadron  ปีที่แล้ว

      Did you add the JS Libraries as well?
      Could be site specific.

  • @elkanak6753
    @elkanak6753 ปีที่แล้ว

    What if the source doesn't use any external resources?
    The code only works in build mode, but the change not showing in live mode.

    • @websquadron
      @websquadron  ปีที่แล้ว

      And all of the components ie html css js were added?

  • @dharmaaffirmation316
    @dharmaaffirmation316 ปีที่แล้ว

    Can we add js and css as header footer or any plugin or in theme file???
    I try my custom down it work when whole code add together but i want to add elementor widget between them so how to do that?

    • @dharmaaffirmation316
      @dharmaaffirmation316 ปีที่แล้ว

      I also try by adding two html widget first for HTML second html widget for js and css.. so i can add another widget between them but its didn’t work

    • @websquadron
      @websquadron  ปีที่แล้ว

      Technically yes but there may be restrictions with some themes where some codes take priority

    • @dharmaaffirmation316
      @dharmaaffirmation316 ปีที่แล้ว

      @@websquadron i use generapress

  • @Everyonelovesyou
    @Everyonelovesyou 5 หลายเดือนก่อน

    Mine everything worked except the animation for the signup button did not run

    • @websquadron
      @websquadron  5 หลายเดือนก่อน

      Did you inspect for JS console issues?

    • @Everyonelovesyou
      @Everyonelovesyou 5 หลายเดือนก่อน

      @@websquadron no how to do this?

  • @SHIVAMTHAKUR-zn6dx
    @SHIVAMTHAKUR-zn6dx ปีที่แล้ว

    But if there are breakpoints for Mobile so this code fails to comply in wordpress!

    • @websquadron
      @websquadron  ปีที่แล้ว

      It does work on mobile if you tweak and add @media at the start

  • @happylash
    @happylash ปีที่แล้ว +1

    its doesn"t work in my elementor :/

    • @websquadron
      @websquadron  ปีที่แล้ว

      Did you add the JS Library as instructed?

    • @rajyadav-qj9og
      @rajyadav-qj9og ปีที่แล้ว

      How to add JS library as instructed?

  • @al-qahharibnrafique4920
    @al-qahharibnrafique4920 ปีที่แล้ว

    it shows unexpected start tag (style)

  • @visualmediafx
    @visualmediafx 2 ปีที่แล้ว +1

    heh, never heard double quotes called "speech marks" before.