1075 lines
49 KiB
Markdown
1075 lines
49 KiB
Markdown
# Перенос UI-kit в WordPress + Elementor
|
||
|
||
Документ описывает безопасный перенос дизайн-системы и всех макетов DP Trade UI-kit на WordPress с Elementor. Цель: внедрить дизайн-систему поэтапно, не ломая существующие страницы, Header, Footer и WooCommerce, если он используется.
|
||
|
||
Документ построен в три слоя:
|
||
|
||
1. **Аудит исходников** — какие страницы, компоненты и паттерны есть в макете и что из этого дорого/опасно переносить на Elementor.
|
||
2. **Декомпозиция работ** — список Elementor-элементов (Global Styles, CSS-слой, глобальные шаблоны, страницы) с оценкой сложности и зависимостями.
|
||
3. **Пошаговый план** — 6 этапов с QA и планом отката.
|
||
|
||
> Основной источник дизайна: `index.html`, `catalog.html`, `product.html`, `bottle-cards.html`, `about.html`, `contacts.html`, `contacts-auth.html`, `news-villa-raiano.html`, `news-villa-raiano-v2.html`, `article-guidelines.html`, `ui-kit.html` плюс `css/tokens.css`, `css/site.css`, `css/ui-kit.css`.
|
||
|
||
---
|
||
|
||
## 1. Базовый принцип
|
||
|
||
Не заменяйте существующие настройки Elementor сразу. Сначала добавляйте новые токены рядом со старыми, собирайте тестовую страницу, проверяйте визуально, и только потом переводите реальные шаблоны и страницы на новые значения.
|
||
|
||
Рекомендуемый порядок:
|
||
|
||
1. Backup сайта и базы данных.
|
||
2. Работа на staging-копии или на новой странице.
|
||
3. Новые Global Colors с префиксом `DP`.
|
||
4. Новые Global Fonts с префиксом `DP`.
|
||
5. Тонкий базовый CSS-слой с переменными `--dp-*` и утилитарными классами `dp-*`.
|
||
6. Базовые компоненты: кнопки, поля, карточки, теги, хедер/футер (draft-копии).
|
||
7. Страница `UI Kit Preview` как живая витрина.
|
||
8. Проверка desktop / tablet / mobile.
|
||
9. Поэтапная замена Header, Footer, catalog, product, news, about, contacts.
|
||
|
||
---
|
||
|
||
## 2. Аудит: что в макете и чего в нём нет
|
||
|
||
### 2.1 Карта страниц
|
||
|
||
| Страница | Что демонстрирует | Шаблон Elementor |
|
||
|---|---|---|
|
||
| `index.html` | Hero, mega-menu, блок «Производители», блок «Новости», блок «Рекомендации» | Home Template (Single Page) |
|
||
| `catalog.html` | Toolbar, sort select, list-карточки, sidebar-фильтры | Archive Template (WooCommerce или CPT `product`) |
|
||
| `product.html` | Галерея + карточка товара, meta-list (4 пары label/value), CTA | Single Product Template |
|
||
| `bottle-cards.html` | Все варианты карточки бутылки (grid, mix, compact, horizontal, по регионам) | Showcase внутри UI Kit Preview |
|
||
| `about.html` | Page hero, 2-col layout (article + feature grid), карточки с номерами | Page Template «About» |
|
||
| `contacts.html` | Page hero, контактная форма, info-panel | Page Template «Contacts» |
|
||
| `contacts-auth.html` | То же с авторизацией/аккаунтом | Page Template «Account» или `My Account` endpoint |
|
||
| `news-villa-raiano.html`, `news-villa-raiano-v2.html` | Editorial hero, тело статьи, две редакционные верстки | Single Post Template (2 варианта) |
|
||
| `article-guidelines.html` | Редакционные правила, структурный контент | Single Post / CPT `guideline` |
|
||
| `ui-kit.html` | Живая витрина с sidebar-навигацией и превью компонентов | Не копировать в production, это витрина для дизайнеров и QA |
|
||
|
||
### 2.2 Карта компонентов
|
||
|
||
Сложность указана относительно «чистого» Elementor без hand-coded HTML виджетов.
|
||
|
||
| Компонент | Ключевые селекторы | Где встречается | Сложность |
|
||
|---|---|---|---|
|
||
| Primary / Secondary / Small button | `.button`, `.button--primary`, `.button--secondary`, `.button--sm` | везде | Лёгко |
|
||
| Input, search bar, catalog sort | `.input`, `.search-bar`, `.catalog-sort` | header, catalog | Средне |
|
||
| Tag / Chip / Status | `.tag`, `.tag--filled`, `.tag--outline`, gold-вариант | каталог, карточки | Лёгко |
|
||
| Primary hero (home) | `.hero`, `.hero-copy`, `.hero-actions` | `index.html` | Сложно |
|
||
| Page hero (about / contacts / guidelines / news) | `.page-hero`, `.page-hero--about`, `.page-hero--contacts`, `.page-hero--guidelines`, `.page-hero__inner`, `.page-hero__meta` | 5 страниц | Средне |
|
||
| Mega menu | `.mega-menu`, `.menu-grid`, `.menu-column`, `.visual-column`, `.appellations`, `.appellation-group`, `.country-link` | header | **Сложно** |
|
||
| Header sticky + blur | `.site-header`, `position: sticky`, `backdrop-filter: blur(18px)` | все страницы | Средне |
|
||
| Producer card | `.producer-card` | home | Лёгко |
|
||
| News card (3 варианта фоновых изображений) | `.news-card`, `.news-card__image` | home | Лёгко |
|
||
| Product card grid | `.product-card`, `.product-media`, `.product-photo`, `.product-footer` | home, catalog, product | Средне |
|
||
| Product card list | `.product-card--list` (3 колонки: image / info / actions) | catalog | Сложно |
|
||
| Product card compact list | `.product-card--list-compact` | ui-kit | Средне |
|
||
| Product card B2B | `.product-card--list-b2b`, `.product-params` | ui-kit | Сложно |
|
||
| Bottle card + 5 вариантов | `.bottle-card`, `.bottle-card--tuscany/--mosel/--clean/--compact/--horizontal`, `.bottle-card__media`, `.bottle-card__photo` | bottle-cards | Средне |
|
||
| CSS-бутылка (два `::before`/`::after`) | `.bottle`, `.bottle::before` (пробка), `.bottle::after` (этикетка) | ui-kit, catalog showcase | **Сложно** (требует HTML-виджет) |
|
||
| Section heading (split) | `.section-heading`, `.section-heading--split` | все секции | Лёгко |
|
||
| Feature card с номером | `.feature-card` + `<span>01..04</span>` | about | Лёгко |
|
||
| Info card / contact panel / contact form | `.info-card`, `.contact-panel`, `.contact-form` | about, contacts | Лёгко |
|
||
| Meta list (4 пары label/value) | `.meta-list`, `.meta-list div`, `.meta-list span` | product | Лёгко |
|
||
| Article body (editorial) | `.article-body`, `.article-body .lead`, `.article-body h2/h3/p/ul` | news, guidelines | Средне |
|
||
| Footer | `.site-footer`, `.footer-container`, `.footer-main`, `.footer-brand-block`, `.nav-group`, `.contacts-card`, `.social-links` | все страницы | Лёгко |
|
||
| Breadcrumbs | отсутствуют в макете | — | нужно добавить отдельно |
|
||
| Pagination | отсутствует в макете | — | нужно добавить отдельно |
|
||
|
||
### 2.3 Проблемные места для Elementor
|
||
|
||
Ниже — паттерны, которые **нельзя** просто перетащить в стандартные виджеты. Каждый пункт требует либо custom CSS-класса, либо HTML-виджета, либо отдельного Elementor-шаблона.
|
||
|
||
1. **Mega menu с 4-колоночным асимметричным гридом и мостом-ховером.**
|
||
`css/site.css:242-369`. Grid `1.05fr 0.82fr 1.25fr 0.88fr`, вложенная секция `.appellations` на 2 колонки, позиционирование `position: absolute; transform: translateX(-50%); width: min(var(--container), calc(100vw - 40px))`, ховер-мост через `::after` высотой 34px, `backdrop-filter: blur(18px)`. Стандартный Elementor Nav Menu/Mega Menu такое не даёт. Решение: **custom HTML виджет** + CSS-классы `dp-megamenu-*` либо Crocoblock JetMenu.
|
||
2. **Sticky header с backdrop-filter blur.**
|
||
`.site-header { position: sticky; top: 0; backdrop-filter: blur(18px); background: rgba(248, 250, 252, 0.94); }`. В Elementor Pro есть `Effects → Sticky`, но blur и alpha-фон задаются только CSS.
|
||
3. **CSS-бутылка на `::before`/`::after`.**
|
||
`.bottle { width: 54px; height: 152px; ... }`, плюс псевдо-пробка и этикетка. Elementor виджет Image такого не даст — нужен HTML-виджет с фиксированной разметкой `<div class="dp-bottle"></div>`.
|
||
4. **Псевдоэлементы как структурная часть карточек.**
|
||
`.type-card.is-selected::before` (бейдж), градиентные fond-блоки `.bottle-card__media` с разными заливками под `--tuscany/--mosel/--clean/--compact`. Решение: пять CSS-классов-модификаторов, в Elementor подключать через поле `CSS Classes`.
|
||
5. **CSS Grid с асимметричными колонками.**
|
||
Примеры: `.page-hero__inner` (`0.72fr / 0.28fr`), `.article-layout` (`0.68fr / 0.32fr`), `.about-grid` (`0.58fr / 0.42fr`), `.product-card--list` (`210px / 1fr / 220px`), `.footer-main` (`210px / 1fr / 250px`), `.meta-list` (в product — de-facto 2 колонки). Elementor Container с `display: flex` справится только с простыми кейсами. Для сложных — либо Container c `CSS display: grid` через custom CSS, либо принять, что колонки останутся фиксированной ширины через `%`.
|
||
6. **Responsive через `clamp()`.**
|
||
`h1 { font-size: clamp(40px, 5.6vw, 76px) }` и подобные. Elementor работает через три брейкпоинта. Решение: в Elementor задавайте отдельные desktop/tablet/mobile значения, либо пропишите `clamp()` в Custom CSS для `h1`/`h2` с префиксом `dp-`.
|
||
7. **Кастомный select (`.catalog-sort`).**
|
||
Элементу `<select>` нельзя нормально стилизовать в Elementor. Решение: держать `.dp-select` в Custom CSS с учётом нативной стрелки через `background-image: url("data:image/svg+xml,...")`.
|
||
8. **Focus-ring на поля и search bar.**
|
||
`box-shadow: 0 0 0 4px rgba(75, 15, 36, 0.08)` — задайте глобально через `.dp-form input:focus`, `.dp-search:focus-within`.
|
||
9. **`object-fit: contain` для продуктовых фото.**
|
||
Elementor Image выставляет `object-fit: cover` по умолчанию. Нужен `.dp-product-photo { object-fit: contain }`.
|
||
10. **Gradient presets per-variant.**
|
||
`.bottle-card--tuscany`, `.bottle-card--mosel`, `.bottle-card--clean`, `.bottle-card--compact`, `.product-image--wine`, `.product-image--gold`, `.product-image--green`. Задайте как набор CSS-классов, не как отдельные шаблоны.
|
||
11. **JS-поведение.**
|
||
В репозитории ссылка на `js/inspector.js` есть в `CLAUDE.md`, но в рабочих HTML она не подключена; кастомного JS на страницах нет. Однако в production понадобятся: открытие/закрытие mega-menu на click/tap (mobile), закрытие по `Esc`, фокус-трап, поведение мобильного меню, sort select submit, фильтр каталога. Это **не входит в Elementor по умолчанию** — предусмотрите отдельную задачу по JS.
|
||
|
||
### 2.4 Что отсутствует в макете, но нужно на production
|
||
|
||
Эти блоки **не реализованы** в HTML-ките, но без них запуск не собрать. Добавьте их в бэклог:
|
||
|
||
- Breadcrumbs на catalog / single product / news / guidelines.
|
||
- Pagination и «показать ещё» в каталоге.
|
||
- Author/byline и дата публикации в новостях.
|
||
- 404 page.
|
||
- Cookie / privacy banner.
|
||
- WooCommerce cart/checkout/account (если магазин включён), минимальная стилизация.
|
||
- Сохранённое состояние поиска, пустое состояние каталога.
|
||
- Форма обратной связи с валидацией и success-экраном.
|
||
- Skeleton / loading state для каталога.
|
||
- Accessible labels на иконках хедера.
|
||
|
||
---
|
||
|
||
## 3. Источники токенов в проекте
|
||
|
||
| Файл | Что это |
|
||
|---|---|
|
||
| `css/tokens.css` | Единый источник значений: цвета, шрифты, spacing, radius, shadows, container |
|
||
| `css/site.css` | Все боевые стили: header, mega-menu, hero, page-hero, карточки, каталог, формы, футер |
|
||
| `css/ui-kit.css` | Стили витрины `ui-kit.html` (sidebar, swatches, demo), в production **не переносить** |
|
||
|
||
В Elementor переносите не CSS целиком, а токены + CSS-классы `dp-*`. `ui-kit.css` остаётся как reference.
|
||
|
||
---
|
||
|
||
## 4. Global Colors (Elementor → Site Settings → Global Colors)
|
||
|
||
Добавьте новые цвета. Старые `Primary/Secondary/Text/Accent` **не удаляйте**, пока не перевяжете все элементы.
|
||
|
||
| Elementor name | CSS token | Value | Роль |
|
||
|---|---|---|---|
|
||
| DP Wine 100 | `--color-primary-wine-100` | `#4b0f24` | Основной бренд, primary кнопки, hover меню, линки |
|
||
| DP Wine 80 | `--color-primary-wine-80` | `#6d1c36` | Hover primary, вторичный вин |
|
||
| DP Black | `--color-neutral-black` | `#161616` | Основной текст |
|
||
| DP Gray 700 | `--color-neutral-gray-700` | `#30343a` | Навигация, плотный secondary text |
|
||
| DP Gray 600 | `--color-neutral-gray-600` | `#66605f` | Muted text, подписи, описания |
|
||
| DP Gray 300 | `--color-neutral-gray-300` | `#d9dee6` | Бордеры, разделители |
|
||
| DP Background | `--color-background-base` | `#f4f6f9` | Фон страниц |
|
||
| DP Surface | `--color-surface` | `#ffffff` | Карточки, формы, панели |
|
||
| DP Gold | `--color-accent-gold` | `#b9965b` | Eyebrow, статусы, премиум-акцент |
|
||
| DP Blue | `--color-accent-blue` | `#1f3476` | Logo `.brand-logo`, `.phone-link`, инфо-акценты |
|
||
| DP Error | `--color-error` | `#a33a2f` | Ошибки форм |
|
||
|
||
Также рекомендуются служебные **alpha-значения**, которые лучше держать в `--dp-*` переменных, а не как Global Colors (Elementor не умеет alpha-переменные как токены):
|
||
|
||
```css
|
||
--dp-border-soft: rgba(102, 96, 95, 0.12);
|
||
--dp-border-med: rgba(102, 96, 95, 0.16);
|
||
--dp-border-strong: rgba(102, 96, 95, 0.24);
|
||
--dp-wine-border: rgba(75, 15, 36, 0.24);
|
||
--dp-wine-hover: rgba(75, 15, 36, 0.06);
|
||
--dp-header-bg: rgba(248, 250, 252, 0.94);
|
||
--dp-focus-ring: 0 0 0 4px rgba(75, 15, 36, 0.08);
|
||
```
|
||
|
||
---
|
||
|
||
## 5. Global Fonts
|
||
|
||
Подключить в Elementor → Site Settings → Global Fonts. Google Fonts в `index.html` включают: `Inter`, `Montserrat`, `Playfair Display`, `Cormorant Garamond`, `Manrope`. В production для Elementor достаточно первых трёх; `Cormorant`/`Manrope` — только если будете использовать editorial/neo type cards.
|
||
|
||
| Elementor style | Font | Weight | Desktop | Line height | Transform |
|
||
|---|---|---|---|---|---|
|
||
| DP H1 | Montserrat | 800 | 56–72px | 1.0–1.1 | Uppercase |
|
||
| DP H2 | Montserrat | 800 | 36–44px | 1.1 | Uppercase |
|
||
| DP H3 | Montserrat | 800 | 22–28px | 1.15–1.25 | Uppercase |
|
||
| DP Body | Inter | 400 | 16px | 1.5 | None |
|
||
| DP Body Large | Inter | 400 | 18–19px | 1.5 | None |
|
||
| DP Lead | Inter | 500 | 22px | 1.48 | None |
|
||
| DP Caption | Inter | 700–800 | 12–13px | 1.2 | Uppercase |
|
||
| DP Button | Inter | 700 | 14–16px | 1.2 | None |
|
||
| DP Nav | Inter | 800 | 12px | 1.2 | Uppercase |
|
||
| DP Editorial H | Playfair Display | 700 | 36–56px | 1.1 | None |
|
||
|
||
Responsive:
|
||
|
||
| Style | Tablet | Mobile |
|
||
|---|---|---|
|
||
| DP H1 | 40–56px | 34–44px |
|
||
| DP H2 | 32–36px | 28–32px |
|
||
| DP H3 | 22–24px | 20–22px |
|
||
| DP Body | 16px | 16px |
|
||
| DP Button | 14–16px | 14px |
|
||
|
||
`clamp()` в Elementor Global Fonts не ставьте — используйте отдельные значения по брейкпоинтам. Для нескольких ключевых `h1/h2` можно вручную прописать `clamp()` в Custom CSS под классами `dp-hero h1`, `dp-page-hero h1`.
|
||
|
||
---
|
||
|
||
## 6. Spacing, container, radius, shadows
|
||
|
||
### Spacing
|
||
|
||
| Token | Value | Где использовать |
|
||
|---|---|---|
|
||
| `--dp-space-4` | 4px | Микро-зазоры |
|
||
| `--dp-space-8` | 8px | Gap внутри кнопок |
|
||
| `--dp-space-16` | 16px | Gap grids, карточки |
|
||
| `--dp-space-24` | 24px | Padding карточек, блоков |
|
||
| `--dp-space-32` | 32px | Gap колонок |
|
||
| `--dp-space-48` | 48px | Средние секции |
|
||
| `--dp-space-64` | 64px | Большие секции |
|
||
| `--dp-space-80` | 80px | Hero padding top/bottom desktop |
|
||
|
||
В макете фактические паддинги секций: **desktop 80px top/bottom**, mobile 48px. В старом документе был 72 — обновлено.
|
||
|
||
### Layout
|
||
|
||
| Token | Value | Elementor setting |
|
||
|---|---|---|
|
||
| `--dp-container` | 1240px | Site Settings → Layout → Content Width |
|
||
| Section desktop padding | `80px 40px` | Container padding |
|
||
| Section mobile padding | `48px 28px` | Container padding (mobile) |
|
||
| Section side gap | 40px desktop / 28px mobile | Container padding X |
|
||
|
||
### Radius
|
||
|
||
| Token | Value | Где |
|
||
|---|---|---|
|
||
| `--dp-radius-sm` | 8px | Кнопки, поля, карточки, теги |
|
||
| `--dp-radius-md` | 12px | Крупные панели, preview |
|
||
| `--dp-radius-lg` | 24px | Акцентные блоки (в текущем макете используется редко — оставляем про запас) |
|
||
|
||
### Shadows
|
||
|
||
| Token | Value | Где |
|
||
|---|---|---|
|
||
| `--dp-shadow-soft` | `0 12px 32px rgba(22, 22, 22, 0.08)` | Карточки, формы, footer panel |
|
||
| `--dp-shadow-lift` | `0 20px 52px rgba(75, 15, 36, 0.14)` | Hover карточек, mega menu, primary hover |
|
||
| `--dp-shadow-header` | `0 10px 28px rgba(22, 22, 22, 0.05)` | Sticky header |
|
||
| `--dp-focus-ring` | `0 0 0 4px rgba(75, 15, 36, 0.08)` | Input/search focus |
|
||
|
||
---
|
||
|
||
## 7. Безопасный CSS-слой (`dp-*`)
|
||
|
||
Добавляйте CSS **только через классы с префиксом `dp-`**, а не через глобальные `body`, `h1`, `button`, `input`, `a`. Это единственный способ не сломать тему и плагины.
|
||
|
||
Где класть CSS:
|
||
|
||
1. **Тестовая страница**: `Page Settings → Advanced → Custom CSS`.
|
||
2. **После проверки**: `Elementor → Site Settings → Custom CSS`.
|
||
3. **Финально (если есть child-тема)**: `wp-content/themes/<child>/style.css` или отдельный enqueued файл.
|
||
|
||
Базовый слой:
|
||
|
||
```css
|
||
:root {
|
||
--dp-wine-100: #4b0f24;
|
||
--dp-wine-80: #6d1c36;
|
||
--dp-black: #161616;
|
||
--dp-gray-700: #30343a;
|
||
--dp-gray-600: #66605f;
|
||
--dp-gray-300: #d9dee6;
|
||
--dp-bg: #f4f6f9;
|
||
--dp-surface: #ffffff;
|
||
--dp-gold: #b9965b;
|
||
--dp-blue: #1f3476;
|
||
--dp-error: #a33a2f;
|
||
|
||
--dp-border-soft: rgba(102, 96, 95, 0.12);
|
||
--dp-border-med: rgba(102, 96, 95, 0.16);
|
||
--dp-border-strong: rgba(102, 96, 95, 0.24);
|
||
--dp-wine-border: rgba(75, 15, 36, 0.24);
|
||
--dp-header-bg: rgba(248, 250, 252, 0.94);
|
||
|
||
--dp-radius-sm: 8px;
|
||
--dp-radius-md: 12px;
|
||
--dp-radius-lg: 24px;
|
||
|
||
--dp-shadow-soft: 0 12px 32px rgba(22, 22, 22, 0.08);
|
||
--dp-shadow-lift: 0 20px 52px rgba(75, 15, 36, 0.14);
|
||
--dp-shadow-header: 0 10px 28px rgba(22, 22, 22, 0.05);
|
||
--dp-focus-ring: 0 0 0 4px rgba(75, 15, 36, 0.08);
|
||
}
|
||
|
||
.dp-section { padding: 80px 0; }
|
||
.dp-section--muted { background: #eef2f6; }
|
||
|
||
.dp-surface {
|
||
background: var(--dp-surface);
|
||
border: 1px solid var(--dp-border-med);
|
||
border-radius: var(--dp-radius-sm);
|
||
box-shadow: var(--dp-shadow-soft);
|
||
}
|
||
|
||
.dp-eyebrow {
|
||
color: var(--dp-gold);
|
||
font-family: Inter, Arial, sans-serif;
|
||
font-size: 12px;
|
||
line-height: 16px;
|
||
font-weight: 800;
|
||
letter-spacing: 0;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.dp-section-heading {
|
||
font-family: Montserrat, Inter, Arial, sans-serif;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
color: var(--dp-black);
|
||
}
|
||
|
||
@media (max-width: 1080px) {
|
||
.dp-section { padding: 64px 0; }
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.dp-section { padding: 48px 0; }
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 8. Кнопки
|
||
|
||
`Site Settings → Buttons`. Базовые параметры:
|
||
|
||
| Property | Value |
|
||
|---|---|
|
||
| Min height | 48px |
|
||
| Padding | 12px 22px |
|
||
| Border radius | 8px |
|
||
| Font | Inter, 700 |
|
||
| Transition | 0.2s |
|
||
|
||
Primary states:
|
||
|
||
| State | Text | Background | Shadow |
|
||
|---|---|---|---|
|
||
| Default | #ffffff | `#4b0f24` | `0 10px 22px rgba(75, 15, 36, 0.16)` |
|
||
| Hover | #ffffff | `#6d1c36` | `0 20px 52px rgba(75, 15, 36, 0.14)` |
|
||
| Active | #ffffff | `#6d1c36` | inset + `translateY(0)` |
|
||
| Disabled | `#ffffff` | `rgba(75, 15, 36, 0.4)` | none |
|
||
|
||
Secondary states:
|
||
|
||
| State | Text | Background | Border |
|
||
|---|---|---|---|
|
||
| Default | `#4b0f24` | `rgba(255,255,255,0.55)` | `rgba(75,15,36,0.24)` |
|
||
| Hover | `#4b0f24` | `rgba(75,15,36,0.06)` | `rgba(75,15,36,0.36)` |
|
||
|
||
```css
|
||
.dp-btn-primary .elementor-button,
|
||
.dp-btn-primary.elementor-button,
|
||
a.dp-btn-primary {
|
||
min-height: 48px;
|
||
padding: 12px 22px;
|
||
border-radius: 8px;
|
||
background: var(--dp-wine-100);
|
||
color: #fff;
|
||
font-family: Inter, Arial, sans-serif;
|
||
font-weight: 700;
|
||
box-shadow: 0 10px 22px rgba(75, 15, 36, 0.16);
|
||
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
|
||
}
|
||
.dp-btn-primary:hover .elementor-button,
|
||
.dp-btn-primary.elementor-button:hover,
|
||
a.dp-btn-primary:hover {
|
||
background: var(--dp-wine-80);
|
||
box-shadow: var(--dp-shadow-lift);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.dp-btn-secondary .elementor-button,
|
||
a.dp-btn-secondary {
|
||
min-height: 48px;
|
||
padding: 12px 22px;
|
||
border: 1px solid var(--dp-wine-border);
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, 0.55);
|
||
color: var(--dp-wine-100);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.dp-btn-sm .elementor-button,
|
||
a.dp-btn-sm { min-height: 38px; padding: 8px 14px; font-size: 14px; }
|
||
```
|
||
|
||
Классы вешать на виджет Button через `Advanced → CSS Classes`: `dp-btn-primary`, `dp-btn-secondary`, `dp-btn-sm` (комбинируются: `dp-btn-primary dp-btn-sm`).
|
||
|
||
---
|
||
|
||
## 9. Формы, поля, search
|
||
|
||
`Site Settings → Form Fields`:
|
||
|
||
| Property | Value |
|
||
|---|---|
|
||
| Background | `#ffffff` |
|
||
| Text | `#161616` |
|
||
| Placeholder | `#66605f` |
|
||
| Border | `1px solid rgba(102, 96, 95, 0.24)` |
|
||
| Border radius | 8px |
|
||
| Padding | 12–14px |
|
||
| Focus border | `#4b0f24` |
|
||
| Focus shadow | `0 0 0 4px rgba(75, 15, 36, 0.08)` |
|
||
| Error color | `#a33a2f` |
|
||
|
||
```css
|
||
.dp-form .elementor-field {
|
||
border: 1px solid var(--dp-border-strong);
|
||
border-radius: 8px;
|
||
background: #fff;
|
||
color: var(--dp-black);
|
||
font-family: Inter, Arial, sans-serif;
|
||
font-size: 14px;
|
||
padding: 12px 14px;
|
||
}
|
||
.dp-form .elementor-field:focus {
|
||
border-color: var(--dp-wine-100);
|
||
box-shadow: var(--dp-focus-ring);
|
||
outline: none;
|
||
}
|
||
.dp-form .elementor-field-label {
|
||
color: var(--dp-gray-700);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
.dp-form .elementor-message-danger { color: var(--dp-error); }
|
||
|
||
.dp-select {
|
||
appearance: none;
|
||
padding: 7px 36px 7px 12px;
|
||
min-height: 40px;
|
||
border: 1px solid var(--dp-border-strong);
|
||
border-radius: 8px;
|
||
background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%2330343a' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>") no-repeat right 14px center;
|
||
font-family: Inter, Arial, sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.dp-search {
|
||
display: grid;
|
||
grid-template-columns: 44px minmax(0, 1fr);
|
||
border: 1px solid var(--dp-border-strong);
|
||
border-radius: 8px;
|
||
background: #fff;
|
||
overflow: hidden;
|
||
transition: border-color .2s, box-shadow .2s;
|
||
}
|
||
.dp-search:focus-within {
|
||
border-color: var(--dp-wine-100);
|
||
box-shadow: var(--dp-focus-ring);
|
||
}
|
||
```
|
||
|
||
Обязательные состояния для QA: default, hover, focus, filled, disabled, error, required, textarea, submit loading, success screen, mobile keyboard.
|
||
|
||
---
|
||
|
||
## 10. Карточки
|
||
|
||
### 10.1 Базовая карточка
|
||
|
||
```css
|
||
.dp-card {
|
||
min-width: 0;
|
||
border: 1px solid var(--dp-border-med);
|
||
border-radius: var(--dp-radius-sm);
|
||
background: #fff;
|
||
box-shadow: var(--dp-shadow-soft);
|
||
overflow: hidden;
|
||
transition: transform .2s ease, box-shadow .2s ease;
|
||
}
|
||
.dp-card:hover { transform: translateY(-3px); box-shadow: var(--dp-shadow-lift); }
|
||
|
||
.dp-card-title {
|
||
color: var(--dp-black);
|
||
font-family: Montserrat, Inter, Arial, sans-serif;
|
||
font-size: 24px;
|
||
line-height: 1.15;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
}
|
||
.dp-card-text { color: var(--dp-gray-600); font-size: 14px; line-height: 1.45; }
|
||
```
|
||
|
||
### 10.2 Product card (grid)
|
||
|
||
В Elementor построить как Container:
|
||
|
||
```
|
||
.dp-product-card (Container, display=flex vertical)
|
||
.dp-product-media → Image widget c .dp-product-photo
|
||
.dp-product-footer → 2 колонки: title + price + small button
|
||
```
|
||
|
||
CSS:
|
||
|
||
```css
|
||
.dp-product-photo { object-fit: contain; object-position: center; max-height: 200px; }
|
||
.dp-product-price { color: var(--dp-wine-100); font-size: 18px; font-weight: 800; }
|
||
```
|
||
|
||
### 10.3 Product card (list, catalog)
|
||
|
||
3 колонки на desktop, 1 на mobile:
|
||
|
||
```css
|
||
.dp-product-list {
|
||
display: grid;
|
||
grid-template-columns: 210px minmax(0, 1fr) 220px;
|
||
gap: 24px;
|
||
align-items: center;
|
||
padding: 20px;
|
||
}
|
||
@media (max-width: 1080px) { .dp-product-list { grid-template-columns: 160px 1fr; } .dp-product-list__actions { grid-column: 1 / -1; } }
|
||
@media (max-width: 720px) { .dp-product-list { grid-template-columns: 1fr; } }
|
||
```
|
||
|
||
В Elementor собрать как Container с `display: grid` через Custom CSS, либо как Inner Section с фиксированными ширинами колонок (проще, но менее адаптивно).
|
||
|
||
### 10.4 Bottle card + варианты
|
||
|
||
```css
|
||
.dp-bottle-card { /* extends .dp-card */ }
|
||
.dp-bottle-card__media { padding: 32px 0; display: grid; place-items: center; }
|
||
.dp-bottle-card__photo { object-fit: contain; }
|
||
|
||
.dp-bottle-card--tuscany .dp-bottle-card__media { background: linear-gradient(135deg, #b16d2c 0%, #c8ad94 52%, #dfe5eb 100%); }
|
||
.dp-bottle-card--mosel .dp-bottle-card__media { background: linear-gradient(135deg, #214f3d 0%, #8aa38e 48%, #e8ebdc 100%); }
|
||
.dp-bottle-card--wine .dp-bottle-card__media { background: linear-gradient(135deg, #6d1c36 0%, #9b5366 46%, #e6dce1 100%); }
|
||
.dp-bottle-card--gold .dp-bottle-card__media { background: linear-gradient(135deg, #b9965b 0%, #d7c18b 48%, #eef2f6 100%); }
|
||
.dp-bottle-card--clean .dp-bottle-card__media { background: linear-gradient(135deg, #edf1f5 0%, #d7dee7 100%); }
|
||
.dp-bottle-card--compact { /* scale-down variant */ }
|
||
.dp-bottle-card--horizontal { display: grid; grid-template-columns: 180px 1fr; }
|
||
```
|
||
|
||
Варианты подключаются комбинацией классов: `dp-bottle-card dp-bottle-card--tuscany`.
|
||
|
||
### 10.5 Feature card с номером (about)
|
||
|
||
```html
|
||
<article class="dp-feature-card">
|
||
<span class="dp-feature-card__num">01</span>
|
||
<h3>Удобный каталог</h3>
|
||
<p>Фильтры по типу, региону, производителю…</p>
|
||
</article>
|
||
```
|
||
|
||
```css
|
||
.dp-feature-card { padding: 22px; min-height: 210px; display: grid; align-content: space-between; }
|
||
.dp-feature-card__num { color: var(--dp-gold); font-size: 12px; font-weight: 800; text-transform: uppercase; }
|
||
.dp-feature-card h3 { margin: 18px 0 8px; font-family: Montserrat; font-weight: 800; font-size: 22px; text-transform: uppercase; }
|
||
```
|
||
|
||
### 10.6 Info card / contact panel / contact form
|
||
|
||
Все три на одном surface-шаблоне (`.dp-surface`) + padding 24px. В Elementor: один Container-пресет, меняется только внутренний контент.
|
||
|
||
### 10.7 Meta list (product detail)
|
||
|
||
```html
|
||
<dl class="dp-meta-list">
|
||
<div><span>Regione</span><strong>Toscana</strong></div>
|
||
<div><span>Annata</span><strong>2020</strong></div>
|
||
…
|
||
</dl>
|
||
```
|
||
|
||
```css
|
||
.dp-meta-list { display: grid; gap: 12px; margin: 28px 0; }
|
||
.dp-meta-list div { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--dp-border-med); }
|
||
.dp-meta-list span { color: var(--dp-gray-600); }
|
||
```
|
||
|
||
---
|
||
|
||
## 11. Теги / chips / статусы
|
||
|
||
```css
|
||
.dp-tag, .dp-chip {
|
||
display: inline-flex; align-items: center;
|
||
min-height: 30px; padding: 6px 10px;
|
||
border-radius: 8px;
|
||
font: 800 12px/1 Inter, sans-serif;
|
||
text-transform: uppercase;
|
||
}
|
||
.dp-tag--filled, .dp-chip--active { background: var(--dp-wine-100); color: #fff; }
|
||
.dp-tag--outline { border: 1px solid var(--dp-wine-border); color: var(--dp-wine-100); background: transparent; }
|
||
.dp-tag--gold { background: rgba(185, 150, 91, 0.18); color: #7c5f26; }
|
||
```
|
||
|
||
В Elementor: Heading widget с HTML tag = `span`, Button widget без ссылки, либо Text Editor.
|
||
|
||
---
|
||
|
||
## 12. Hero, page hero, editorial hero
|
||
|
||
### 12.1 `.dp-hero` (home)
|
||
|
||
```css
|
||
.dp-hero {
|
||
min-height: 100vh;
|
||
padding: 80px 0;
|
||
color: #f8fafc;
|
||
background:
|
||
linear-gradient(100deg, rgba(22, 20, 17, 0.84) 0%, rgba(22, 20, 17, 0.58) 38%, rgba(22, 20, 17, 0.12) 72%),
|
||
url("/wp-content/uploads/hero.jpg") center / cover;
|
||
}
|
||
.dp-hero h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1; text-transform: uppercase; font-weight: 800; }
|
||
@media (max-width: 720px) { .dp-hero { min-height: 620px; } }
|
||
```
|
||
|
||
### 12.2 `.dp-page-hero` с модификаторами
|
||
|
||
Четыре варианта фонового изображения (`--about`, `--contacts`, `--guidelines`, `--news`). Задаются модификаторами через `CSS Classes` на Elementor секции + background image в Style панели, либо через CSS url-ы.
|
||
|
||
```css
|
||
.dp-page-hero { padding: 78px 0; color: #f8fafc; background-size: cover; background-position: center; }
|
||
.dp-page-hero__inner { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.28fr); gap: 36px; align-items: end; }
|
||
.dp-page-hero h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 0.98; text-transform: uppercase; font-weight: 800; }
|
||
.dp-page-hero__meta { padding: 22px; background: #fff; color: var(--dp-black); border-radius: var(--dp-radius-sm); box-shadow: var(--dp-shadow-soft); }
|
||
```
|
||
|
||
В `.dp-page-hero` накладывать `linear-gradient` поверх фонового изображения через background shorthand (Elementor → Style → Background overlay → Gradient).
|
||
|
||
---
|
||
|
||
## 13. Header
|
||
|
||
Исходник: `css/site.css:47–369`, `components/menu.html`.
|
||
|
||
Правила переноса:
|
||
|
||
1. **Не меняйте** текущий Header template сразу.
|
||
2. Дублируйте → `Header DP UI Kit Draft`.
|
||
3. Примените классы и стили на копии.
|
||
4. После проверки назначьте через `Theme Builder → Header → Display Conditions`.
|
||
|
||
Sticky + blur + border:
|
||
|
||
```css
|
||
.dp-header {
|
||
position: sticky; top: 0; z-index: 40;
|
||
background: var(--dp-header-bg);
|
||
border-bottom: 1px solid rgba(102, 96, 95, 0.18);
|
||
box-shadow: var(--dp-shadow-header);
|
||
backdrop-filter: blur(18px);
|
||
-webkit-backdrop-filter: blur(18px);
|
||
}
|
||
|
||
.dp-nav a,
|
||
.dp-nav .elementor-item {
|
||
color: var(--dp-gray-700);
|
||
font: 800 12px/1.2 Inter, sans-serif;
|
||
text-transform: uppercase;
|
||
}
|
||
.dp-nav a:hover,
|
||
.dp-nav .elementor-item:hover,
|
||
.dp-nav .elementor-item-active { color: var(--dp-wine-100); }
|
||
```
|
||
|
||
### Mega menu
|
||
|
||
Стандартный Elementor Nav Menu не даёт асимметричный 4-колоночный grid. Варианты:
|
||
|
||
- **Вариант A (рекомендуется):** кастомный HTML-виджет с готовой разметкой `components/menu.html` + CSS-классы `dp-mega-menu`, `dp-mega-menu__grid`. Открытие/закрытие — минимальный JS (50 строк) либо CSS-only через `:focus-within`.
|
||
- **Вариант B:** плагин JetMenu / Max Mega Menu. Даёт drag-and-drop контент в колонках, но потребует доработки CSS, чтобы колонки были `1.05fr 0.82fr 1.25fr 0.88fr`.
|
||
- **Вариант C:** простой dropdown Elementor Pro без 4-колонок (запасной путь).
|
||
|
||
CSS-контур:
|
||
|
||
```css
|
||
.dp-mega-menu {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: min(1240px, calc(100vw - 40px));
|
||
padding: 28px;
|
||
background: #fff;
|
||
border-radius: var(--dp-radius-md);
|
||
box-shadow: var(--dp-shadow-lift);
|
||
}
|
||
.dp-mega-menu__grid {
|
||
display: grid;
|
||
grid-template-columns: 1.05fr 0.82fr 1.25fr 0.88fr;
|
||
gap: 24px;
|
||
}
|
||
.dp-mega-menu__appellations {
|
||
grid-column: 1 / -1;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px 24px;
|
||
}
|
||
@media (max-width: 1080px) { .dp-mega-menu__grid { grid-template-columns: 1fr 1fr; } }
|
||
@media (max-width: 720px) { .dp-mega-menu__grid { grid-template-columns: 1fr; } }
|
||
```
|
||
|
||
JS-требования: hover desktop с задержкой 150ms, click/tap mobile, `Esc` закрывает, focus-trap внутри открытого меню, `aria-expanded`, `role="menu"`.
|
||
|
||
### Header icons
|
||
|
||
Inline SVG с `stroke: currentColor; stroke-width: 1.45`. Задать через Icon widget (SVG upload) либо HTML-виджет. Класс `.dp-header-icon` + `.dp-header-icon--air` для варианта без бордера.
|
||
|
||
---
|
||
|
||
## 14. Footer
|
||
|
||
Исходник: `css/site.css:2042–…`, `components/footer.html`.
|
||
|
||
Структура (desktop): `210px / 1fr / 250px` — brand block, nav 3 группы, контакты + соцсети. Карточная панель на белом surface.
|
||
|
||
```css
|
||
.dp-footer { padding: 32px 0 40px; border-top: 1px solid rgba(102, 96, 95, 0.12); background: var(--dp-bg); }
|
||
.dp-footer__container {
|
||
padding: 24px 28px 20px;
|
||
border: 1px solid var(--dp-border-med);
|
||
border-radius: var(--dp-radius-sm);
|
||
background: #fff;
|
||
box-shadow: var(--dp-shadow-soft);
|
||
}
|
||
.dp-footer__main {
|
||
display: grid;
|
||
grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) minmax(210px, 250px);
|
||
gap: 24px 32px;
|
||
align-items: start;
|
||
}
|
||
@media (max-width: 1080px) { .dp-footer__main { grid-template-columns: 1fr 1fr; } }
|
||
@media (max-width: 720px) { .dp-footer__main { grid-template-columns: 1fr; } }
|
||
```
|
||
|
||
Порядок: дублировать текущий Footer template → назвать `Footer DP UI Kit Draft` → применить классы → проверить → назначить.
|
||
|
||
---
|
||
|
||
## 15. Каталог и single product
|
||
|
||
### Catalog (archive)
|
||
|
||
Переносите поэтапно — не все блоки сразу:
|
||
|
||
1. Визуальный стиль карточки (`.dp-product-card`, `.dp-product-list`).
|
||
2. Toolbar + sort (`.dp-catalog-toolbar`, `.dp-select`).
|
||
3. Filters / chips (`.dp-chip` + `.dp-chip--active`).
|
||
4. List / compact / b2b варианты.
|
||
5. Hover lift + skeleton / empty state.
|
||
6. Breadcrumbs (новый компонент, в макете нет).
|
||
7. Pagination (новый компонент, в макете нет).
|
||
|
||
Минимальный набор классов:
|
||
|
||
```txt
|
||
dp-catalog
|
||
dp-catalog-toolbar
|
||
dp-select
|
||
dp-product-card
|
||
dp-product-list
|
||
dp-product-price
|
||
dp-card-title
|
||
dp-card-text
|
||
dp-tag dp-tag--filled dp-tag--outline
|
||
dp-btn-primary dp-btn-sm
|
||
dp-chip dp-chip--active
|
||
```
|
||
|
||
### Single product
|
||
|
||
- `.dp-product-hero` — 2 колонки (image + info).
|
||
- `.dp-product-photo` с `object-fit: contain`.
|
||
- `.dp-meta-list` — свойства 4 пары label/value.
|
||
- CTA — `.dp-btn-primary` + `.dp-btn-secondary` side-by-side.
|
||
- Breadcrumbs сверху.
|
||
- Блок «похожие товары» — переиспользуем `.dp-product-card`.
|
||
|
||
---
|
||
|
||
## 16. Новости, about, contacts, guidelines
|
||
|
||
### News single (2 верстки)
|
||
|
||
В репозитории две версии: `news-villa-raiano.html` и `-v2.html`. Решите, какая идёт в production, вторую оставьте как черновик.
|
||
|
||
- Editorial hero (`.dp-page-hero` + `--news`).
|
||
- `.dp-article-layout { grid-template-columns: 0.68fr 0.32fr }` — статья + sidebar с meta.
|
||
- `.dp-article-body` — типографика: `.lead` 22px/1.48, `h2/h3`, параграфы 18px/1.55.
|
||
- Author/byline / дата — **добавить новым компонентом** (в макете нет).
|
||
|
||
### About
|
||
|
||
- `.dp-page-hero dp-page-hero--about`.
|
||
- `.dp-about-grid { grid-template-columns: 0.58fr 0.42fr }`.
|
||
- 4 `.dp-feature-card` с числовым значком `<span>01</span>…`.
|
||
|
||
### Contacts / Contacts-auth
|
||
|
||
- `.dp-page-hero dp-page-hero--contacts`.
|
||
- `.dp-contacts-layout { grid-template-columns: 0.68fr 0.32fr }`.
|
||
- `.dp-contact-form` + `.dp-contact-panel`.
|
||
- `contacts-auth.html` — выяснить, это залогиненный стейт или отдельная страница «регистрации». От этого зависит, WooCommerce My Account endpoint или кастомная страница.
|
||
|
||
### Article guidelines
|
||
|
||
- Тот же `.dp-page-hero` + `--guidelines`.
|
||
- `.dp-article-body` с расширенным набором блоков (tables, ul, code).
|
||
|
||
---
|
||
|
||
## 17. Страница UI Kit Preview
|
||
|
||
Создайте страницу `/ui-kit-preview/`. Разместите:
|
||
|
||
1. Color swatches (DP Wine 100/80, Gray 700/600/300, Gold, Blue, Background, Surface, Error).
|
||
2. Типографика: H1, H2, H3, body, lead, caption, editorial H.
|
||
3. Кнопки: primary, secondary, small, disabled, hover, focus.
|
||
4. Формы: input default/focus/error/disabled, select, search bar, textarea.
|
||
5. Product card (grid + list + compact + b2b).
|
||
6. Bottle card — все 5 вариантов.
|
||
7. Feature card (01–04).
|
||
8. Info card / contact panel / contact form.
|
||
9. Meta list.
|
||
10. Tags, chips (filled/outline/gold).
|
||
11. Section heading, section heading split.
|
||
12. Eyebrow.
|
||
13. Page hero превью.
|
||
14. Header + mega-menu превью (или ссылка на staging).
|
||
15. Footer превью.
|
||
16. Breadcrumbs (новый компонент).
|
||
17. Pagination (новый компонент).
|
||
|
||
Эта страница — **контрольная витрина**. Любое изменение токенов проверяется на ней первым.
|
||
|
||
---
|
||
|
||
## 18. Декомпозиция работ
|
||
|
||
Формат: элемент → что делать в Elementor → оценка (S/M/L) → зависимости.
|
||
|
||
### A. Global settings (~1 день)
|
||
|
||
1. Global Colors DP palette — **S** — нет.
|
||
2. Global Fonts DP — **S** — нет.
|
||
3. Container width + default padding — **S** — нет.
|
||
4. Form Fields Site Settings — **S** — нет.
|
||
5. Buttons Site Settings — **S** — нет.
|
||
|
||
### B. Custom CSS layer (~1 день)
|
||
|
||
6. `:root` переменные `--dp-*` — **S** — A.
|
||
7. `.dp-*` утилиты (section, surface, eyebrow, heading) — **S** — 6.
|
||
8. Responsive overrides (1080/720px) — **S** — 7.
|
||
|
||
### C. Atom-компоненты (~2 дня)
|
||
|
||
9. `.dp-btn-*` (primary/secondary/sm + states) — **S**.
|
||
10. `.dp-form-*` (input/select/search/textarea + states) — **M**.
|
||
11. `.dp-tag/.dp-chip` все варианты — **S**.
|
||
12. `.dp-card`, `.dp-surface` — **S**.
|
||
|
||
### D. Molecule-компоненты (~3 дня)
|
||
|
||
13. `.dp-product-card` (grid) — **M**.
|
||
14. `.dp-product-list` (catalog list + compact + b2b) — **L** (требует grid в Container).
|
||
15. `.dp-bottle-card` + 5 модификаторов — **M**.
|
||
16. `.dp-feature-card` + номер — **S**.
|
||
17. `.dp-meta-list` — **S**.
|
||
18. `.dp-info-card`, `.dp-contact-panel`, `.dp-contact-form` — **M**.
|
||
19. `.dp-section-heading`, `.dp-section-heading--split` — **S**.
|
||
|
||
### E. Organisms (~3 дня)
|
||
|
||
20. `.dp-hero` (home) — **M**.
|
||
21. `.dp-page-hero` + 4 модификатора — **M**.
|
||
22. `.dp-article-body` editorial типографика — **M**.
|
||
23. `.dp-footer` (копия существующего) — **M**.
|
||
24. `.dp-header` sticky + blur (копия) — **M**.
|
||
25. Mega menu (кастомный HTML + CSS + минимальный JS) — **L** — критический путь.
|
||
|
||
### F. Page templates (~3 дня)
|
||
|
||
26. Home Template — **M** — B, C, D, E.
|
||
27. Single Product Template — **M** — D.
|
||
28. Catalog Archive Template — **L** (требует WooCommerce или CPT) — D.
|
||
29. Single News Post Template — **M** — D, E.
|
||
30. About Page Template — **S** — D, E.
|
||
31. Contacts Page Template — **S** — D, E.
|
||
32. Article Guidelines Template — **S** — D, E.
|
||
33. UI Kit Preview — **M** — C, D, E.
|
||
|
||
### G. Пробелы макета (~2 дня)
|
||
|
||
34. Breadcrumbs компонент — **S**.
|
||
35. Pagination компонент — **S**.
|
||
36. 404 page — **S**.
|
||
37. Cookie/privacy banner — **S**.
|
||
38. Author/byline на news — **S**.
|
||
39. Empty/loading states каталога — **M**.
|
||
|
||
### H. QA и публикация (~2 дня)
|
||
|
||
40. QA по чеклисту §19.
|
||
41. Rollback-план §20.
|
||
42. Regenerate CSS & Data, очистка кэшей.
|
||
43. Production выкатка.
|
||
|
||
Суммарно ориентировочно **15–17 рабочих дней** одним разработчиком при наличии готового Elementor Pro и chosen mega-menu strategy.
|
||
|
||
---
|
||
|
||
## 19. План по этапам (6 фаз)
|
||
|
||
**Фаза 1. Foundation (1–2 дня).**
|
||
Backup, staging, Global Colors/Fonts/Layout, Custom CSS layer (`:root` + `.dp-*` утилиты). QA: на тестовой странице видны цвета, шрифты, общие классы.
|
||
|
||
**Фаза 2. Atom + molecule (3–4 дня).**
|
||
Кнопки, формы, теги, `.dp-card`, `.dp-meta-list`, `.dp-feature-card`, `.dp-info-card`. QA: страница UI Kit Preview собрана на 70%.
|
||
|
||
**Фаза 3. Organisms draft (3–4 дня).**
|
||
`Header DP UI Kit Draft`, `Footer DP UI Kit Draft`, mega menu (HTML-виджет), `.dp-hero`, `.dp-page-hero`. **Не назначать** на production до фазы 6. QA: превью всех хедеров/футеров на staging.
|
||
|
||
**Фаза 4. Pages (3–4 дня).**
|
||
Home, About, Contacts, Contacts-auth, Article Guidelines, News Single (2 варианта), UI Kit Preview. Catalog и Single Product — отдельно, после Woo-конфигурации. QA: кликабельный staging-сайт.
|
||
|
||
**Фаза 5. Catalog / Commerce (2–3 дня).**
|
||
Archive, Single Product, filters, pagination, breadcrumbs, empty state. Привязка к WooCommerce или кастомному CPT `product`. QA: добавление товара, фильтрация, отправка CTA.
|
||
|
||
**Фаза 6. Switchover (1 день).**
|
||
Назначение Header/Footer, выключение старых шаблонов, Regenerate CSS & Data, CDN cache purge, incognito-проверка, смоук-тест всех страниц.
|
||
|
||
---
|
||
|
||
## 20. Что делать нельзя
|
||
|
||
Не добавляйте глобально такие правила:
|
||
|
||
```css
|
||
* { margin: 0; padding: 0; }
|
||
button { all: unset; }
|
||
a { color: inherit; text-decoration: none; }
|
||
h1, h2, h3 { margin: 0; }
|
||
input, select, textarea { all: unset; }
|
||
```
|
||
|
||
Они ломают тему, плагины, WooCommerce, формы, меню и старые страницы.
|
||
|
||
Также не стоит:
|
||
|
||
- удалять старые Elementor Global Colors;
|
||
- массово заменять цвета по всему сайту;
|
||
- менять breakpoints без полного responsive QA;
|
||
- вставлять весь `site.css` в Elementor;
|
||
- переносить `ui-kit.css` и sidebar UI-kit витрины;
|
||
- менять Header/Footer на production без дубликата;
|
||
- переносить `ui-kit.html` как production-страницу;
|
||
- ставить `position: fixed` на header вместо `sticky` (ломает Elementor Pro Sticky effects).
|
||
|
||
---
|
||
|
||
## 21. QA checklist перед публикацией
|
||
|
||
Страницы:
|
||
|
||
- Home (hero, producers, news, recommendations).
|
||
- Catalog (toolbar, list, hover, sort, filters, breadcrumbs, pagination).
|
||
- Single Product (meta-list, CTA, related).
|
||
- About.
|
||
- Contacts + contacts-auth.
|
||
- News single (обе верстки).
|
||
- Article guidelines.
|
||
- 404.
|
||
- WooCommerce cart/checkout/account (если используется).
|
||
- UI Kit Preview.
|
||
|
||
Для каждого экрана:
|
||
|
||
- нет горизонтального скролла;
|
||
- текст не обрезается;
|
||
- кнопки не ломаются;
|
||
- hover/focus видны;
|
||
- карточки не прыгают по высоте;
|
||
- картинки не растягиваются;
|
||
- меню открывается/закрывается клавиатурой;
|
||
- mega menu закрывается по `Esc`;
|
||
- формы отправляются;
|
||
- ошибки форм читаемы;
|
||
- контраст AA ≥ 4.5;
|
||
- sticky header работает на iOS Safari;
|
||
- `backdrop-filter` имеет fallback (solid bg) для старых браузеров;
|
||
- lighthouse performance ≥ 80, accessibility ≥ 95.
|
||
|
||
Устройства:
|
||
|
||
- Chrome desktop.
|
||
- Safari desktop (macOS).
|
||
- Firefox desktop.
|
||
- iPhone Safari (iOS 17+).
|
||
- Android Chrome.
|
||
- Таблет 1024px.
|
||
|
||
---
|
||
|
||
## 22. Публикация
|
||
|
||
1. Свежий backup production.
|
||
2. Экспорт текущих Elementor templates и Site Settings.
|
||
3. Перенос Global Colors / Fonts.
|
||
4. Вставка проверенного CSS-слоя.
|
||
5. Импорт / обновление шаблонов.
|
||
6. Назначение Header / Footer draft → main.
|
||
7. `Elementor → Tools → Regenerate CSS & Data`.
|
||
8. Очистка кэша плагина оптимизации (WP Rocket / W3TC / LiteSpeed).
|
||
9. Очистка server/CDN кэша.
|
||
10. Проверка в incognito на desktop и mobile.
|
||
11. Смоук-тест: home, catalog, product, contacts form, 1 новость.
|
||
|
||
---
|
||
|
||
## 23. План отката
|
||
|
||
Перед публикацией должны быть готовы:
|
||
|
||
- backup production;
|
||
- экспорт старых Elementor templates;
|
||
- список изменённых Global Colors / Fonts;
|
||
- копия добавленного Custom CSS;
|
||
- скриншоты ключевых страниц до переноса;
|
||
- список условий отображения Header / Footer до изменения.
|
||
|
||
Если что-то сломалось:
|
||
|
||
1. Отключить новый Custom CSS в Site Settings.
|
||
2. Вернуть старый Header/Footer template (Theme Builder → Conditions).
|
||
3. `Regenerate CSS & Data`.
|
||
4. Очистить кэш.
|
||
5. Если проблема осталась — восстановить backup.
|
||
|
||
---
|
||
|
||
## 24. Минимальный скоуп первого релиза
|
||
|
||
Если нужно быстро показать «новое лицо» без полной миграции:
|
||
|
||
1. Global Colors DP.
|
||
2. Global Fonts DP H1/H2/H3/Body/Button.
|
||
3. `:root` + `.dp-*` CSS-слой.
|
||
4. `.dp-btn-primary`, `.dp-btn-secondary`, `.dp-btn-sm`.
|
||
5. `.dp-card`, `.dp-form`, `.dp-tag`, `.dp-eyebrow`.
|
||
6. `Header DP UI Kit Draft` на одной staging-странице.
|
||
7. `Footer DP UI Kit Draft` там же.
|
||
8. Страница `UI Kit Preview`.
|
||
|
||
Этого достаточно для валидации дизайн-системы. Catalog, single product, news — следующий релиз.
|
||
|
||
---
|
||
|
||
## Приложение A. Маппинг исходников → разделы документа
|
||
|
||
| Исходник | Линии | Раздел |
|
||
|---|---|---|
|
||
| `css/tokens.css` | 1–35 | §4, §5, §6 |
|
||
| `css/site.css` | 47–55 (header sticky) | §13 |
|
||
| `css/site.css` | 242–369 (mega menu) | §13 |
|
||
| `css/site.css` | 279–288 (eyebrow) | §7 |
|
||
| `css/site.css` | 428–461 (hero) | §12.1 |
|
||
| `css/site.css` | 870–897 (bottle pseudo) | §2.3 #3, §10.4 |
|
||
| `css/site.css` | 976–1001 (product list) | §10.3 |
|
||
| `css/site.css` | 1104–1253 (bottle cards + variants) | §10.4 |
|
||
| `css/site.css` | 1385–1477 (page hero) | §12.2 |
|
||
| `css/site.css` | 1580–1600 (feature card) | §10.5 |
|
||
| `css/site.css` | 2024–2040 (meta list) | §10.7 |
|
||
| `css/site.css` | 2042–2100 (footer) | §14 |
|
||
| `css/site.css` | 2227–2500 (media queries) | §7, все compo |
|
||
| `components/menu.html` | весь | §13 (mega menu HTML) |
|
||
| `components/footer.html` | весь | §14 |
|