Complex Containers with Less Containers - Elementor Wordpress Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 31 ธ.ค. 2022
  • Last week we did a Complex Container layout with Parent Containers, Children Containers, and Grandchild Containers.
    But with a little thought you can replicate the layout (and go beyond) without needing to use Grandchild Containers.
    Book your 1-2-1 Consultation: websquadron.co.uk/socials
    Complex Containers with Less Containers - Elementor Wordpress Tutorial
    We love to create - share - respond - and deliver.
    🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
    🔗 All of our Important Links: websquadron.co.uk/socials/
    😃 Join our Facebook Group: / 3309523509284305
    😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
    😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
    😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
    👕 Get our Merchandise: websquadron.co.uk/merchandise
    🥹 Support us: paypal.me/Websquadron
    Hire us to work on your Website!
    💌 info@websquadron.co.uk
    👩‍💻 Visit websquadron.co.uk
  • แนวปฏิบัติและการใช้ชีวิต

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

  • @HazloConLaIA
    @HazloConLaIA 5 หลายเดือนก่อน +1

    Thank you it helped me alot !!

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

      Big thanks

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

    An excellent video mate! Thank you so much!!!

  • @mrs.mazharfarooqi2510
    @mrs.mazharfarooqi2510 9 หลายเดือนก่อน +1

    Wow it helped me a lot thank you so much

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

    Indeed a good tip...
    .
    Stay Blessed

  • @Claudius.a
    @Claudius.a ปีที่แล้ว +2

    Beautiful delivery again, Imran! Thank you. I think this will almost solve the CSS Grid crazy for complex layouts. Your creativity is just amazing!

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

    thankful for the tips on elementor and boosting page speeds for all designers 🎉 happy new year web squadron!

  • @Emmanuel-Ifeoluwa
    @Emmanuel-Ifeoluwa ปีที่แล้ว +1

    Wow. This is brilliant! Will definitely help with the DOM and page speed.

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

    Great man !

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

    I visited all your container videos, I was very wrong about it, thank God I didn't start creating my website before I saw your tutorials, the container is way better than those sections, I created a mega menu with it, and I got better speed.

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

    Thankyou 👍

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

    You don't have to specify the height of the text-editor to 180px. No need to calculate the height either.
    Just set size to GROW (Advanced > Layout > Size) and it will fill the leftover space in the container.

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

    Very nice. Especially with images I have problems to fit them completely in the container. My experience is you have to play around a lot with the resolution of the image itself. Container Jungle...

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

      Yup. Sometimes you got to compromise a little on the images if allowed.

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

    Two questions bro.
    1. Removing container Vs Adding custom CSS. which one effect more for page speed ?
    2. if we set custom css. do we have to add separate custom css for mobile and tablet breakpoints ?. otherwise it will stay 200px for mobile too. sometimes it's too much and we want 150px or something

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

      Yup, Custom CSS would remove some unnecessary code and improve PSI, but only by a small amount.
      You'll need to use @media syntax to handle the differing breakpoints.

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

    Great video, but I don't think you mentioned adding CSS is only Pro version of Elementor?

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

      You can add CSS into your Theme Customiser, Code Snippets, and other ways, so it's still doable :)

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

    Thanks, but Im assuming this isnt very flexible though? How responsive is it ? Wont some of the heights and widths go out of alignment without creating new values for different browser widths?

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

      You would adjust accordingly, and I recommend using clamp to get the look you want. The simplest method is to apply 50% width per item for Tablets and 100% width for mobiles.

  • @advanced-developers
    @advanced-developers ปีที่แล้ว

    good

  • @MFG2738
    @MFG2738 22 วันที่ผ่านมา

    Has the inner sections element been removed?

    • @websquadron
      @websquadron  22 วันที่ผ่านมา

      Yup. Just add containers into containers

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

    how to make this layout can you plz explain. i meed the same

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

      The video explains it

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

    Man I’m so grateful for your Elementor videos. 🫡

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

    Hi, I have a problem, after editing the position of the element in Elementor, the preview page on different browsers shows different results, what is the problem?🥲

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

      Are you using % or Pxs for the margin, padding, sizing? Difficult to know without doing a 1-2-1 consultation.