Uploaded May 2025 | Updated September 2026, 37 minutes ago

---

Learn how to create a #dynamic, reusable hero section in #WordPress using the #JetEngine plugin with the new #Components feature and #Twig templating via the #Timber plugin.
This tutorial shows you how to build a reusable component that loads post-specific data like images, titles, descriptions, and prices, while keeping the design easy to customize.
You'll learn how to add dynamic data, apply conditional tags, and create style and content controls for a flexible layout, ideal for WordPress and Crocoblock users.

📄 How to Make Your Component Dynamic
👉 out.crocoblock.com/3ZmxMnx

📄 Components Overview
👉 out.crocoblock.com/3S1vBls

📄 How to Create a Listing Template Using Timber/Twig View
👉 out.crocoblock.com/3ZlHmae
-------------

► TIMESTAMPS
00:00 Introduction
00:42 Setup Overview & Custom Post Type
01:16 Exploring the Twig Editor Interface
02:30 Building the Hero Layout (HTML & CSS)
03:22 Adding Dynamic Post Data
04:15 Using Conditional Tags
05:29 Setting Up Content & Style Controls
06:25 Creating a Conditional Content Control
07:17 Adding and Assigning Style Controls
08:05 Inserting the Component into a Post
09:10 Final Front-End Preview & Results
---------------

►Get JetEngine: out.crocoblock.com/3S2CPpl
►Choose Crocoblock subscription: out.crocoblock.com/4mfZGvd
-------------
#WebDesign #WebDevelopment #WordPress


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