Skip to content

Admin Panel Overview

The Payload CMS admin panel is your central hub for managing all portfolio content. This guide covers everything you need to know to use it effectively.

Accessing the Admin Panel

Navigate to /admin on your site:

http://localhost:3000/admin

Log in with your credentials to access the dashboard.

Dashboard Layout

The admin panel consists of several key areas:

The sidebar is organized into groups:

Content

  • Profile - Your personal information
  • Projects - Portfolio projects
  • Skills - Technical expertise
  • Experience - Work history
  • Education - Academic background
  • Achievements - Awards and certifications
  • Testimonials - Client feedback
  • Companies - Client logos

Settings

  • Site Settings - General configuration
  • Navigation - Menu items
  • Footer - Footer configuration

Admin

  • Users - Manage admin users
  • Media - Uploaded files

Main Content Area

This is where you create, edit, and manage content. It features:

  • List views with sorting and filtering
  • Edit forms with validation
  • Live preview panel
  • Version history

Creating Content

Adding a New Item

  1. Click on a collection in the sidebar (e.g., "Projects")
  2. Click the Create New button
  3. Fill in the required fields
  4. Click Save or Publish

Field Types

You will encounter various field types:

TypeDescriptionExample
TextSingle-line textProject title
TextareaMulti-line textShort description
Rich TextFormatted contentProject details
UploadFile/image uploadFeatured image
SelectDropdown selectionCategory
CheckboxBoolean toggleFeatured flag
RelationshipLink to other contentRelated projects
ArrayRepeatable groupsGallery images
DateDate pickerStart date
NumberNumeric inputOrder/priority

Rich Text Editor

The rich text editor (Lexical) supports:

  • Formatting: Bold, italic, underline, strikethrough
  • Headings: H1-H6
  • Lists: Ordered, unordered, checklists
  • Links: Internal and external
  • Media: Images, videos
  • Code: Inline and blocks
  • Quotes: Blockquotes

Managing Media

Uploading Files

  1. Go to Admin > Media
  2. Click Create New
  3. Drag and drop or click to select files
  4. Add alt text for images
  5. Click Save

Using Media in Content

When you see an upload field:

  1. Click Select existing or Upload new
  2. Choose or upload your file
  3. The file is now linked to your content

Supported Formats

  • Images: JPEG, PNG, GIF, WebP, SVG
  • Documents: PDF
  • Max Size: 10MB (configurable)

User Management

Creating Users

  1. Go to Admin > Users
  2. Click Create New
  3. Enter email and password
  4. Assign roles (admin, editor, etc.)
  5. Click Save

Roles and Permissions

RoleCapabilities
AdminFull access to everything
EditorCreate and edit content
UserBasic access

Changing Your Password

  1. Click your name in the top right
  2. Select Account
  3. Enter new password
  4. Click Update

Keyboard Shortcuts

ShortcutAction
Cmd/Ctrl + SSave document
Cmd/Ctrl + Shift + PPublish document
EscapeClose modals

Customizing the Admin

Admin Appearance

The admin panel can be customized via:

  • src/app/(payload)/custom.css - Custom styles
  • payload.config.ts - Configuration options

Common Customizations

Changing the Logo

Upload a logo in Site Settings, or customize in the config:

typescript
admin: {
  meta: {
    titleSuffix: ' | My Portfolio',
  },
}

Custom CSS

Add styles to custom.css:

css
/* Example: Change admin accent color */
:root {
  --theme-elevation-500: #6366f1;
}

Troubleshooting

Cannot Log In

  • Verify email/password are correct
  • Check if user account is active
  • Clear browser cookies and try again

Changes Not Appearing

  • Ensure content is published, not just saved as draft
  • Clear browser cache
  • Check if there are validation errors

Slow Performance

  • Reduce the number of items per page in settings
  • Optimize uploaded images before upload
  • Check database connection

Released under the MIT License.