From Elementor to Gutenberg | How to redesign a WordPress website with Gutenberg in 1 hour tutorial
Вставка
- Опубліковано 5 вер 2024
- ⏰ TIMESTAMPS BELOW. Using a real client's website, I will show you in this tutorial how to switch from Elementor to Gutenberg, how to migrate your website to different web hosting, and the super-easy way to make a website responsive across all devices. You'll learn how to make a WordPress website using the WordPress Block Editor, Kadence Theme and Kadence Blocks. You'll see how Gutenberg makes your website faster with better Google Core Web vital scores compared to Elementor.
🔔 SUBSCRIBE & HIT THE 🔔 to turn on notifications & never miss a new upload!
🔗 USEFUL LINKS 🔗
REM Chart = www.jackinthen...
Kadence = www.jackinthen...
SiteGround = jackinthenet.c...
⏰ TIMESTAMPS ⏰
Intro (00:01)
Why switch to Gutenberg (00:50)
Google Core Web vitals (01:20)
Hosting (02:15)
Free Kadence Theme & Gutenberg Blocks (03:30)
My client's existing Elementor website (04:00)
How to set global colours (05:00)
Designing the Hero Section (06:30)
Making Kadence full width and removing page title (09:50)
Parallax images (10:30)
Heading titles and the DOM tree (11:25)
Row layout backgrounds and overlays (13:45)
Padding vs Margin (15:00)
Create a menu using custom links (17:30)
How to use REM to make typography fonts responsive across all devices (19:15)
Mobile-friendly design (26:00)
Designing multi-column layouts (27:20)
Image borders and box shadow effects (28:30)
Designing header, logo, favicon, nav menu & CTA button (34:00)
Kadence sticky header (38:00)
Fixed vs Parallax image and icon list (39:20)
Kadence footer and creating custom widget block CTA button (43:30)
How to make an anchor menu scrolling effect using Kadence advanced HTML anchor (45:55)
Adding animations for headings and paragraph text with Kadence Blocks Pro (49:35)
How to migrate WordPress website from one host to another (53:55)
Comparing before and after Google Page Speed Insights (57:15)
Thank you (58:15)
Thanks for watching, make sure to comment! And who do you know that would benefit from this tutorial? Spread the love, share this with them.
Jack in the Net
www.jackinthen...
#gutenberg #wordpress #kadence
Affiliate Disclaimer: This video & description contains affiliate links. If you buy a product through this you won't pay any extra, but I get a small commission. Thank you for that support it really helps to keep making free video tutorials.
Jack,
It is great to see you back. I missed you this past year as I am sure everyone else did. Looking forward to great content in 2023.
Wow! Awesome! I have been putting off moving my Elementor Sites to Gutenberg. Now I have the ultimate resource. Thank you Jack for another incredible video.
Excellent tutorial. I'm a recent subscriber and am super happy to see you posting again. Love your style.
Good to see you back - had been wondering where you've been this past year! Great tutorial - followed to the letter as I just moved one website from ASTRA to KADENCE and then from Elementor to Gutenberg. Very happy with the results.
Thank you 😊 well done, good to hear
Glad to see you back
Merci pour cette vidéo tu m'a donné l'incitatif requis pour migrer mes sites web vers Gutenberg et merci pour les petits trucs (ex. utilisé Rem plutôt que PIX, etc)
Je vous en prie. Merci d'avoir regardé.
THANK YOU
Can't you use some effective plugins to increase the speed of Elementor? Bc Elementor has design elements that aren't available in Gutenberg. I've actually been rebuilding my site from an old Karma theme to Astra / Elementor. Haven't gone live yet. And you have me curious. Are there any benefits besides speed? And again can't speed be achieved via plugin?
50:47 - Why is WP Gutenberg not providing animations by default?? Jesus C!
Can you please tell me, did you give up on a full website build tutorial bootcamp that you were going to do last year ? What happened ?
Thank you