About Us Page Content Customization

23 min read

Updated 2 days ago

About Us Page Management

Overview

The About Us Page Management module provides a comprehensive, dedicated interface for creating and customizing your organization's About Us page. This powerful tool allows you to showcase your company story, mission, vision, core values, team members, timeline, achievements, and more through a single, cohesive page.

Unlike the landing page sections, the About Us page is managed as a complete, standalone page with multiple interconnected sections that work together to tell your organization's story. Each section can be individually enabled or disabled, and content can include rich text, images, team member profiles, awards, statistics, and timeline events.

Use this module to create a compelling About Us page that builds trust, showcases your team, highlights your achievements, and communicates your organization's purpose and values to visitors.

Accessing About Us Page Management

Navigation path: Dashboard > Appearance > About Us Page

Required permission: landing-page.view

Key Features

Comprehensive Page Editor: Manage all About Us content from a single interface
Multiple Section Types: Hero, Story, Mission & Vision, Values, Team, Timeline, Stats, Awards, and CTA sections
Section Visibility Toggles: Show or hide individual sections without deleting content
Team Member Management: Add unlimited team members with photos, bios, and social links
Timeline Builder: Create a visual timeline of your organization's journey
Awards Showcase: Display recognition and achievements with badge images
Impact Statistics: Highlight key metrics and accomplishments
Rich Text Support: Format content with headings, lists, and styling
Image Uploads: Add photos for story section, team members, and award badges
SEO Optimization: Built-in meta tags for search engine visibility
Drag-and-Drop Ordering: Reorder team members, timeline events, and awards
Social Media Integration: Add LinkedIn, Twitter, and email links for team members
Responsive Design: Content automatically adapts to all device sizes

Main Interface

Page Editor View

The About Us page editor is organized into collapsible sections, each with its own set of fields and settings. The interface includes:

Page Status Toggle: Activate or deactivate the entire About Us page
Section Cards: Each section (Hero, Story, Mission & Vision, etc.) is presented in a distinct card with color-coded headers
Section Visibility Toggles: Individual checkboxes to show/hide specific sections
Content Fields: Text inputs, textareas, rich text editors, and file uploads for each section
Dynamic Repeaters: Add/remove team members, timeline events, values, stats, and awards
Preview Button: View the live About Us page in a new tab
Save Button: Update all changes at once

The page uses a vertical scroll layout with all sections visible on one page, making it easy to see and edit all content without navigating between multiple pages.

Actions Available

Edit Content: Modify text, images, and settings for any section
Toggle Section Visibility: Show or hide sections using checkboxes
Add/Remove Items: Manage team members, timeline events, values, stats, and awards
Upload Images: Add photos for story section, team members, and award badges
Reorder Items: Drag and drop to change the order of team members, timeline events, and awards
Preview Page: View the live About Us page to see your changes
Save Changes: Update the About Us page with all modifications

Common Tasks

Task 1: Editing the Hero Section

The Hero section is the first thing visitors see on your About Us page. To update it:

Navigate to Dashboard > Appearance > About Us Page
Locate the Hero Section card (blue gradient header with 🎯 icon)
Edit the following fields:
- Badge Text: Small label above the heading (e.g., "Our Story", "🇮🇳 Serving Bharat")
- Heading: Main page title (required field)
- Subheading: Supporting text or tagline
- CTA Button Text: Call-to-action button label
- CTA Button Link: URL for the CTA button
Click "Save Changes" at the bottom of the page

Result: The hero section displays your updated content with a gradient background and decorative elements.

Task 2: Adding Your Company Story

The Story section allows you to share your organization's narrative with text and an image:

Go to Dashboard > Appearance > About Us Page
Find the Our Story Section card (green gradient header with 📖 icon)
Fill in the content:
- Story Heading: Section title (e.g., "Our Story", "Our Journey")
- Story Content: Your company narrative (supports rich text formatting up to 10,000 characters)
- Story Image: Upload a photo that represents your organization (max 5MB)
- Image Alt Text: Descriptive text for accessibility
Click "Save Changes"

Result: Your story appears with formatted text alongside your chosen image in a two-column layout.

Task 3: Defining Mission and Vision

Communicate your organization's purpose and goals:

Navigate to Dashboard > Appearance > About Us Page
Locate the Mission & Vision Section card (purple gradient header with 🎯 icon)
Update the fields:
- Section Heading: Overall section title (e.g., "Our Mission & Vision")
- Mission Heading: Title for mission statement
- Mission Content: Your mission statement (supports rich text, max 2,000 characters)
- Vision Heading: Title for vision statement
- Vision Content: Your vision statement (supports rich text, max 2,000 characters)
Click "Save Changes"

