Figma to WordPress Gutenberg Block using Spectra, Astra pro & WooCommerce

Подписаться 8 тыс.

Просмотров 2,7 тыс.

50% 1

Hey guys, I have a playlist about this tutorial but I think I should have upload it here combine them to make it more useful. In this video I’ll share with you a lot of tips and tricks related to the Astra Spectra and WooCommerce
✅ Get Spectra pro riadmahmud.com/ref/spectrapro (35% Discount while using my Affiliate link) 🥳
✅ Full Course Playlist (FREE): • Complete eCommerce Web...
Disclaimer: If you want to learn how to create eCommerce shop and also want to help your clients and make some handsome amount of money, then stick with this series tutorial.
But If you are looking for a shortcut way, then this video is not for you.
🔴 Helpful Resources: 🔴
====================
✅ Download Resource file: riadmahmud.com/ecom/resource-...
✅ Download Astra pro: riadmahmud.com/ref/astra (SAVE 10%)
✅ Download Spectra: riadmahmud.com/ref/spectra
✅ Learn Gutenberg Full Site Editing: • Gutenberg FSE - Full S...
✅ Learn Spectra Block Basic: • Complete WooCommerce T...
✅ Learn Spectra with Real Projects Convert Figma design using Spectra Block: • Part 1: Figma To Guten...
✅ Learn WooCommerce Basic: • Complete WooCommerce T...
✅ WooCommerce Shortcode: woocommerce.com/document/wooc...
🔴 TOP WORDPRESS DEALS IN 2022 🔴
===============================
✅ Download Astra Pro: riadmahmud.com/ref/astra (SAVE 10%)
✅ 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 🔴
============================
✅ Hostinger: riadmahmud.com/ref/hostinger (75% OFF FREE DOMAIN)
✅ 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
🔴Timestamp: 🔴
00:00 - Intro
01:40 - Overview of the figma design
07:21 - Local server and Live Server
10:07 - Prerecosite for this series tutorial
13:00 - Install Astra theme and Astra Pro plugin in your server
22:33 - Install WooCommerce and Configure the plugin
25:43 - Basic Configuration after install theme and plugins
30:31 - Configure & Create menu with Static home page
32:53 - Understand the Astra Dashboard and how Astra pro module works
40:23 - Configure Astra pro Color and Typography
45:30 - Configure Astra pro Global style
50:37 - How to create Header using Astra pro Header builder?
01:12:04 - How to create Mobile Header using Astra pro Header builder?
01:19:48 - How to Create Footer using Astra pro Footer Builder?
01:34:50 - How to make Footer responsive inside Astra footer builder?
01:36:50 - Design Home Page using Spectra Block editor
01:56:58 - Add Product Attributes, category and sample products
02:12:03 - Display featured products using WooCommerce shortcode
02:19:27 - Create Call to Action using Spectra block
02:32:40 - Design Spring & Summer Collection section
02:50:31 - Design Testimonial section
03:07:18 - Display product category using Shortcode
03:12:54 - Create Newsletter inside footer

Опубликовано:

9 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 23

@MuhammadBilalAshrafAli. 10 месяцев назад

This is good, everything is covered in one single video. Thank YOu verY MuCh. Love Form Pakistan.

@RiadMahmud 10 месяцев назад

I am so glad to hear that :) there are some other videos related to this video. So, keep watching and follow the playlist from the description.

@mukayemahmed2747 8 месяцев назад

I really like your videos, thank you so much for give qualified knowledge

@RiadMahmud 8 месяцев назад

I'm so glad to hear that 😍

@user-ox9ue7oo7d 5 месяцев назад

Sir, Astra pro sa newslatter wala box hi khtam krna chahta hu kasa kro plzzz bta dyn

@RiadMahmud 5 месяцев назад

You can use any thirdparty premium plugin that supports newsletter API like mailchimp or any thirdparty API

@Runaal_Bhowmick 9 месяцев назад

