Customization

Learn how to customize SkunkPages blocks to match your brand and design requirements.

Block Customization

Every SkunkPages block includes built-in customization options accessible from the block toolbar and sidebar.

The block toolbar appears when you select a block:

Alignment - Change text or block alignment
Bold/Italic - Format text
Link - Add hyperlinks
More Options - Additional settings menu

Using the Block Sidebar

The sidebar provides detailed customization options:

Click on a block to select it
Look for the settings panel on the right
Explore available tabs and options

Color Customization

Background Colors

Change block background colors:

Select the block
Go to Block Settings → Color
Choose from preset colors or enter custom hex codes
Enable gradients for advanced effects

Text Colors

Customize text appearance:

Heading Color - Color for h1, h2, h3 tags
Body Text - Paragraph text color
Link Color - Hyperlink colors
Accent Color - Highlights and emphasis

Button Colors

Style call-to-action buttons:

Background - Button fill color
Text Color - Button text
Hover Background - Color on mouse over
Hover Text - Text color on hover
Border - Button outline color

Typography

Font Families

Change fonts for any block:

Select text or block
Block Settings → Typography
Choose from available fonts:
- System fonts (fast loading)
- Google Fonts (more variety)
- Custom fonts (upload your own)

Font Sizing

Adjust text sizes:

Heading Sizes - H1, H2, H3, H4, H5, H6
Body Text - Paragraph font size
Button Text - CTA button size
Mobile Overrides - Different sizes for mobile

Font Weight

Control text thickness:

Light (300)
Regular (400)
Medium (500)
Semi-Bold (600)
Bold (700)
Extra Bold (800)
Black (900)

Line Height & Spacing

Fine-tune readability:

Line Height - Space between lines (1.2 - 2.0)
Letter Spacing - Space between characters
Word Spacing - Space between words

Spacing & Layout

Padding

Add space inside blocks:

Top Padding - Space above content
Bottom Padding - Space below content
Left Padding - Space on left side
Right Padding - Space on right side
Uniform Padding - Same on all sides

Margin

Add space around blocks:

Top Margin - Space above block
Bottom Margin - Space below block
Negative Margins - Pull blocks closer or overlap

Content Width

Control block width:

Full Width - Edge to edge
Wide Width - Slightly contained
Contained - Centered with max-width
Custom Width - Specify exact pixels

Images & Media

Image Settings

Optimize and style images:

Upload - Add new images
Alt Text - Accessibility description
Image Size - Thumbnail, medium, large, full
Focal Point - Control image crop position
Border Radius - Rounded corners
Shadow - Drop shadow effects

Background Images

Use images as block backgrounds:

Select block
Block Settings → Background
Upload or choose image
Set Background Size:
- Cover - Fill entire block
- Contain - Fit within block
- Custom - Specific dimensions
Set Background Position:
- Center, top, bottom, left, right
Enable Parallax for scroll effect

Image Overlays

Add overlays to images:

Gradient Overlay - Semi-transparent gradient
Color Overlay - Solid color with opacity
Pattern Overlay - Repeating patterns

Animation & Effects

Entrance Animations

Animate blocks as they scroll into view:

Select block
Block Settings → Animation
Choose animation:
- Fade In
- Slide Up
- Slide Down
- Slide Left
- Slide Right
- Zoom In
- Bounce
Set Animation Delay
Set Animation Duration

Hover Effects

Add interactivity:

Scale - Grow/shrink on hover
Shadow - Add/increase shadow
Brightness - Lighten or darken
Rotate - Slight rotation
Translate - Move up/down

Advanced Customization

Custom CSS Classes

Add your own CSS classes:

Select block
Block Settings → Advanced
Enter class name in Additional CSS Class(es)
Style in Appearance → Customize → Additional CSS

Example:

.my-custom-hero {
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  min-height: 600px;
}

Anchor IDs

Create jump links:

Select block
Block Settings → Advanced
Enter HTML Anchor (e.g., pricing)
Link to it with #pricing

Visibility Controls

Show/hide blocks based on conditions:

Hide on Desktop - Only show on mobile
Hide on Mobile - Only show on desktop
Hide on Tablet - Hide on tablet devices
Logged In Users - Show only to logged in users
User Roles - Restrict by user role

Global Styles

Set default styles for all blocks:

Go to Appearance → SkunkPages Settings
Configure global defaults:
- Default colors
- Default fonts
- Default spacing
- Button styles

Changes apply to all new blocks (existing blocks unchanged).

Design Presets

SkunkPages includes design presets:

Light Mode

White backgrounds
Dark text
Subtle shadows
Clean aesthetic

Dark Mode

Dark backgrounds
Light text
Glowing accents
Modern look

Bold Mode

High contrast
Vibrant colors
Large typography
Eye-catching

Minimal Mode

Lots of white space
Simple layouts
Subtle colors
Elegant

Best Practices

Performance

Optimize images before upload (compress, resize)
Limit animations to key sections
Use system fonts when possible
Enable lazy loading for images

Accessibility

Maintain sufficient color contrast (WCAG AA: 4.5:1)
Add alt text to all images
Use semantic heading hierarchy
Ensure keyboard navigation works

Mobile Optimization

Test on actual devices
Use mobile-specific overrides
Stack columns on small screens
Increase button sizes for touch
Reduce padding on mobile

Brand Consistency

Define a color palette (3-5 colors)
Choose 2-3 fonts maximum
Maintain consistent spacing
Use the same button styles
Create reusable blocks

Troubleshooting

Changes Not Showing

Clear browser cache
Clear WordPress cache
Hard refresh (Ctrl+Shift+R)
Check if block is cached

Custom CSS Not Working

Verify CSS syntax
Check class name spelling
Use !important if needed
Clear all caches

Mobile Styles Not Applied

Check responsive breakpoints
Test on actual device
Use Chrome DevTools device mode
Verify mobile overrides

Next Steps

Block Reference - All available blocks
Examples - Design inspiration
Troubleshooting - Common issues