Result: Mission and vision appear side-by-side in styled cards with icons and gradient backgrounds.

Task 4: Adding Core Values

Showcase your organization's principles and beliefs:

Go to Dashboard > Appearance > About Us Page
Find the Core Values Section card (orange gradient header with ⭐ icon)
Edit the section headers:
- Values Heading: Main section title
- Values Subheading: Optional descriptive text
Click "Add Value" button to create a new value
For each value, fill in:
- Title: Value name (e.g., "Innovation", "Integrity")
- Description: Explanation of the value
- Icon: Click "Choose Icon" to select an SVG icon path
Use the drag handle (three horizontal lines) to reorder values
Click the trash icon to remove a value
Click "Save Changes"

Result: Values display in a responsive grid with icons, titles, and descriptions in styled cards.

Task 5: Managing Team Members

Add and manage your team member profiles:

Navigate to Dashboard > Appearance > About Us Page
Locate the Team Members Section card (teal gradient header with 👥 icon)
Edit section headers:
- Section Heading: Title for the team section
- Section Subheading: Optional descriptive text
Click "Add Team Member" to create a new profile
For each team member, provide:
- Name: Full name of the team member
- Role: Job title or position
- Bio: Brief biography (2-3 sentences)
- Photo: Upload a professional headshot (max 5MB, JPEG/PNG/WebP)
- LinkedIn URL: Optional LinkedIn profile link
- Twitter URL: Optional Twitter profile link
- Email: Optional contact email
Use the drag handle to reorder team members
Click the trash icon to remove a team member
Click "Save Changes"

Result: Team members appear in a responsive grid with photos, names, roles, bios, and social links.

Note: Team member photos are automatically optimized, converted to WebP format, and thumbnails are generated for better performance.

Task 6: Creating a Timeline

Build a visual timeline of your organization's history:

Go to Dashboard > Appearance > About Us Page
Scroll to the Timeline Section (if available in your interface)
Edit section headers:
- Timeline Heading: Section title (e.g., "Our Journey", "Milestones")
- Timeline Subheading: Optional descriptive text
Click "Add Timeline Event" to create a new milestone
For each event, provide:
- Year: The year of the event
- Title: Event name or milestone
- Description: Details about the event
Use the drag handle to reorder timeline events
Click the trash icon to remove an event
Click "Save Changes"

Result: Timeline events display in chronological order with visual connectors and styled cards.

Task 7: Adding Impact Statistics

Highlight your organization's achievements with numbers:

Navigate to Dashboard > Appearance > About Us Page
Find the Impact/Stats Section (if available)
Edit section headers:
- Stats Heading: Section title
- Stats Subheading: Optional descriptive text
Click "Add Stat" to create a new statistic
For each stat, provide:
- Number: The numeric value
- Prefix: Optional text before number (e.g., "$", "Over")
- Suffix: Optional text after number (e.g., "+", "M", "K")
- Label: Description of the statistic
- Icon Path: Optional SVG icon path
Use the drag handle to reorder statistics
Click the trash icon to remove a statistic
Click "Save Changes"

Result: Statistics display in a prominent section with large numbers, labels, and optional icons on a gradient background.

Task 8: Showcasing Awards and Recognition

Display your organization's awards and achievements:

Go to Dashboard > Appearance > About Us Page
Locate the Awards Section (if available)
Edit section headers:
- Awards Heading: Section title
- Awards Subheading: Optional descriptive text
Click "Add Award" to create a new award entry
For each award, provide:
- Title: Award name
- Description: Details about the award
- Year: Year received
- Badge Image: Upload award logo or badge (max 2MB, supports SVG)
Use the drag handle to reorder awards
Click the trash icon to remove an award
Click "Save Changes"

Result: Awards display in a grid with badge images, titles, descriptions, and years.

Note: Award badge images are automatically optimized and converted to WebP format for better performance.

Task 9: Configuring the Call-to-Action Section

Add a final call-to-action at the bottom of your About Us page:

Navigate to Dashboard > Appearance > About Us Page
Find the CTA Section (if available)
Fill in the fields:
- CTA Heading: Main call-to-action message
- CTA Subheading: Supporting text
- CTA Button Text: Button label (e.g., "Join Our Team", "Get Involved")
- CTA Button Link: URL for the button
Click "Save Changes"

