Card design to Elementor, create the layout step by step

Подписаться 32 тыс.

Просмотров 48 тыс.

50% 1

This is one of those design-to-elementor video-tutorials that teaches you many basic techniques and provides easy solutions for the tricky stuff. Learn how to think from the perspective of Elementor and sharpen your skills. Remember that the best widget is the one that you can build with your own hand, rather than just drag-and-drop.
-------------------------------------------------- EXTRAS!
If you plan to buy Elementor PRO - buy from this link and help me keep this channel alive!
be.elementor.c...
OoohBoi Steroids for Elementor plugin page:
wordpress.org/...
Visit my Gumroad shop for more cool stuff:
gumroad.com/oo...
The training file:
cutt.ly/IgIGcoK
Awesome, super-fast, 5-stars, reliable hosting on Dutch servers:
www.rempro.nl/
You might consider buying me a coffee if you find my work helpful for your business:
www.paypal.me/...
-------------------------------------------------- CREDITS!
-Music: Corporate Uplifting Chill by MusicLFiles
Link: filmmusic.io/s...
License: creativecommons...

Опубликовано:

30 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 120

@ionutsabo 3 года назад

Man, you're a genius. And your plugin is by far one of the most powerful addons for Elementor out there.

@OoohBoi 3 года назад

Thanks buddy, I give my best!

@justinaugust6611 3 года назад

you probably dont give a damn but does someone know a way to get back into an Instagram account? I somehow lost the login password. I appreciate any assistance you can offer me!

@erikboone5883 3 года назад

@Justin August instablaster :)

@sumerianbrother 3 года назад

Thanks once again. Even tho I'm fairly seasoned, it's an excellent way to see other professionals at work and maybe pick up a few tips here and there or just confirm my own workflow. Love your plugin, it's been an invaluable tool w/ more complex designs. Much appreciated, keep up the good work. Cheers.

@OoohBoi 3 года назад

Thanks for watching my Sumerian Brother!

@neostase 3 года назад

Crazy good as always.. You're the boss Oooh Boi!

@chyk_e 3 года назад

This is the best elementor extension, very light with such great features. Genius.

@stefsterCA 2 года назад

I thought this was a video for custom card grid layout dynamic, Darn!

@briericidesign 2 года назад

Maybe I'm missing an important piece. I tried adding an inner section to my column as it appears you do at 2:27 but Elementor won't allow the addition of an inner section.

@afrasiyabkhan6727 2 года назад

Sir, please make some Pricing tables.

@goldivox50 3 года назад

Another outstanding tutorial - can’t wait for the header video!! Of course I’ll have to wait won’t I - ( yes you will Don [ he said to himself ])**

@OoohBoi 3 года назад

As soon as I find some spare time, thanks buddy!

@AntGeezer 3 года назад

Another master class Thank you. 👍

@sherlwinc 3 года назад

Excellent!!!- Thank you!!

@mubasherkhattak651 2 года назад

training file not able to download

@Phoenix_Arise_J 3 года назад

why didn't I know your channel months back? 😢 I love your creativity and devotion! Thanks a lot 🌷

@OoohBoi 3 года назад

Welcome! I hope you gonna find it useful from now on!

@sfmikica 3 года назад

Keep 'em coming!

@OoohBoi 3 года назад

More to come!

@zivkdusan 23 дня назад

It's messed up..

@mihai00714 3 года назад

outstanding as always, I'm waiting for the header video, for sure it's something im considering implementing on my website. keep up the good work , you're the best regarding elementor design in my opition!

@OoohBoi 3 года назад

Awesome, thank you!

@buksohn 3 года назад

Your plug-in is awesome and saving my life. It Helps me Work faster and better. Really thank you.

@OoohBoi 3 года назад

Great to hear, thanks for the feedback!

@Cebok_barengan 3 года назад

Dear Guru, how to delete images in mobile mode? or make gradient background overlay with condition i mean in mobile position gradient change?

@OoohBoi 3 года назад

This video title says: Card design to Elementor . Please stick to the topic!

@vanluutran726 3 года назад

tks with all my heart!

@yassineallaoui8211 2 года назад

Hi I have a question can't you make the border go beside the image with the z-index ?

@yassineallaoui8211 2 года назад

Ok I shut my mouth and I'll watch videos entirely now lmao

@cmillerx41 3 года назад

Genius! This is so cool.

@riegaldutoit5792 3 года назад

please share the project file again. the link is not working anymore .. :)

@OoohBoi 3 года назад

Maybe it was only temporarily, please try again!

@YasienSarlie 3 года назад

... Stab the screen 🤣

@humbertg.9661 2 года назад

