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

Get domain and hosting 👉 https://wproads.com/hostinger (coupon WPROADS)
Download Elementor PRO 👉 https://wproads.com/elepro
Access the free Elementor Starter Kit 👉 https://wproads.com/elementor-kit

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
Visit it here 👉 https://wpstarzy.com
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"
https://wproads.com/elementor-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
https://wproads.com/elementor
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

Тэги:

#elementor_pro_tutorial #elementor_tutorial #wordpress_tutorial #elementor_website_tutorial #elementor_wordpress_tutorial #elementor_tutorial_for_beginners

Скачать видео