Result: A prominent call-to-action section appears at the bottom of the page with a gradient background and styled button.

Task 10: Toggling Section Visibility

Control which sections appear on your About Us page:

Go to Dashboard > Appearance > About Us Page
Scroll through the page to find the sections you want to show or hide
Each section has visibility controls (typically at the bottom of the section card or in a settings area)
Check or uncheck the visibility toggles for:
- Show Hero
- Show Story
- Show Mission & Vision
- Show Values
- Show Team
- Show Timeline
- Show Stats
- Show Awards
- Show CTA
Click "Save Changes"

Result: Only the sections with checked visibility toggles will appear on the live About Us page. Hidden sections preserve their content for future use.

Task 11: Updating SEO Settings

Optimize your About Us page for search engines:

Navigate to Dashboard > Appearance > About Us Page
Scroll to the SEO section (typically near the bottom)
Fill in the SEO fields:
- Meta Title: Page title for search results (recommended: 50-60 characters)
- Meta Description: Page description for search results (recommended: 150-160 characters)
- Meta Keywords: Comma-separated keywords (optional, less important for modern SEO)
Click "Save Changes"

Result: Search engines and social media platforms use your custom meta tags when displaying your About Us page in results and shares.

Settings and Options

Page Status

Page Active (is_active)

Type: Checkbox
Required: No
Description: Controls whether the About Us page is accessible to visitors
Default: Checked (true)
Note: When unchecked, the page returns a 404 error or redirects

Hero Section Fields

Badge Text (hero_badge)

Type: Text
Required: No
Max Length: 255 characters
Description: Small label displayed above the main heading
Example: "Our Story", "🇮🇳 Serving Bharat", "About Us"

Heading (hero_heading)

Type: Text
Required: Yes
Max Length: 255 characters
Description: Main page title displayed prominently
Example: "About Us", "Our Story", "Who We Are"

Subheading (hero_subheading)

Type: Textarea
Required: No
Description: Supporting text or tagline below the heading
Example: "We are dedicated to serving communities across India."

CTA Button Text (hero_cta_text)

Type: Text
Required: No
Max Length: 255 characters
Description: Label for the call-to-action button
Example: "Get Started", "Learn More", "Join Us"

CTA Button Link (hero_cta_link)

Type: Text (URL)
Required: No
Max Length: 255 characters
Description: URL where the CTA button links
Example: "/contact", "#team", "https://example.com/join"

Story Section Fields

Story Heading (story_heading)

Type: Text
Required: No
Max Length: 255 characters
Description: Title for the story section
Example: "Our Story", "Our Journey", "How We Started"

Story Content (story_content)

Type: Rich Text Editor
Required: No
Max Length: 10,000 characters
Description: Your organization's narrative and history
Supports: HTML formatting, paragraphs, lists, bold, italic
Note: Content is sanitized to prevent XSS attacks

Story Image (story_image)

Type: File Upload
Required: No
Accepted Formats: JPEG, PNG, JPG, GIF, WebP
Max Size: 5MB
Description: Image representing your organization
Storage: storage/app/public/about-us/
Note: Previous image is automatically deleted when replaced

Image Alt Text (story_image_alt)

Type: Text
Required: No
Max Length: 255 characters
Description: Alternative text for the story image (accessibility)
Example: "Our team working together in the office"

Mission & Vision Section Fields

Section Heading (mission_vision_heading)

Type: Text
Required: No
Max Length: 255 characters
Description: Overall section title
Example: "Our Mission & Vision", "What Drives Us"

Mission Heading (mission_heading)

Type: Text
Required: No
Max Length: 255 characters
Description: Title for the mission statement
Example: "Our Mission", "What We Do"

Mission Content (mission_content)

Type: Rich Text Editor
Required: No
Max Length: 2,000 characters
Description: Your organization's mission statement
Supports: HTML formatting
Note: Content is sanitized for security

Vision Heading (vision_heading)

Type: Text
Required: No
Max Length: 255 characters
Description: Title for the vision statement
Example: "Our Vision", "Where We're Going"

Vision Content (vision_content)

Type: Rich Text Editor
Required: No
Max Length: 2,000 characters
Description: Your organization's vision statement
Supports: HTML formatting
Note: Content is sanitized for security

Core Values Section Fields

Values Heading (values_heading)

Type: Text
Required: No
Max Length: 255 characters
Description: Main section title
Example: "Our Core Values", "What We Believe"

Values Subheading (values_subheading)

