Appearance

Pages Module ​

The Pages module allows you to create and manage custom pages using a visual page builder. This guide covers all page creation and management features.

Table of Contents ​

  1. Overview
  2. Accessing Pages
  3. Page List
  4. Creating a Page
  5. Visual Page Builder
  6. Page Templates
  7. SEO Settings
  8. Page Status
  9. Managing Pages
  10. Reusable Blocks

Overview ​

Features ​

  • ✅ Visual drag-and-drop page builder
  • ✅ Pre-built page templates
  • ✅ Custom page creation
  • ✅ SEO optimization per page
  • ✅ Page status management (draft/published)
  • ✅ Custom page slugs and URLs
  • ✅ Reusable content blocks
  • ✅ Responsive design
  • ✅ Multiple layout options

Admin Routes ​

  • Page List: /admin/pages
  • Create Page: /admin/pages/create
  • Edit Page: /admin/pages/{id}/edit
  • Reusable Blocks: /admin/reusable-blocks

Frontend ​

  • Pages are accessible via custom slugs
  • Example: /about-us, /contact, /services

Accessing Pages ​

From Admin Panel ​

  1. Log in to admin panel
  2. Navigate to Core → Pages
  3. Or go directly to: /admin/pages

Permissions Required ​

  • View Pages: view pages permission
  • Create Pages: create pages permission
  • Edit Pages: edit pages permission
  • Delete Pages: delete pages permission

Page List ​

Viewing Pages ​

Access at: /admin/pages

List Features ​

  • Search by title, content, slug
  • Real-time search results

Filters ​

  • Status: Published/Draft/Archived
  • Template: Filter by template type
  • Author: Filter by page author
  • Date: Creation date range

Sorting ​

  • By Title (A-Z, Z-A)
  • By Date (Newest/Oldest)
  • By Status
  • By Author

Page Information Displayed ​

  • Title: Page title
  • Slug: URL slug
  • Status: Published/Draft
  • Template: Template used
  • Author: Page creator
  • Last Modified: Last update date

Creating a Page ​

Step 1: Access Create Page ​

  1. Go to Pages → Create New Page
  2. Or navigate to: /admin/pages/create

Step 2: Basic Information ​

Page Title ​

  • Enter page title
  • Example: About Us
  • This appears in page header and browser title

Page Slug ​

  • Auto-generated from title
  • Can be edited manually
  • Must be unique
  • Used in page URL
  • Example: about-us

Slug Rules:

  • Lowercase only
  • Use hyphens for spaces
  • No special characters
  • Keep it short and descriptive

Step 3: Choose Template (Optional) ​

Available Templates ​

  • Blank Page: Start from scratch
  • About Page: Pre-built about template
  • Contact Page: Contact form template
  • Services Page: Services listing template
  • Landing Page: Marketing landing page
  • Custom Templates: User-created templates

Using a Template ​

  1. Select template from dropdown
  2. Template loads with pre-built content
  3. Customize as needed
  4. Save your changes

Step 4: Page Builder ​

The visual page builder allows drag-and-drop page creation.

Builder Interface ​

Left Sidebar:

  • Blocks: Available content blocks
  • Elements: Page elements
  • Templates: Block templates

Center Canvas:

  • Page Preview: Live preview of page
  • Drop Zones: Where blocks can be added

Right Sidebar:

  • Block Settings: Configure selected block
  • Page Settings: Page-level settings

Adding Blocks ​

  1. Drag and Drop:

    • Drag block from sidebar
    • Drop onto canvas
    • Block is added to page

  2. Click to Add:

    • Click block in sidebar
    • Block added to end of page
    • Drag to reposition

Available Blocks ​

Content Blocks:

  • Text: Rich text content
  • Heading: H1, H2, H3 headings
  • Image: Single image
  • Gallery: Image gallery
  • Video: Video embed
  • Button: Call-to-action button
  • Spacer: Add spacing

Layout Blocks:

  • Columns: Multi-column layout
  • Container: Content container
  • Section: Page section
  • Divider: Visual divider

