From Figma to Elementor: Beginners tutorial project

Рет қаралды 22,165

Күн бұрын

In this Wordpress Elementor Tutorial I show you how you can transform your Figma design into a real website with Elementor, all for free. Using free hosting, the free version of Elementor and the free version of Wordpress.
All the links mentioned in the video
1. Figma design file www.figma.com/file/qByCU9nBfc...
2. Download the Assets (images, icons): www.dropbox.com/scl/fo/atfuel...
3. Red text code: www.w3schools.com/tags/tag_fo... (the first one)
4. My Elementor Pro Mastery Course livingwithpixels.com/elemento... (discount code for YT subscribers: LWPYT )
5. Link to Typography tutorial: • How to Perfectly Set U...
6. My Elementor Pro affiliate link: livingwithpixels.com/elementor
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixels.com/hostinger
Siteground for premium webhosting: livingwithpixels.com/siteground
Elementor for no-code web-development: livingwithpixels.com/elementor
Figma for Web Design: livingwithpixels.com/figma
All recommended software & discounts: livingwithpixels.com/links/
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixels.com/elemento...
Figma Design Starters Guide: livingwithpixels.com/design-g...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Business Course: livingwithpixels.com/business...
→ Social media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.

Пікірлер: 82

@May10th Ай бұрын

Your WordPress tutorials are always the best! Especially as a non-native English speaker, your speaking pace really helps me understand the content. What's even more amazing about your videos is that you go into detail about things that are confusing to a beginner. You don't just give the right answer, you show the wrong answer first and explain why you shouldn't do it, which is really helpful. It's also very helpful to see the videos of you finding and fixing the little bugs you encounter while working with Elementor. Thank you so much for providing such high quality guides on KZfaq.

@luowastaken 2 ай бұрын

Awesome! Have been waiting for a video like this from you Rino.

@genemoore1 2 ай бұрын

You're such a great teacher Rino. GREAT job.

@asantamzid 2 ай бұрын

we want more and more video Figma to elementor design like this!

@DEBUGENTITY 2 ай бұрын

kzfaq.info/get/bejne/ruB-nZCfsJi6mZ8.htmlsi=1uBy3iv6PfNP9Y-y Better then this

@adele-omni 2 ай бұрын

Amazing video as always, Rino! 🚀 You really have a talent to explain even complex things in a beginner friendly way and break it down to the steps that are understandable for all :)

@tonybp 2 ай бұрын

Can't wait to see the header tutorial 👍

@Mehedihasan_979 2 ай бұрын

You are such an experienced WordPress developer. You know every little setting that affects the design. Please make more videos and also how to add the header in this type of design. Thanks for your service ❤️

@kristaknijff1018 2 ай бұрын

You are the best, thanks for this great tutorial!

@ElementoryMyDearWatson 2 ай бұрын

Very enjoyable Rino. Always something to be learned from your tutorials.

@DEBUGENTITY 2 ай бұрын

kzfaq.info/get/bejne/ruB-nZCfsJi6mZ8.htmlsi=1uBy3iv6PfNP9Y-y Better then this

@chillingarenaa603 2 ай бұрын

Amazing step by step video as always 😊

@BenEllis-jd1mc 2 ай бұрын

Hey Rino, thanks for this! Been waiting since the Figma video 😂

@annacastillo5651 2 ай бұрын

Silent follower here. So glad for you sharing your knowledge ❤

@DEBUGENTITY 2 ай бұрын

kzfaq.info/get/bejne/ruB-nZCfsJi6mZ8.htmlsi=1uBy3iv6PfNP9Y-y Better then

@mankilany 2 ай бұрын

Great video for begginers like me. Thank you!

@arnoldmoeketsi3042 2 ай бұрын

First 😋😋😋 Im glad to see you back.

@JunaidAhmed309 2 ай бұрын

looking forward to see more tutorials like this

@DEBUGENTITY 2 ай бұрын

