Elementor Tutorial 2024 | How To Create a Website with WordPress and Elementor PRO Tutorial (8H)

How to create a WordPress website in 2024 using Elementor PRO. Elementor tutorial 2024: from beginner to expert!

Timestamps
00:00 The Ultimate WordPress and Elementor PRO Tutorial
00:07 Create a website without code with Elementor
00:42 Pascal creator of WP Roads
00:54 The website we will create together
01:39 Details of the website we will create during the tutorial
04:21 The tools we will use during the tutorial
Hostinger, WordPress, Elementor, Hello Elementor
04:49 Links and timestamps in the description
05:17 Access the resources I use in the tutorial with the free "Elementor Starter Kit"

HOSTING
05:55 Let's choose your WordPress hosting at Hostinger
11:07 How many WordPress websites you can install on your Hostinger plan?
12:10 Let's buy your Hostinger plan, use the coupon WPROADS
15:31 Congratulations 🎉 you bought your hosting plan!
15:44 Quick Hostinger panel tour (hPanel)
17:42 Let's create your first WordPress website on Hostinger
22:05 Confirm your domain ownership and verify SSL for https
24:34 Important configurations of the website from the hosting panel
25:01 Activate domain WHOIS privacy
26:04 Create a free email account with your domain
28:16 Verify the Daily Backups activation
28:49 The "WordPress overview" dashboard on Hostinger

WORDPRESS BASICS
29:31 First access to WordPress dashboard
32:35 IMPORTANT WordPress settings
37:37 Login and Logout from your WordPress website
39:04 Disable Hostinger automatic updates and manage them from WordPress

ELEMENTOR BASIC SETTINGS
41:14 Install Hello Elementor free theme and Elementor free plugin
44:32 Choose license and buy Elementor PRO
50:24 IMPORTANT Elementor settings
52:18 IMPORTANT enable required Elementor features
54:20 Create all the basic pages of the website and first access to Elementor builder
57:26 Assign home and blog pages roles
59:16 Add basic content to home page
01:01:59 Disable Hello Theme title, header and footer
01:02:34 Set standard width on different devices and other site layout settings
01:04:36 Add custom breakpoints for responsive optimisation

ELEMENTOR BASICS
01:07:34 Learn how to use Elementor flexbox containers
01:36:55 Build the basic structure of the header with Elementor theme builder
01:40:26 Adding logo and favicon to the website
01:43:58 Adding content to the header and optimising for mobile view
02:03:01 Creating your website's design system
02:03:41 Upload the global styles page
02:07:40 Upload and setup a custom font in Elementor
02:34:48 Setup Global colors in Elementor

HEADER AND FOOTER
02:53:09 Let's design your website!
02:53:44 Add styling to the header
03:06:28 Create the footer

THE HOME PAGE
03:25:32 Take a moment to admire what you have created right now!
03:26:33 Creating the hero section of the home page
04:00:33 Create the second section of the home page with a grid container
04:17:48 Creating the third section of the home page with a carousel slider
04:44:21 The fourth section of the home page for testimonials
04:58:54 The final section of the home page a CTA with background video

ADVANCED SETTINGS
05:08:19 Add a background video in the hero section of the home page
05:14:12 Leave me a feedback in the comment section!
05:14:50 Create the about page with a custom heading section and animations
05:22:25 Learn to use Elementor PRO animations (entrance, scroll, mouse)
05:33:39 Upload custom icon font (linea basic)

PAGE TEMPLATE FOR SERVICES
05:40:19 The services page and the single service template
05:43:25 Create the services pages
05:44:22 Creating the dropdown / mega menu in the header
05:59:35 Create the main services page
06:16:04 Create the single service template

CONTACT FORM
06:28:40 Creating the contact form page
06:29:19 Create the contact page
06:36:56 Style and setup the contact form
06:54:28 Advanced contact form settings (actions after submit)
07:00:03 Confirmation page after submit

PROFESSIONAL BLOG
07:07:30 It's time to create a blog with Elementor PRO!
07:08:07 Quick examples of the blog we will create
07:09:40 Create the first posts to have some placeholder content
Remember to use the native WordPress editor (Gutenberg) to create the post content
07:14:08 Check the correct setup of the blog page
07:14:50 Create the single post template with Elementor theme builder
07:44:21 Create the blog archive template with Elementor theme builder
07:47:46 Create custom cards for blog archive with the Elementor Loop Builder
07:57:44 Create related posts carousel with Elementor Loop Builder

BONUS
08:03:18 Bonus content: create a slide in menu for mobile using Elementor popups
08:15:29 Like, subscribe and share and follow me on Instagram!

#wordpress #tutorial #elementor

[mondowp]

The ultimate WordPress and Elementor tutorial ❤

[daldoummedia]

I have wanted 10s of WordPress tutorials. Last week, I was following someone's tutorials on YouTube to build my website and got everything messed up😢. Fortunately, I came across your tutorials, and it is absolutely outstanding. Thank you so much!

[ARod]

Top notch work! Keep up the great work!!

[ashraynselani]

Pascal!!! For a person who has ADHD and lacks focus, this tutorial was throughout insightful with lots of important information that I was able to watch from start to finish without getting lost…thank you brother. Keep up the great work. ❤

[michaelwhitlow]

Thank you WP Roads.
Your tutorials are on point and you deliver.
I appreciate your approach and accent.
Seriously…thanks Dude.

[LauraBarraclough-rees]

Thank you so much for this brilliant tutorial. I had watched so many before this and this is hands down the best. I am a beginner with WordPress and Elementor and have managed to create something I am really proud of thanks to you!

[rsotinow]

Thanks alot for this tutorial, really learning alot of details that others are not showing, your awesome!

[levirap]

top notch tutorial. soon your channel is going to grow big. keep posting. all the very best

[m__link]

One of the best video on Elementor on you tube...Thank you so much dude!!!

[lucau]

Hello ! I have just seen an hour of your tutorial and I already think it's great ! i will post a few question as soon as I will have any doubt.
The first one: Why, when you set "Content width" values in Layout Setting, you put 90% for tablet and mobile instead of standard reference values in pixel? Thank you !

[garry]

I am learning wordpress from last 2 months...I watched many tutorials..they help me alot
.but your tutorial just outstanding... good 👍...

[mishalfatima]

Great Tutorial sir, you are such an amazing teacher.👍

[RonithBurman]

Sir please make a tutorial video on tour and Travel agency website, for selling tour packages.

[Alex-gjed]

It is great to use Elementor with addons plugins for it like Essential Addons and King Addons

[sahardelasaei]

Thanks for your amazing tutorial. I have a question about my website. On the services page, photos related to different services are not uploaded and I cannot solve this problem. What do you think the problem could be and how can I fix it?

[omhiba]

Thank you so much for this rich easy to follow tutorial. But can I procede with the same steps for the free Elementor? And can I choose Astra free theme instead of the Hello one? Thanks in advance

[cristinamoxedano]

WONDERFUL TUTORIAL! but I have 2 problems: I made the menu, but now it is not aligned, I don't know why, but it.s impossible to aligned. And also I made some nested carousel beacuse I like the "offset side" option, but now I have nomore the widget Nested carousel...why?!

[ChidiebubeUzodinma-slbs]

Please Can you add how to Create a custom Search Page

[readlikeashadow]

Hi, can someone helps me every time a take a margin between some boxes all files to the left site. But I make my site with this tutorial and hi looks amazing for me.

[BlueProjectRenovation]

Could you please teach how to create professional landing page