Professional Website Creation is all about simplicity. But also about the little details. Today you’ll learn how to re-create a beautiful modern and hybrid navigation and hero video section from a Site Of The Day nominee!
Professional Website Creation … For the menu?
Professional Website Creation is more than just using a theme builder and get on with the default options and styling. It takes work, creativity and dedication.
As I’ve already covered in previous posts and videos, a good way to upgrade your web design skills is to look at the best of the industry and learn from them.
And that’s precisely what we’ll be doing today. Just like for the last tutorial / mini-course, I went to the Awwwards website and had a look at a beautiful website navigation showcase and decided to re-create it with Elementor Pro.
While a lot of complex project do not use page / theme builders and prefer coding from scratch or using frameworks, Professional Website Creation can totally be achieved with theme builders like Elementor Pro. And in many cases, it will actually help you cut down development time and budget.
Professional Website Creation: slowly but surely
Sure, professional website creation is more than just learning how to create a fancy navigation and video background hero section.
But everyone has to start somewhere and the navigation is definitely one essential piece of the web design puzzle. Especially with the responsive challenges to be faced.
And the beauty of web design is that the learning never stops. What works today may not work tomorrow. So it’s a constant never-ending process.
Professional Website Creation: the tutorial
A written version would feel like a never ending story, and as you may imagine, it is more suited to the video format. So you will find the video tutorial / mini-course at the top of this page.
But here is a quick reference, just in case:
- What you need to follow along: 03’52
- 1 – Create the main menu: 05’58
- 2 – Create the fullscreen popup: 06’22
- 3 – Create the header & responsive display: 14’16
- 4 – Setup the homepage: 28’28
The CSS
@media only screen and (max-width: 450px) { #my-navicon .elementor-icon-box-title { display:none!important; } }
Professional Website Creation: The Tools For The Job
If you are interested in purchasing Elementor Pro, here is a handy link:
Professional Website Creation: Your Turn
So, I hope you now feel confident as to re-create this minimalist and classy modern hybrid navigation for your next WordPress / Elementor project!
If there are other WordPress and Elementor reviews you’d like me to cover, please let me know in the comments.
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the channel.
And if you know someone that could benefit from it, please share it now.Because let’s face it… There are so many things to do in a day that if you don’t do it now you’ll probably forget.
Now if you want to brand, market and grow your business it in the Digital Age make sure you subscribe to my email newsletter so that you never miss your share of digital alchemy.
As well as tips, tools, services and case studies that can help you grow your business online.
So, that’s it for this episode! I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!