Appearance
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/adminLog in with your credentials to access the dashboard.
Dashboard Layout
The admin panel consists of several key areas:
Sidebar Navigation
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
- Click on a collection in the sidebar (e.g., "Projects")
- Click the Create New button
- Fill in the required fields
- Click Save or Publish
Field Types
You will encounter various field types:
| Type | Description | Example |
|---|---|---|
| Text | Single-line text | Project title |
| Textarea | Multi-line text | Short description |
| Rich Text | Formatted content | Project details |
| Upload | File/image upload | Featured image |
| Select | Dropdown selection | Category |
| Checkbox | Boolean toggle | Featured flag |
| Relationship | Link to other content | Related projects |
| Array | Repeatable groups | Gallery images |
| Date | Date picker | Start date |
| Number | Numeric input | Order/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
- Go to Admin > Media
- Click Create New
- Drag and drop or click to select files
- Add alt text for images
- Click Save
Using Media in Content
When you see an upload field:
- Click Select existing or Upload new
- Choose or upload your file
- 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
- Go to Admin > Users
- Click Create New
- Enter email and password
- Assign roles (admin, editor, etc.)
- Click Save
Roles and Permissions
| Role | Capabilities |
|---|---|
| Admin | Full access to everything |
| Editor | Create and edit content |
| User | Basic access |
Changing Your Password
- Click your name in the top right
- Select Account
- Enter new password
- Click Update
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Cmd/Ctrl + S | Save document |
Cmd/Ctrl + Shift + P | Publish document |
Escape | Close modals |
Customizing the Admin
Admin Appearance
The admin panel can be customized via:
src/app/(payload)/custom.css- Custom stylespayload.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