Демонстрація наживо — під WordPress-завдання: верстка за Figma, ACF-картки, легка адмінка

Сторінка на WordPress за вашим макетом Figma — з картками, які клієнт редагує сам

Нижче — жива, реально адаптивна верстка (не картинка): секція з картками, зібрана так, як вона виглядала б на вашому сайті. Дизайн переносимо з Figma до пікселя, наявні блоки (хедер, футер, стилі) не дублюємо, а нові картки — локації, послуги, кейси — клієнт додає й редагує сам через адмінку, без звернення до розробника щоразу.

Як це виглядає на екрані

🏢

Локація «Центр»

вул. Хрещатик, 22, Київ

Пн–Пт 9:00–18:00

🏭

Локація «Промзона»

вул. Індустріальна, 5, Львів

Пн–Сб 8:00–20:00

🏗️

Локація «Схід»

просп. Науки, 41, Харків

Пн–Пт 9:00–17:00

Це не скриншот: змініть ширину вікна браузера (або відкрийте з телефону) — сітка сама перебудується з 3 колонок у 2, потім в 1, так само, як буде на вашому сайті.

Так додається нова картка — без розробника

Ілюстрація типової форми полів (ACF / Elementor) Локації → Додати нову

Назва

Локація «Південь»

Адреса

вул. Пастера, 12, Одеса

Графік роботи

Пн–Пт 9:00–18:00

Фото

[ обрати файл… ]

Поля пов'язані з версткою вище напряму: заповнили форму — картка з'явилась на сторінці в тому ж вигляді, тексти, фото й порядок редагує клієнт сам, код ніхто не чіпає.

Структура полів під картку

Приклад групи полів для одного типу картки (легко повторити під послуги, команду, кейси)

Поле	Тип	Де використовується
Назва	Текст	Заголовок картки
Адреса	Текст	Підпис під заголовком
Графік роботи	Текст	Тег під описом
Фото	Зображення	Верхня частина картки
Порядок показу	Число	Сортування карток на сторінці

Як це виглядатиме на вашому завданні

Ваш макет Figma — до пікселя: тут для прикладу картки локацій, для вашого завдання — точна верстка десктоп/планшет/мобільний саме з вашого файлу Figma.
Наявні блоки не чіпаємо: хедер, футер і вже готові секції переюзаються, нові дублі не створюються — додається лише те, чого не вистачає.
Перевірка в реальних браузерах: Chrome, Safari, Firefox, на desktop/tablet/mobile, перед здачею.
Під ваш стек — ACF або Elementor: якщо сайт вже на Elementor, працюємо всередині нього й лишаємо можливість редагувати тексти/фото самостійно, без потреби лізти в код.
Легко масштабується: та сама схема годиться під кілька сторінок і напрямків одразу — новий тип картки чи нову сторінку додаємо за тим самим принципом, без переробки з нуля.
Передача роботи: код на проді, коротка інструкція для адмінки та тестовий прогін наживо перед здачею.

Потрібно зробити це під ваш макет і ваш сайт?

Надішліть макет Figma (або посилання на наявний сайт) і перелік того, що має редагуватись самостійно, — і ця сама схема буде зібрана під ваші блоки й контент замість прикладу вище.

guardlabs.online