Cara Customize WordPress Theme Tanpa Coding

Method 1: Dashboard
Appearance → Customize

Method 2: Admin Bar
(When viewing site) Click "Customize" di top

Method 3: Direct URL
yourdomain.com/wp-admin/customize.php

Location: Customizer → Site Identity

What You Can Change:
✅ Site Title
✅ Tagline  
✅ Site Icon (favicon - 512x512px recommended)
✅ Logo (varies by theme, usually 200-400px wide)

Best Practices:
- Logo: PNG dengan transparent background
- Favicon: Simple, recognizable at small size
- Title: Brand name
- Tagline: Brief description (can be hidden)

Location: Customizer → Colors (varies by theme)

Common Color Options:
- Primary Color (links, buttons, accents)
- Secondary Color
- Background Color
- Text Color
- Header Background
- Footer Background

Color Psychology:
🔵 Blue: Trust, professionalism (banks, tech)
🔴 Red: Energy, urgency (food, sales)
🟢 Green: Growth, health (eco, wellness)
🟡 Yellow: Optimism, warmth (children, fun)
🟣 Purple: Luxury, creativity (beauty, art)
⚫ Black: Sophistication (fashion, premium)

Tools:
- Coolors.co (generate palettes)
- Adobe Color (color wheel)
- Canva Color Palette Generator

Tips:
✅ Use 3-5 colors maximum
✅ Ensure good contrast (readability)
✅ Match your brand
✅ Test on mobile devices
✅ Consider color blindness (8% of males)

Location: Customizer → Typography (theme-dependent)

What You Can Change:
- Font Families
- Font Sizes (headings, body)
- Font Weights (light, regular, bold)
- Line Heights (spacing between lines)
- Letter Spacing

Popular Font Combinations:
1. Montserrat (headings) + Open Sans (body)
2. Playfair Display (headings) + Source Sans Pro (body)
3. Raleway (headings) + Lato (body)
4. Roboto Slab (headings) + Roboto (body)

Body Text:
- Size: 16-18px (mobile), 18-21px (desktop)
- Line Height: 1.5-1.7
- Font: Sans-serif untuk readability
- Color: Dark gray (#333) better than pure black

Headings:
- H1: 2-3x body size
- H2: 1.8-2x body size
- H3: 1.5x body size
- Font: Can be decorative, but readable
- Weight: Bold or semi-bold

Paragraphs:
- Max width: 60-75 characters per line
- Spacing: 1.5-2em between paragraphs

Location: Customizer → Header (varies by theme)

Common Options:
- Header Layout (logo left/center/right)
- Header Background Color
- Transparent Header (on/off)
- Sticky Header (follows scroll)
- Header Height
- Top Bar (contact info, social icons)

Header Styles:
1. Classic: Logo left, menu right
2. Centered: Logo center, menu below
3. Vertical: Sidebar layout
4. Overlay: Transparent over hero image

Steps:
1. Customizer → Menus
2. Create New Menu (if needed)
3. Name it: "Main Menu" atau "Primary"
4. Add Items:
   - Pages (select from list)
   - Posts
   - Custom Links
   - Categories
5. Reorder by dragging
6. Assign to location: "Primary Menu"
7. Publish

Location: Customizer → Homepage Settings

Options:
📰 Latest Posts: Blog-style homepage
📄 Static Page: Custom page as homepage

Steps untuk Static Homepage:
1. Create "Home" page (blank atau with content)
2. Create "Blog" page (leave blank)
3. Customizer → Homepage Settings
4. Select "A static page"
5. Homepage: Choose "Home"
6. Posts page: Choose "Blog"
7. Publish

Location: Customizer → Widgets

Common Widget Areas:
- Sidebar (blog posts, pages)
- Footer (3-4 columns usually)
- Header (some themes)
- Below content (call-to-action)

Useful Widgets:
📝 Text: Custom HTML content
🔍 Search: Search box
📂 Categories: Category list
📅 Recent Posts: Latest posts
🏷️ Tags: Tag cloud
📧 Custom HTML: Embed anything
📱 Social Icons: Social links

Sidebar:
✅ Keep to 3-5 widgets
✅ Most important at top
✅ Search widget highly useful
✅ Call-to-action widget converts

Footer:
✅ Column 1: About/contact
✅ Column 2: Quick links
✅ Column 3: Recent posts
✅ Column 4: Newsletter signup

Location: Customizer → Additional CSS

When to Use:
- Small styling tweaks
- Hide specific elements
- Adjust spacing
- Change colors not in settings
- Override theme defaults

/* Change link color */
a {
    color: #0073aa;
}

/* Make buttons rounded */
.button, .btn {
    border-radius: 25px;
}

/* Increase header padding */
.site-header {
    padding: 20px 0;
}

/* Center footer text */
.site-footer {
    text-align: center;
}

/* Hide specific element */
.element-class {
    display: none;
}

/* Add shadow to images */
img {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Adjust sidebar width */
.sidebar {
    width: 300px;
}

Content:
- Paragraph
- Heading  
- List
- Quote
- Image
- Gallery

Layout:
- Columns
- Group
- Spacer
- Separator

Widgets:
- Search
- Categories
- Latest Posts
- Social Icons

1. Plugins → Add New
2. Search "Elementor"
3. Install & Activate
4. Create new page
5. Click "Edit with Elementor"

1. Drag widget to canvas
2. Customize content (right panel)
3. Style it (Style tab)
4. Adjust spacing (Advanced tab)
5. Preview on mobile/tablet
6. Publish when ready

Use Templates:
1. Click folder icon (top left)
2. Browse library
3. Insert pre-made blocks/pages
4. Customize to your needs
5. Save as your own template

Built-in Features:
✅ Drag & drop header builder
✅ Drag & drop footer builder
✅ Multiple header/footer layouts
✅ Conditional display rules
✅ Mobile-specific designs

Customization:
1. Customizer → Header → Header Builder
2. Drag elements to rows
3. Customize each element
4. Publish

1. Clear browser cache (Ctrl+Shift+Delete)
2. Clear WordPress cache (if using plugin)
3. Disable caching plugin temporarily
4. Check browser console untuk errors
5. Try different browser
6. Disable plugins one by one

1. Test theme responsiveness
2. Remove custom CSS temporarily
3. Optimize/resize images
4. Use mobile preview in Customizer
5. Test dengan Chrome DevTools device emulation

1. Check if widget area exists (Customizer → Widgets)
2. Verify theme supports feature
3. Clear cache
4. Try different widget
5. Check theme documentation

1. Use Google Fonts (widely supported)
2. Check browser console untuk errors
3. Ensure HTTPS throughout site
4. Try different font
5. Clear cache