Appearance
Globals
Globals are singleton configurations in Payload CMS. Unlike collections (which have many items), each global exists as a single document. They are perfect for site-wide settings.
Overview
Portfolio CMS includes four globals:
| Global | Purpose | Location |
|---|---|---|
| Site Settings | General configuration | Settings > Site Settings |
| Profile | Your personal info | Content > Profile |
| Navigation | Menu configuration | Settings > Navigation |
| Footer | Footer configuration | Settings > Footer |
Site Settings
Central configuration for your entire portfolio.
General Tab
| Field | Description |
|---|---|
| Site Name | Your portfolio/brand name |
| Site Tagline | Short description or motto |
| Logo | Site logo image |
| Logo Text | Fallback text if no logo |
| Favicon | Browser tab icon (32x32 recommended) |
Contact Tab
| Field | Description |
|---|---|
| Your contact email | |
| Phone | Phone number |
| Location | City, country |
| Availability | Status like "Available for freelance" |
Social Links Tab
Add your social media profiles:
| Platform Options |
|---|
| GitHub, LinkedIn, Twitter/X |
| Instagram, YouTube, Dribbble |
| Behance, CodePen, Dev.to |
| Medium, Substack, Discord |
| Twitch, Website |
Each social link has:
- Platform - Select from list
- URL - Profile URL
- Label - Optional custom label
CTA Tab
Configure call-to-action buttons:
| Field | Description |
|---|---|
| Primary CTA Label | Button text (e.g., "Get in Touch") |
| Primary CTA URL | Button link |
| Secondary CTA Label | Second button text |
| Secondary CTA URL | Second button link |
| Resume URL | Link to resume download |
SEO Defaults Tab
Default meta information:
| Field | Description |
|---|---|
| Meta Title | Title template (use %s for page title) |
| Meta Description | Default site description |
| OG Image | Default social sharing image |
| Twitter Handle | Your @username |
Features Tab
Toggle site features:
| Feature | Description |
|---|---|
| Enable Dark Mode | Show theme toggle |
| Enable Search | Show search functionality |
| Enable Project Filters | Show category filters |
| Enable Animations | Show page animations |
| Show Scroll Progress | Show reading progress bar |
Analytics Tab
| Field | Description |
|---|---|
| Google Analytics ID | GA Measurement ID (G-XXXXXXXX) |
| Head Scripts | Custom scripts for <head> |
| Body Scripts | Custom scripts before </body> |
Profile
Your personal information displayed across the site.
Basic Info Tab
| Field | Description |
|---|---|
| Name | Your full name |
| Title | Professional title |
| Tagline | Catchy one-liner |
| Bio | Brief introduction |
| Avatar | Profile photo |
About Tab
| Field | Description |
|---|---|
| About Title | Section heading |
| About Content | Rich text about you |
| About Image | Image for about section |
| Highlights | Key facts (label/value pairs) |
Example highlights:
- "Experience" / "5+ Years"
- "Location" / "San Francisco"
- "Focus" / "Full Stack"
Stats Tab
Add impressive metrics:
| Field | Description |
|---|---|
| Label | Stat description |
| Value | The number/text |
| Icon | Visual icon |
Example stats:
- "Years Experience" / "5+" / Briefcase icon
- "Projects" / "50+" / Code icon
- "Happy Clients" / "30+" / Users icon
Services Tab
Services you offer:
| Field | Description |
|---|---|
| Services Title | Section heading |
| Services Description | Section intro |
| Services | Array of services |
Each service has:
- Title - Service name
- Description - What it includes
- Icon - Visual icon
Resume Tab
| Field | Description |
|---|---|
| Resume File | Upload PDF resume |
| Resume URL | Or link to external resume |
Navigation
Configure the site navigation menu.
Nav Items
Array of menu links:
| Field | Description |
|---|---|
| Label | Menu text |
| URL | Link destination |
| Highlight | Style as button |
| Open in New Tab | External link behavior |
Example configuration:
- Home → /
- Projects → /projects
- About → /#about
- Contact → /#contact (highlighted)CTA Button
| Field | Description |
|---|---|
| Show CTA | Display button in navbar |
| CTA Label | Button text |
| CTA URL | Button destination |
Footer
Configure the site footer.
Link Columns
Organize links into columns:
| Field | Description |
|---|---|
| Title | Column heading |
| Links | Array of links |
Each link has:
- Label - Link text
- URL - Destination
- Open in New Tab - External behavior
Example structure:
Column 1: Navigation
- Home → /
- Projects → /projects
- About → /#about
Column 2: Connect
- GitHub → https://github.com/...
- LinkedIn → https://linkedin.com/...Additional Settings
| Field | Description |
|---|---|
| Show Social Links | Display icons from Site Settings |
| Copyright Text | Footer copyright (use {year} for current year) |
| Bottom Links | Privacy policy, terms, etc. |
Accessing Globals in Code
Server Components
typescript
import { getPayload } from 'payload'
import config from '@payload-config'
export default async function Layout({ children }) {
const payload = await getPayload({ config })
const settings = await payload.findGlobal({
slug: 'site-settings',
})
const navigation = await payload.findGlobal({
slug: 'navigation',
})
return (
<html>
<body>
<Navbar navigation={navigation} settings={settings} />
{children}
<Footer settings={settings} />
</body>
</html>
)
}Using Helper Functions
typescript
import { getSiteSettings, getProfile, getNavigation, getFooter } from '@/lib/payload'
// Fetch multiple globals in parallel
const [settings, profile, navigation, footer] = await Promise.all([
getSiteSettings(),
getProfile(),
getNavigation(),
getFooter(),
])Type Safety
All globals are fully typed:
typescript
import type { SiteSettings, Profile, Navigation, Footer } from '@/payload-types'
function Navbar({ settings }: { settings: SiteSettings }) {
return (
<nav>
<Logo src={settings.logo} text={settings.logoText} />
{/* ... */}
</nav>
)
}