kzfaq.info/get/bejne/ruB-nZCfsJi6mZ8.htmlsi=1uBy3iv6PfNP9Y-y Better then this

@bjon3048 2 ай бұрын

I like how you position yourself to keep your focus. 'Webdesigner and no-code developer'.

@babakshahkaram Ай бұрын

Perfect. Thank you

@SillyWeb 2 ай бұрын

awesome build loved the designa and website

@DEBUGENTITY 2 ай бұрын

kzfaq.info/get/bejne/ruB-nZCfsJi6mZ8.htmlsi=1uBy3iv6PfNP9Y-y Better then this

@michaeldaives1434 2 ай бұрын

Wish I had this tutorial 3 years ago 😢 - can’t believe I’ve done so many work arounds 😢😢😢😢. Excellent vid thank you

@hasnainali-iy8ue 2 ай бұрын

thank you for this

@shubhamrathod9249 2 ай бұрын

Thank you!

@toluwanimidanemarvel 2 ай бұрын

Thank you so much Rino de Boer❤ I watched this Figma tutorial today and I Design it as well🙏

@rinodeboer 2 ай бұрын

Nice to hear!

@toluwanimidanemarvel 2 ай бұрын

@@rinodeboer Thank you Sir 🙏 I was the one that Tagged you on Instagram with the design Sir 🙏

@BilalShirzadDev 2 ай бұрын

The way of teaching is much better and I love it. But if we used for the Hero Champion text will not need padding for separate screen sizes I think, but we are no code developers.😘

@MbonisiM 2 ай бұрын

Another Danger 😊

@honeypeadigital 2 ай бұрын

I used this previous video to model my website. Nice to see it being transferred though.

@whatamiwitnessing1003 2 ай бұрын

Mooi man.

@user-dl3ct1pq1n Ай бұрын

This is a good video for beginners. Are you going to make an advance version?

@sariousboy 2 ай бұрын

31:37 For Windows users press: Win key + Shift + S To make a Screenshot of a specific area of the screen

@tbabyiza21 2 ай бұрын

Thank you for sharing! Would you consider adding a number of these in-depth tutorials with different design layouts to your Elementor course just focused on design? I would be happy to pay extra to have access and I’m sure others would too😊

@rinodeboer 2 ай бұрын

Yes, I have already planned a few for KZfaq. My course is more an overview of all the techniques so that you can apply it to any design.

@macarthurweb Ай бұрын

Can’t wait for the course

@natalielundquist2838 Ай бұрын

In the beginning, you mention that you normally set up a lot more things in the site settings/inside WordPress. Do you have a video about this?

@MGallear9 2 ай бұрын

After building a few websites I've quickly realised that I dint enjoy the development side, too much time and too much headache. So in all honesty it's better working with a developer and sticking to the design aspect because that's what I enjoy more.

@rinodeboer 2 ай бұрын

Absolutely, always do what gives you energy👌🏼

@madeinusa5395 2 ай бұрын

Is it possible to go from Figma to Figueroa and Olympic Blvd. in Los Angeles?

@mrcalifornia6369 2 ай бұрын

Can you please make a video about your bedroom office setup? 😁

@tessanicolai Ай бұрын

Gebruik je altijd alleen maar de breakpoints tablet portrait en mobile portrait? Of ook de laptop en de horizontale layouts?

@rinodeboer Ай бұрын

Ik gebruik vaak ook de laptop en tablet landscape. Widescreen en mobile landscape zijn vaak overbodig.

@sameerpatelxyz 2 ай бұрын

nice design 🤩 how much you charge for this design?

@francescafirvida2000 2 ай бұрын

Love your videos. Can you tell me if there is purpose to designing a website on Figma first and then Elementor. I have experience with Elementor so, when I designed on Figma I felt that it was a waste of time when I had to do it all again on Elementor. I was initially hoping I could somehow export it to Elementor. I am assuming Figma is for people who just want to design websites with no intentions of them being functional.

