1. Core Strategy & Architecture
Website Goal
Create a high-conversion pizza shop website that:
- Showcases pizzas visually and emotionally
- Builds trust and premium perception
- Funnels users efficiently to an external ordering system
- Is scalable for future menu updates and promotions
Technology Stack (Strict)
- WordPress
- Hello Elementor theme
- Elementor Page Builder (Elementor Pro strongly recommended)
2. Data Structure & Custom Functionality (CRITICAL)
Because this is not a basic restaurant site, custom data modeling is required.
✅ Custom Plugin (Required)
A lightweight custom plugin is necessary to manage:
- Pizzas
- Pizza categories
- Special offers
- External ordering URLs
- Ingredient & preparation data
Why a Custom Plugin (Not Just Elementor)?
- Clean separation of data & design
- Reusable across Home/Menu pages
- Enables filtering, offers logic, and scalability
- Keeps content intact if theme changes
📦 Custom Post Types & Taxonomies
1️⃣ Custom Post Type: Pizza
Slug: /pizza/
Fields (ACF or custom meta):
- Pizza Name
- Featured Image (hero-quality image)
- Gallery Images (detail view)
- Short Description
- Ingredients (repeater)
- Preparation Details
- Category (taxonomy)
- Price (optional – depends on business model)
- External Order URL (required CTA)
- Badge Flags:
- “Best Seller”
- “New”
- “Limited”
- Availability Toggle
2️⃣ Custom Taxonomy: Pizza Category
Examples:
- Classic
- Gourmet
- Vegetarian
- Spicy
- Signature
- Limited Edition
Each category should support:
- Category image
- Short description
3️⃣ Custom Post Type: Offers
Slug: /offers/
Fields:
- Offer Title
- Offer Image
- Offer Description
- Linked Pizza(s)
- Expiration Date
- CTA Link (external ordering system)
- Active/Inactive Toggle
3. Design System (Premium Look)
Brand Color
Primary: #f14221 (use intentionally, not everywhere)
Supporting Palette
- Charcoal / Near Black:
#1a1a1a - Warm Off-White:
#faf7f5 - Light Gray:
#eaeaea - Accent Gold (sparingly):
#c9a24d
Typography (Elementor Global Styles)
- Headlines: Playfair Display / DM Serif / Cormorant
- Body: Inter / Poppins / Manrope
- Buttons: Uppercase, slightly expanded letter spacing
UI Rules for Premium Feel
- Large spacing (no cramped sections)
- High-quality photography only
- Soft shadows (Y-axis only)
- Rounded corners (8–12px)
- Clear visual hierarchy
- Minimal animations (fade, subtle slide)
4. Page-by-Page Structure & Implementation
🏠 HOME PAGE (Primary Conversion Page)
1️⃣ Hero Section
Goal: Immediate emotional impact
Elements:
- Full-width background image or slider
- Overlay gradient (dark → transparent)
- Headline: “Handcrafted Artisan Pizza”
- Subheadline: Trust-driven message
- Primary CTA: Order Now (external link)
- Secondary CTA: View Menu
2️⃣ Special Offers Section (HIGH PRIORITY)
Dynamic – pulls from Offers CPT
Layout:
- Horizontal cards or slider
- Badge: “Limited Time”
- Countdown (optional)
- CTA button → External Order
UX Tip: Red background gradient using brand color sparingly
3️⃣ All Pizzas Grid (Core Requirement)
Dynamic Query: All Pizza CPT
Card Design:
- Large image
- Pizza name
- Short description
- Category badge
- “View Details” CTA
✅ Clicking opens Pizza Single Page
4️⃣ Trust & Authority Section
- “Why Customers Love Us”
- Icons: Fresh Ingredients / Wood-Fired / Fast Delivery
- Short testimonials or star rating
5️⃣ Final CTA Strip
- Strong contrast background
- “Ready to order your favorite pizza?”
- CTA → External ordering system
🍕 PIZZA SINGLE PAGE (Detail View)
Template via Elementor Theme Builder
Structure:
- Hero Image (pizza close-up)
- Pizza Name + Category Badge
- Ingredients List (icons or bullets)
- Preparation Description
- Image Gallery (carousel)
- Prominent CTA:
- Large red button
- “Order This Pizza”
- Opens external system (new tab)
- Optional:
- Related Pizzas (same category)
📋 MENU PAGE (Category-Based UX)
1️⃣ Category Selector (Above the Fold)
Design Options:
- Horizontal image-based category cards
- OR filter buttons (AJAX-style with Elementor Pro)
✅ Clicking filters pizzas dynamically
2️⃣ Filtered Pizza Display
- Same pizza card layout as Home
- Clean grid
- Visual consistency = trust
✅ Clicking → Pizza Single Page
UX Enhancement
- Sticky category bar on scroll
- Smooth transitions
- Clear active category state
🧠 ABOUT PAGE (Brand Trust Builder)
Sections:
- Hero with story-driven headline
- Brand story (authentic, human tone)
- Ingredient sourcing philosophy
- Kitchen / pizza-making visuals
- Quality commitments
- Social proof (reviews, press mentions)
Design Tip: Warm colors, less red, more neutral tones
📰 ARTICLES PAGE (SEO & Authority)
Purpose:
- Pizza knowledge
- Promotions
- SEO growth
Structure:
- Clean blog grid
- Featured article
- Categories (e.g. Recipes, News, Pizza Tips)
Article Design:
- Large featured images
- Excellent typography
- Clear readability
📞 CONTACT PAGE (Low Friction)
Layout:
- Split screen design
- Left: Contact info & hours
- Right: Minimal form
Include:
- Google Map
- Opening hours
- Phone & email
- Social links
5. Elementor Best Practices (Premium Execution)
✅ Use Theme Builder for:
- Header
- Footer
- Pizza Single Template
- Blog Template
✅ Global Styles:
- Set typography & colors once
- Maintain consistency
✅ Performance:
- Use WebP images
- Limit animations
- Avoid heavy third-party plugins
✅ Accessibility:
- Proper contrast
- Large buttons
- Clear CTA labels
6. Conversion Optimization Summary
- External ordering buttons are always visible
- Offers are prioritized above regular content
- Visual hierarchy favors pizzas, not text
- Consistent CTA language across site
- Premium visuals build trust → higher order intent
✅ Final Recommendation
This structure ensures:
- Scalability
- High visual impact
- Clean content management
- Maximum conversion to external ordering
If you want, I can next:
- Design wireframes per page
- Provide Elementor widget-by-widget layouts
- Define exact ACF field groups
- Create a plugin file structure blueprint
Just tell me how deep you want to go.