Customization Guide
Learn how to customize SkunkPages blocks to match your brand perfectly.
🎨 Customizing Colors
Every SkunkPages block supports custom colors. You can change colors for backgrounds, text, buttons, and more.
Using the Block Settings
- 1.Select any SkunkPages block in the WordPress editor
- 2.Open the block settings panel on the right side
- 3.Look for the "Colors" or "Style" section
- 4.Click on any color picker to choose your brand colors
Pro Tip: Save Your Brand Colors
Create a color palette in WordPress Theme Settings so you can quickly apply your brand colors across all blocks without re-entering hex codes.
Background Colors
Set background colors for sections, cards, and containers
Text Colors
Customize headline, body text, and link colors
Button Colors
Style primary, secondary, and outline buttons
Border Colors
Adjust border colors for cards and dividers
✍️ Typography Settings
Control fonts, sizes, and text styles to match your brand voice.
Font Families
SkunkPages uses system fonts by default for fast loading, but you can customize:
- •Heading Font: Used for H1, H2, H3 elements
- •Body Font: Used for paragraphs and body text
- •Google Fonts: Import any Google Font via theme settings
Font Sizes
Adjust text sizes using the block typography controls:
Heading Sizes
H1: 48px - 72px
H2: 36px - 48px
H3: 24px - 36px
Body Sizes
Large: 20px - 24px
Regular: 16px - 18px
Small: 14px
Text Styles
- •Font Weight: Light (300), Regular (400), Medium (500), Bold (700), Black (900)
- •Line Height: Adjust spacing between lines for readability
- •Letter Spacing: Fine-tune tracking for headlines
- •Text Transform: Uppercase, lowercase, or capitalize
📐 Spacing & Layout
Control spacing between elements and overall section layout.
Padding
Add space inside blocks and sections:
- • Small: 20px - 40px
- • Medium: 60px - 80px
- • Large: 100px - 120px
Margins
Control space between blocks:
- • None: 0px
- • Small: 20px - 30px
- • Medium: 40px - 60px
- • Large: 80px - 100px
Mobile Spacing
All spacing automatically adjusts for mobile devices. On smaller screens, padding and margins are reduced by 30-50% for better mobile experience.
🖼️ Images & Media
Image Optimization
SkunkPages automatically optimizes images for performance:
- ✓Responsive images - multiple sizes for different devices
- ✓Lazy loading - images load as user scrolls
- ✓Modern formats - WebP support with fallbacks
- ✓CDN ready - works with image CDN plugins
Aspect Ratios
16:9, 4:3, 1:1, or custom ratios
Overlays
Add color overlays to images
Borders & Shadows
Rounded corners and drop shadows
💻 Advanced: Custom CSS
For advanced users, you can add custom CSS to any block:
- 1. Select the block you want to customize
- 2. Open the "Advanced" panel in block settings
- 3. Add a unique CSS class name (e.g., "my-custom-hero")
- 4. Go to Appearance → Customize → Additional CSS
- 5. Write your custom CSS targeting that class
.my-custom-hero {
background: linear-gradient(to right, #E50914, #ff4444);
padding: 120px 0;
}✨ Best Practices
✓ Do This
- • Use 2-3 brand colors consistently
- • Keep fonts to 2 families max
- • Test on mobile devices
- • Use high-quality images
✗ Avoid This
- • Using too many different colors
- • Text that's too small to read
- • Low-contrast text/background
- • Overly large images