However, Astra is the “skeleton” of your site. To get the specific “look” (the colors, rounded cards, and mobile features) shown in your images, you’ll need a few extra (free) tools to fill out the “body.”
Here is how you can execute this layout using Astra Free and its best companions.
🛠️ The Tech Stack (All Free)
Your Phase 1 image already mentions the essentials. To match the visuals exactly, here is the recommended combination:
- Theme: Astra (Free) – For the lightweight structure.
- Page Builder: Spectra (Free) – This is made by the Astra team. It adds “blocks” to WordPress that allow you to create those beautiful grid layouts, shadows, and buttons without needing the Pro version of Astra.
- LMS: Tutor LMS (Free) – As seen in your plan, this handles the “Academy” and “Start Course” functionality.
- Menu/Header: Astra’s built-in Header Footer Builder.
🎨 Achieving the Visual Layout
1. The Color Palette & Branding
Astra Free allows you to set “Global Colors.” Based on your mockup:
- Primary Blue:
#1A4B84(approx) for headers and phase backgrounds. - Accent Yellow/Gold:
#FFD700for buttons like “Join Now” and “Marketplace.” - Background: Use a very light grey or white to make those “Phase Cards” pop.
2. The “Phase Card” Grid (Homepage)
To create the 3-column layout seen in your “Build Plan” image:
- Use the Spectra Container block.
- Set it to a 3-column grid.
- Add a Box Shadow and Border Radius (rounded corners) to each column to give it that “app-like” card feel.
3. Mobile Optimization (The “Mobile Guide” Requirements)
Your mobile mockup has specific needs. Here is how to handle them in the free version:
- Sticky Header: Astra Free doesn’t have a “Sticky Header” toggle, but you can easily add the free plugin “Sticky Header Effects for Elementor” (if using Elementor) or a simple CSS snippet if using Spectra.
- The Search Bar: In the Astra Header Builder, you can drag the “Search” widget right next to your logo for that mobile look.
- Sticky Footer (Start Course / Join Now): This is a custom element. You can create a “Bottom Row” in the Astra Footer Builder and set it to
position: fixedvia custom CSS, or use a free plugin like “Fixed Bottom Menu.”
📅 Your Implementation Roadmap
Based on your 3-month timeline, here is your focus:
| Timeline | Focus | Key Action |
|---|---|---|
| Week 1 | Tech Setup | Install Astra + Spectra + Tutor LMS. Set your global fonts and colors. |
| Month 1 | Daily Posts | Use the Astra “Blog” settings to create the list view seen in your mobile mockup. |
| Month 2 | Sell Courses | Configure Tutor LMS. Create your first course landing page using a Spectra template. |
| Month 3 | AI & Revenue | Install a free AI chatbot plugin (like Tidio or Join.chat for WhatsApp AI) and apply for Google AdSense. |
💡 A Few Pro-Tips for “Digital Africanism”
- Speed is King: Your plan mentions “Fast & Responsive.” Since you are targeting the African market where data costs and connection speeds vary, keep your images small. Use the LiteSpeed Cache plugin (mentioned in your Phase 6) to keep things snappy.
- Data Saver Mode: In your image, you mentioned a “Data Saver Mode.” You can achieve this by using a “System Font Stack” (Arial/Helvetica) in Astra settings so the phone doesn’t have to download heavy Google Fonts.
- The “Swipe” Feature: For the “Courses → Swipe” section on mobile, use the Spectra Post Carousel block. It allows users to touch-swipe through courses on their phones.
Does this technical setup feel manageable for you, or would you like a specific CSS code snippet to help with that Sticky Footer?
