Frontend Management

The Frontend Management module helps you create and manage your institution's public-facing website:

• Website Builder: Create and customize your institution's website
• Page Management: Create, edit, and organize website pages
• Theme Management: Customize the look and feel of your website
• Menu Management: Create and organize navigation menus
• Media Management: Upload and manage images, videos, and documents
• Form Builder: Create custom forms for inquiries and applications
• SEO Management: Optimize your website for search engines
• Analytics: Track website traffic and user behavior

The Website Builder feature allows you to create and customize your institution's website without any coding knowledge:

Using the Page Builder

1. Navigate to Frontend > Website Builder
2. Select a page to edit or create a new page
3. Use the drag-and-drop interface to add and arrange elements:
   • Text blocks
   • Image galleries
   • Video embeds
   • Call-to-action buttons
   • Forms
   • Maps
   • Social media feeds
   • Custom HTML/CSS
4. Customize each element's appearance and behavior
5. Preview your changes in real-time
6. Click "Save" to apply your changes
7. Click "Publish" to make the changes live on your website

Responsive Design

The Website Builder automatically ensures your website looks great on all devices:

• Desktop View: How your website appears on large screens
• Tablet View: How your website appears on medium-sized screens
• Mobile View: How your website appears on smartphones

You can preview and customize each view to ensure optimal user experience across all devices.

The Page Management feature allows you to create, edit, and organize your website pages:

Creating a New Page

1. Navigate to Frontend > Pages
2. Click on "Add New Page"
3. Enter the page details:
   • Page Title
   • URL Slug (e.g., "about-us", "contact")
   • Meta Description (for SEO)
   • Featured Image (optional)
4. Select a page template or start with a blank page
5. Click "Create" to create the page
6. Use the Website Builder to design the page content
7. Set the page status (Draft, Published, Scheduled)
8. Click "Save" to save your changes

Managing Page Hierarchy

Organize your pages into a logical structure:

1. Navigate to Frontend > Pages > Hierarchy
2. View the current page structure displayed as a tree
3. Drag and drop pages to rearrange them
4. Create parent-child relationships by dragging a page under another page
5. Click "Save" to apply the changes

Page Templates

Save time by creating and using page templates:

1. Navigate to Frontend > Pages > Templates
2. Click on "Add New Template"
3. Design the template using the Website Builder
4. Save the template with a descriptive name
5. When creating new pages, select this template to start with its layout and content

The Theme Management feature allows you to customize the look and feel of your website:

Selecting a Theme

1. Navigate to Frontend > Themes
2. Browse the available themes
3. Preview a theme by clicking on "Preview"
4. Apply a theme by clicking on "Activate"

Customizing a Theme

1. Navigate to Frontend > Themes > Customize
2. Customize various aspects of your theme:
   • Colors: Primary, secondary, accent, text, background colors
   • Typography: Font families, sizes, weights, line heights
   • Layout: Container width, spacing, padding, margins
   • Header: Logo, navigation style, sticky/fixed position
   • Footer: Columns, widgets, copyright text
   • Buttons: Styles, sizes, hover effects
   • Forms: Input styles, labels, validation messages
3. Preview your changes in real-time
4. Click "Save" to apply your customizations

Custom CSS/JS

Add custom code to further customize your website:

1. Navigate to Frontend > Themes > Custom Code
2. Add custom CSS to override theme styles
3. Add custom JavaScript for additional functionality
4. Click "Save" to apply your custom code

Theme Backup and Restore

1. Navigate to Frontend > Themes > Backup
2. Click "Create Backup" to save your current theme settings
3. To restore a previous backup, select it from the list and click "Restore"

The Media Management feature allows you to upload and organize media files for your website:

Uploading Media

1. Navigate to Frontend > Media
2. Click on "Upload New Media"
3. Select files from your computer or drag and drop them into the upload area
4. The system will upload the files and display them in the media library
5. For each uploaded file, you can add:
   • Title
   • Alt Text (important for accessibility and SEO)
   • Caption
   • Description
6. Click "Save" to update the media information

Organizing Media

Keep your media files organized for easy access:

1. Navigate to Frontend > Media > Folders
2. Create folders to categorize your media (e.g., "Banners", "Gallery", "Documents")
3. Move media files into appropriate folders by selecting them and clicking "Move to Folder"
4. Use the search and filter options to quickly find specific media files

Image Optimization

Optimize images for better website performance:

1. Navigate to Frontend > Media > Optimization
2. Enable automatic image optimization
3. Configure optimization settings:
   • Compression Level
   • Maximum Dimensions
   • WebP Conversion (for modern browsers)
   • Lazy Loading
4. Click "Save" to apply the settings
5. For existing images, click "Bulk Optimize" to apply the settings to all images

The SEO Management feature helps you optimize your website for search engines:

Page SEO

1. Navigate to Frontend > SEO
2. Select a page to optimize
3. Configure the following SEO elements:
   • Meta Title: The title that appears in search engine results (50-60 characters recommended)
   • Meta Description: The description that appears in search engine results (150-160 characters recommended)
   • Focus Keyword: The main keyword you want the page to rank for
   • URL Slug: The page's URL (should be short, descriptive, and include keywords)
   • Canonical URL: Used to prevent duplicate content issues
   • Robots Meta: Control how search engines index and follow links on the page
4. The system will analyze your page and provide SEO recommendations
5. Make the suggested improvements to increase your page's search engine ranking
6. Click "Save" to apply your changes

Sitemap Management

Create and manage XML sitemaps for better search engine indexing:

1. Navigate to Frontend > SEO > Sitemap
2. Configure sitemap settings:
   • Include/exclude specific pages
   • Set update frequency
   • Set priority for different page types
3. Click "Generate Sitemap" to create or update your sitemap
4. The system will automatically submit your sitemap to major search engines

Structured Data

Add structured data (schema markup) to help search engines understand your content:

1. Navigate to Frontend > SEO > Structured Data
2. Select a page to add structured data
3. Choose the appropriate schema type:
   • Organization
   • Local Business
   • Event
   • Course
   • Article
   • FAQ
   • And more...
4. Fill in the required information for the selected schema type
5. Preview the structured data in JSON-LD format
6. Click "Save" to add the structured data to your page