Add Interaction to Bento Style Layout - Elementor Wordpress Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 ก.ย. 2024
  • Further to our earlier video ( • Build an Awesome Bento... ) we're now adding some great interaction.
    Codes for you:
    CSS Text Grow:
    .abc:hover .shifty {transform: translateX(20px) scale(1.2);}
    .shifty {transition: transform 0.4s ease;}
    CSS for CTA Image Position:
    .elementor-cta__bg {
    background-position: top center !important;}
    Code for Reveal Icon:
    www.codesnippe...
    Elementor Hosting - managed wordpress hosting :
    be.elementor.c...
    Elementor Pro - The builder that will make you a pro
    be.elementor.c...
    Get our Awesome 'How to Build an Elementor Website Course' - Lifetime Updates and access to New Modules at no extra cost: learn.websquad...
    Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co...
    Book your 1-2-1 Consultation: websquadron.co...
    We love to create - share - respond - and deliver.
    🧐 Learn with our Mastery Modules: websquadron.co...
    🔗 All of our Important Links: websquadron.co...
    😃 Join our Facebook Group: / 3309523509284305
    😃 Get Code Snippets Pro: r.freemius.com...
    😃 Get Elementor Pro: be.elementor.c...
    😃 Boost your TH-cam Analysis: www.tubebuddy....
    👕 Get our Merchandise: websquadron.co...
    🥹 Support us: paypal.me/Webs...
    Hire us to work on your Website!
    💌 info@websquadron.co.uk
    👩‍💻 Visit websquadron.co.uk

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

  • @SimiKhan-ju1tl
    @SimiKhan-ju1tl 7 หลายเดือนก่อน

    Imran loving your tutorials. Please make some tutorials related to jQuery with Elementor. How to use jQuery in multiple scenerios.

  • @RichardWadeUK
    @RichardWadeUK 7 หลายเดือนก่อน +2

    Great video mate, however, when you say "cont" it sounds like you're saying another c word 😂 (I certainly don't mind, and anyone else that does can cluck off, but it did make me chuckle).
    Keep up the great work dude

    • @daveden2
      @daveden2 7 หลายเดือนก่อน +1

      My thoughts as well 😂

    • @RichardWadeUK
      @RichardWadeUK 7 หลายเดือนก่อน +1

      @@daveden2 Not just me then mate 🤣

    • @websquadron
      @websquadron  7 หลายเดือนก่อน +2

      When I was recording, I kept wondering why I did that - and couldn't be bothered to change the code :) :)

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

      @@websquadron embrace the inner "cont" and be proud of it mate 🤣

  • @PerryWebCreations
    @PerryWebCreations 7 หลายเดือนก่อน +1

    Very cool! Thanks for sharing.

  • @atulkadyan1303
    @atulkadyan1303 7 หลายเดือนก่อน +1

    loved the video as you said 💪💪💪

  • @rh619
    @rh619 7 หลายเดือนก่อน +1

    amazing as always..

  • @daveden2
    @daveden2 7 หลายเดือนก่อน +1

    Pretty cool and creative

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

      The click to reveal should be used sparingly but when it's placed in strategic places, it can reduce the length of the page a lot :)

  • @emmanuelivwighre5399
    @emmanuelivwighre5399 7 หลายเดือนก่อน +1

    Love bento

  • @theavinab07
    @theavinab07 7 หลายเดือนก่อน +1

    Hey I want to build a singers booking website how can I do with the help of free plugins

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

    Nice, can you make the hover zoom "women" image clickable/ linkable?

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

    Hi,
    When I click on the plus icon it doesn't fade. It does show the other container but without the fade transition. Some idea?
    The code "transition: opacity 0.5s ease-in-out;" is present.
    Thank you all!
    Marc

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

    I was just curious if you could do the grow on hover with the text and/or image using the 'Transform' section in the 'Advanced' tab?
    P. S. Thanks a ton for all the content!! You have no idea how helpful it has been for me.

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

      Yes but better control is here with css

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

    how to add stock notifier in woocommerce archive page

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

    what's up with bento craze, in mobile it all gonna be stacked one above another, for desktop it looks awesome but major viewership are from mobile.

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

      Yup and as long as it looks good obviously mobile then it’s all good :)

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

    Good video. Imran why have you dropped your theme tune? I rather liked it.

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

      Laziness from me :)

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

      @@websquadron 😂

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

    love these videos, but cannot get the HTML to work, the icon doesn't allow me to click it

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

      Have you assigned the correct ID?

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

      @@websquadron followed it step by step and rechecked to the letter about 5 times

    • @alfieyates1991
      @alfieyates1991 6 หลายเดือนก่อน +1

      @websquadron I have, and rewatched it several times following it to the letter with still no luck, although I did notice some differences between the code in the snippet and what you showed, still to no avail

    • @suemackie5053
      @suemackie5053 2 หลายเดือนก่อน +1

      I'm having the same issue. Have rewatched and checked your video and it still doesn't work for me.

    • @suemackie5053
      @suemackie5053 2 หลายเดือนก่อน +1

      although I just noticed your html code says icon333 and cont444, not what you said in your video.