How to Make Ribbon Shape using Elementor Free | WordPress Elementor Tutorial | Elementor CSS Tricks

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

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

50% 1

[FREE + No Plugin] In this tutorial, using Elementor Free Version, I'll show you How to Create Ribbon Shape 🔥🔥 No additional plugin is required!! 🔥
Pricing Table Design Tutorial:
• Free Elementor Pricing...
✅ Get Elementor PRO:
jimfahaddigital.com/e-pro
✅ Get Tutorial Code Snippet:
jimfahaddigital.com/tutorial/...
✅ Get Domain & Webhosting(50% off):
jimfahaddigital.com/hosting
✅ Start a Project with me:
jimfahaddigital.com/request-a...
Subscribe Here: bit.ly/JFDtutorials
TIMESTAMP:
0:00:00 Overview
0:00:35 Design the Layout using Elementor
0:06:39 Contact Jim Fahad
0:06:55 Continue Designing the Layout using Elementor
0:07:09 Ribbon Shape with Real Pricing Table
In this tutorial, I'll show you how to design a Pricing table using Elementor Free Version with Ribbon Design. You can do it very easily using Elementor Pro. Because Elementor Pro has a "Pricing Table" widget. But there's no "Pricing Table" widget in the Elementor FREE version.
But, in this tutorial, I've shown that how you can very easily create a Pricing table with Ribbon!
Thanks for Watching!
✅ Become a WordPress Freelancer Today! Watch this Tutorial:
• Elementor Experts Netw...
✅ Hire a Pro Web Developer:
jimfahaddigital.com
-----------------------------------------------------------------------------
And, Here are other Full Website Creation Tutorials using ELEMENTOR+WORDPRESS:
Elementor Portfolio Tutorial 2021:
• How to Make a PERSONAL...
Elementor Pro Complete Tutorial 2020:
• Elementor Pro Tutorial...
How To Create a Modern Website 2020:
• [No Coding] How to Mak...
How To Make a Business Website 2020:
• [Complete Tutorial] Ho...
How To Build a Personal Portfolio Website 2020:
• [A-Z] How to Create a ...
How To Create a One Page Wordpress Website 2020:
• How to Make a Complete...
How To Create a Multi-Page Wordpress Website 2020:
• How to make a $5000 Wo...
How To Create App Landing Wordpress Website 2020:
• How to Make a WordPres...
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
About:
8 Million+ website owners started using the Elementor page builder. I'll show you the easiest way how you can create your personal resume website using Elementor Page Builder yourself.
#WordPress #Elementor #tipsAndTricks
If you're searching for how to make an eCommerce website, how to make a professional webShop from scratch, how to create an Online Store website step by step using woocommerce elementor, woocommerce subscriptions, WordPress eCommerce 2020 tutorial for beginners, woocommerce plugins, woocommerce payment gateway, best website making course, Elementor tutorial for beginners - then this tutorial is for you.
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
Like me on Facebook:
/ jimfahad.consultancy
And, lastly, If you want me to build your AWESOME website at an affordable price,
✅ You Can Contact me through my website:
jimfahaddigital.com/request-a...
Have a great day!

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

7 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@jimfahaddigital Год назад

🔥Download Exclusive Elementor Templates: kitpapa.com 🔥

@user-mz1qn6di6r 2 года назад

Thank you so much. Your simple explanation and comprehensive guide along with the simple taking of the code without scams are so appreciated!

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

My favorite teacher you will never stop surprising me. Thank you very much Mr. Fahah

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

Great tutorial as always Jim 👍. Happy holidays 🎊🍾🥂. May 2022 bring you Health, Money, Love & Happyness and your family.

@Petersworld77 9 месяцев назад

Thanks Jim, works a treat. Is it possible to control the font of the wording as well as the colour & size?

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

I'm eagerly waiting for your next informational video about elementor. Do Continue brother...🤝

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

Olá seus tutoriais são essenciais para mim, mesmo sendo aqui do Brasil mas entendo o tutorial e já consegui aplicar em alguns projetos!! Obrigada♡! Não pare de fazer estes tutoriais por favor 😅😅 Hello your tutorials are essential for me, even being here in Brazil, but I understand the tutorial and I have already managed to apply it to some projects !! Thank you ♡! Please do not stop doing these tutorials 😅😅

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

Somos 2

@Theblackchannel01 Год назад

Best 👌. Thanks fahad

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

amazing tutorials, and thank you very much for all the codes !!

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

I appreciate it!! Thank you so much!!

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

Thank you so much for the helpful video. This video is really awesome.

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

Good job Jim !

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

Thanks a mil ❤

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

Hello friend excellent video of my favorite css code. I want to thank you on behalf of all your followers the great work you have done during this year ending 2021 and I want to congratulate you because your videos have been motivation for thousands of what you follow including me and every day you upload a video inspires us, all your videos are excellent but my favorites and where you make a difference are the videos with css code are the best I've seen in all you tube I tell you sincerely hope you keep giving us this kind of video with css that allows us to believe in us and that the limit is the sky. I wish you a happy new year that your you tube channel continues to grow and that the content that you give us multiply in thousands of followers. happy new year 2022 from venezuela.

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

