Техническое задание: Верстка одностраничного сайта в Elementor

Основная задача

Сверстать одностраничный сайт (ландинг) из 7-8 блоков в конструкторе Elementor Pro по предоставленным макетам Figma. Необходимо обеспечить безупречное отображение на десктопе, планшете и мобильных устройствах.

Ключевые требования к верстке

Резиновая и адаптивная верстка

  • Использование исключительно относительных единиц: vw, vh, em, rem.
  • Размеры шрифтов также должны задаваться в vw для плавного масштабирования.
  • Предоставляется таблица для конвертации значений из пикселей в vw.

Чистота кода и семантика

  • Строгое соблюдение семантики HTML: корректные теги заголовков, списков, кнопок.
  • Минималистичный DOM: избегать лишних вложенностей и пустых элементов.
  • Обязательное заполнение атрибутов: уникальные alt для изображений, aria-label для интерактивных элементов, rel="nofollow noopener" для внешних ссылок.

Работа в Elementor

  • Использование глобальных стилей (Global Styles) для цветов, типографики и шрифтов.
  • Приоритетное использование современных Flexbox Container вместо устаревших секций.
  • Для отступов между элементами по возможности использовать свойство gap.

Технические показатели и SEO

  • Добавление meta description и Open Graph тегов.
  • Цель - достижение зеленых показателей в Core Web Vitals (особенно по Accessibility и Best Practices).
  • Не допускать горизонтального скролла и cumulative layout shift (неожиданного смещения контента).
  • Использование CSS-переменных в :root для удобства управления стилями.

Что уже готово и не требует разработки с нуля

  • Каталог товаров/услуг: готовый модуль, который необходимо корректно интегрировать и стилизовать.
  • Форма поиска: готовая функциональная часть, требуется стилизация.
  • Блок отзывов: необходимо подобрать и настроить легковесный виджет для Elementor.

Условия и ожидания

От заказчика

  • Макеты в Figma для десктопной и мобильной версий.
  • Таблица для конвертации размеров из PX в VW.
  • Консультации и обратная связь по всем вопросам.

От исполнителя

  • Высокая точность и внимание к деталям.
  • Готовность обсуждать нюансы для оптимизации скорости и качества.
  • Следование современным best practices в верстке.
  • Применение резиновой (fluid) адаптивной верстки.

Сроки и бюджет

  • Срок выполнения: до 7 дней (указать реалистичный срок с запасом).
  • Бюджет проекта: до 10 000 рублей.

Если вы - специалист, который ценит чистый код, понимает важность Core Web Vitals и уверенно работает с резиновой версткой в Elementor, будем рады сотрудничеству!