Building my Header in Elementor Wordpress from an Adobe XD web design
HTML-код
- Опубликовано: 27 авг 2019
- He guys, in today's video we are designing the animated video header of my new portfolio website in the free version of Elementor for Wordpress with cool animations. My design was made in Adobe XD. So in this video we work from Adobe Xd to Wordpress.
Interested in a discount for my upcoming design course? Grab the discount here: livingwithpixels.com/design-c...
These days I don't promote Xd anymore, so now visit: livingwithpixels.com/figma
→ 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. 
Хобби
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!
That’s an awesome comment. Thank you.
Love how you always keep it simple.
Just the channel I was looking for. Quality WordPress content 👌🔥
Just spent an hour on your video. You are a terrific designer and an excellent teacher. Thank you very much,.
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.
Glad it helped you to work more efficient. Thanks a lot for your support!
Thank you so much Rino fro making such an informational tutorials for the elementor pro users.
Loved it, would like to see section by section. I like how simple and you make it and straight to the point 👍
I appreciate all your work. You have helped me a lot , thank you!
It's the "I am not a very complicated man" for me hehe
Your channel is brilliant. I can understand the instructions!!!
So comprehensive! I really like this WordPress x Elementor tutorial. :'>
This looks great! It would be nice to have another part on how to make it responsive for mobile/tablet.
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.
@@gamerzera4265 thank you
@@gamerzera4265 that dosen't solve making it responsive.
To fix the responsive text issue on mobile change the column width with % instead of pixels
Loved it! I would like to see the entire process (adobe xd - elementor - wordpress)
second that
@@jamesablanco ME TOO!
me2!
me too!!
me 5!
Yes please show us all. You're GREAT!
Rino, thanks for your video. It is a very good stepping stone for us to understand Elementor.
Awesome work Rino...great informative idea to help build a better website
I really liked that. So useful.Splendid.
Thanks bro. thats what I was looking for.
so so much helpful.
you are doin awesome.
thnx again.
You have a great talent in design as in teaching. Thank you very much! Greating from Croatia!
Thank you!
just wow....its so cool...i have ever seen
Best explanation for a beginner
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.
Gilles Amazing right? And this is just the free version. Imagine what you can do with Elementor pro.
@@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!
It is limited to a certain extent, but it just won't matter most of the times if you're building simple pages
Ima download it thanks for sharing!!
Great explanation! ThanKS a lot!
Thanks bro this was really easy to follow❤🔥🔥
I loved your work and your video. I make websites for myself and friends (not professionally) and I did find your videos very interesting.
it worked! thank you so much!!
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
Glad it was helpful!
ITS REALLY WORKED LOL THANK YOU DUDE
Cool and well designed!
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
You mean my channel instead of canal? And nice to hear Jos! Thanks a lot. I will 💪🏼
Love! Thanks I learned allllot
Thank you for this! Super cool video! A+++
Your so detailed ! SUBBED
Such an inspiration
Best Elementor/WP teacher on the net.
Looks great
Well done, mate. This will help many people. :)
Keep on!
Thankyou for actually explaining tNice tutorialngs. Other videos that I watched started talking about how to make soft and didn't ntion anytNice tutorialng
Love it 👏
Thank you so much you really help me :)
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.
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 !
Cool idea. I will write that down
Awesome! I've been wondering how people had those wave separators for years!
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!
wow, awesome video bro, keep going
and my friends are planning to make a ga and i'm making the soft, so tNice tutorials really helped
GREAT CONTENT
thanks so much man
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!
Great video. Love how fast you go :)
Great video
Excellent Video...appricate you are showing those features of elementor that are relatively unknown ..most of You Tube teachers mostly use Templates for everything...
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
yea, waiting for next video
GOD!!!My broo
Very advanced sir
Thanks bro
Nice job ;)
Just came across this channel, pretty neat work, new subs :))
One qst tho, How u got that header menu on top?
Its one the the Elementor settings
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.
dis regard all my questions like I said your videos are the greatest just a bit fast keep them no matter what
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
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!
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!
great video ! but how did you make the nav menu, do we need elementor pro ?
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 :)
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?
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.
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?
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
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. 😀
Fancy!!
Excellent tutorial! Great channel! Subscribed! What is de size of the video you used for the header?
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!
Great content! how did you manage the video background to work on safari.
helpful Tutorial
wooooo !! i likeeetttt
I agree. looks great on desktop, but not responsive to mobie?
Awesome tutorial .. Elementor really cool for frontend developers. I wish there's such good tool used outside wordpress. Is that possible .. maybe?!!
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
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;}
You are pure love
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.
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!
I would like to see more.
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 !
Nice
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
Would you have any idea why my pages might have duplicate content? Every page has it. Using Elementor and built the header and footer using it. I've tried everything to fix it but no luck
love this tutorial, but how we set the header to responsive ?
Amazing! Which theme are you using for your site?
Hello:) Does the inner section no longer exist in Elementor? Does it have a replacement?
I am wondering how to add a secondary header? your videos are amazing
Hey Rino! I want to know how did you make the transparent Menu for this page please. Thanks!
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
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.
Which software you were using to know color code, font style name, etc?
Great Video, plaese mention the theme you used here, thanks a ton
Very good content, Rino. Keep up the good work :)
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?
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.
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.
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.
No problemo! Thank you 🙏🏻
How did you make the 'clients' part?
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.