Elementor - Add Codepen Codes and a Button - Super Easy

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

КОМЕНТАРІ • 45

  • @moondodelarte9656
    @moondodelarte9656 3 роки тому +2

    You are the best and became my new favorite youtuber! LOOOOOOVE YOUR VIDEOS! Thank you so much!

    • @websquadron
      @websquadron  3 роки тому +1

      Wow, thanks! It means a lot. I know that I talk too much sometimes, or am quite loud, but I love to share and hope that we all have fun!

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

    What if the button is for a dynamic content. Can we take the css only?
    Btw Imran thank you for the video

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

    Thanks Imran, excellent. Just to clarify, as far as hover effects go, they will only function on desktop? What is the alternative for mobile devices? Thx

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

      Hover effects on mobile are never a good idea as too many effects as we scroll up and down is a pain.

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

    Somehow, the 2 buttons I've tried do not come out the same as in their website. Following exactly your video ( tags, etc). But outcome is different somehow.

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

      Is there any JS library that needs to be added too?

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

      Actually, what I discovered was that I'd set some predefined values in Site Settings/Buttons that were affecting the outcome...what do you know right...? Thank you though..!@@websquadron

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

    Very good. What I'd like to know is, how to add a spinner after click, so the viewer knows the button is doing something before the page changes, how to do that??? Similar to the Elementor SAVE button spinner

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

      You need to add page transitions for that. Elementor has that built in after you activate the experiment.

  • @theunifiedfield.
    @theunifiedfield. Рік тому

    This is really helpful, thank you!

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

    Can I use more than one DIFFERENT HTML Widget per page with different HTML/CSS code?

  • @uffeson
    @uffeson 2 роки тому

    Thanks a lot for this nice video. Is it possible to change the black background in the button. I have tried but without luck. If it is possible, please tell me how. Thanks again.

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

      That would depend on the button, but inside the CSS code, you'll see lots of #111111 codes. Modify the one that is #000000 or #000.

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

    Hello there, I was trying to add the same button to my website (I use Elmentor PRO) and I found your video. I have one problem though. The CSS messs up my header and footer, regardless of where I added it. I deleted the body selector but it doesnt help. Can you help me fix this issue. Thank you!

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

      The code came from the developers that pasted in on Codepen. Have you asked them?

    • @simeonnenov3499
      @simeonnenov3499 2 роки тому

      @@websquadron No, I havent. But I assumed that you will know since you are making a tutorial with it. Try to add the code where there is a header and a footer and you will see what I am talking about. Otherwise the point of making a tutorial like this is almost none because people cant use it.

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

      @@simeonnenov3499 Not sure what issue you're getting as I added a Codepen to the Header Template, the Page, and the Footer Template, and all fine; see this page: staging3.websquadron.co.uk/codepen/
      Are you adding ..... between the CSS code bit.
      I've tested these out and used them fine with other widgets. Take care.

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

      @@websquadron Hello, I found from where the issue was coming. the tags were the problem. I just gave the tag a specific class so the css affected only the button. Thank you anyway.

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

      @@simeonnenov3499 Great - glad you got there.

  • @roppor2194
    @roppor2194 3 роки тому +1

    Imran, this is a great video, but put out the second short part. Is it possible to add a button or other element for quick reuse on the site, save the element as a widget, or a shortcode?

    • @russellmorgan9018
      @russellmorgan9018 3 роки тому +2

      Use the Unlimited Elements plugin. You can easily build your own widgets, and even re-use them on other websites.

    • @websquadron
      @websquadron  3 роки тому +3

      Agreed with Russell. That's a decent way to do it.
      Or - you can just copy and paste onto other pages.

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

      I have used UE in the past. It does have a bit of a learning curve to do it and add it as a widget - but the only way to go if you want it as a widget and not just use the HTML widget every time for a button. @@websquadron

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

    Thanks bro

  • @sjdbfosuhfouehu3
    @sjdbfosuhfouehu3 2 роки тому

    This always happens - every time i create a button using HTML and CSS the borders becomepink once i click the button.
    How don’t know why it happens..
    Do you know why?

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

      Was it with this particular button? Can you share the URLand which button?

    • @sjdbfosuhfouehu3
      @sjdbfosuhfouehu3 2 роки тому

      @@websquadron I will recreate it and share the link in a few minutes - it happens with all buttons from cssbuttons.io

    • @willspat922
      @willspat922 2 роки тому

      Same things happens to me, with any button I pick.

  • @boldbaatarshinebayar723
    @boldbaatarshinebayar723 3 роки тому +1

    You are god. Very thank u so much

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

    How to add an image to the elementor HTML Widget?

  • @rightpadding
    @rightpadding 2 роки тому

    How do you apply this globally?

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

      Add to one button, then right click and add this as a Global Widget so you don't have to keep repeating per button.

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

      @@websquadron thanks!

  • @digwillhachi
    @digwillhachi 3 роки тому +1

    dont forget to save it as a global element so you can use anywhere on your site.

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

    Wait, more is less and less is more? @___@ *brain melts

  • @ahunter6756
    @ahunter6756 2 роки тому

    this is not good content.i report that

    • @websquadron
      @websquadron  2 роки тому +2

      Okay, many thanks for reporting it. And I hope you can explain to them exactly why?