gplpal2025/10/19 00:20

Amoor WordPress Theme: My Real Agency Build Notes

Why I Rebuilt Our Agency Site on Amoor



We outgrew our previous portfolio theme the moment our case studies shifted from single images to multi-step narratives—strategy, prototypes, shipped assets, and measurable outcomes. I needed a baseline that felt editorial without being slow, could present work in a way clients actually read, and let us tweak layouts without refactoring every week. The demo structure of the
Amoor WordPress Theme
matched how my team sells: a confident hero, focused services, flexible case modules, and a contact path that stays visible on phones. It’s GPL-licensed, so I can standardize this stack across client microsites while keeping updates predictable and light.

The Problem I Had to Solve (Constraints > Vibes)



Prospects skim our site on mobile first. The first 10 seconds decide whether they browse work, scan services, or bounce. We needed: (1) a homepage that explains the offer in one sentence; (2) a portfolio grid that doesn’t collapse into identical tiles; (3) case pages that handle long copy, embedded media, and metric callouts without feeling like a slide deck; (4) a contact flow that’s shorter than an RFP but richer than “email us”; (5) performance that holds on budget Android devices. Amoor gave me opinionated blocks—hero, process, stats, testimonials, CTA strips—and a calm typographic rhythm that didn’t fight my content.

Installation & First-Run Setup (My Repeatable Recipe)




  1. Clean base. Fresh WordPress, standard hardening, staging subdomain. Theme upload, license config, child theme activated for small template and CSS overrides.


  2. Minimal demo import. I pulled only the essentials: homepage, services, portfolio grid, single case, about, contact. Avoided multi-variant demos and sliders to keep the database lean.


  3. Permalinks & routes. Reserved /work/, /services/, /about/, /contact/, and /notes/ for thought pieces. This IA mirrors how buyers evaluate agencies: proof → capability → people → start.


  4. Global styles. Content width ~1200–1280px, base font 17–18px, line height ~1.6, one brand accent, one neutral, and a gray ramp with 3–4 steps. Amoor’s spacing scale stays predictable when you reorder blocks.


  5. Header decisions. One primary CTA (“Start a project”), one secondary path (“Work”). On mobile, the CTA becomes a compact pill that remains in view without crowding the menu.


  6. Footer essentials. Office city, compact about text, primary email, and a three-link cluster (Work, Services, Contact). Nothing that competes with the CTA.

Homepage Strategy: One Screen to Earn the Second



The first screen carries most of the weight. I kept it to a single sentence value proposition (“We design, test, and ship conversion-focused experiences for SaaS and DTC”), one CTA, and a sub-row with three proof points (shipped launches, measurable lifts, average timeline). Below that: a three-card services band (Brand, Product, Growth), a curated three-piece work sampler, a testimonial strip with two short quotes, and a CTA strip. Amoor’s blocks snap into this rhythm easily—no custom hacks, no animation debt. The hero stays static for LCP stability, and the first visual below the fold is work, not decoration.

Portfolio Grid: From “Pretty Pictures” to Readable Proof



A grid is only as good as its cards. I standardized on: company name, outcome metric (“+31% trial starts”), and an intent-driven tag (Onboarding, Pricing, Mobile Checkout). Amoor’s hover behaviors are subtle; I disabled parallax and kept transitions to a minimal fade to avoid jank on mid-tier phones. For variety, I staggered card sizes (1×1, 2×1) but enforced consistent headline length to keep the grid tidy. Clients scan diagonally; cards should reward that habit with a real signal—the outcome—before they click.

Case Study Template: The Sections That Buyers Actually Read



Amoor’s single project layout handles editorial-length content gracefully. I trimmed it to a repeatable spine:




  • Context. Company, market, constraint. One short paragraph.


  • Objective. A measurable target (“reduce drop-off on step two by 20%”).


  • Approach. Research, prototypes, test plan, handoff cadence. Bulleted for fast scanning.


  • Screens. Three images with descriptive alt text and numbered captions. No carousels.


  • Outcome. Metrics in a two-column stat band; add confidence intervals when meaningful.


  • Stack & Team. Tools and roles (PM, UX, UI, Eng liaison). Keep it concise.


  • CTA strip. “Want results like this?” with a short lead-in to contact.



The win is restraint. Amoor’s typography keeps long copy readable; images sit in generous gutters; pull quotes can break up vertical rhythm without causing layout shift. I capped image widths to prevent reflow and set explicit sizes for every media block.

Services Pages: Outcome-First, Not Jargon-First



