Approach 3

ACF Page Template

A WordPress page template powered by Advanced Custom Fields (ACF) — all content is editable from the WordPress admin with a structured, tabbed interface.

Overview

This approach uses a custom PHP page template combined with an ACF field group. The template reads all content from ACF fields, making the entire homepage editable without touching code. It requires ACF PRO for repeater field support.

template-zeki-homepage.php

The PHP page template file — goes into your active theme folder. Contains all section HTML, inline CSS, and JavaScript (counter animations, testimonial slider).

acf-field-group-homepage.json

Importable ACF field group with 7 tabbed sections and repeater fields for dynamic content.

INSTALLATION.md

Step-by-step installation guide.

Prerequisites

Installation Steps

Step 1 — Upload the Page Template

Copy template-zeki-homepage.php to your active theme folder:

/wp-content/themes/hello-elementor/template-zeki-homepage.php

Step 2 — Import ACF Field Group

  1. Go to WordPress Admin → ACF → Field Groups
  2. Click “Import” at the top of the page
  3. Select acf-field-group-homepage.json
  4. Click Import

Step 3 — Create the Page

  1. Go to Pages → Add New
  2. Title: “Home” (or your preferred name)
  3. In the Page Attributes panel (right sidebar), select “Zeki Homepage (ACF)” as the template
  4. Fill in all the ACF fields that appear below the editor
  5. Publish

Step 4 — Set as Homepage (Optional)

  1. Go to Settings → Reading
  2. Select “A static page”
  3. Set Homepage to the page you just created
  4. Save

ACF Field Structure

Tab Fields
Hero Section Heading, Description, Button Text, Button URL, Hero Image
Services Section Heading + Repeater (Icon, Title, Description, Link)
How We Work Section Heading + Repeater (Image, Title, Description)
Stats Section Heading + Repeater (Number, Suffix, Label)
Skills Section Heading + Repeater (Icon, Name, CTA Text, Link)
Testimonials Subtitle, Heading + Repeater (Text, Company, Author)
Contact Section Heading, Box Heading, Description, Form Shortcode

Contact Form Integration

The template supports any form plugin via shortcode. In the ACF “Contact Form Shortcode” field, paste:

Note: The template files are available in the workspace at /workspace/zeki-page-templates/approach-3-acf/. Features include: responsive design, counter animations, testimonial slider with navigation, Google Fonts (Poppins + Lato), and full WordPress escaping for security.

Template Sections

  1. Hero — Full-width banner with heading, description, CTA button, and hero image
  2. Services — Grid of service cards (up to 12) with icons
  3. How We Work — Step-by-step process cards (up to 6) with images
  4. Stats — Animated counter section with number + suffix + label
  5. Skills — Technology/skill cards grid (up to 20) with icons
  6. Testimonials — Sliding testimonial carousel with navigation
  7. Contact — Contact section with form shortcode support or fallback form