Chapter 7: Customizing Your Site Design

Customizing Your Site Design — this is where the magic happens and your site starts looking like a real professional portfolio or service site for a Hyderabad-based web designer. In January 2026 (around 5:25 PM IST as we chat), WordPress is on version 6.9 (with 7.0 beta discussions heating up for later this year), and Full Site Editing (FSE) is mature, stable, and the default way to customize block themes. The block editor (Gutenberg) has come a long way—it’s powerful, fast, and often enough without extra builders.

Think of this chapter like decorating your new apartment: the Site Editor is your toolbox for big structural changes (walls, doors), while blocks are the furniture you arrange. We’ll go deep with steps, tips, and a running example for your freelance site (e.g., webliance.in with services like “Web Design in Hyderabad”, portfolio, contact).

Prerequisite: Use a block/FSE-compatible theme like Astra (with its block mode), Blocksy, or Kadence (all top picks in 2026 for speed + Gutenberg integration). If you imported a starter template earlier, great—it’s already set up for this. If not, activate one now (Appearance → Themes).

Using the Site Editor (Appearance → Editor) for Full Site Editing

The Site Editor is the visual workspace for FSE—edit your entire site (not just pages/posts) without code.

How to access it:

1. Dashboard → Appearance → Editor (or hover over site name in top admin bar → Edit Site).
2. It loads your homepage/template in a full-screen canvas (like a live preview).
3. Top-left: WordPress logo → Click to open navigation: Templates, Template Parts, Patterns, Styles, Navigation (menus).
4. Top-right: Three dots (…) for save, preview, manage all templates.
5. Left sidebar: Shows block inserter (+) or settings when you select something.
6. Bottom toolbar: Undo/redo, list view (great for complex pages).

Why FSE rocks in 2026: Everything is blocks—no PHP templates. Changes are visual and live (what you see is what visitors get). It’s faster than old customizers for many.

Example: Open Site Editor → You’re on your Home template. Click the header area → It highlights as a “Template Part” (reusable block like header/footer). Edit directly!

Customizing Header, Footer, Templates, and Global Styles

These are site-wide elements—change once, applies everywhere.

1. Header & Footer (Template Parts)
   • In Site Editor navigation → Template Parts → Header (or Footer).
   • Click to edit: Drag blocks in/out (e.g., add Site Logo block, Navigation block for menu, Search block).
   • Style: Select block → Right sidebar: Colors, typography, spacing, borders.
   • Example for you: Add your logo (upload via Media if needed) → Add Navigation block → Link to Home, Services, Portfolio, Contact. Style text to bold, color #0073aa (Hyderabad blue vibe). Save → Header updates site-wide.
2. Templates (e.g., Page, Single Post, Archive)
   • Navigation → Templates → Browse list (Home, Page, Single, 404, etc.).
   • Edit one: Click → Canvas loads it.
   • Example: Edit “Page” template → Add Group block for sections → Insert Heading (“Our Services”), Columns block (2-3 columns for service cards), Button (“Get Quote”).
   • Create custom: Templates → Add New → Name “Services Page” → Build from scratch or copy existing.
3. Global Styles (site-wide design rules)
   • Navigation → Styles (paintbrush icon) or top-right Styles button.
   • Tabs: Typography (fonts, sizes), Colors (palette—primary, secondary, accents), Layout (content width), Blocks (default for each block type).
   • Example: Set primary color to teal (#00a896) for buttons/links → Choose Google font like “Inter” for body → Adjust spacing (content width 1200px for desktop). Save → Every button/site text updates instantly.

Pro tip: Use List View (bottom toolbar) to select nested blocks easily. Preview on mobile/desktop icons top-right.

Block Editor Basics (Gutenberg): Adding/Editing Blocks

Gutenberg powers everything in FSE—pages, posts, templates, parts.

Core interface (when editing a page/post or in Site Editor):

• + Inserter (top-left or floating): Search/add blocks (Paragraph, Heading, Image, Button, Columns, Group, etc.).
• Toolbar (above selected block): Move up/down, align, duplicate, more options (…).
• Right sidebar: Block settings (color, spacing, typography, advanced CSS if needed).
• List View: Tree of all blocks—drag to reorder.
• Patterns (Inserter → Patterns): Pre-made sections (hero, testimonials)—insert and tweak.

Step-by-step adding/editing:

1. On a page (Pages → Add New) or in Site Editor template → Click + → Search “Heading” → Type “Welcome to Webliance – Hyderabad Web Design”.
2. Select it → Toolbar: Make H1, center, color.
3. Add Image block below → Upload your photo or stock → Alt text for SEO (“Hyderabad freelance web designer portrait”).
4. Add Columns block → Choose 2 columns → Left: Text block (“Affordable services”), Right: Button (“Contact Now”).
5. Group blocks (select multiple → Group) for sections with background color.
6. Edit: Click block → Sidebar tweaks (padding, shadow, link color).

Example hero section for your home:

• Group block (full-width, background image of Hyderabad skyline).
• Inside: Cover block (overlay text) → Heading “Professional Websites That Grow Your Business”.
• Paragraph + Button “Start Your Project”.
• Style group: Padding top/bottom 100px, dark overlay.

Undo often (Ctrl+Z), save frequently.

Drag-and-Drop Page Builders (Elementor, Gutenberg Patterns, or Native Blocks)

In 2026, you have choices—native is often best for speed/SEO.

1. Native Gutenberg + Patterns (Recommended for most beginners now)
   • Free, built-in, lightweight (faster loads, better Core Web Vitals).
   • Use Patterns (pre-designed reusable sections) → Inserter → Patterns tab.
   • Example: Search “hero” → Insert → Replace text/images.
   • Pros: No extra plugin bloat, future-proof (WordPress pushes this).
   • For your site: Build Services page with native Columns + Query Loop (dynamic posts if blog).
2. Elementor (Classic drag-and-drop if you want more flair)
   • Install free Elementor plugin (Plugins → Add New).
   • Edit page → “Edit with Elementor” button.
   • True WYSIWYG drag-and-drop, 100+ widgets (forms, sliders, popups).
   • Pro (~$59/year) adds theme builder, templates, Woo.
   • Example: Drag Heading widget → Style font/animation → Add Icon Box for services.
   • Vs Gutenberg: Elementor more visual/flexible (animations, popups), but heavier (slower if not optimized). Use if native feels limiting.

2026 verdict for you:

• Start native Gutenberg/FSE — it’s fast, SEO-strong (great for local Hyderabad searches), no extra cost.
• Switch to Elementor if you crave pixel-perfect designs, advanced popups, or pre-made fancy templates.
• Hybrid: Use Gutenberg for templates, Elementor on specific pages.