I rejected the usual “Brand • Web • App” boilerplate and wrote each service as a promise with proof:




  • Brand Systems. Logos, tokens, docs. Deliverables: starter design system, usage rules, component library. “Why it matters” framed in developer velocity and consistency.


  • Product & UX. Onboarding, pricing, trial flows. Deliverables spelled with verbs: map, test, ship, iterate.


  • Growth Design. Landing pages, CRM touchpoints, activation nudges. Outcome lenses and time boxes (“two-week sprint”).



Amoor’s icon/text blocks are easy to reorder; I kept copy verb-led and sparse. Each page closes with a single FAQ strip and a CTA. No detours.

Contact Flow: Friction-Light, Signal-Rich



The form is two-step: contact basics first (name, email, company, website), then scope (goal, timeline, budget range, must-haves). I used helper text with examples (“e.g., improve onboarding completion by 20% in Q4”) and made budget a range selector to filter mismatches politely. Amoor’s form styles are legible at small sizes, and error states are visible without shouting. I pinned a compact “Start a project” button in the header on mobile to keep the path obvious.

Performance Tuning: The Six Changes That Moved the Needle




  1. Static hero. Single image ~1600px, target ≤200KB. No motion, no video banners.


  2. Explicit dimensions. Width/height attributes on every image to banish CLS.


  3. Fonts. Preload one WOFF2 for display headings; system UI for everything else.


  4. Lazy-loading. Native lazy on below-the-fold media and portfolio grids.


  5. Animation discipline. Disabled scroll-triggered animations on mobile; subtle fades only when necessary.


  6. Caching. Full-page cache for public routes; bypass on form submissions and previews.



On a throttled 4G device, LCP stabilized once the hero stopped being a cinematic idea and became a disciplined JPG. CLS flattened after dimensioning every image—especially portfolio thumbnails. Perceived speed is the credibility layer you can’t fake.

Accessibility & Mobile Hygiene (Because Clients Judge Quietly)



  • Tap targets ≥44px, real focus outlines, and AA contrast on CTAs.

  • Descriptive alt text for work images (what changed, not “screenshot”).

  • Form labels are explicit; placeholders do not replace labels.

  • Keyboard navigation works across menu, grid, and case pages.



Amoor’s defaults are close; the rest is editorial discipline—naming, alt text, and ruthless pruning of decorative noise.

Editorial System: Writing That Scales With the Site



Amoor’s “Notes” or “Journal” templates let me publish short, high-signal pieces: teardown of an onboarding flow, a pattern study on pricing tables, or an experiment recap. Each post ends with a quiet CTA and a “Related Work” pair, not a carnival of widgets. I keep posts under 800 words, verbs up front, and a single diagram if it clarifies the point. This keeps the content engine sustainable rather than a graveyard of good intentions.

Comparisons: Why Not a Multipurpose Giant or a Bare Starter?




  • Multipurpose giants: You’ll prune for days, carry animation and CSS weight, and still coerce the layout into something that reads like an editorial site.


  • Bare starters: Ultimate control, but you’ll rebuild portfolio grids, case templates, and testimonial rhythm one more time instead of shipping work.


  • Amoor: A calm, editorial baseline with sensible blocks for agencies. Enough knobs to personalize, none of the theme-park flourishes you’ll regret.

Where Amoor Fits—and Where It Doesn’t



Amoor shines for boutiques and mid-size studios where the site must read like a magazine and convert like a landing page. It handles service storytelling and case depth without breaking. If you need heavy gated content, memberships, or a course stack on day one, you’ll integrate specialized plugins; Amoor is a presentation theme with strong portfolio DNA, not a full membership system. If your team relies on choreographed scroll effects as a brand signature, you’ll either simplify that idea or carry a performance tax—my advice is to let the work be the motion and use stillness as a design choice.

SEO & IA: Signals That Actually Move Rankings




  • Heading hygiene. One H1; H2s for Work, Services, About, Process, FAQs.


  • Case metadata. Industry tags, outcome metrics in the excerpt, and consistent slugs (/work/client-name-outcome).


  • Work hubs. Curated pages like “SaaS Onboarding” or “DTC PDP Redesign” with 100–150 words of intro copy and selected cases.


  • FAQ stubs. On services, short answers to pricing, process, timelines, and collaboration cadence.


  • Internal links. From Notes to Work and Services with intent-driven anchors.



When I want to sanity-check header density and fold composition across ready-to-customize options, I skim a reference board on
Best WordPress Themes
to pressure-test the first screen. Clean scans beat clever layouts.

Content Patterns Clients Actually Believe




  • Process band. Four steps, verbs first (Map → Prototype → Validate → Ship). Each step earns one sentence, not a novella.


  • Stats band. Choose two numbers you can defend; resist vanity metrics. Add a short “how measured” tooltip in the case body, not on the homepage.


  • Testimonial strip. Two quotes, with titles that imply accountability (Head of Growth, Product Lead). Rotators reduce credibility; stillness reads as confidence.