Hi, great tutorials, and thank you for your ideas and help to built them.

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

Thank you so much for your appreciation bro!!

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

BRO...YOU ARE ALWAYS PERFECT.... I LOVE YOUR WAY OF TEACHING...

@moadrachidi222 10 месяцев назад

please what changes should i apply to the code in order to change the ribbon width, because it extends out of my pricing table box

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

Very cool! I wish dark mode tutorial for website 😍

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

How do i create the text on the ribbon dynamically using Elementor dynamic tags?

@Abu_Bakar_Siddique. 2 года назад

Very nice

@AlexanderEO5 Год назад

how does one move that ribbon to the right hand side instead of the left? Also great video. Very very useful!

@angelawhittaker8883 3 месяца назад

Great Video. Can you also suggest what to do if I have to add a different ribbon colour and text on the next pricing table on the same page, as the HTML code will be the same for all the ribbons which look same. Please advise how to achieve this. Thanks

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

Awesome boss!

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

I appreciate it! Thanks a million!!

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

how to make the ribbon in front of the image product? i followed this tuorial, its great and worked fine but the ribbon show behind my image product, any solution?

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

Do you know if things with listing items by jetengine?

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

i visit your channel daily for the this type of vidoe .. you are amezing

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

Wow!! Thanks a million bro!!

@md.farukulislam5740 2 года назад

thank you so much boss

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

My pleasure!! I really appreciate it!! 🤩

@SveinnTryggvason Год назад

Thanks for the tutorial. Would it be possible to control the visibility of the ribbon based on post category, tag or date (with ACF)?

@danny17563 4 месяца назад

Im looking for this too, did you find out how to do it?

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

I like it, Master

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

Thank you so much!! It means a lot!!

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

Thanks again Jim for these amazing , beautiful tutorials. would it possible to make a tutorial on how to hide/show the ribbon on demand if I were to run a sale for instance on my site and just want to show the ribbon for a short period of time and then hide it ? thank you in advance .

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

Just remove those two class names to hide the ribbon. I mean these 2 class names 'myPricing' & 'myRibbon'

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

@@jimfahaddigital Thank you very much Jim, I really appreciate your help and quick reply, thanks again for all your work and codes we learn a ton from your tutorials.

@AbdulAziz-cj4hg 2 года назад

how do you make it a rounded corner?

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

All of the Amazing episodes, of this channel. I really like your all videos. Could you please give us a episode only Elementor Pro widgets? If you give the video. I apprised that. Thanks a lot for your time. And where you are, be happy.

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

100 like completed 🤘

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

Yay!!! You guys are amazing!!!

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

Super

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

Thanks a million!!!

@greentrading 2 месяца назад

I want right side ribbon how to do

@md.saddamhossain5693 2 года назад

Elementor free version er a rokom aro kichu amazing video diyen. Thanks

@jankirawat8723 Год назад

how to add shortcode instead of text

@stacey.gilbert 2 года назад

You did a tutorial before this one called (Creative Team Member Section using Elementor | Glassmorphism). Could I add a ribbon to that one as well?

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

Yes!!

@stacey.gilbert 2 года назад

@@jimfahaddigital I have tried this but must have missed something because it is not working. I can get them working separately but not together.

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

Can u pls create plugin development tutoril

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

How to make a blinking button in elementot please make a video

@nickk2508 Год назад

Is it possible to place this ribbon in 2 different places on one page? I have tried to do this but have not been able to get the second one to work.

@ahmeMotivational 9 месяцев назад

just change the name of 2nd table then use like : myPricing2

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

হ্যালো ব্রাদার! লাভ ফ্রম চট্টগ্রাম! ❣️ ভাইয়া এলিমেন্টরে এসেনশিয়াল এডন বা অন্যান্য এডন ছাড়া কিভাবে এডভান্স ট্যাব করা যায় এ নিয়ে কোনো ভিডিও করলে বেশ উপকার হতো! লাইক নেস্টেড ট্যাবস!

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

Where is the link to the code?

@webmastercharles 10 месяцев назад

How to position on the right side🙏🙏

@Nish2490 10 месяцев назад

Did you figure this out by any chance? I have the same problem

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

please make a video on these topics 1. Header Fixed on top Using CSS code - Elementor Free. 2. Header show after scroll 100px down. - Elementor Free. 3. Sub menu animation. - Elementor Free. 4. Top to scroll up icon and after reaching top icon should be hide.(using CSS and js) - Elementor Free. 5. how to create sidebar menu not on top. - Elementor Free. 6. how to create custom preloader. - Elementor Free. make a videos on these topics in Elementor Free without using Plugin. please.