Uploaded April 2025 | Updated September 2026, 1 day ago
Want to set up Elementor and build your first WordPress design system? This is Lesson 2 of the free Dynamic WordPress Course for Beginners — led by WordPress educator Tobi Salami.
In this lesson, we're diving into page builders and design systems. If you've ever wanted to build your WordPress site exactly how you picture it — this is your starting point!
Here's what we cover:
⚡ What is a page builder?
⚡ Installing Elementor as our chosen page builder
⚡ Understanding Elementor Free vs Pro
⚡ Installing the Hello Theme
⚡ Setting up your colors and fonts
⚡ Using Coolors to generate your design palette
By the end of this lesson, you'll have a working design setup and a clean foundation to build your first custom WordPress page!
-------------
⏱ TIMESTAMPS:
00:00 Introduction to Lesson Two
00:38 Setting Up Your Design System
01:37 Installing and Activating Elementor
03:46 Exploring Elementor Features
06:40 Choosing and Setting Up Colors
10:11 Global Styling with Elementor
19:00 Finalizing Global Colors
25:14 Choosing and Saving Colors
26:10 Selecting and Customizing Fonts
28:20 Adjusting Font Sizes for Different Devices
34:52 Using the Clamp Function for Responsive Typography
43:24 Implementing Custom Fonts in Elementor
50:32 Conclusion and Next Steps
-------------
❓ Do I need Elementor Pro for this course?
No, we start with the free version of Elementor. You can upgrade later as your project grows.
❓ What theme does this course use?
We use Hello Theme — the official, lightweight theme by Elementor, perfect for beginners.
❓ What is a design system in WordPress?
A design system is a set of reusable colors, fonts, and styles that keep your site consistent. In this lesson, you'll build yours from scratch.
-------------
📄 Bricks Builder vs. Elementor — Which Page Builder to Choose?
👉 crocoblock.com/blog/bricks-builder-vs-elementor
📄 Using Hello Elementor Theme with JetPlugins:
👉 crocoblock.com/blog/using-crocoblock-with-hello-elementor-theme
📄 11 Fastest WordPress Themes — Speed Test Results:
👉 crocoblock.com/blog/fastest-wordpress-themes
🔗 Build Dynamic Websites with Crocoblock:
👉 crocoblock.com/solution/dynamic
-------------
►Get JetPlugins: out.crocoblock.com/3ErsGze
►Get JetEngine: out.crocoblock.com/3Y2s1Lc
►Get JetFormBuilder: out.crocoblock.com/4j8mKdz
►Choose Crocoblock subscription: out.crocoblock.com/3Ril9pk
-------------
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 #Elementor #PageBuilder #DynamicWordPress #CrocoAcademy #WebDesign #WebDevelopment
Want to set up Elementor and build your first WordPress design system? This is Lesson 2 of the free Dynamic WordPress Course for Beginners — led by WordPress educator Tobi Salami.
In this lesson, we're diving into page builders and design systems. If you've ever wanted to build your WordPress site exactly how you picture it — this is your starting point!
Here's what we cover:
⚡ What is a page builder?
⚡ Installing Elementor as our chosen page builder
⚡ Understanding Elementor Free vs Pro
⚡ Installing the Hello Theme
⚡ Setting up your colors and fonts
⚡ Using Coolors to generate your design palette
By the end of this lesson, you'll have a working design setup and a clean foundation to build your first custom WordPress page!
-------------
⏱ TIMESTAMPS:
00:00 Introduction to Lesson Two
00:38 Setting Up Your Design System
01:37 Installing and Activating Elementor
03:46 Exploring Elementor Features
06:40 Choosing and Setting Up Colors
10:11 Global Styling with Elementor
19:00 Finalizing Global Colors
25:14 Choosing and Saving Colors
26:10 Selecting and Customizing Fonts
28:20 Adjusting Font Sizes for Different Devices
34:52 Using the Clamp Function for Responsive Typography
43:24 Implementing Custom Fonts in Elementor
50:32 Conclusion and Next Steps
-------------
❓ Do I need Elementor Pro for this course?
No, we start with the free version of Elementor. You can upgrade later as your project grows.
❓ What theme does this course use?
We use Hello Theme — the official, lightweight theme by Elementor, perfect for beginners.
❓ What is a design system in WordPress?
A design system is a set of reusable colors, fonts, and styles that keep your site consistent. In this lesson, you'll build yours from scratch.
-------------
📄 Bricks Builder vs. Elementor — Which Page Builder to Choose?
👉 crocoblock.com/blog/bricks-builder-vs-elementor
📄 Using Hello Elementor Theme with JetPlugins:
👉 crocoblock.com/blog/using-crocoblock-with-hello-elementor-theme
📄 11 Fastest WordPress Themes — Speed Test Results:
👉 crocoblock.com/blog/fastest-wordpress-themes
🔗 Build Dynamic Websites with Crocoblock:
👉 crocoblock.com/solution/dynamic
-------------
►Get JetPlugins: out.crocoblock.com/3ErsGze
►Get JetEngine: out.crocoblock.com/3Y2s1Lc
►Get JetFormBuilder: out.crocoblock.com/4j8mKdz
►Choose Crocoblock subscription: out.crocoblock.com/3Ril9pk
-------------
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 #Elementor #PageBuilder #DynamicWordPress #CrocoAcademy #WebDesign #WebDevelopment
