Figma to WordPress Gutenberg - How to build your Portfolio Website? Fully Custom Made!
✅ Get Hostinger 85% OFF : https://riadmahmud.com/ref/hostinger (COUPON: RIADM10) ✅ Full Playlist: • Gutenberg FSE - Full Site Editing using Gu... ✅ Resource file: https://riadmahmud.com/ref/2025-tuts-... ✅ Hire me: https://riadmahmud.com In this Figma to WordPress Gutenberg tutorial, I’ll show you how to convert a Figma design to a fully functional WordPress website using WordPress Full Site Editing (FSE) features. This project is built entirely with the default Gutenberg blocks — no page builders involved! Whether you're a freelancer, doctor, lawyer, graphic designer, or simply building your portfolio website, this video will guide you through creating a modern, fast, and dynamic site. 📌 What you’ll learn: ✅ How to convert a Figma design into WordPress step by step ✅ How to use Gutenberg (Block Editor) for full site customization ✅ How to create dynamic content using Custom Post Types (CPT) ✅ How to use the ACF (Advanced Custom Fields) plugin for flexible data display This tutorial is perfect for beginners and professionals who want to master WordPress without relying on third-party page builders. TIME STAMP: 00:00 - Intro 01:18 - Figma Design overview and what we will gonna learn on this course 05:17 - Live server, Local server, Recommended Hosting and Basic Configure of WordPress 12:19- Configure the Global Typography and Global color 23:40 - Build a Custom Header using WordPress Blocks 40:53 - Build a Custom Footer using WordPress Blocks 47:13 - Create Hero Area 1:04:38 - Understand the Grid while Creating Meet My Recent client Section 1:16:26 - Create Card or Infobox with image using default block 1:26:17 - Create Custom Post type and display dynamic content using Loop builder 1:46:27 - Create Experience Section 1:55:42 - Add Featured Video using Presto Player 2:07:17 - Create Testimonials Section and understand Cover Block 2:20:00 - Use Toggle in Gutenberg and Create FAQ’s Section 2:30:00 - How to use Loop Builder to display posts content? 2:42:45 - How to Create CTA (Call to Action) 2:47:45 - Understand All Archive Template, Tags archive, date archive, Template hierarchy, Custom Template 2:56:31 - Customize All Archive template 3:13:39 - Customize Author Archive Template 3:20:30 - Customize Category Archive Template 3:26:03 - Customize Blog Archive Template 3:30:31 - Customize Page No Title Template 3:32:10 - 404 Page and Page Template 3:36:11 - Search Resutl Page 3:42:10 - Single post page 4:00:45 - Custom post Project archive page template 4:08:13 -Custom post Project Single template
