Landing Page Management

Overview

The Landing Page Management module allows you to customize and manage all sections of your website's homepage (landing page). This powerful tool provides a section-based approach to content management, where each section of your landing page (Hero, Features, Testimonials, etc.) can be individually edited, activated/deactivated, and reordered through an intuitive drag-and-drop interface.

Use this module to create an engaging, professional homepage that showcases your brand, highlights key features, and drives conversions. Each section is fully customizable with text, images, and various content types to match your specific needs.

Note: The About Us section has its own dedicated management module. See About Us Page for details.

Accessing Landing Page Management

Navigation path: Dashboard > Appearance > Landing Page

Required permission: landing-page.view

Key Features

• Section-Based Management: Edit each landing page section independently
• Drag-and-Drop Reordering: Easily change the order of sections on your homepage
• Toggle Section Visibility: Activate or deactivate sections without deleting content
• Multiple Content Types: Support for text, textarea, images, and boolean fields
• Real-Time Updates: Changes are immediately reflected on the frontend
• Cache Management: Automatic cache clearing ensures updates appear instantly
• Flexible Content Structure: Each section has its own set of customizable fields
• Sort Order Control: Manual control over section ordering with automatic numbering

Main Interface

List View

The landing page sections list displays all available homepage sections in a table format with the following columns:

• Order: The display order on the homepage (with drag handle for reordering)
• Name: The section name (e.g., "Hero Section", "Features Section")
• Slug: The section identifier (e.g., "hero", "features")
• Status: Shows whether the section is Active (visible) or Inactive (hidden)
• Actions: Edit and Toggle buttons for each section

The interface includes:

• Drag-and-Drop Handles: Click and drag the handle icon to reorder sections
• Visual Status Indicators: Color-coded badges show active (green) and inactive (gray) sections
• Quick Actions: Edit and toggle status directly from the list
• About Us Notice: Information banner explaining the separate About Us page module
• Responsive Design: Mobile-friendly cards view on smaller screens
• Auto-Save Ordering: Section order is automatically saved when you drag and drop

Actions Available

• Edit Section: Modify section content, settings, and visibility
• Toggle Active/Inactive: Quickly show or hide sections from the homepage
• Reorder Sections: Drag and drop to change the display order
• View About Us: Link to the dedicated About Us page management module

Common Tasks

Task 1: Editing a Landing Page Section

1. Navigate to Dashboard > Appearance > Landing Page
2. Find the section you want to edit in the list
3. Click the "Edit" button (pencil icon) in the Actions column
4. The edit page displays two main areas:
   • Section Settings: Configure name, order, and active status
   • Section Content: Edit all content fields for that section
5. Modify the Section Settings:
   • Section Name: Update the display name (e.g., "Hero Section")
   • Sort Order: Change the numeric order (lower numbers appear first)
   • Section Active: Check to show the section, uncheck to hide it
6. Edit the Section Content fields (varies by section):
   • Text Fields: Single-line inputs for titles, headings, button text
   • Textarea Fields: Multi-line inputs for descriptions and longer content
   • Image Fields: Upload new images or keep existing ones
   • Boolean Fields: Checkboxes for enable/disable options
7. Click "Save Changes" to update the section
8. Click "Cancel" or "Back to Sections" to discard changes

Result: The section is updated and the cache is automatically cleared. Changes appear immediately on the homepage.

Task 2: Reordering Landing Page Sections

1. Go to Dashboard > Appearance > Landing Page
2. Locate the drag handle icon (three horizontal lines) in the Order column
3. Click and hold the drag handle for the section you want to move
4. Drag the section up or down to the desired position
5. Release the mouse button to drop the section in its new position
6. The order numbers update automatically
7. The new order is saved immediately via AJAX

Result: The homepage sections are reordered according to your changes. A success notification confirms the update.

Task 3: Activating or Deactivating a Section

Method 1: From the List View

1. Navigate to Dashboard > Appearance > Landing Page
2. Find the section you want to toggle
3. Click the toggle button (checkmark or circle-slash icon) in the Actions column
4. The status badge updates immediately