Type: Text
Required: No
Max Length: 255 characters
Description: Optional descriptive text
Example: "These principles guide everything we do"

Values (values)

Type: JSON Array (Repeater)
Required: No
Description: List of core values
Structure: Each value contains:
- title: Value name (string)
- description: Value explanation (string)
- icon_path: SVG path data for icon (string)
Example: [{"title": "Innovation", "description": "We embrace new ideas...", "icon_path": "M9 12.75L11.25..."}]

Team Members Section Fields

Team Heading (team_heading)

Type: Text
Required: No
Max Length: 255 characters
Description: Section title
Example: "Meet Our Team", "Our People"

Team Subheading (team_subheading)

Type: Text
Required: No
Max Length: 255 characters
Description: Optional descriptive text
Example: "The talented individuals behind our success"

Team Members (team_members)

Type: JSON Array (Repeater)
Required: No
Description: List of team member profiles
Structure: Each member contains:
- name: Full name (string)
- role: Job title (string)
- bio: Biography (string)
- photo: Image path (string) - legacy field
- photo_id: Media library ID (integer) - preferred
- linkedin_url: LinkedIn profile URL (string, optional)
- twitter_url: Twitter profile URL (string, optional)
- email: Contact email (string, optional)

Team Member Photos (team_photo_{index})

Type: File Upload (per member)
Required: No
Accepted Formats: JPEG, PNG, JPG, GIF, WebP
Max Size: 5MB per photo
Description: Professional headshot for team member
Storage: storage/app/public/about-us/team/
Processing: Automatically optimized, WebP conversion, thumbnail generation
Note: Photos are managed through MediaLibraryService for better performance

Timeline Section Fields

Timeline Heading (timeline_heading)

Type: Text
Required: No
Max Length: 255 characters
Description: Section title
Example: "Our Journey", "Milestones", "Our History"

Timeline Subheading (timeline_subheading)

Type: Text
Required: No
Max Length: 255 characters
Description: Optional descriptive text

Timeline (timeline)

Type: JSON Array (Repeater)
Required: No
Description: List of timeline events
Structure: Each event contains:
- year: Year of event (string/number)
- title: Event name (string)
- description: Event details (string)

Impact/Stats Section Fields

Stats Heading (stats_heading)

Type: Text
Required: No
Max Length: 255 characters
Description: Section title
Example: "Our Impact", "By The Numbers"

Stats Subheading (stats_subheading)

Type: Text
Required: No
Max Length: 255 characters
Description: Optional descriptive text

Stats (stats)

Type: JSON Array (Repeater)
Required: No
Description: List of statistics
Structure: Each stat contains:
- number: Numeric value (number)
- prefix: Text before number (string, optional)
- suffix: Text after number (string, optional)
- label: Description (string)
- icon_path: SVG path data (string, optional)
Example: {"number": 1000, "suffix": "+", "label": "Happy Clients"}

Awards Section Fields

Awards Heading (awards_heading)

Type: Text
Required: No
Max Length: 255 characters
Description: Section title
Example: "Recognition & Awards", "Our Achievements"

Awards Subheading (awards_subheading)

Type: Text
Required: No
Max Length: 255 characters
Description: Optional descriptive text

Awards (awards)

Type: JSON Array (Repeater)
Required: No
Description: List of awards and recognition
Structure: Each award contains:
- title: Award name (string)
- description: Award details (string)
- year: Year received (string/number)
- badge_image: Image path (string) - legacy field
- badge_id: Media library ID (integer) - preferred

Award Badge Images (award_badge_{index})

Type: File Upload (per award)
Required: No
Accepted Formats: JPEG, PNG, JPG, GIF, WebP, SVG
Max Size: 2MB per badge
Description: Award logo or badge image
Storage: storage/app/public/about-us/awards/
Processing: Automatically optimized, WebP conversion, thumbnail generation

Call-to-Action Section Fields

CTA Heading (cta_heading)

Type: Text
Required: No
Max Length: 255 characters
Description: Main call-to-action message
Example: "Ready to Join Us?", "Let's Work Together"

CTA Subheading (cta_subheading)

Type: Text
Required: No
Max Length: 255 characters
Description: Supporting text for the CTA

CTA Button Text (cta_button_text)

Type: Text
Required: No
Max Length: 255 characters
Description: Button label
Example: "Get Started", "Contact Us", "Join Our Team"

CTA Button Link (cta_button_link)

