How to create a one page website with WordPress & Elementor Pro

How to create a one page website

hello, I’m your host Kaycinho, I’m a digital alchemist.

Today, I’m going to show you how you can use the power of WordPress combined with the popular Elementor Pro theme builder to create a beautiful and modern one page website.

But wait. Why another tutorial?

Why another course on how to create a one page website? I mean Youtube is full of great tutorials on the subject.

Well, first of all, there are many bakeries and they sell bread right? But for some reasons, some people will prefer the bread in a bakery others in another one.

In other terms, I am teaching you my own subjective way of doing things.

Next, I think quick website creation courses are great in some situations, and there is definitely an audience for it.

But personally, even though I do believe in prototyping fast… I don’t believe in rushing your web design.

I believe beautiful design lies in the details, and that’s the reason I go in such details.

So, if you’re in for a quick fix, I believe there are other blogs / videos / channels that would suit you better.

But if you want to take your time and learn how to craft a beautiful one page WordPress website, that you could actually sell, then this is the course for you!

Enjoy this course. Now let’s dive in!

How to create a one page website course :

Here are handy timestamps for you to follow the course:

0:00:15 – 1 – INTRO

0:01:25 – 1.1 – What we’re going to build
0:06:02 – 1.2 – Course pre-requisites
0:06:07 – 1.2.1 – Hosting & domain
0:06:26 – 1.2.2 – Branding
0:08:16 – 1.2.3 – Image search
0:09:09 – 1.2.4 – Image optimization
0:11:03 – 1.2.5 – Elementor Pro

——

0:12:55 – 2 – INITIAL SETUP

0:12:57 – 2.1 – Adding media assets
0:13:30 – 2.2 – Adding & activating the theme
0:14:53 – 2.3 – Adding & activating plugins
0:16:38 – 2.4 – Creating the homepage
0:17:10 – 2.5 – Set the permalinks
0:17:32 – 2.6 – Reading settings
0:18:14 – 2.7 – Setting up the menu

——

0:19:58 – 3 – FONTS & COLORS

——

0:23:19 – 4 – CREATING THE POPUPS

0:24:01 – 4.1 – Fullscreen navigation popup
0:35:11 – 4.2 – Disclaimer popup

——

0:40:02 – 5 – CREATING THE HEADER

——

0:57:02 – 6 – CREATING THE ONE PAGE

0:57:11 – 6.1 – Creating the Hero section
1:00:05 – 6.2 – Creating the About section
1:16:33 – 6.3 – Creating the Services section
1:24:10 – 6.4 – Creating the Pricing section
1:36:09 – 6.5 – Creating the Practical Info section
1:59:01 – 6.6 – Creating the Trial Offer section

——

2:08:45 – 7 – CREATING THE FOOTER

——

2:16:15 – 8 – DEBUGGING

2:16:35 – 8.1 – Debugging the fullscreen navigation
2:20:34 – 8.2 – Debugging the transparent header

——

2:22:22 – 9 – FINE TUNING LITTLE DETAILS

2:23:26 – 9.1 – Pricing Table animations
2:24:12 – 9.2 – Mobile view padding

——

2:25:17 – 10 – ABOUT THE FORM

2:25:36 – 10.1 – Security
2:27:55 – 10.2 – Acceptance
2:29:11 – 10.3 – Setting up the email action
2:31:19 – 10.4 – Email deliverability

——

2:32:15 – 11 – WHAT WE’VE CREATED TODAY

The Code:

Courtesy of shilo-ey (link to the github thread)

    jQuery( document ).ready( function( $ ) {
	$( document ).on( 'click', '.close-popup', function( event ) {
		elementorProFrontend.modules.popup.closePopup( {}, event );
	} );
} );

IMPORTANT: don’t forget to add the opening and closing script tags, which I can’t copy here, so it should look like this:

Get Elementor Pro

If you are interested in purchasing Elementor Pro, here is a handy link:

Get Elementor Pro!

How to create a one page website:You Turn

So, I hope that you enjoyed this course and that you now feel confident to create pretty much any one page WordPress website with the help of Elementor Pro!

I create websites professionally, and I could definitely sell the one we created today. That’s what I mean by “professional”.

Pretty much anyone can create a website nowadays. But that does not mean the end result is always professional.

To me, the word Professional means it is something that could be sold in a serious professional environment.

Of course, for today’s example, you should adapt it to the specific industry you’re creating the website for.

But don’t just create dozens identical websites. Make some changes. Pick different colors, fonts, add custom icons. You get the idea.

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.

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!