Method 2: From the Edit Page

1. Click "Edit" on the section you want to toggle
2. Check or uncheck the "Section Active" checkbox
3. Click "Save Changes"

Result:

• Active: Section is visible on the homepage
• Inactive: Section is hidden from the homepage but content is preserved

Task 4: Updating Hero Section Content

The Hero section is typically the first section visitors see. To update it:

1. Go to Dashboard > Appearance > Landing Page
2. Click "Edit" on the Hero Section
3. Update the content fields (typical fields include):
   • Headline: Main hero heading
   • Subheadline: Supporting text or tagline
   • Button Text: Call-to-action button label
   • Button Link: URL for the CTA button
   • Background Image: Upload a new hero background image
4. Click "Save Changes"

Result: Your homepage hero section displays the updated content immediately.

Task 5: Managing Features/Benefits Sections

Features sections often use repeater fields for multiple items:

1. Navigate to the Features section edit page
2. Look for repeater-style content fields
3. Each feature item typically includes:
   • Title: Feature name
   • Description: Feature details
   • Icon/Image: Visual representation
4. Modify existing items or add new ones as supported
5. Click "Save Changes"

Result: The features section on your homepage reflects the updated content.

Task 6: Uploading Section Images

1. Edit the section containing the image field
2. Locate the image field (shows current image if one exists)
3. Click "Choose File" or the file input button
4. Select an image from your computer (JPG, PNG, GIF, WebP supported)
5. The system validates file type and size (typically 5MB limit)
6. Leave the field empty to keep the current image
7. Click "Save Changes"

Result: The new image is uploaded to storage/landing-page/ and displayed on the homepage. Old images are automatically deleted when replaced.

Settings and Options

Section Settings Fields

Section Name

• Type: Text
• Required: Yes
• Max Length: 255 characters
• Description: The display name for the section in the admin panel
• Example: "Hero Section", "Features Section", "Testimonials"
• Note: This is for admin reference only, not displayed on the frontend

Sort Order

• Type: Number
• Required: Yes
• Min Value: 0
• Description: Controls the display order on the homepage (ascending)
• Example: 1, 2, 3, 4
• Default: Auto-assigned based on current order
• Note: Can also be changed via drag-and-drop in the list view

Section Active (is_active)

• Type: Checkbox
• Required: No
• Description: Controls whether the section is visible on the homepage
• Default: Checked (true)
• Note: Inactive sections are completely hidden from visitors

Content Field Types

The specific content fields vary by section, but common types include:

Text Fields

• Type: Single-line text input
• Max Length: Varies by field
• Description: Used for titles, headings, button labels, short text
• Example: "Get Started Today", "Learn More"
• Note: HTML is not supported in text fields

Textarea Fields

• Type: Multi-line text input
• Rows: Typically 4-6 lines
• Description: Used for descriptions, paragraphs, longer content
• Example: Feature descriptions, section introductions
• Note: Basic HTML may be supported depending on frontend rendering

Image Fields

• Type: File upload
• Accepted Formats: JPG, JPEG, PNG, GIF, WebP
• Max Size: 5MB per file
• Description: Used for backgrounds, feature images, icons
• Storage: Files are stored in storage/app/public/landing-page/
• Note: Previous images are automatically deleted when replaced

Boolean Fields

• Type: Checkbox
• Values: true/false
• Description: Used for enable/disable options
• Example: "Show button", "Enable animation"
• Default: Varies by field

Repeater Fields

• Type: Array of items (JSON stored)
• Description: Used for lists of similar items (features, testimonials, team members)
• Structure: Each item contains multiple sub-fields
• Example: Testimonials with name, quote, avatar, and role
• Note: File uploads within repeaters are supported (e.g., testimonial avatars)

Automatic Fields

Slug

• Generated automatically from the section name
• URL-friendly format (lowercase, hyphens)
• Example: "Hero Section" becomes "hero"
• Used internally for section identification
• Cannot be manually edited

Timestamps

