Professional Website Creation – pro menu

Professional Website Creation?

If you go to any search engine and type “Professional Website Creation” you will find a ton of free tutorials and that’s great, because knowledge is now open to anyone with an internet connexion.

That being said, many of these tutorials will teach you the basics, but do they really show you how to create a professional website?

So the first question to ask is: what is Professional Website Creation? Or put simply, what makes a website professional?

Well, we could say that a professional website is a website a company would pay for.

But then again, with Professional Website Creation being offered for 5$ on Fiverr, that is very far from the truth.

We could also say that Professional Website Creation means that the final website is nice and well done.

But then again, beauty is in the eye of the beholder, isn’t it? I’ve seen beautiful websites, but slow, not optimized, etc.

So while this is not the ultimate definition, in my opinion, a professional website can be defined as following:

• a professional website meets high standards technically (code / optimisation / security), visually (design & experience), and commercially (when relevant: conversion / marketing)

Professional Website Creation: how to upgrade your skills

One of the best ways to upgrade your skills in terms of professional website creation, is to look at the best and try and replicate to practice.

In due time, you may be a trend setter, but at the begining, you need to learn to walk.

Notice that I mentioned “try and replicate … to practice“. We’re not talking about stealing one’s design.

We’re talking practicing, about getting inspired, about understanding the process and knowing the tools you have at hand.

Whether you want to hand code, use a framework, or, in our case WordPress and plugins, the important point is to deep dive into the process.

Professional Website Creation: the mini-course

It would take literally days to write down all of this courses, and as you may imagine, it is more suited to the video format. This is why you’ll find the mini-course / tutorial video at the top of this page.

But here is a quick reference:

1. Settings things up (WordPress / Astra Pro / Elementor): 04’20
2. Creating the home page and adapting for responsive: 20’49
3. Creating the navigation: 58’09

The CSS

Here is the Css code to follow along:

Rotation of text at 34:57′

selector {transform: rotate(-270deg);}

The whole custom CSS at 45:36′

/* IMPORTANT: don't forget to change the offcanvas trigger ID in the following code (check Google inspector for new ID) */

/* === MEDIA QUERIES === */

	/* MOBILE */

	@media only screen and (max-width: 450px) {
		body {
			margin: 0 10px !important;
		}

		div#slidebar-trigger_a6b0037 {
			position: fixed;
			right: 10px !important;
			top: 0;
		}

		.ee-offcanvas__header__close {
			margin-right: 0px !important;
		}

		.ast-button-wrap .menu-toggle .menu-toggle-icon {
			display: none;
		}

		.main-header-bar, .ast-header-break-point .main-header-bar, .ast-header-break-point .header-main-layout-2 .main-header-bar {
			padding-top: 0;
		}
	}


	/* TABLET */

	@media only screen and (min-width: 451px) and (max-width: 1024px) {
		body {
			margin: 0 40px !important;
		}

		div#slidebar-trigger_a6b0037 {
			position: fixed;
			right: 40px !important;
			top: 0;
		}

		.ee-offcanvas__header__close {
			margin-right: 40px!important;
		}

		.main-header-bar, .ast-header-break-point .main-header-bar, .ast-header-break-point .header-main-layout-2 .main-header-bar {
			padding-top: 0;
		}
	}

/* === END OF MEDIA QUERIES === */

body {
    margin: 0 80px;
}

.ast-site-identity {
    padding: 0 !important;
}

.ast-header-widget-area .widget:last-child {
    margin: 0 !important;
}

.site-header .menu-text:hover {
    border-bottom: 2px solid #ffffff;
}

div#slidebar-trigger_a6b0037 {
    position: fixed;
    right: 80px;
    top: 0;
}

.ee-offcanvas__header__close {
    margin-right: 80px;
}

Professional Website Creation: The Tools For The Job

If you are interested in purchasing Elementor Pro, Elementor Extras or Astra Pro, here are some handy links:

Get Elementor Pro! Get Elementor Extras! Get Astra Pro!

Professional Website Creation: Your Turn

So, I hope you now feel confident as to create a beautiful modern hybrid navigation for your next project 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!