Hey Riad Bhaiya, I am Soo Glad I found your Channel all the website-making videos on RU-vid are 1 to 2 years old, which misses out the new possibilities that the present WordPress and it's plugins provide. You saved me a ton of time and hardwork of searching the right video for making my E-Commerce Website. I am Still New To this Website making Industry and I guess I just got The Right RU-vid Channel For Learning How to make beautiful websites. Thank you So Much For Taking the pain to make these brand new, simple,easy and beautiful websites making tutorial. Riad Bhaiya, I did have one request can You Please let us know your favourite WordPress Theme The Only Condition is It Should be Free Please Please If you Could Make a Video On This, As I am Struggling a lot to find the perfect theme for my upcoming E Commerce Website. Once again I want to Thank you a ton For Making These Videos and Am Very Glad to find your RU-vid Channel I am looking forward to you for everything and also the request I made Thank you

@RiadMahmud 9 месяцев назад

Hello! 🌟 Thank you so much for your kind words and support. I'm thrilled to hear that my videos have been helpful to you. As for your request, I'll definitely consider making a video on my favorite free WordPress themes, so stay tuned for that! 😊🎥 Your feedback means a lot, and I'm here to help you on your website-making journey. And as of now I personally use Astra theme in most of my project because it's easy to use and a lot of features + well maintaining code and support.

@Runaal_Bhowmick 9 месяцев назад

@@RiadMahmudThanks a lot Bahiya For Replying me, I am eagerly waiting for the video as it will help me in my upcoming projects as well as the current project am working on, I am feeling ashamed to ask you one more request, but I think this will also be help full to your other audience also, if you could make a tutorial on the elementor Plugin (The Free Version) as cause many new developers, including me, do face issues in understanding the full potential of elementor, So it would be grat that if could also make a tutorial on that. Again Thanks a Lot bhaiya for replying to my comment. Eagerly waiting for the two requested video.

@RiadMahmud 9 месяцев назад

Yes, I have already 3-4 projects on my channel related to the Elementor for beginners using Free version :)

@mecrayavcin 9 месяцев назад

Hi I have a question. ASTRA growth bundle hep spectra. I think this is a page builder. And there is a Ultimate Addons for Element or. Should we use it? I think first we need to install free elementor then this plug in but. Show we use them? Or when we use elementor free + Ultimate Addons for Elementor… or Ultimate Addons for Elementor works induvidually with out elementor pro? Or should we use only spectra

@RiadMahmud 9 месяцев назад

Thank you for your question: So, to summarize, you have a few options: Option 1: Use Elementor Free along with Ultimate Addons for Elementor to design your website. This is a popular choice and gives you a lot of design flexibility. Option 2: If you prefer, you can also use Spectra Starter Sites. These are pre-designed templates that you can import and customize. This doesn't necessarily require Elementor, but you can use it in conjunction with Elementor Free if you want to make further customizations. Ultimately, the choice depends on your preferences and the specific requirements of your project. Elementor Free + Ultimate Addons for Elementor is a robust combination for creating custom designs, while Spectra Starter Sites can save you time if you like one of their templates and want a quick start.

@esperandounmejorcielo4385 10 месяцев назад

que lastima que el video no tiene subtitulos y esta muy rapido, no lo puedo entender

@RiadMahmud 10 месяцев назад

Hey thanks for your comment. The intro part is very fast (because it just a intro) keep watching other part of this video. I believe you will be able tk learn a lot of.

@user-lw1ty3if4m 9 месяцев назад

vaia thank you,, group broos

@RiadMahmud 9 месяцев назад

Many many thanks

@user-ju9vr4su4i Месяц назад

ভাই বাংলায় ভিডিও দেন

@RiadMahmud Месяц назад

Bangla Channel e dibo future e aste aste vai

@sikandarmushtaq48 9 месяцев назад

Bro Gutenberg allows to add spacing in every element like figma auto layout spacing don't add manual space

@RiadMahmud 9 месяцев назад

Thank you for your suggestion 😊 yes they are improving and I'm still trying to understand how things work here... I hope next video will be more fun and more specific 😃

@sikandarmushtaq48 9 месяцев назад

@@RiadMahmud Btw bro figma to WordPress converting hard job, I'm also facing error bugs glitch in WordPress with these site builder, but few months ago I tried visual composer, this site builder is very improved by designers