Тёмный

Building my Header in Elementor Wordpress from an Adobe XD web design 

Rino de Boer
Подписаться 223 тыс.
Просмотров 239 тыс.
50% 1

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

 

21 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 313   
@LuisGonzalez-gw1fs
@LuisGonzalez-gw1fs 5 лет назад
Loved it! I would like to see the entire process (adobe xd - elementor - wordpress)
@jamesablanco
@jamesablanco 4 года назад
second that
@NancyStrahinic
@NancyStrahinic 4 года назад
@@jamesablanco ME TOO!
@klaramagicluneai7743
@klaramagicluneai7743 3 года назад
me2!
@atafolla
@atafolla 3 года назад
me too!!
@bbibbless
@bbibbless 3 года назад
me 5!
@MoazMohammed
@MoazMohammed 4 года назад
This looks great! It would be nice to have another part on how to make it responsive for mobile/tablet.
@gamerzera4265
@gamerzera4265 4 года назад
It is pretty easy all you have to do is click on responsive button in the bottom of elementor tab. Now you can see how your website looks on mobile then you can edit the website in mobile view just as you do in desktop mod.
@klaramagicluneai7743
@klaramagicluneai7743 3 года назад
@@gamerzera4265 thank you
@wiziwiz
@wiziwiz 3 года назад
@@gamerzera4265 that dosen't solve making it responsive.
@wiziwiz
@wiziwiz 3 года назад
To fix the responsive text issue on mobile change the column width with % instead of pixels
@MatthewFurman
@MatthewFurman 3 года назад
Just spent an hour on your video. You are a terrific designer and an excellent teacher. Thank you very much,.
@Andrew-C-Witham
@Andrew-C-Witham 4 года назад
Thank you. Thats the most helpful intro to elementor video I've seen so far. A nice surprise bonus at the end.... that it was all done with the free version. Thats relevant for beginners who are likely starting with free. I'll now check out your other material!
@rinodeboer
@rinodeboer 4 года назад
That’s an awesome comment. Thank you.
@gospelbazetv
@gospelbazetv 3 года назад
Love how you always keep it simple.
@christinechrisalcalcaraz4192
@christinechrisalcalcaraz4192 2 года назад
It's the "I am not a very complicated man" for me hehe Your channel is brilliant. I can understand the instructions!!!
@farhanutk
@farhanutk 4 года назад
Just the channel I was looking for. Quality WordPress content 👌🔥
@gilles4316
@gilles4316 5 лет назад
I've always been very critical against page builders. I used to think that your freedom was always limited in those page builders, but after seeing this video I might reconsider. You can litterally convert any design to a website.
@rinodeboer
@rinodeboer 5 лет назад
Gilles Amazing right? And this is just the free version. Imagine what you can do with Elementor pro.
@paulvos7146
@paulvos7146 5 лет назад
@@rinodeboer The whole video i thought you used Elementor pro because you had so much options in positioning etc. Now i have been persuaded to get my own Wordpress website online with Elementor. Dankje Rino!
@brunovaz
@brunovaz 4 года назад
It is limited to a certain extent, but it just won't matter most of the times if you're building simple pages
@robbrideson2561
@robbrideson2561 4 года назад
I am new to Elementor ( 2 days) and have spent a whole day achieving what you achieved in under 16 minutes. Thank you for the inspiration and the know how on how to achieve the look and feel I wanted for my own website. Very informative and I have just subscribed to your channel as I see there is much more for me to soak up. Thank you and keep going with many more inspiring videos.
@rinodeboer
@rinodeboer 4 года назад
Glad it helped you to work more efficient. Thanks a lot for your support!
@sahariqbal
@sahariqbal Год назад
Thank you so much Rino fro making such an informational tutorials for the elementor pro users.
@MGallear9
@MGallear9 5 лет назад
Loved it, would like to see section by section. I like how simple and you make it and straight to the point 👍
@smarthustlersclub6375
@smarthustlersclub6375 3 года назад
You made me start loving designs again! I think using a template for WordPress for me will soon be over! Building from stract is better and dit give you more flexibility! Can you do a video on optimizing for mobile using elementor!
@pds4927
@pds4927 2 года назад
Yes please show us all. You're GREAT!
@MrVagabaga
@MrVagabaga 2 года назад
You have a great talent in design as in teaching. Thank you very much! Greating from Croatia!
@rinodeboer
@rinodeboer 2 года назад
Thank you!
@josbogers8609
@josbogers8609 4 года назад
Great intro for elementor. The explanation is clear and obvious. My interests are only in elementor pro. I first discovered the canal today, while I live so close by. Hats off and keep it up
@rinodeboer
@rinodeboer 4 года назад
You mean my channel instead of canal? And nice to hear Jos! Thanks a lot. I will 💪🏼
@ndyip
@ndyip 3 года назад
Rino, thanks for your video. It is a very good stepping stone for us to understand Elementor.
@RajputKiran
@RajputKiran 4 года назад
I loved your work and your video. I make websites for myself and friends (not professionally) and I did find your videos very interesting.
@ramanandapattanaik6493
@ramanandapattanaik6493 4 года назад
Best explanation for a beginner
@ilhamdaniofficial
@ilhamdaniofficial 3 года назад
great video ! but how did you make the nav menu, do we need elementor pro ?
@antheslop7796
@antheslop7796 3 года назад
I agree. looks great on desktop, but not responsive to mobie?
@asamauri2925
@asamauri2925 3 года назад
So comprehensive! I really like this WordPress x Elementor tutorial. :'>
@Sebastian-jt2yy
@Sebastian-jt2yy 4 года назад
Best Elementor/WP teacher on the net.
@hilaaaaa1
@hilaaaaa1 4 года назад
hey thanks for the tutorial! just wondering... why should we design first on XD if eventually we transfer it to elemntor? why shouldn't we design on elementor from the beginning? thanks!
@felipemendes722
@felipemendes722 3 года назад
Hi, Congrats for your awesome content. Im loving all the videos. Quick question: Why you donw use Adobe Illustrator to Design. Im facing a slowness when using Xd, at least it takes to long to allow me to choose a project to start working on it. Once it's chosen then it's fine. But is there a main reason why not use Adobe Illustrator? What are the pros and cons for web design? Thanks
@mandrasaptakmandal636
@mandrasaptakmandal636 4 года назад
I love your tutorials. I also want to be a WordPress dev but I have questions on how to deliver or handoff the website to the client. Please explain it
@ethanbonnamour
@ethanbonnamour 5 лет назад
When you are in the column section you can remove the default spaces of 20px between widgets instead of correcting bottom space inside the content itself :)
@khanmasum8244
@khanmasum8244 3 года назад
just wow....its so cool...i have ever seen
@AlenBerberovic
@AlenBerberovic 4 года назад
Great showcase, love the design! Any suggestion on how to reduce the code waste Elementor creates? The website itself is nicely designed, but looking at the source code and simple PageSpeed Insights reveal the mess created by such builders.
@ainagabriel4765
@ainagabriel4765 4 года назад
This is awesome. I've always loved using wordpress and elementor. I'm a professional graphic designer but I've never used adobe xd for a website before. I love the concept and I'll try it out. Thanks a bunch
@rinodeboer
@rinodeboer 4 года назад
Glad it was helpful!
@azrulnaqeeb
@azrulnaqeeb 3 года назад
Hey bro! a big fan of your work, I had a problem editing this on the mobile especially in the main menu, when I click on the menu the dropdown drops white and all my main menu turns white that disappears the logo. I'm looking forward on a video, editing this to a mobile-optimized version of the website.
@ingenieurgougue1617
@ingenieurgougue1617 2 года назад
Thankyou for actually explaining tNice tutorialngs. Other videos that I watched started talking about how to make soft and didn't ntion anytNice tutorialng
@litadabula6120
@litadabula6120 2 года назад
Thanks bro this was really easy to follow❤🔥🔥
@chrizzly342
@chrizzly342 3 года назад
Well done, mate. This will help many people. :) Keep on!
@kevinnirsimloo155
@kevinnirsimloo155 3 года назад
Awesome! I've been wondering how people had those wave separators for years!
@indian-js1xq
@indian-js1xq 4 года назад
Such amazing learning video My question can I sale to marketplace as theme Like creating own design and then create template in elementor And where to sale please answer if any one know
@eligiozavala6534
@eligiozavala6534 3 года назад
Went to your site. Nice. Did catch a small, I don't want to say mistake as I'm not a native English speaker either but... "It shows that you take your business serious" I believe it should be "seriously" I don't think it's different for English English as opposed to American English (which is what I'm used to)... In any case, nice site, solid video. Thanks.
@CrackerJayherber
@CrackerJayherber 3 года назад
I appreciate all your work. You have helped me a lot , thank you!
@lunelli4788
@lunelli4788 4 года назад
You make the difficult easy! You are amazing giving tutorials. I love to see your videos !!. One question, how is it done so that the menu is above the video?
@rinodeboer
@rinodeboer 4 года назад
Thank you! I have 2 other videos about that which are called ‘Transparant header’. You can find them on my channel. One is a free option and one is with elementor pro
@davidsokame64
@davidsokame64 4 года назад
Awesome work Rino...great informative idea to help build a better website
@cinthiacitlalyrodriguezcab1367
@cinthiacitlalyrodriguezcab1367 2 года назад
Ima download it thanks for sharing!!
@sallysdays5867
@sallysdays5867 3 года назад
Cool and well designed!
@subramanianthalaivericharn9363
@subramanianthalaivericharn9363 2 года назад
Great explanation! ThanKS a lot!
@DikkieDikendebmw
@DikkieDikendebmw 5 лет назад
Looks great
@0xfrans659
@0xfrans659 4 года назад
Really love your content Rino, you inspire me a lot ! Could you make a tutorial on how to create the menu bar and how to link different pages to the different sections ? Thanks again bro, keep it up !
@rinodeboer
@rinodeboer 4 года назад
Cool idea. I will write that down
@syifakamillayusron3657
@syifakamillayusron3657 2 года назад
ITS REALLY WORKED LOL THANK YOU DUDE
@johannvb1
@johannvb1 2 года назад
Hi Rino. I am a website designer from South Africa, and I simply love your videos. Well done. Just a quick question: How do you still make sure your website loads fast with a video playing in the background? Normally that slows down a website. 😀
@Shi_Nick
@Shi_Nick 3 года назад
Hi dear, i am nick from China, also your fans, i follow your steps, till to set up the background, and there is no video option to insert video, sliders instead, would you mind told me why is that, should i upgrade elementor or something
@tatthanhphanho244
@tatthanhphanho244 3 года назад
Your video is great! I did it the way you instructed. But my iconboxes look on mobile in 4 rows that are not 1 block like your website. Can you show me how to fix it? Thank you very much for the helpful video.
@carsandcigars11
@carsandcigars11 3 года назад
Amazing! Which theme are you using for your site?
@ortals
@ortals Год назад
Hello:) Does the inner section no longer exist in Elementor? Does it have a replacement?
@ranbirsingh9619
@ranbirsingh9619 2 года назад
and my friends are planning to make a ga and i'm making the soft, so tNice tutorials really helped
@carloslosa9282
@carloslosa9282 4 года назад
Hi Rino, greetings from Spain. Hoe gaat het? I find your content fresh and very illustrating. You engaged me to Adobe XD and web design so I wanted to thank you for all that you give. I'd love to see a tutorial on how to properly correct a design from desktop to mobile version. Keep it up like this, you'll reach the top!
@rinodeboer
@rinodeboer 4 года назад
Welcome on the Adobe Xd train! Haha. And thanks a lot. I love to do this. That's a good idea for a video. I will write that down. Thanks again!
@blagojelukic
@blagojelukic 4 года назад
Excellent Video...appricate you are showing those features of elementor that are relatively unknown ..most of You Tube teachers mostly use Templates for everything...
@Joehle1
@Joehle1 Год назад
I am wondering how to add a secondary header? your videos are amazing
@whataboutthis6233
@whataboutthis6233 Год назад
I would like to know the real benefit of your XD mockup is it ther just to give you a visual guide or how do you know that you should use a minimum height of 300px for your video container for example....i'im trying to know if i can reproduce my design with pixel pefect size...thank you !
@hoopsensebasketball
@hoopsensebasketball 4 года назад
Hey Rino, thanks for the tutorials, they are great. I've been following your steps and attempting to build the same type of site along with you. Everything works great on desktop, but my mobile version looks like absolute crap. The top section is just a total mess...I don't even know where to start. Do you have any advice for optimizing for mobile as you go? Thanks a lot.
@rinodeboer
@rinodeboer 4 года назад
My advice is to check mobile as often as possible. Fixing all the errors afterwards feels like a mess. So for example when you apply margin and paddin, also apply the right sizes for mobile and tablet right away. That’s a workflow that I love. It saves me a lot of time.
@hoopsensebasketball
@hoopsensebasketball 4 года назад
LivingWithPixels thanks a lot. I’ve learned more from your tutorial videos than anything else I’ve tried. Excited to continue to follow your channel.
@rinodeboer
@rinodeboer 4 года назад
No problemo! Thank you 🙏🏻
@andrewmagill
@andrewmagill 3 года назад
Great Tutorial - thanks! BTW... Here's a bit of code that will remove the margin Elementor adds to the bottom text widgets. I usually add this straight away to new websites (sitewide) then it's not a problem. .elementor-text-editor p:last-child, .textwidget p:last-child { margin-bottom:0px;}
@stefangieser3300
@stefangieser3300 4 года назад
Hey, verny nice quality videos. I wonder why you use Adobe XD when you can do the same in elementor?
@rinodeboer
@rinodeboer 4 года назад
I will make a video about this question soon. Been getting this question a lot lately.
@andreseduardomelo
@andreseduardomelo 4 года назад
@@rinodeboer Would love to see it, too! I've been creating websites not too long and I'm doubtful on whether is it easier to just create the mockup on XD and then pass it to Elementor or just create it on Elementor from scratch?
@JoeGator23
@JoeGator23 4 года назад
@@rinodeboer Any luck with the video? I simply use an add-on domain for pre-builds and it works great. Plus I can send it out for reviews with no problems and save sections for the real project. Thanks for the tutorials, nice job!
@rinodeboer
@rinodeboer 4 года назад
@@JoeGator23 That video has been out for a little while already! Here is the link if you want to see it: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-iLEr67qVHrg.html . Also can you share the name of that add on you are using? I'm curious.
@AnJoek
@AnJoek 4 года назад
Excellent tutorial! Great channel! Subscribed! What is de size of the video you used for the header?
@hellohdesign3082
@hellohdesign3082 2 года назад
Thank you for this! Super cool video! A+++
@imanzin1888
@imanzin1888 2 года назад
it worked! thank you so much!!
@levindeheer2056
@levindeheer2056 4 года назад
He Rino, Ik ben een beetje eigenwijs geweest en heb nooit Wordpress gebruikt. Doordat ik nu weet wat je allemaal kan doen met Wordpress ben ik er echt een mega fan van geworden. Je video's over Wordpress zijn echt geweldig. Een vraagje. Heb je de menu en de footer met Elementor ontworpen of met een thema van Wordpress en raad je aan om de footer en de header met een thema te doen of in Elementor?
@levindeheer2056
@levindeheer2056 4 года назад
Oh haha, ik zie net dat je in je volgende dat perfect uitlegt.
@MrPanourgos
@MrPanourgos 3 года назад
Great job as always.. Thanks for the sharing! Please Rino if its not too much, can you please make with elementor (pro or not) a header with a logo, menu and an action button and as it goes from desktop to mobile the action button will disappear, and only the logo and the menu stay ?! I would really appreciate!!!! Thank you so much in advance!
@creatorsconnect8807
@creatorsconnect8807 2 года назад
GREAT CONTENT
@h4tim...751
@h4tim...751 2 года назад
Your so detailed ! SUBBED
@missn15nz
@missn15nz 3 года назад
Love! Thanks I learned allllot
@Sh4dows890
@Sh4dows890 3 года назад
Hey Rino, love your videos. I have managed to follow this, however the header text I can't align it properly with the say services (purple) rectangle?
@iamravisuthar
@iamravisuthar 5 лет назад
Thanks bro. thats what I was looking for. so so much helpful. you are doin awesome. thnx again.
@elleninetytwo
@elleninetytwo 4 года назад
We've got the same taste in fonts... Poppins and Monserrat two fonts I work with also!
@rinodeboer
@rinodeboer 4 года назад
Haha nice!
@vivekdhutia
@vivekdhutia 4 года назад
same here haha
@samuelepellizzari
@samuelepellizzari Год назад
Hi Rino! This looks awesome and very inspirational! I am still missing one point, though: How did you make that back to top button? It also magically appears when you scroll down and disappears when you scroll up. How did you make it work? By the way, many thanks indeed for all your videos: you introduced me to web design in the best possible way! Keep up the great work
@rinodeboer
@rinodeboer Год назад
Thanks a lot! That's really cool to hear. The back to top button isn't part of Elementor, but was part of a theme I used back then called: OceanWP. I am not sure if they still have that feature. These days I don't use the back to top button anymore. But you can create it with Elementor if you want to. But it's not super easy. You will need to use an Anchor point and then create a fixed container on each page that links to the top of each page. I don't know other option. So the easiest way is to use a theme that has this built in by default.
@samuelepellizzari
@samuelepellizzari Год назад
Hi Rino! Many thanks indeed for getting back to me! I am using Astra - not sure whether it has such function built-in. Meanwhile, I kind of replicated your ‘magic’ button in Elementor: icon widget, linked to ‘#’ (which goes straight to top of the page), fixed positioning and Scrolling effect applied (transparency fade in for a small fraction of the viewport height). However - and this has to do with my Elementor settings, I guess - the icon appears on page load then suddenly disappears, then it works properly. Perhaps do you have any hints to fix this sudden ‘appearing/disappearing’ behaviour? Thanks so much again!
@rinodeboer
@rinodeboer Год назад
Nice to hear that you've managed to get this far already. You can play around with an animation with a delay (found in the Advanced: Motion Effects tab) and then also apply an Offset (not sure which one from the top of my head) in order to let them appear later. Not sure if this works, but that's what I would try.
@samuelepellizzari
@samuelepellizzari Год назад
It worked! The fade-in animation did the trick! Also, I eventually found out the same ‘scroll to top’ function as a part of my theme (Astra). So, you gave me two useful tips in just a couple of comments 😉 Well done!
@rinodeboer
@rinodeboer Год назад
Awesome! Glad it worked out 🙏🏻
@naglevente
@naglevente 3 года назад
you can’t use Elementor without a theme. That said, they offer a theme called ‘Hello.’ This basic theme is an empty canvas for templates and customized coding. If you’re looking to start fresh, Hello might be the best theme available.
@amerrashed6287
@amerrashed6287 4 года назад
Awesome tutorial .. Elementor really cool for frontend developers. I wish there's such good tool used outside wordpress. Is that possible .. maybe?!!
@Ouail-Drs
@Ouail-Drs Год назад
Hi Rino, I can't find how you did for the icons, I can't download them, can you tell me how you did it please ?
@PortalAnakCeria
@PortalAnakCeria 2 года назад
Thank you so much you really help me :)
@karolgil5927
@karolgil5927 4 года назад
Hello mate! could you tell me what size configuration did u use for the video banner on premiere? thank you! and keep on the good videos!
@n417xo
@n417xo 3 года назад
Such an inspiration
@businessearning7412
@businessearning7412 5 лет назад
yea, waiting for next video
@aqshaladzkia4056
@aqshaladzkia4056 3 года назад
love this tutorial, but how we set the header to responsive ?
@berrypoppe5459
@berrypoppe5459 3 года назад
Dag Rino in het mooie Nederland :) Dank voor je duidelijke tutorial ga er nog meer van je maken en blijf volgen. Maaaar de vraag ik zoek een tutorial over responsive emails (html) om voor onze vereniging te maken. Hij moet op de meeste outlooks etc leesbaar zijn en responsive. Enig idee of maak je een turial in deze en heeft elentor hier wellicht een plugin in. Alvast dank en blijf gezond. Groet Berry
@TanzelTV
@TanzelTV 4 года назад
Did you put a padding on the left side of the heading and text? yours seem to be completely left aligned and then once you toggle the elementor menu away it appears with padding?
@TheBenwall
@TheBenwall 4 года назад
Hey, great video. Just tried to replicate the icon box. Your version on mobile looks nice as the icons are 2x2, on my, it stacks them 1x1. Can do I stack 2x2? Thanks
@rinodeboer
@rinodeboer 4 года назад
He Ben! Thank you. You can do that by adjusting the column width of those icons. Put them on 50% then you can have create a 2x2 grid.
@MaryamStudy
@MaryamStudy 3 года назад
May I know, which theme you used here?
@manishakayal5494
@manishakayal5494 4 года назад
Hi , Loving your tutorials. i got a problem creating this kinda header,everythings is working fine, but there is one problem, in the logo area i have put the co name, but alignment of the co name is on extreme left , and the text box is in the middle, but i cant find any option about this , can you tell me what is wrong or how to solve it. there is no option for attaching snapshot or i could have attached it. thanks in advance
@rinodeboer
@rinodeboer 4 года назад
He Manisha, thanks a lot. In this situation I would check the column and widget settings. Because you can setup left align on the text widget level, but also on the column level. So also click on your column and find the Horizontal align, and then click left. Also check your logo or text settings. Hope that helps.
@malcolmliu8692
@malcolmliu8692 3 года назад
how did you get the full width? I have followed the same process, but it still didn't give me full width
@tummalapallivenkateswarara8366
@tummalapallivenkateswarara8366 4 года назад
Very advanced sir
@cocopopp-6865
@cocopopp-6865 3 года назад
How did you make the 'clients' part?
@okechukwuuwandu8653
@okechukwuuwandu8653 3 года назад
Please can you make a video on how to setup SMTP for wpforms
@sepidehhaddadi888
@sepidehhaddadi888 4 года назад
I really liked that. So useful.Splendid.
@usmaness
@usmaness 5 лет назад
Just came across this channel, pretty neat work, new subs :)) One qst tho, How u got that header menu on top?
@kewin1855
@kewin1855 4 года назад
Its one the the Elementor settings
@humbertojgm24
@humbertojgm24 4 года назад
ill try to use xd but i have some doubt how to use, beside if i use elementor or divi in wordpress but in this video i never see when u use xd, can you tell me the differences between them please.
@visitor94
@visitor94 4 года назад
Hello I am interested to use the WP ocean as you said and practice to build the website you are showing us. but the problem when I install WPocean, it acts really weird. I am unable to remove the sidebar nor able to make it fullwidth. can you please make a video detailing how to use the Ocean WP ( I would like to see from the installing stage to be able to put your first page). I thank you
@richardbonilla3633
@richardbonilla3633 4 года назад
On your page you entered "I design and built websites". May I suggest that your change that to "I design and build websites".
@TheCamAlexander
@TheCamAlexander 4 года назад
NO
@joy4u2utube
@joy4u2utube 3 года назад
Great Video, plaese mention the theme you used here, thanks a ton
@dmtcreativos5849
@dmtcreativos5849 4 года назад
Great content! how did you manage the video background to work on safari.
@moniquelapperre3227
@moniquelapperre3227 4 года назад
Great video, i could easily follow the steps but this design looks awful on mobile as it can't show the header. It starts with the icons section. Can you show us any idea how to make this design optimal for mobile as well?
@krishnagupta7005
@krishnagupta7005 4 года назад
Which software you were using to know color code, font style name, etc?
@bookbeatles
@bookbeatles 3 года назад
You are pure love
@kevinseals1767
@kevinseals1767 4 года назад
This was supposed to be about header but was about everything but header. The header is area with logo and navigation which is a problem for many along with footer.
@Zooke_
@Zooke_ 3 года назад
is this with elementor pro or the free version?
@furkanolmezoglu8599
@furkanolmezoglu8599 2 года назад
track, but the problem is I don't know how to do tNice tutorials, it only goes to the setuper as the whole track...can you help with tNice tutorials?
Далее
She Couldn’t Believe I Did This! 😭 #shorts
00:12
Why is THIS the Perfect Homepage?
14:21
Просмотров 586 тыс.
11 Section layouts to make your website ultra UNIQUE
13:42
Website Design Process for Clients (Start to Finish)
18:49
7 Wordpress Plugins I install on all websites (2024)
15:07
She Couldn’t Believe I Did This! 😭 #shorts
00:12