Self-initiated demo · not client work
WordPress / Elementor Fix Lab
Відтворена типова дрібна задача: замінити hero-зображення вже наявною формою замовлення та додати адаптивний FAQ. Демо показує поведінку, а окремий plugin artifact — спосіб інтеграції у WordPress.
- Ціль
- 2 точкові правки без редизайну теми
- Стек
- WordPress · Elementor · PHP · CSS · JS
- Дані
- Локальна форма, нічого не відправляє
- Статус
- Self-initiated demonstrator
Live before / after
Дві вимоги ТЗ видно одразу
Доставка здорових раціонів
Менше рішень зранку. Більше енергії протягом дня.
Оберіть калорійність і дату старту — меню привеземо до ваших дверей.
Переглянути менюFAQ
Питання перед першим замовленням
Чи можна замінити hero-зображення формою без перебудови сторінки?
Так. Демо монтує форму в окремий Elementor container і зберігає існуючу текстову колонку, spacing та mobile order.
Що відбувається після відправлення?
Форма проходить клієнтську валідацію, блокує повторний submit і показує inline success. У реальному сайті endpoint підключається окремо.
FAQ доступний із клавіатури?
Так. Використано native details/summary, видимий focus і touch targets не менше 44 px.
Walkthrough · 31 seconds
Короткий огляд перевірених станів
Definition of Done
Правка завершена, коли не ламає існуючу сторінку
- форма замінює тільки media-column першого екрана;
- на 390 px форма йде після заголовка без горизонтального scroll;
- submit має required validation, busy/success state та duplicate guard;
- FAQ керується клавіатурою й має visible focus;
- PHP/CSS/JS підключаються як окремий plugin, а не правляться в core/theme files.
Чесний опис для портфоліо
Що можна сказати замовнику
Self-initiated WordPress/Elementor demo. Реалізував точкову заміну hero media-column на форму та доступний FAQ-блок. У пакеті: PHP shortcodes, Elementor guard, scoped responsive CSS, JS без jQuery. Це демонстрація підходу, не завершений клієнтський проєкт.