• created_at: When the section was first created
• updated_at: When the section was last modified
• Automatically managed by the system

Permissions

The Landing Page module uses the following permissions to control access:

• landing-page.view: Can view the landing page sections list and access the module
• landing-page.edit: Can edit section content and settings (implied by view permission)

Note: The same permission (landing-page.view) controls access to both the About Us page module and the Landing Page module.

Tips and Best Practices

• Plan Your Layout: Decide on section order before making extensive edits
• Use Drag-and-Drop: Reordering via drag-and-drop is faster than manual sort order editing
• Test Visibility: Use the toggle feature to preview the homepage with/without specific sections
• Optimize Images: Compress images before uploading to improve page load speed
• Keep Content Concise: Landing pages work best with clear, focused messaging
• Mobile Preview: Always check how sections look on mobile devices
• Consistent Styling: Maintain visual consistency across all sections
• Call-to-Action: Ensure each section has a clear purpose and CTA when appropriate
• Regular Updates: Keep content fresh and relevant to maintain visitor engagement
• Cache Awareness: Changes clear cache automatically, so updates appear immediately
• Backup Content: Keep copies of important text content before major edits
• Section Naming: Use clear, descriptive names for easy identification
• Order Gaps: Use sort orders like 10, 20, 30 to allow easy insertion of new sections
• Image Dimensions: Use consistent image dimensions within each section type
• Accessibility: Ensure images have descriptive alt text (if supported by your theme)

Troubleshooting

Problem: Changes not appearing on the homepage

Solution:

• Verify the section is set to Active
• Clear your browser cache and hard refresh (Ctrl+F5 or Cmd+Shift+R)
• Check that you saved the changes (look for success message)
• Verify you're viewing the correct page (homepage, not a different page)
• Check if your theme properly renders the section

Problem: Cannot reorder sections via drag-and-drop

Solution:

• Ensure JavaScript is enabled in your browser
• Check browser console for JavaScript errors
• Try refreshing the page and attempting again
• Use manual sort order editing as an alternative
• Verify you're clicking and holding the drag handle icon
• Check that SortableJS library is loaded (view page source)

Problem: Image upload fails or doesn't save

Solution:

• Check file size is under 5MB
• Verify file format is JPG, JPEG, PNG, GIF, or WebP
• Ensure storage directory has write permissions
• Check PHP upload_max_filesize and post_max_size settings
• Try a different image file
• Check server disk space availability

Problem: Section appears in wrong order after drag-and-drop

Solution:

• Refresh the page to see if order was actually saved
• Check browser console for AJAX errors
• Try manual sort order editing instead
• Verify CSRF token is valid (refresh page if session expired)
• Check network tab for failed API requests

Problem: Permission denied when accessing landing page module

Solution:

• Contact your administrator to request landing-page.view permission
• Check your role has the necessary permissions assigned
• Verify you're logged in with the correct account
• Check the roles and permissions module for your access level

Problem: Content fields not saving properly

Solution:

• Check for validation errors (red text under fields)
• Ensure required fields are filled in
• Verify special characters are properly handled
• Check browser console for JavaScript errors
• Try saving with minimal changes to isolate the issue
• Check server error logs for PHP errors

Problem: Deleted image still appears on homepage

Solution:

• Upload a new image to replace it
• Clear browser cache and CDN cache if applicable
• Check if the image path is hardcoded in the theme
• Verify the database value was actually updated
• Check storage directory to confirm file deletion

Problem: Section toggle button not working

Solution:

• Refresh the page and try again
• Check browser console for JavaScript errors
• Verify CSRF token is valid
• Try toggling from the edit page instead
• Check that you have edit permissions

Related Modules

• About Us Page: Dedicated module for managing the About Us section separately
• Pages: Create additional custom pages beyond the landing page
• Footer: Customize footer content that appears on all pages including the landing page
• Navigation: Configure the main menu that appears on the landing page
• Media Library: Manage and organize images used in landing page sections
• SEO Settings: Configure global SEO settings that affect the homepage