Convert Figma to Elementor Container tutorial and Flexbox full project.

Published: 13 October 2022
on channel: Riad Mahmud

4,783

183

In this video, I’ll show you how to convert this beautiful agency website from Figma to Elementor using Container & Flexbox features. And I’ll go through it step by step.

After completing this video, you will have a solid knowledge of the Elementor container and how the flexbox works on a real project.

If you are unfamiliar with the elementor container flexbox, I highly recommend you watch this video to understand exactly how the flexbox works.

And also, for creating this tutorial, I’ll be using the Kadence Wordpress theme, which is completely free.

✅ Learn Container and Flexbox Tutorial:    • Elementor Container | Elementor Flexb...
✅ Convert Figma to Elementor Part 1:    • Convert Figma Design to Elementor Wor...
✅ Convert Figma to Elementor Part 2:    • Elementor Responsive Design - How to ...
✅ Multipage Page Website From Figma To Elementor:    • Figma to WordPress Multipage Website ...

✅ Download the Resource file: https://riadmahmud.com/convert-figma-...

🔴 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 🔴
============================
✅ 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

🔴 CHAPTER 🔴
00:00:00 Intro
00:01:35 Design Overview
00:02:05 Install Kadence WordPress Theme
00:03:12 Install Require plugins
00:05:11 Enable Flexbox Container
00:05:47 Configure basic WordPress settings
00:09:03 Finalize the Typography And Color inside Kadence Theme
00:22:15 Start Creating Header using Kadence Header Builder
00:30:12 Start Creating Footer Area Using Kadence Footer Builder
00:48:38 Create Hero area Section
00:60:29 About us Section
01:25:20 Intro/Service Section
01:41:47 Testimonial Section
01:48:32 FAQ’s - Frequently Asked Question Section
02:00:55 We Believe in Good Service
02:06:48 Latest Post area / article section
02:23:53 Let’s Work Together / CTA Section
02:33:25 Let’s make your website mobile friendly
02:40:00 Outro