Interactive Blocks:

  • Form: Contact form
  • Map: Google Maps embed
  • Social Media: Social feed
  • Testimonials: Testimonial slider

E-commerce Blocks:

  • Products: Product listing
  • Pricing Table: Pricing plans
  • Services: Services grid

Step 5: Editing Blocks ​

Select Block ​

  • Click block on canvas
  • Block is highlighted
  • Settings appear in right sidebar

Block Settings ​

Content:

  • Edit text content
  • Change images
  • Modify links
  • Update media

Style:

  • Colors
  • Fonts
  • Spacing
  • Borders
  • Shadows

Layout:

  • Width
  • Alignment
  • Padding
  • Margins

Block Actions ​

  • Duplicate: Copy block
  • Delete: Remove block
  • Move Up/Down: Reorder blocks
  • Settings: Configure block

Step 6: Page Settings ​

General Settings ​

Page Layout:

  • Full width
  • Boxed
  • Custom width

Header:

  • Show/hide header
  • Custom header content

Footer:

  • Show/hide footer
  • Custom footer content

Advanced Settings ​

Custom CSS:

  • Add page-specific CSS
  • Override default styles
  • Custom styling

Custom JavaScript:

  • Add page-specific scripts
  • Custom functionality
  • Third-party integrations

Visual Page Builder ​

Builder Features ​

Drag and Drop ​

Moving Blocks:

  1. Click and hold block
  2. Drag to new position
  3. Drop in desired location
  4. Block moves to new position

Reordering:

  • Use up/down arrows
  • Drag to new position
  • Blocks reorder automatically

Responsive Preview ​

View Modes:

  • Desktop: Full-width preview
  • Tablet: Tablet-sized preview
  • Mobile: Mobile-sized preview

Responsive Editing:

  • Adjust block settings per device
  • Hide/show blocks on devices
  • Customize spacing per breakpoint

Live Preview ​

  • See changes in real-time
  • No need to save to preview
  • Instant visual feedback

Block Library ​

Text Blocks ​

Rich Text:

  • Full formatting options
  • Headings, lists, links
  • Text alignment
  • Custom colors

Heading:

  • H1 through H6
  • Custom styling
  • Typography options

Media Blocks ​

Image:

  • Upload or select from library
  • Alt text for SEO
  • Caption support
  • Link options

Gallery:

  • Multiple images
  • Grid or slider layout
  • Lightbox support
  • Custom spacing

Video:

  • YouTube/Vimeo embed
  • Self-hosted video
  • Autoplay options
  • Custom controls

Layout Blocks ​

Columns:

  • 2, 3, 4 column layouts
  • Custom column widths
  • Responsive breakpoints
  • Equal or custom heights

Container:

  • Content wrapper
  • Background options
  • Padding and margins
  • Border and shadow

Interactive Blocks ​

Form:

  • Contact form builder
  • Custom fields
  • Email notifications
  • Form validation

Map:

  • Google Maps integration
  • Custom markers
  • Map styles
  • Location search

Page Templates ​

Using Templates ​

Select Template ​

  1. When creating page
  2. Choose template from dropdown
  3. Template loads with content
  4. Customize as needed

Template Types ​

Pre-built Templates:

  • About Us
  • Contact
  • Services
  • Portfolio
  • Team
  • FAQ
  • Landing Page

Custom Templates:

  • Create your own templates
  • Save pages as templates
  • Reuse across site

Creating Templates ​

  1. Create page with desired layout
  2. Add all content blocks
  3. Configure settings
  4. Save page
  5. Option to save as template
  6. Template available for future use

SEO Settings ​

Page SEO ​

Each page has dedicated SEO settings:

Meta Title ​

  • Title for search engines
  • Default: Uses page title
  • Recommended: 50-60 characters
  • Include keywords

Meta Description ​

  • Description for search results
  • Default: Uses page excerpt
  • Recommended: 150-160 characters
  • Compelling and keyword-rich

