Home > Documentation > Design Overview

Design Overview

Design System The Iluvana CMS design system gives you complete control over your website's appearance and structure through five interconnected template types that work together to create sophisticated, professional designs.

Understanding Template Types

The design system is built around five template types that serve different purposes in creating your final website:

Page Layouts

Define specific page types and their content structure

Shared Elements

Reusable components like headers, footers, navigation

Stylesheets

CSS files that control visual appearance and styling

JavaScript

Interactive functionality and dynamic behavior

Structure

HTML framework foundation that other templates build upon

How Templates Work Together

1

Structure Foundation

Provides the basic HTML framework (DOCTYPE, head, body structure)

2

Page Layout Integration

Builds specific page types within the structure framework

3

Shared Element Insertion

Inserts reusable components where placeholders indicate

4

Asset Loading

CSS and JavaScript files load based on your configuration

Template Management Interface

Access the design system through the Templates panel in your dashboard. The interface uses a tabbed layout where each tab represents one template type:

Page Layouts
Shared Elements
Stylesheets
JavaScript
Structure
Click any tab to switch between template types. Each type has its own management interface and editing capabilities.

Template States and Organization

Key Template Properties

  • Active/Inactive Status - Control whether templates are used on your website
  • Default Designation - Set which Page Layouts and Structure templates serve as defaults
  • Template Names - Use descriptive names for easy identification and organization
  • Modification Tracking - See when templates were last updated and by whom
Templates are automatically organized into sections: - **Default Templates** appear first (these are foundational templates) - **Standard Templates** follow (your custom templates) This organization helps you understand which templates are essential system foundations versus your custom designs.

Structure Templates: Advanced Visual Editor

Structure templates use a unique visual editing interface that lets you build HTML frameworks line by line:

 
<!DOCTYPE html>
<html lang="en">
{{FILES_STYLESHEETS}}

This visual editor lets you:

Visual Editor Controls

  • Add content at any position using the + buttons
  • Remove lines using the × buttons
  • Insert placeholders for dynamic content
  • See color coding for different content types (HTML tags, placeholders, etc.)

File Management: CSS and JavaScript

Stylesheet and JavaScript templates have a unique section-based organization system:

HEADER SECTION (3 files) Saved
FOOTER SECTION (8 files) Saved

Section Purpose

Section Functions

  • Header Section - Files load in the <head> tag (critical CSS, essential scripts)
  • Footer Section - Files load before </body> (main stylesheets, interactive JavaScript)

Files can be dragged to reorder within sections and moved between sections for optimal loading performance.

Placeholder System

Templates use a placeholder system to insert dynamic content:

Common Placeholder Types

  • {{SHARED_HEADER}} - Insert shared template content
  • {{page_title}} - Insert page-specific data
  • {{FILES_STYLESHEETS}} - Insert CSS file links automatically
  • {{FILES_SCRIPTS}} - Insert JavaScript file links automatically
Placeholders are replaced with actual content when pages are rendered, allowing templates to work dynamically with different content while maintaining consistent structure.

Getting Started Workflow

Examine Your Structure

Start by reviewing existing Structure templates to understand your HTML framework foundation.

Create Page Layouts

Build specific page types that use your structure foundation for different content needs.

Develop Shared Elements

Create reusable components that can be inserted across multiple page layouts.

Manage Assets

Upload and configure CSS and JavaScript files to control styling and functionality.

Best Practices

  • Use descriptive template names that clearly indicate purpose and scope
  • Test new templates by keeping them inactive until ready
  • Understand template relationships before making changes to defaults
  • Organize files strategically between Header and Footer sections for performance