Demo Pages Configuration

Complete guide to understanding and customizing demo pages in the Sandbox Jekyll theme

Demo Pages Overview

Basic Structure

Demo pages are configured through individual markdown files in the root directory (e.g., demo1.md, demo2.md). Each demo uses specific includes from _includes/components/sections/ directories.

Include Structure

Each demo has its own includes folder at _includes/components/sections/demo{number}/ containing section-specific templates.

Common Section Types

Hero Sections

Hero sections are typically the first visual element and can be configured with various styles and content.

Project Showcases

Project sections can be displayed in various formats including grids, carousels, and masonry layouts.

Layout Customization

Color Schemes

Each demo can use custom color schemes defined in the frontmatter or section configurations.

Common Components

Navigation

Configure navigation styles and menu items for each demo layout.

Footer Styles

Different footer layouts and content configurations available for each demo.

Demo Categories

Corporate Demos (Demo1-Demo8)

Corporate demos feature business-focused layouts with sections for services, team members, and company information.

Creative Agency Demos (Demo9-Demo15)

Agency demos emphasize portfolio work, creative services, and dynamic visual elements.

Product/App Demos (Demo16-Demo23)

Product-focused demos showcase features, pricing plans, and app screenshots.

Landing Pages (Demo24-Demo34)

Conversion-focused landing pages with clear CTAs and marketing elements.

Advanced Customization

Custom Section Creation

Create new sections by adding HTML templates to your demo's section folder.

Component Variations

Customize existing components with different styles and layouts.

Best Practices

Performance Optimization

  • Use appropriate image sizes and formats
  • Minimize custom JavaScript
  • Leverage built-in lazy loading
  • Utilize CSS utility classes

Responsive Design Guidelines

  • Use Bootstrap grid system consistently
  • Test on multiple device sizes
  • Implement mobile-first approach
  • Consider touch interfaces