MENU

Fun & Interesting

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

Video Not Working? Fix It Now

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

Comment