Footer Customization

Overview

The Footer Customization module allows you to customize your website's footer content through a section-based editing system. You can manage company information, navigation links, contact details, social media links, copyright text, and legal links. Each footer section can be independently edited, enabled/disabled, and reordered to create a professional and informative footer that matches your organization's needs.

Accessing Footer Customization

Navigation path: Dashboard > Appearance > Footer

Required permission: Admin panel access (checked via canAccessAdminPanel())

Key Features

• Section-Based Organization: Footer divided into logical sections (Company, Quick Links, Resources, Contact, Legal, etc.)
• Individual Section Control: Edit, enable/disable, and reorder each section independently
• Repeater Fields: Add multiple menu items, social links, contact items, and business hours
• Live Preview: Preview footer changes before publishing
• Reset to Default: Restore footer to default configuration
• Multi-Column Layout: Configurable desktop and mobile column layouts
• Theme Support: Automatic dark mode support with customizable colors
• Dynamic Content: Support for text, textarea, URL, image, boolean, and repeater field types

Main Interface

Footer Sections List View

The main Footer Customization page displays all available footer sections in a grid layout:

Section Card Components:

• Status Indicator: Green dot (enabled) or red dot (disabled)
• Section Name: Display name of the footer section
• Description: Brief explanation of what the section contains
• Status Badge: "Enabled" or "Disabled" button (click to toggle)
• Edit Button: Opens the section editor
• Content Preview: Shows number of items or key content

Available Actions:

• Preview Footer: Opens footer preview in new tab
• Reset to Default: Restores all footer sections to default settings (requires confirmation)

Section Editor Interface

When editing a footer section, you'll see:

Section Settings Panel:

• Section Name: Editable display name
• Sort Order: Numeric value controlling display order
• Section Enabled: Checkbox to enable/disable the section

Content Fields Panel:
Each content field displays:

• Field Name: Human-readable field label
• Field Type Badge: Shows field type (Text, Textarea, Repeater, etc.)
• Description: Helpful text explaining the field's purpose
• Input Control: Appropriate input based on field type

Repeater Field Controls:
For menu items, social links, and other repeatable content:

• Add Item Button: Adds new item to the list
• Remove Button: Deletes individual items
• Enabled Checkbox: Toggle individual items on/off
• Drag Handle: Reorder items (if supported)

Footer Sections

Footer Company Section

Contains organization branding and identity:

• Company name and tagline
• Logo image
• Description/mission statement
• Social media links (platform, URL, icon)

Footer Quick Links Section

Primary navigation links:

• Section title
• Menu items (title, URL, target, enabled status)

Footer Resources Section

Additional resource links:

• Section title
• Menu items for documentation, tools, downloads

Footer Contact Section

Contact information:

• Section title
• Physical address
• Contact items (email, phone, fax)
• Business hours (days, hours, enabled status)

Footer Newsletter Section

Newsletter subscription:

• Title and description
• Placeholder text
• Button text
• Enabled status

Footer Legal Section

Legal and policy links:

• Legal links (title, URL, target, enabled status)

Footer Copyright Section

Copyright information:

• Copyright text (supports {{ year }} and {{ company_name }} placeholders)
• Additional text (e.g., registration information)

Footer Layout Section

Layout configuration:

• Layout style (default/minimal)
• Background color
• Text color
• Border style
• Desktop columns (1-4)
• Mobile columns (1-2)

Common Tasks

Task 1: Editing Company Information

1. Navigate to Dashboard > Appearance > Footer
2. Find the Company section card
3. Click the Edit button
4. Update the following fields:
   • Company Name: Your organization name
   • Company Tagline: Brief tagline or slogan
   • Description: Mission statement or brief description
5. Scroll to Social Links repeater
6. For each social link:
   • Platform: Social media platform name
   • URL: Full profile URL
   • Icon: Icon identifier
   • Enabled: Check to display
7. Click Save Changes

Task 2: Managing Footer Menu Links

1. Go to Dashboard > Appearance > Footer
2. Click Edit on Quick Links or Resources section
3. Update the Section Title if needed
4. In the Menu Items repeater:
   • Click Add Item to create new link
   • Fill in:
     • Title: Link text to display
     • URL: Destination URL (e.g., "/about" or "https://example.com")
     • Target: "_self" (same window) or "_blank" (new tab)
     • Enabled: Check to display
5. To remove a link, click the Remove button next to it
6. Click Save Changes

Task 3: Updating Contact Information

1. Navigate to Dashboard > Appearance > Footer
2. Click Edit on the Contact section
3. Update Section Title (e.g., "Contact Us", "Get in Touch")
4. Update Address field with your physical address
5. In Contact Items repeater:
   • Type: Select "email", "phone", or "other"
   • Label: Display label (e.g., "Email", "Phone")
   • Value: Actual contact value
   • Icon: Icon identifier
   • Enabled: Check to display
