Uploaded May 2025 | Updated September 2026, 11 hours ago
Ready to build your first WordPress page from scratch? This is Lesson 3 of the free Dynamic WordPress Course for Beginners — led by WordPress educator Tobi Salami.
In this lesson, you'll build a complete homepage using Elementor and JetThemeCore — from wireframe sketch to published page. This lays the groundwork for working with dynamic content in future lessons.
What you'll learn:
🔧 How to create a wireframe for your website
🔧 Intro to JetThemeCore — building header and footer templates
🔧 Homepage setup and layout with Elementor
🔧 Flexbox and Grid containers explained
🔧 Hero section, blog section, and image optimization
🔧 Responsive typography with Viewport Units (VH)
🔧 Margins, padding, and gaps — the full breakdown
🎁 Get 5% off with coupon code: DWC4B
-------------
⏱ TIMESTAMPS:
00:00 Introduction to Lesson Three
00:27 Creating a Wireframe for Your Website
03:57 Building the Homepage with Elementor
09:38 Using Crocoblock Plugins for Advanced Features
18:23 Setting Up the Header Template
51:41 Introduction to Grid Container Layout
52:38 Defining Columns with Fractional Units (FR)
57:21 Aligning Items in the Container
59:05 Publishing and Revising Changes
01:00:07 Setting Global Styles for Consistency
01:04:14 Adjusting Container Heights with Viewport Units (VH)
01:07:43 Linking the Logo to the Homepage
01:09:36 Building the Hero Section with Flexbox
01:20:33 Optimizing Images for Web Performance
01:32:10 Understanding Margins, Padding, and Gaps
01:38:14 Understanding Element Gaps
01:38:37 Adding and Adjusting Gaps
01:39:38 Building a New Section with Grid
01:41:01 Grouping and Aligning Elements
01:43:04 Adding Projects and Images
01:46:05 Creating Dynamic Layouts
01:51:02 Styling and Publishing
01:53:28 Building the Blog Section
02:03:41 Final Adjustments and Homework
02:11:29 Creating the Footer Template
02:21:38 Conclusion and Next Steps
-------------
❓ What is JetThemeCore?
JetThemeCore is a WordPress theme builder plugin by Crocoblock. It lets you create custom headers, footers, and page templates with Elementor — no coding needed.
❓ Do I need to know CSS to follow this lesson?
No — but Tobi explains key CSS concepts like Flexbox, Grid, VH units, and the clamp function in plain language as you build.
❓ What's the difference between Flexbox and Grid in Elementor?
Flexbox arranges elements in a single row or column. Grid gives you full two-dimensional control over layout. In this lesson, you'll use both.
-------------
📄 Create Custom Headers and Footers with JetThemeCore:
👉 crocoblock.com/blog/jetthemecore-setting-header-and-footer-templates-for-any-theme
📄 Elementor Flexbox Container — Build Flexible & Responsive Layouts:
👉 crocoblock.com/blog/elementor-flexbox-container
📄 JetThemeCore Knowledge Base:
👉 crocoblock.com/knowledge-base/plugins/jetthemecore
🔗 Build Dynamic Websites with Crocoblock:
👉 crocoblock.com/solution/dynamic
-------------
🎁 5% discount with coupon code: DWC4B
►Discover JetPlugins: out.crocoblock.com/42D984l
►Choose Crocoblock subscription: out.crocoblock.com/42QBRkT
-------------
Follow Tobi Salami for more helpful content:
► youtube.com/@tobisalami?sub_confirmation=1
► tobisalami.com
► web.facebook.com/tobisalamidev
► linkedin.com/in/tobisalami
-------------
► Join us here:
► FB Community: facebook.com/groups/CrocoblockCommunity
► Discord Community: discord.gg/6WbBaJQ2G5
► Facebook: facebook.com/crocoblock
► Twitter: twitter.com/mrcrocoblock
► Instagram: instagram.com/mrcrocoblock
► LinkedIn: linkedin.com/company/crocoblock
#WordPress #WordPressDesign #JetThemeCore #Elementor #DynamicWordPress #CrocoAcademy #WebDesign #WebDevelopment
Ready to build your first WordPress page from scratch? This is Lesson 3 of the free Dynamic WordPress Course for Beginners — led by WordPress educator Tobi Salami.
In this lesson, you'll build a complete homepage using Elementor and JetThemeCore — from wireframe sketch to published page. This lays the groundwork for working with dynamic content in future lessons.
What you'll learn:
🔧 How to create a wireframe for your website
🔧 Intro to JetThemeCore — building header and footer templates
🔧 Homepage setup and layout with Elementor
🔧 Flexbox and Grid containers explained
🔧 Hero section, blog section, and image optimization
🔧 Responsive typography with Viewport Units (VH)
🔧 Margins, padding, and gaps — the full breakdown
🎁 Get 5% off with coupon code: DWC4B
-------------
⏱ TIMESTAMPS:
00:00 Introduction to Lesson Three
00:27 Creating a Wireframe for Your Website
03:57 Building the Homepage with Elementor
09:38 Using Crocoblock Plugins for Advanced Features
18:23 Setting Up the Header Template
51:41 Introduction to Grid Container Layout
52:38 Defining Columns with Fractional Units (FR)
57:21 Aligning Items in the Container
59:05 Publishing and Revising Changes
01:00:07 Setting Global Styles for Consistency
01:04:14 Adjusting Container Heights with Viewport Units (VH)
01:07:43 Linking the Logo to the Homepage
01:09:36 Building the Hero Section with Flexbox
01:20:33 Optimizing Images for Web Performance
01:32:10 Understanding Margins, Padding, and Gaps
01:38:14 Understanding Element Gaps
01:38:37 Adding and Adjusting Gaps
01:39:38 Building a New Section with Grid
01:41:01 Grouping and Aligning Elements
01:43:04 Adding Projects and Images
01:46:05 Creating Dynamic Layouts
01:51:02 Styling and Publishing
01:53:28 Building the Blog Section
02:03:41 Final Adjustments and Homework
02:11:29 Creating the Footer Template
02:21:38 Conclusion and Next Steps
-------------
❓ What is JetThemeCore?
JetThemeCore is a WordPress theme builder plugin by Crocoblock. It lets you create custom headers, footers, and page templates with Elementor — no coding needed.
❓ Do I need to know CSS to follow this lesson?
No — but Tobi explains key CSS concepts like Flexbox, Grid, VH units, and the clamp function in plain language as you build.
❓ What's the difference between Flexbox and Grid in Elementor?
Flexbox arranges elements in a single row or column. Grid gives you full two-dimensional control over layout. In this lesson, you'll use both.
-------------
📄 Create Custom Headers and Footers with JetThemeCore:
👉 crocoblock.com/blog/jetthemecore-setting-header-and-footer-templates-for-any-theme
📄 Elementor Flexbox Container — Build Flexible & Responsive Layouts:
👉 crocoblock.com/blog/elementor-flexbox-container
📄 JetThemeCore Knowledge Base:
👉 crocoblock.com/knowledge-base/plugins/jetthemecore
🔗 Build Dynamic Websites with Crocoblock:
👉 crocoblock.com/solution/dynamic
-------------
🎁 5% discount with coupon code: DWC4B
►Discover JetPlugins: out.crocoblock.com/42D984l
►Choose Crocoblock subscription: out.crocoblock.com/42QBRkT
-------------
Follow Tobi Salami for more helpful content:
► youtube.com/@tobisalami?sub_confirmation=1
► tobisalami.com
► web.facebook.com/tobisalamidev
► linkedin.com/in/tobisalami
-------------
► Join us here:
► FB Community: facebook.com/groups/CrocoblockCommunity
► Discord Community: discord.gg/6WbBaJQ2G5
► Facebook: facebook.com/crocoblock
► Twitter: twitter.com/mrcrocoblock
► Instagram: instagram.com/mrcrocoblock
► LinkedIn: linkedin.com/company/crocoblock
#WordPress #WordPressDesign #JetThemeCore #Elementor #DynamicWordPress #CrocoAcademy #WebDesign #WebDevelopment