Design System in Amoor (Tokens Over Pixels)



I created a tiny token set—spacing (4, 8, 12, 16…), color roles (brand, neutral, subtle), typography roles (display, lead, body, meta). Amoor respects these decisions across blocks, which means swapping a type scale is surgical instead of dramatic. The benefit shows up when case pages lengthen: docks of white space hold; captions stay a beat lighter than body copy; lists breathe.

Team & Culture Pages Without the Cringe



The “About” page uses a lead paragraph, a compact values grid (each value defined in one verb-led sentence), and a “Ways We Collaborate” band that sets expectations (weekly demo, async feedback, shared Figma). Photos are candid, not staged—Amoor’s image blocks do not demand full-bleed drama to look good. A small “Open Roles” section links to an email-first interest capture. We hired faster when we showed our working style rather than office snacks.

Contact Page: Clarity Beats Cleverness



Location, core hours, a short note on time zones, and the same two-step form used in the header CTA. I added a “What to expect next” list (reply within a business day, quick call, proposal outline). Amoor’s layout keeps noise out; the page feels like a handshake, not a brochure.

Real Pitfalls & How I Avoided Them With Amoor




  • Carousel heroes. They bury the proposition and dent LCP. I shipped a static hero.


  • Wall-of-work grids. I curated nine pieces and rotated quarterly. Fewer, better, clearer.


  • Paragraphs as confetti. Long-form cases needed real subheads and numbered captions. Amoor rewarded discipline.


  • Over-branding CTAs. One color for action, everything else steps back.

My Build Checklist (Copy & Adapt)



  • Homepage: one-sentence promise, CTA, three proof points, three work cards, testimonial pair, CTA strip.

  • Work grid: outcome-first titles, consistent alt text, staggered sizes with disciplined headlines.

  • Case template: Context → Objective → Approach → Screens (3) → Outcome → Stack/Team → CTA.

  • Services: outcome-first copy, two FAQs, a single CTA per page.

  • Contact: two-step form, examples in helper text, “what happens next” list.

  • Speed: static hero, explicit image sizes, one font preload, native lazy, no scroll FX on mobile.

  • Accessibility: contrast, focus states, 44px tap targets, labels over placeholders.

The Long Paragraph You Only Learn After Launch



The first week live, our traffic didn’t surge—our clarity did. Leads referenced specific outcomes from cards, not vague “we like your vibe.” The cases with numbered captions outperformed the glossy collage because numbers turn images into explanations. The two-step contact flow stopped apology emails (“Sorry, that form was long”) and started useful conversations (“Here’s our activation drop-off; can you fix it in a month?”). The single accent color made the CTAs feel inevitable rather than loud. We removed two animations no one missed and reclaimed 200ms we’ll never brag about but everyone felt. Amoor didn’t make our work better; it stopped getting in the way of people noticing we do it well.

Maintenance Without Drama



  • Rotate featured work quarterly; retire weak pieces. Depth beats breadth.

  • Write one “Notes” post per month; prune ruthlessly.

  • Audit alt text and captions during each rotation.

  • Keep the hero static; change copy, not effects.

  • Backups and staging updates weekly; child theme holds overrides.

Short FAQ (Things Buyers Actually Ask)


How fast can we start?


Discovery in a few days, a first prototype inside two weeks for focused scopes.


Do you work with in-house teams?


Yes. We slot into your rituals and tools; weekly demos keep everyone honest.


Can you handle development?


We pair with your engineers or bring our own collaborators; the deliverable is running code, not just decks.


What if I only need a landing page?


We run a two-week sprint with a clear goal, A/B plan, and a tidy handoff.

Selection Advice (When Amoor Is the Right Call)



Choose Amoor if you want an editorial-feeling agency site that ships quickly, reads clearly, and keeps performance in the green. It gives you the right blocks to tell real stories and the restraint to avoid theme-park decisions you’ll undo later. Don’t choose it if your first priority is a membership portal or a complex gated library—solve those with dedicated tools and let Amoor excel at presentation, portfolio, and lead capture.

Where I Compare Baselines Before Finalizing a Layout



When I’m pressure-testing header density, fold height, and card rhythm, I keep a small reference board of layouts on
Best WordPress Themes
to sense-check the first screen. Clean, readable, and fast beats clever nine times out of ten. For licenses and a consistent theme stack across client sites, I source from
gplpal
so I can update safely and keep costs predictable without changing how we write or ship.

回答

まだコメントがありません

回答する

新規登録してログインすると質問にコメントがつけられます