Мастер-класс — страница сайта «Ёлочки»

О чём этот мастер-класс

Мастер-класс: страница-одностраничник для проекта «Ёлочки» — живые новогодние ёлки в горшках. Спикеры: Арон (техническая часть), Мирослава (смыслы и ценности). Платформа: WordPress + Elementor. JSON-шаблон — в описании к видео.

Идея — не рубить хвойные, а взять ёлку домой в горшке, как фикус, и весной высадить в грунт. Каждый технический шаг сопровождается вопросом: как этот блок помогает понять заботу о природе и продукте?

Шаблон можно адаптировать под любую сферу — фитнес, бокс, другой продукт. Дизайн один, наполнение меняется.

Подготовка: цель до начала

Перед установкой WordPress выпишите изначальную цель. Не «продать ёлку», а «помочь прожить праздник без вины, без вреда природе, с ощущением заботы». Это упрощает все решения.

Шаг 1. Установка WordPress и Elementor

Установите WordPress на сервер. Инструкция по установке WordPress и Elementor — в описании к видео. После установки Elementor авторизуйтесь и создайте страницу.

Шаг 2. Создание страницы и применение шаблона

  1. Откройте «Страницы» → «Добавить страницу»
  2. Нажмите «Опубликовать» → «Обновить»
  3. Нажмите «Редактировать в Elementor»
  4. В Elementor откройте вкладку шаблонов
  5. Загрузите JSON-шаблон из описания к видеo
  6. Нажмите «Применить»

Получаете готовый дизайн — тот, что показан в уроке.

Шаг 3. Замена фотографий (было / стало)

В шаблоне — блок «до и после»: срубленная ёлка → ёлка в горшке. Это история изменения без давления и чувства вины.

  1. «Медиафайлы» → загрузите фото в библиотеку
  2. Скопируйте ссылку на изображение
  3. Вставьте в поле шаблона

Шаг 4. Карточка товара

Характеристики для «Ёлочки» — понятным языком, не только цифрами:

  • Фитонциды — сколько вырабатывается в сутки
  • Площадь, на которую рассчитано дерево
  • Размер горшка

Цена, цвет, фото — в полях шаблона. Код уже встроен; подставьте свои значения. Шаблон адаптируется под любой продукт.

Шаг 5. Работа с текстом

Два пути: визуальный редактор Elementor или код через ассистента (более стильный результат). Баланс — в моменте. Эмодзи вместо иконок — быстро и лаконично.

Шаг 6. Блок оплаты и доставки

Для «Ёлочки» — круговорот: не выбрасывать дерево, а высадить весной. Заголовки и текст — под свои условия. Фон можно сгенерировать в нейросети (новогодняя атмосфера).

Шаг 7. Скрытые блоки

Недоработанный блок временно скрывается (например, кадры высадки в грунт). Когда контент готов — откроете. Начинайте с тем, что есть — живой процесс, не погоня за идеалом.

Структура страницы (итог)

  1. Товар — карточка с заказом
  2. Сравнение — было / стало
  3. Описание — фитонциды, площадь, горшок
  4. Оплата и доставка — круговорот дерева
  5. Логотип, контакты, карта — подвал
  6. Юридическая информация — через платформу «Вместе»

Принципы работы с шаблоном

  • Техника и смысл вместе — каждый блок объясняет идею заботы
  • Не застревайте в идеальности — первый вариант честный, потом развиваете
  • Код — не стена — инструмент, который растёт с вами
  • Задавайте вопросы — зум-созвоны, обсуждение
  • Шаблон адаптивен — сначала ценность, потом код

Что дальше

Шаблоны — в базе закрытого обучения «Вместе». В планах — голосовое редактирование шаблона. Обучение для учеников (код) и бизнеса (оперативные правки через менеджера).

Арон — техническая часть. Мирослава — смыслы, документы, оформление.
Записано в рамках мастер-класса, проект «Ёлочки», платформа «Вместе».

Онлайн-чат

Прокрутить вверх