Type: Text (URL)
Required: No
Max Length: 255 characters
Description: URL for the CTA button
Example: "/contact", "/careers", "#"

SEO Fields

Meta Title (meta_title)

Type: Text
Required: No
Max Length: 255 characters
Description: Page title for search engines
Recommended Length: 50-60 characters
Example: "About Us - Company Name"

Meta Description (meta_description)

Type: Textarea
Required: No
Description: Page description for search engines
Recommended Length: 150-160 characters
Example: "Learn about our company, mission, vision, and the team behind our success."

Meta Keywords (meta_keywords)

Type: Text
Required: No
Max Length: 255 characters
Description: Comma-separated keywords (less important for modern SEO)
Example: "about us, company profile, our mission, our vision, team members"

Section Visibility Toggles

All section visibility fields are checkboxes that control whether each section appears on the page:

show_hero: Display hero section (default: true)
show_story: Display story section (default: true)
show_mission_vision: Display mission & vision section (default: true)
show_values: Display core values section (default: true)
show_team: Display team members section (default: true)
show_timeline: Display timeline section (default: true)
show_stats: Display statistics section (default: true)
show_awards: Display awards section (default: true)
show_cta: Display call-to-action section (default: true)

Permissions

The About Us Page module uses the following permission to control access:

landing-page.view: Can view and edit the About Us page module

Note: This permission is shared with the Landing Page module. Users with this permission can access both the Landing Page and About Us Page management interfaces.

Tips and Best Practices

Tell a Story: Use the story section to create an emotional connection with visitors
Be Authentic: Share genuine information about your organization and team
Use High-Quality Images: Professional photos make a strong first impression
Keep It Concise: Write clear, focused content that's easy to scan
Update Regularly: Keep team member information and achievements current
Optimize Images: Compress images before uploading to improve page load speed
Complete Profiles: Fill in all team member fields including social links for credibility
Consistent Tone: Maintain a consistent voice throughout all sections
Mobile Preview: Always check how content looks on mobile devices
SEO Optimization: Write compelling meta descriptions to improve search visibility
Section Order: Consider the logical flow of information when toggling sections
Visual Balance: Use a mix of text and images throughout the page
Call-to-Action: End with a clear next step for visitors
Proofread: Check all content for spelling and grammar errors
Accessibility: Provide descriptive alt text for all images
Social Proof: Highlight awards and statistics to build trust
Timeline Chronology: Order timeline events from oldest to newest or vice versa
Value Clarity: Make sure each core value is clearly explained
Team Diversity: Showcase the diversity and expertise of your team
Regular Backups: Keep copies of important content before major edits

Troubleshooting

Problem: Changes not appearing on the About Us page

Solution:

Verify the page is set to Active (checkbox at the top)
Check that the specific section visibility toggle is enabled
Clear your browser cache and hard refresh (Ctrl+F5 or Cmd+Shift+R)
Confirm you clicked "Save Changes" (look for success message)
Verify you're viewing the correct URL (/pages/about-us)
Check if your theme properly renders the About Us page template

Problem: Image upload fails or doesn't save

Solution:

Check file size is under the limit (5MB for story/team photos, 2MB for award badges)
Verify file format is supported (JPEG, PNG, JPG, GIF, WebP, or SVG for badges)
Ensure storage directory has write permissions (storage/app/public/about-us/)
Check PHP upload_max_filesize and post_max_size settings
Try a different image file to rule out file corruption
Check server disk space availability
Review server error logs for specific upload errors

Problem: Rich text editor not formatting content properly

Solution:

Ensure you're using the rich text editor toolbar for formatting
Check that HTML tags are properly closed
Verify content doesn't exceed character limits (10,000 for story, 2,000 for mission/vision)
Try pasting content as plain text first, then applying formatting
Check browser console for JavaScript errors
Clear browser cache and try again

Problem: Team member photos appear distorted or low quality

Solution:

Upload higher resolution images (recommended: at least 800x800 pixels)
Use square or portrait-oriented photos for best results
Ensure photos are in focus and well-lit
Check that automatic image optimization is working correctly
Try uploading in a different format (WebP or PNG for best quality)
Verify MediaLibraryService is properly configured

Problem: Cannot reorder team members, timeline events, or awards

Solution:

Ensure JavaScript is enabled in your browser
Check browser console for JavaScript errors
Verify SortableJS or drag-and-drop library is loaded
Try refreshing the page and attempting again
Check that you're clicking and holding the drag handle icon (three horizontal lines)
Use a different browser to rule out browser-specific issues