Meta Keywords ​

  • Comma-separated keywords
  • Less important for SEO
  • Still useful for organization

Open Graph ​

OG Image:

  • Image for social sharing
  • Recommended: 1200x630px
  • Appears when page is shared

OG Title:

  • Title for social media
  • Default: Uses meta title

OG Description:

  • Description for social media
  • Default: Uses meta description

URL Structure ​

Custom Slug:

  • Edit page slug
  • SEO-friendly URLs
  • Keep slugs short and descriptive

URL Example:

  • Good: /about-us
  • Bad: /page-123 or /about_us_page

Page Status ​

Status Options ​

Draft ​

  • Not Published: Not visible on frontend
  • Editable: Can be edited
  • Private: Only admins can view

Published ​

  • Live: Visible on website
  • Public: Anyone can view
  • Indexed: Search engines can index

Archived ​

  • Hidden: Not in listings
  • Accessible: Can be accessed via direct URL
  • Preserved: Content is kept

Changing Status ​

  1. Edit page
  2. Find Status dropdown
  3. Select new status
  4. Click Save
  5. Status updates immediately

Managing Pages ​

Page Actions ​

Edit Page ​

  1. Click Edit on page
  2. Make changes
  3. Click Update
  4. Changes saved

Duplicate Page ​

  1. Click Duplicate
  2. New page created
  3. Status set to Draft
  4. Edit and publish

Delete Page ​

  1. Click Delete
  2. Confirm deletion
  3. Warning: Cannot be undone
  4. Page removed

Bulk Operations ​

Bulk Delete ​

  1. Select multiple pages
  2. Click Bulk Actions → Delete
  3. Confirm deletion
  4. All selected pages deleted

Bulk Status Change ​

  1. Select pages
  2. Click Bulk Actions → Change Status
  3. Select new status
  4. All selected pages updated

Reusable Blocks ​

Overview ​

Reusable blocks are content blocks that can be saved and reused across multiple pages.

Creating Reusable Blocks ​

  1. Go to Pages → Reusable Blocks
  2. Click Create Block
  3. Build block content
  4. Give block a name
  5. Save block

Using Reusable Blocks ​

  1. In page builder
  2. Click Reusable Blocks
  3. Select block
  4. Block added to page
  5. Edit if needed (or keep as-is)

Managing Blocks ​

  • Edit: Modify block content
  • Delete: Remove block
  • Duplicate: Copy block
  • View Usage: See where block is used

Benefits ​

  • Consistency: Same content across pages
  • Efficiency: Update once, changes everywhere
  • Time Saving: No need to recreate content

Tips and Best Practices ​

Page Creation ​

  1. Plan Your Layout:

    • Sketch page structure
    • Plan content blocks
    • Consider user flow

  2. Use Templates:

    • Start with templates
    • Customize as needed
    • Save your own templates

  3. Optimize for SEO:

    • Use descriptive titles
    • Write meta descriptions
    • Include keywords naturally

  4. Test Responsiveness:

    • Preview on all devices
    • Adjust for mobile
    • Test on real devices

Content Organization ​

  1. Clear Structure:

    • Use headings properly
    • Organize content logically
    • Use sections and dividers

  2. Visual Hierarchy:

    • Important content first
    • Use headings effectively
    • Proper spacing

  3. Media Usage:

    • Optimize images
    • Use appropriate sizes
    • Add alt text

Troubleshooting ​

Page Not Displaying ​

Solutions:

  1. Check page status (must be Published)
  2. Verify slug is correct
  3. Clear cache
  4. Check page permissions

Builder Not Loading ​

Solutions:

  1. Clear browser cache
  2. Check JavaScript console
  3. Verify browser compatibility
  4. Try different browser

Blocks Not Saving ​

Solutions:

  1. Check internet connection
  2. Verify permissions
  3. Save page manually
  4. Check for errors

Last Updated: [Date will be updated during final review]

Released under the MIT License.

Copyright © 2024 OmniSuite CMS