Thank you for this. I bought your templates but I'm going crazy trying to figure out where the image is located so I can change it. I'm looking at the navigator in Elementor but it's not there. Another thing is I'm trying to use the template for a loop but when change to mobile the result is not good at all. Please help

@dozieweon 3 года назад

You are amazing

@bySterling 3 года назад

Just sent you a PayPal coffee sir! ☕️

@OoohBoi 3 года назад

Thanks buddy!

@agb0r Год назад

Genius

@EstherKiss 2 года назад

Thank you so much for this tutorial! I tried it and my card came out almost perfect. The only thing I'm having trouble with is getting the border to not touch the edges of the icon. I added the padding to the icon widget but the border is still touching the icon. I must have missed something about the z index or something else in earlier parts of the tutorial. I've watched it multiple times and can't see where I went wrong. I tried downloading the training file as well but the link is not working. Could you please point me in the right direction? Thank you so much!

@OoohBoi Год назад

Did you try download it again? Maybe the server was down or so...

@EstherKiss Год назад

I was able to upload the json file as a template but now it's not editable. Also, the preview shows the border touching the icon at the top... The same issue I wasn't able to figure out when I built the card following the video tutorial step by step. It's probably a setting somewhere that I'm not aware of. By chance, do you have step-by-step instructions somewhere on how to use the template?

@000SilaS000 3 года назад

one section, 2 inline sections 5 widgets multiply by 3 Does your optimization score go above 20? Just curios

@OoohBoi 3 года назад

There's definitely room for improvements simply because "Steroids for Elementor" now include more tools towards that goal. But hey, the more complex your layout is, the more resources you have to put in!

@000SilaS000 3 года назад

@@OoohBoi Steroids? Oh. You have a plugin on top of that....Jeez

@oam78611 3 года назад

The training files don’t open up properly. Does it need to be open up in a specific program?

@OoohBoi 3 года назад

The training file is importable by Elementor (as a template). And it works for sure.

@oam78611 3 года назад

@@OoohBoi thank you! Totally missed that the training file was to be imported. Now looks so good on my website. Thanks!

@khanfaysal993 3 года назад

please make a video about translate automatic translation in any language in wp

@OoohBoi 3 года назад

I'm not getting the point mate, sorry!

@khanfaysal993 3 года назад

@@OoohBoi make a video about multi language support in WordPress website

@MariaHuntPhD 3 года назад

I discovered your RU-vid channel a couple of months ago. Now I only want to watch your videos because they are so helpful! I encourage anyone who feels similarly to purchase an item in your store... like I have. MANY THANKS, my genius Friend!!!

@OoohBoi 3 года назад

Aw, that was nice, thanks Maria!

@profiAcc 3 года назад

wow, you're a magician! good job man, this was amazing!

@dimMx 3 года назад

Sorry for my silly question. All of these designs can be applied provided that we have purchase your add-ons? Are they like a library of yours, and we just drag and drop them, and change images with out own images? :) Keep up the really good work!

@OoohBoi 3 года назад

No need to purchase anything, "Steroids for Elementor" is 100% free. But I wouldn't mind if you buy one of commercial ones :) Just open this video description for more info!

@andonisr 3 года назад

Very nice! Followed all along - learned new tricks!! Thanks again buddy!!

@OoohBoi 3 года назад

Glad to help!

@bgriffin5447 3 года назад

You are the Picasso of CSS

@travellerg5834 3 года назад

Hi friend, Great content - thanks

@OoohBoi 3 года назад

Thank you for watching!

@travellerg5834 3 года назад

Sorry for delayed response... Hope to be in touch with you, more... Warm regards 🙏

@YasienSarlie 3 года назад

I've been using Oxygen builder more the past year but you give hope to Elementor making it flexible

@OoohBoi 3 года назад

It's all about making the widgets that don't suck.

@AliAhmed-ed4yy 3 года назад

wow, you're a magician! good job man, this was amazing! God Bless you

@OoohBoi 3 года назад

Thanks, you too!

@doorservices3199 3 года назад

Присоединяюсь ко всем положительным комментариям. Действительно лучший плагин для Elementor. Отличные видео. Внимательно слижу за новыми роликами.

@OoohBoi 3 года назад

Спасибо за просмотр, приятель!

@forgodani 3 года назад

Great content! Can you help, how can I add a 'Mark as read' button to the posts that also shows in the post grid which posts are read? Thank you!

@OoohBoi 3 года назад

To be honest, I don't know, but I guess you'll definitely need the WP plugin for that purpose. And if you get one, there's still the question how to make it work with Elementor, especially if the plugin hasn't been made to work with E...

@GauravSrivastv 3 года назад

Wow! That's so amazing.... O!boi, you are a gem 😁👍

@OoohBoi 3 года назад

Thanks for watching buddy!