@rinodeboer 2 ай бұрын

Good question, I made a video that answers this question: kzfaq.info/get/bejne/n7J1pZlo1rysops.htmlsi=sUIcoW0ZXq2MItiJ

@kevinmims1737 2 ай бұрын

Rino, what are your thoughts on Figma (or other design platforms, too I suppose) plugins that claim to automatically convert your design to a Wordpress website?

@rinodeboer 2 ай бұрын

Good question, I have tested the 2 most popular tools that promise to convert Figma to Elementor. Both were overpromising and underdelivering. It takes a lot of fixing to get it right, which takes skill. That skill and time you could also use to build it yourself in (probably) the same amount of time. So not a big fan yet.

@techtoon8971 2 ай бұрын

Sir why we choose Figma for design? Why we prefer it over Elementor?

@watchandlearn7945 2 ай бұрын

whats the extension name that your are using for measuring the width and height of the box?

@rinodeboer 2 ай бұрын

It's just the screenshot feature in Mac, using Cmd, Ctrl, Shift, 4

@frankges5184 23 күн бұрын

Do you have any video on website SEO OPTIMIZATION..PLEASE SHARE THE LINK

@pana_____ 2 ай бұрын

Rino, je kanaal is erg mooi gegroeid en ik waardeer de inhoud, maar zijn we weer terug bij de eerstejaars?

@rinodeboer 2 ай бұрын

Dankjewel. Met deze video wel ja. Ik kan niet alleen maar advanced videos blijven maken, soms moet er ook wat tussen zitten voor beginners, zodat zij ook kunnen groeien :)

@vukkrzman1534 2 ай бұрын

When I want to put red color on the "champion", it makes a huge gap between 2 rows. Can you help me?

@SimonWaldburger 2 ай бұрын

Use -tags instead of a paragraph/-tag. Those are inline and doesn't break the line apart.

@poussiere404 2 ай бұрын

Funny to see that you're experiencing the same issue with buggy Elementor :p

@honeypeadigital 2 ай бұрын

Also, any reason for showing InstaWP instead of using Local or another local host instead?

@rinodeboer 2 ай бұрын

Because the set up is so easy so beginner friendly. But I also use localWP. Maybe next time.

@johnmichaelgorgonia8324 2 ай бұрын

Hallo Rino, I love your videos and would love to purchase your course. Do you offer a discount promo code for the course?

@rinodeboer 2 ай бұрын

Hey! Thanks for the interest. Yes, I do offer a discount, here is the info: My Elementor Pro Mastery livingwithpixels.com/elementor-course (discount code for YT subscribers: LWPYT )

@shubhamrathod9249 2 ай бұрын

31:49 Window+shift+s for windows

@innerinsights224 2 ай бұрын

Do you need to pay first to use elementor?

@rinodeboer 2 ай бұрын

No, you can just install the Elementor plugin and make this page (or a simple website) completely for free. But if you want a website with a domain name then you will have to pay a few dollars per month for hosting.

@manoskand 2 ай бұрын

i am waiting for the day that someone will create an WordPress plugin that you'll be able to export Figma websites and convert them in to fully dynamic website using containers

@ellisclarke9608 2 ай бұрын

It kinda already exists - fignel

@KhairulAqmal 8 күн бұрын

So basically, we just need to redesign it all over again in Elementor and can't magically export it from Figma? 😅

@TaskSwitcherify 2 ай бұрын

Nice. But I'd prefer a more flexible and elegant method than hard-coding the color red for CHAMPION in the title

@rinodeboer 2 ай бұрын

Yea, I agree. There is a way to connect it to your global colors, but that requires digging into the CSS. So I wanted to keep it simple for this tutorial.

@SimonWaldburger 2 ай бұрын

Use the following code in the title box: Fight like a champion

@rinodeboer 2 ай бұрын

Thank you for adding that!