Part 1: Figma To Gutenberg Using Spectra Block Editor & Astra theme full Project.
Vložit
- čas přidán 10. 07. 2024
- ✅ Get Spectra pro riadmahmud.com/ref/spectrapro (35% Discount while using my Affiliate link) 🥳
Spectra Block Editor Complete Project from Scratch. In this video, I'll show you how to convert a Figma design to a Gutenberg block editor using the Spectra Block editor page builder and Astra theme.
✅ Part 2: Make your website mobile-friendly • Part 2: Figma To Guten...
✅ Learn FSE (Full Site Editing with Live Project): • 1. Full site editing F...
✅ Learn Spectra Step by Step: • Spectra Block Editor |...
✅ Download Resource file: riadmahmud.com/figma-to-guten...
After completing this tutorial, you will have solid knowledge about Spectra and how to design almost any kind of content layout using the Spectra block editor inside your website.
If you have any questions or suggestions, feel free to comment below.
🔴 TOP WORDPRESS DEALS IN 2022 🔴
===============================
✅ Download Astra Pro: riadmahmud.com/ref/astra (SAVE 20%)
✅ Download WP Portfolio: riadmahmud.com/ref/wpportfolio (SAVE 20%)
✅ Download Spectra Block Editor: riadmahmud.com/ref/spectra
✅ Download Kadence Theme: riadmahmud.com/ref/kadence (SAVE 10%)
✅ Download Elementor Pro: riadmahmud.com/ref/elementor
✅ Download LearnDash LMS: riadmahmud.com/ref/learndash
✅ Bluehost Hosting: riadmahmud.com/ref/bluehost ( 60% OFF WITH FREE DOMAIN )
🔴 BEST WORDPRESS PAGE BUILDERS 🔴
=================================
✅ Elementor: riadmahmud.com/ref/elementor
✅ Beaver builder: riadmahmud.com/ref/beaverbuilder
✅ Brizy: riadmahmud.com/ref/brizy
✅ Divi: riadmahmud.com/ref/divi
🔴 BEST WORDPRESS HOSTING 🔴
============================
✅ Bluehost: riadmahmud.com/ref/bluehost (60% OFF WITH FREE DOMAIN)
✅ CloudWays: riadmahmud.com/ref/cloudways
✅ WPEngine: riadmahmud.com/ref/wpengine
🔴 CONTACT WITH ME 🔴
=====================
🟢 Website: riadmahmud.com
🟢 Facebook: / riadwebpro
🟢 Facebook Group: / 2190516887945067
🟢 Twitter: / riadmahmud46
🟢 Instagram: / riadmahmud46
Spectra Block Editor Complete Project
🔴 TIME STAMP 🔴
=====================
0:00:00 Introduction
0:02:01 Design Overview & Some Require class
0:05:07 Install and Activate Theme and Require Plugins
0:07:44 Basic Configuration After Installing theme and plugins
0:09:38 Create Menu and add Custom Menu Item
0:12:40 Global Typography Settings
0:22:02 Global Color Settings
0:25:13 Global Button Settings
0:27:23 Build Header Using Astra Header Builder
0:31:03 Build Footer Using the Astra Footer Builder
0:48:21 Create hero Area
1:10:26 Create Clients area
1:13:40 Who We Are Section
1:35:22 What We Do Section
1:57:08 Call to Action Section
2:04:40 Why Choose us Section
2:12:32 Create Portfolio Section
2:23:31 Create Testimonial Section
2:36:51 Meet Our Experts Section
2:49:33 Create Our Blog Section
3:02:53 Outro
Please never change the speed of your speed nor progress faster. Actually indeed how you present the entire guide is simply brilliant ... not only for beginners, especially for non-native English speaker.
Thanks for your feedback 😊
This is 6 months after I first found the video today. I haven't finished watching it yet, but you're really good at explaining things. You've definitely gained a subscriber.
Glad it was helpful! Thank you so much for your feedback.
Same here! Thank you very much! Got tired of watching so many biased affiliate clickbait videos.
@@Yosie432 now I feel like I should continue creating more videos. Thank you so much for your comments.
Thanks so much for this invaluable step-by-step video guide. It's much appreciated.
Glad it was helpful! 😍
Absolutely amazing!
This is gonna help me alot ❤️
Excellent tutorial my friend. Good job. I watched your tutorial about Figma and Elementor and it was amazing. Thank you!
Thank you Juan for your valuable comments. 😊
Bro, thank you so much, i learned a lot with you.
Im from spain and its very easy to follow you.
Happy to hear that bro! There are lots of other projects I'll be uploading them very soon.
Muchas gracias por la clase, tu forma de explicar es muy buena. Todos los conceptos estan muy bien explicados. Definitivamente Spectra es un plugin bastante robusto y completo.
De nada. Estoy tan contento de escuchar eso.
Great tutorial, bro! I think it's time we get used to Gutenberg as we move forward with WordPress. ❤️ 🤞
Yes, vhai.. It's growing 😍
Awsome!!!!
Love you vai. im always follow your guidelline
Excelled teaching. Thanks a lot!
You are most welcome 🤗
GREAT
Really usable man. You deserve my subscribe
I'm so glad to hear that 😍 stay with us there will be more coming soon.
👍 thanks
very nice！thanks
good work
Nice 👍
Thanks buddy 🤩
Nice
Thanks vai 😍
Hi, loving your videos. Just one request. Can you make a separate video on padding and margins from the basics? I am finding it difficult to understand them.
Great Idea :) I will have some idea for this too. Thank you for your comments.
What plugins should we use for cache, security, contact form, image customization, and social sharing, in the case of Gutenberg? Are there special plugins for Gutenberg?
There is no specific plugin require as of now you can use any of plugins from the WordPress repository or other market place.
Awsoom video please make a blog website using gutenberg block
Yes, I'll create and upload very soon.
Awesome tutorial. Keep up thr good work.
Can you make this into a downloadable file. I mean making the website into a template one can easily download.
Sure I have some plan for this :) Thanks for your comments and suggestion.
can we convert any figma design or any other design to wordpress using spectra block editor and astra theme.
It completely depends on your requirements. Though spectra will introduce the pro version very soon. I hope using the pro version, you can build any website. In the future. 😍
I don’t remove after header space and before footer page from astra theme i use fullwidth/containe but do not remove the gap so please helpme thanks
Navigate to the Customize > Blog > single > Design tab and remove the space and add 0 inside / outside spacer
@@RiadMahmud thanks
hi, you can not have 2 H2 in a single page from an SEO perspective, only 1 h1 and 1 h2
Actually you can use h2 as many as you can. There is no limitation. But h1 is one time per page not more than one.
For more follow this neilpatel.com/blog/the-on-page-seo-cheat-sheet/
The background seems to have changed a bit. 🤓
Yes! 😂
Hmm😛
Make tutorial about figma
Yes I'll definitely create but it will take some more time. Currently I have some plan for building a full functional eCommerce site.
I can`t find any Figma file in your download resource file
It's a client project and we can't share this publicly 😊 you can use the images and other graphics that I have added.
@@RiadMahmud ok.. but Can I see the live website?
Brother how to crate parents theme to child theme?
Will create video in the future :)
a lot of ads annoying
It's automatically added by CZcams. You should try premium content which is ads free. You will enjoy that.