6. In Business Hours repeater:
   • Days: Day range (e.g., "Monday - Friday")
   • Hours: Time range (e.g., "9:00 AM - 5:00 PM")
   • Enabled: Check to display
7. Click Save Changes

Task 4: Customizing Copyright Text

1. Go to Dashboard > Appearance > Footer
2. Click Edit on the Copyright section
3. Update Copyright Text field:
   • Use {{ year }} for automatic current year
   • Use {{ company_name }} for company name from settings
   • Example: "© {{ year }} {{ company_name }}. All rights reserved."
4. Update Additional Text for extra information:
   • Example: "Registered under Society Registration Act 1860"
5. Click Save Changes

Task 5: Adding Legal Links

1. Navigate to Dashboard > Appearance > Footer
2. Click Edit on the Legal section
3. In the Legal Links repeater:
   • Click Add Item
   • Title: Link text (e.g., "Privacy Policy", "Terms of Service")
   • URL: Link to policy page
   • Target: Usually "_self"
   • Enabled: Check to display
4. Repeat for each legal link needed
5. Click Save Changes

Task 6: Enabling/Disabling Footer Sections

1. From Dashboard > Appearance > Footer
2. Find the section you want to toggle
3. Click the Enabled or Disabled badge button
4. Status updates immediately
5. Disabled sections won't appear in the footer

Task 7: Reordering Footer Sections

1. Go to Dashboard > Appearance > Footer
2. Click Edit on any section
3. Update the Sort Order field:
   • Lower numbers appear first
   • Use increments of 10 for easy reordering (100, 110, 120, etc.)
4. Click Save Changes
5. Repeat for other sections as needed

Task 8: Previewing Footer Changes

1. From Dashboard > Appearance > Footer
2. Click Preview Footer button (top right)
3. Footer preview opens in new tab
4. Review all sections and content
5. Close preview and make adjustments if needed

Task 9: Resetting Footer to Default

1. Navigate to Dashboard > Appearance > Footer
2. Click Reset to Default button (top right)
3. Confirm the action in the dialog:
   • Warning: This will overwrite all current customizations
4. Footer sections reset to default configuration
5. Edit sections to customize again

Task 10: Configuring Footer Layout

1. Go to Dashboard > Appearance > Footer
2. Click Edit on the Layout section
3. Configure layout options:
   • Layout Style: "default" (grid) or "minimal" (centered)
   • Background Color: Tailwind CSS classes (e.g., "bg-gray-900 dark:bg-gray-950")
   • Text Color: Tailwind CSS classes (e.g., "text-gray-300 dark:text-gray-400")
   • Border Style: Border classes (e.g., "border-t border-gray-800")
   • Desktop Columns: Number of columns on desktop (1-4)
   • Mobile Columns: Number of columns on mobile (1-2)
4. Click Save Changes

Settings and Options

Section Settings

Section Name

• Type: Text
• Required: Yes
• Description: Display name for the section (shown in admin only)
• Example: "Company Information", "Quick Links", "Contact Us"

Sort Order

• Type: Number
• Required: Yes
• Description: Controls display order (lower numbers appear first)
• Default: 100+ range for footer sections
• Example: 100, 110, 120, 130

Section Enabled

• Type: Checkbox
• Default: Checked
• Description: Controls whether section appears in footer
• Note: Disabled sections are hidden from visitors

Content Field Types

Text Field

• Type: Single-line text input
• Use For: Short text like titles, names, taglines
• Example: Company name, section title

Textarea Field

• Type: Multi-line text input
• Use For: Longer text like descriptions, addresses
• Example: Company description, physical address

URL Field

• Type: Text input for URLs
• Use For: Links and web addresses
• Example: Social media URLs, external links

Image Field

• Type: File upload
• Use For: Logo, icons, graphics
• Supported Formats: JPG, PNG, SVG, GIF
• Note: Old images are deleted when uploading new ones

Boolean Field

• Type: Checkbox
• Use For: Enable/disable toggles
• Values: "1" (checked) or "0" (unchecked)

Repeater Field

• Type: Dynamic list of items
• Use For: Menu items, social links, contact items, business hours
• Features: Add, remove, reorder items
• Storage: JSON array in database

Repeater Field Structures

Menu Items

• title: Link text
• url: Destination URL
• target: "_self" or "_blank"
• enabled: true/false

Social Links

• platform: Platform name (e.g., "Facebook")
• url: Profile URL
• icon: Icon identifier
• enabled: true/false

Contact Items

• type: "email", "phone", or "other"
• label: Display label
• value: Contact value
• icon: Icon identifier
• enabled: true/false

Business Hours

• days: Day range (e.g., "Monday - Friday")
• hours: Time range (e.g., "9:00 AM - 5:00 PM")
• enabled: true/false

Legal Links

• title: Link text
• url: Destination URL
• target: "_self" or "_blank"
• enabled: true/false

