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

Поділитися
Вставка
  • Опубліковано 30 лис 2024

КОМЕНТАРІ • 53

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

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

  • @komalzafar4799
    @komalzafar4799 2 місяці тому

    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 7 місяців тому

    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 😍

  • @erichepperlewp
    @erichepperlewp 11 місяців тому

    Good tip about the external resource scripts!

  • @FeelingLike
    @FeelingLike Рік тому +2

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

    • @ththim7785
      @ththim7785 10 місяців тому

      Best tutorial ever! You are a great teacher.

  • @Kiweora
    @Kiweora 2 роки тому +1

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

  • @michalbartosz4878
    @michalbartosz4878 10 місяців тому

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

  • @FilipJuriskovic
    @FilipJuriskovic Місяць тому +1

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

  • @moarocha
    @moarocha Рік тому

    Thank you. This tutorial saved my life!

  • @YagizK.
    @YagizK. Рік тому +1

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

  • @najafalibalti
    @najafalibalti Рік тому

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

  • @yousefmiri7045
    @yousefmiri7045 Рік тому

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

  • @ASAD-gx3km
    @ASAD-gx3km Рік тому +1

    really great work what i was looking for

  • @wesleylefamazibukojr5644
    @wesleylefamazibukojr5644 11 місяців тому +1

    Thank you So much!!!

  • @RJBCapitalFunding
    @RJBCapitalFunding Рік тому +1

    It worked!!!
    Thanx

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

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

  • @danijelbeslin7101
    @danijelbeslin7101 5 місяців тому

    thaankss dude a lot

  • @pustynnyklakier4805
    @pustynnyklakier4805 Рік тому

    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  Рік тому

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

    • @pustynnyklakier4805
      @pustynnyklakier4805 Рік тому

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

  • @rh619
    @rh619 2 роки тому +1

    awesome ....

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

  • @faizankhan-je9cf
    @faizankhan-je9cf 11 місяців тому

    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  11 місяців тому

      Did you add the JS library if there were any?

  • @Everyonelovesyou
    @Everyonelovesyou 6 місяців тому

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

    • @websquadron
      @websquadron  6 місяців тому

      Did you inspect for JS console issues?

    • @Everyonelovesyou
      @Everyonelovesyou 6 місяців тому

      @@websquadron no how to do this?

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

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

  • @visualmediafx
    @visualmediafx 2 роки тому +1

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

  • @al-qahharibnrafique4920
    @al-qahharibnrafique4920 Рік тому

    it shows unexpected start tag (style)