@mygicarskrsk4465 3 года назад

everything is so cool about your videos man, the creativeness and the background music is so awesome!

@OoohBoi 3 года назад

Glad you like them, thanks for watching!

@Berscom 3 года назад

Thank you, great design; those cards would be great in a carousel !

@OoohBoi 3 года назад

Great idea, thanks for watching!

@nafisiqbal2408 3 года назад

Amazing tutorial. Thank you.

@robertb.5429 3 года назад

Step 36: Knife in screen... Step 37: Check warranty for 'accidental damage'. Step 38. Cry.

@OoohBoi 3 года назад

I just couldn't resist to mention the knife after that bleeding phrase...

@robertb.5429 3 года назад

@@OoohBoi 😂

@CristinaRoseChu 3 года назад

Thank you for all your work! your videos really help me understand more about elementor.

@OoohBoi 3 года назад

Glad I could help!

@claygaming3932 3 года назад

Awesome Tricks

@bySterling 3 года назад

🙌🏻⚡️💻💪🏻💥👏🏻 Amazing!

@simod-design 3 года назад

Hi there. I have a question. I am having a problem with a 1px gap between sections created by elementor pro even though I have changed the gap to 0px. I know, I saw you had a css solution to this in one of your videos. Unfortunately I cannot find that solution or video now. If you could point me to the correct video or let me know the css solution that would be awesome. Thanks for all the great videos :)

@OoohBoi 3 года назад

No, I don't have a solution for "1px gap between section", I never noticed anything alike. However, I recall one of subscribers mentioned it as a problem but I don't remember what exactly was the problem. Are you using "Hello Elementor" theme? Maybe it has something to do with the theme... sorry mate for not being able to help!

@simod-design 3 года назад

@@OoohBoi thanks for answering. I felt sure I had seen it in your video. Love your videos, many thanks for all the help

@tinasheyadley 3 года назад

Thank you once again Ooh Booi. I have a quick question though perhaps not directly related to this specific tutorial. In your professional opinion is it possible to add a shadow to Elementor's shape dividers, I.e adding a shadow that follows the path of the shadow? Trust me, this could be useful for complex layouts. Would be happy to know if you have a tutorial for this.

@OoohBoi 3 года назад

Yes, but you can't use the regular box-shadow. As it reads, it's a BOX shadow. But if you use drop-shadow filter, it'll follow the shape - be it a transparent PNG or the clip-path. Find out more about here: developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

@tinasheyadley 3 года назад

@@OoohBoi you`re so kind, thank you for this information. Let me dive in right away.

@brianwoodlief 3 года назад

amazing. I am definitely going to apply some of these layout techniques. I always look forward to your latest videos. thank you so much!

@OoohBoi 3 года назад

You are so welcome, thanks for watching!

@davidadams421 3 года назад

🤯 Amazing!

@DavidBenamou 3 года назад

Top video as ever

@AlfianSabriTanjung 3 года назад

Awesome.

@budiharyono900 3 года назад

you're the man! bro tx for the tut can't wait for the next

@OoohBoi 3 года назад

Any time!

@camerafamilyikinderfotogra6808 3 года назад

Thanks a lot for the tutorial, it would be great for using it for dynamic content like an archive for blog posts, it would be great if you could show this too! And love your plugin, so helpful!

@OoohBoi 3 года назад

Just browse my videos (dynamic series) and you'll find the answer. Mix and match, match and mix and you'll be good.

@camerafamilyikinderfotogra6808 3 года назад

@@OoohBoi Thanks a lot for your answer! How does it work when the headlines or the text itself are different in length like you showed in the video? I don't know how to master this with dynamic content.

@sgo7806 3 года назад

Very nice! A elementor course from you would be great ;-) Could you please tell me why you did not use two inner sections instead of one with 2 columns and el.steroids floating?

@OoohBoi 3 года назад

Two Inner Sections takes more HTML code than just one with the two columns, no other reason.

@sgo7806 3 года назад

@@OoohBoi you are crazy;-))))

@Iiquify 3 года назад

smooth music, great instruction :)

@OoohBoi 3 года назад

Glad you liked it!

@digwillhachi 3 года назад

Awesome 👏

@constancephoto6512 3 года назад

Brilliant , informative and inspiring - as always. Thank you!

@OoohBoi 3 года назад

Glad you enjoyed it!

@ravindug 3 года назад

Looking for this for ages, thank you

@OoohBoi 3 года назад

Glad I could help

@simonvanoordt9839 3 года назад

Amazing. I'm so happy you take it in depth and explain what you could happen when you try implementing it yourselve and how you can make it look good on different devices. These tutorials really help to use elementor better and improve my designs

@OoohBoi 3 года назад

Glad you enjoyed it!