Figma to WordPress Gutenberg Block using Spectra, Astra pro & WooCommerce
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 https://riadmahmud.com/ref/spectrapro (35% Discount while using my Affiliate link) 🥳
✅ Full Course Playlist (FREE): • Complete eCommerce Website - Figma To...
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: https://riadmahmud.com/ecom/resource-...
✅ Download Astra pro: https://riadmahmud.com/ref/astra (SAVE 10%)
✅ Download Spectra: https://riadmahmud.com/ref/spectra
✅ Learn Gutenberg Full Site Editing: • Gutenberg FSE - Full Site Editing usi...
✅ Learn Spectra Block Basic: • Complete WooCommerce Tutorial for Beg...
✅ Learn Spectra with Real Projects Convert Figma design using Spectra Block: • Part 1: Figma To Gutenberg Using Spec...
✅ Learn WooCommerce Basic: • Complete WooCommerce Tutorial for Beg...
✅ WooCommerce Shortcode: https://woocommerce.com/document/wooc...
🔴 TOP WORDPRESS DEALS IN 2022 🔴
===============================
✅ Download Astra Pro: https://riadmahmud.com/ref/astra (SAVE 10%)
✅ Download Kadence Theme: https://riadmahmud.com/ref/kadence (SAVE 10%)
✅ Download Elementor Pro: https://riadmahmud.com/ref/elementor
✅ Download LearnDash LMS: https://riadmahmud.com/ref/learndash
✅ Bluehost Hosting: https://riadmahmud.com/ref/bluehost ( 60% OFF WITH FREE DOMAIN )
🔴 BEST WORDPRESS PAGE BUILDERS 🔴
=================================
✅ Elementor: https://riadmahmud.com/ref/elementor
✅ Beaver builder: https://riadmahmud.com/ref/beaverbuilder
✅ Brizy: https://riadmahmud.com/ref/brizy
✅ Divi: https://riadmahmud.com/ref/divi
🔴 BEST WORDPRESS HOSTING 🔴
============================
✅ Hostinger: https://riadmahmud.com/ref/hostinger (75% OFF FREE DOMAIN)
✅ Bluehost: https://riadmahmud.com/ref/bluehost (60% OFF WITH FREE DOMAIN)
✅ CloudWays: https://riadmahmud.com/ref/cloudways
✅ WPEngine: https://riadmahmud.com/ref/wpengine
🔴 CONTACT WITH ME 🔴
=====================
🟢 Website: https://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