Permissions

The Footer Customization module uses admin panel access control:

• Admin Panel Access: Required to view and edit footer sections
  • Checked via auth()->user()->canAccessAdminPanel()
  • Typically granted to users with admin or super-admin roles

Note: Unlike other modules, Footer Customization doesn't use granular permissions (view, create, edit, delete). All admin users with panel access can manage the footer.

Tips and Best Practices

• Logical Organization: Group related links in appropriate sections (Company info, Quick Links, Resources, Legal)
• Essential Links Only: Include important pages like About, Contact, Privacy Policy, Terms of Service
• Social Media: Add all active social media profiles to build community engagement
• Copyright Placeholders: Use {{ year }} and {{ company_name }} for automatic updates
• Link Testing: Test all links after adding or updating to ensure they work correctly
• Mobile Optimization: Footer automatically adapts to mobile screens based on column settings
• Consistent Naming: Use clear, descriptive section titles
• Link Limits: Keep 4-6 links per section for better readability
• Contact Information: Always include at least one contact method (email or phone)
• Legal Compliance: Include required legal links (Privacy Policy, Terms, Cookie Policy)
• Regular Updates: Review and update footer content quarterly
• Preview Before Publishing: Always preview changes before saving
• Backup Before Reset: Export or document custom settings before using Reset to Default
• Sort Order Strategy: Use increments of 10 (100, 110, 120) for easy future reordering
• Enabled Status: Disable sections temporarily instead of deleting content

Troubleshooting

Problem: Changes not appearing in footer

Solution:

• Clear browser cache (Ctrl+F5 or Cmd+Shift+R)
• Verify section is marked as "Enabled" (green status indicator)
• Check that you clicked "Save Changes" button
• Clear server-side cache if enabled: php artisan cache:clear
• Check if section sort order is within visible range
• Verify content items have "enabled" checkbox checked

Problem: Links not working or going to wrong page

Solution:

• Verify URL format is correct (include http:// or https:// for external links)
• Check for typos in URLs
• For internal links, use relative paths (e.g., "/about" not "about")
• Test links in a new browser tab
• Ensure target is set correctly ("_self" for same window, "_blank" for new tab)
• Check that the destination page exists

Problem: Section order not updating

Solution:

• Ensure sort order values are different for each section
• Use larger gaps between numbers (100, 110, 120 instead of 1, 2, 3)
• Clear browser cache after saving
• Check browser console for JavaScript errors
• Try editing sort order from the section edit page instead of drag-and-drop

Problem: Cannot add new menu items

Solution:

• Verify you have admin panel access
• Check that the section supports repeater fields (menu_items, social_links, etc.)
• Ensure all required fields are filled correctly
• Try refreshing the page and attempting again
• Check browser console for JavaScript errors
• Verify database connection is working

Problem: Images not uploading

Solution:

• Check file size (must be under server upload limit)
• Verify file format is supported (JPG, PNG, SVG, GIF)
• Ensure storage/app/public directory is writable
• Check that symbolic link exists: php artisan storage:link
• Verify disk space is available
• Check PHP upload_max_filesize and post_max_size settings

Problem: Social media icons not displaying

Solution:

• Verify icon identifier is correct
• Check that social link is enabled
• Ensure URL is properly formatted
• Clear browser cache
• Check that icon file or font is loaded correctly
• Review browser console for missing resource errors

Problem: Copyright year not updating automatically

Solution:

• Ensure you're using {{ year }} placeholder, not hardcoded year
• Check that FooterHelper::processCopyrightText() is working
• Clear all caches (browser and server)
• Verify the copyright section is enabled
• Check that the template is rendering the processed text

Problem: Footer not responsive on mobile

Solution:

• Check mobile column setting in Layout section
• Verify Tailwind CSS is loaded correctly
• Clear browser cache
• Test on actual mobile device, not just browser resize
• Check for custom CSS overriding responsive styles
• Ensure viewport meta tag is present in layout

Problem: Reset to Default not working

Solution:

• Verify FooterSeeder class exists in database/seeders
• Check database connection
• Review Laravel logs for seeder errors
• Ensure you have admin permissions
• Try running seeder manually: php artisan db:seed --class=FooterSeeder
• Check that landing_page_sections and landing_page_contents tables exist

Problem: Preview showing old content

Solution:

• Clear browser cache completely
• Open preview in incognito/private window
• Check that changes were saved successfully
• Clear server-side cache: php artisan cache:clear
• Verify preview route is loading correct data
• Check for CDN caching if using one

Related Modules

• Landing Page: Uses same section/content system for homepage customization
• About Us Page: Similar section-based editing for about page
• Simple Navigation: Manages main site navigation menu (separate from footer)
• Pages: Footer links often point to custom pages created here
• Settings: General site settings (site name, logo) used in footer
• Media Library: Upload and manage images used in footer