JS PageBuilder. Интенсив - 10 часов

JS PageBuilder. Интенсив - 10 часов

  • 00:00:00
  • Знакомство с JS PageBuilder: интерфейс, логика конструктора и базовый цикл сборки страницы. Разбираем панель инструментов, зоны редактирования, принцип «блок → секция → колонка», как сохранять черновики и публиковать, а также типичные ошибки новичков при первом запуске.
  • Работа с базовыми блоками: кнопки, текст, изображения, карточки — настройка и кастомизация. Практика: подбираем параметры блоков (размеры, отступы, выравнивание), учимся менять контент без потери стилей, настраиваем адаптивность для мобильных и планшетов, разбираем, где хранить медиа и как оптимизировать картинки.
  • Секции и колонки: построение сетки, выравнивание и сложные макеты. На примерах показываем, как строить сетки под разные задачи (лендинг, каталог, блог), работать с пропорциями колонок, выравнивать элементы по осям, использовать отрицательные отступы и скрытые блоки для точной подгонки.
  • Интерактивность без кода: настройки видимости, скролл‑эффекты, ховер‑состояния и простые анимации. Практика: включаем эффекты при наведении, появление при скролле, смену цвета/тени, простые трансформации. Разбираем, как не перегрузить страницу и сохранить производительность.
  • Формы и сбор данных: создание форм, валидация, обработка отправки и интеграция с сервисами. Делаем формы под разные сценарии (заявка, опрос, подписка), настраиваем валидацию полей, сообщения об успехе/ошибке, разбираем варианты передачи данных (webhook, Google Sheets, CRM) и безопасность.
  • Компоненты и шаблоны: создание и повторное использование собственных блоков. Учим сохранять фрагменты как компоненты, переносить их между проектами, обновлять сразу во всех местах, а также собирать библиотеку шаблонов под типовые задачи (шапка, подвал, галерея).
  • Кастомный код в PageBuilder: HTML/CSS/JS вставки, работа с классами и селекторами. Практика: добавляем кастомные стили через CSS‑блоки, внедряем скрипты для расширенной логики, учимся не ломать адаптивность и избегать конфликтов стилей; разбираем безопасные практики и отладку.
  • Интеграции и виджеты: карты, видео, соцсети, чат‑боты и сторонние сервисы. На примерах подключаем карты (Google/Яндекс), встраиваем видео (YouTube/Vimeo), добавляем кнопки соцсетей и чат‑виджеты, разбираем настройки iframe, CORS и обработку ошибок загрузки.
  • Производительность и SEO: оптимизация скорости, метаданные, семантика и индексация. Практические шаги: сжатие изображений, предзагрузка шрифтов, отключение лишних скриптов, настройка заголовков, alt‑текстов, Open Graph и robots.txt; показываем, как проверять скорость и устранять узкие места.
  • Полный проект «под ключ»: от брифа до публикации - сборка лендинга в JS PageBuilder. Разбираем реальный кейс: структура страницы, подбор блоков, адаптивность, интерактив, интеграции, SEO и финальный чек‑лист перед публикацией; в конце — разбор типичных ошибок и план поддержки.

МЕДИАЛЕТО

624130 Свердловская область,
г. Новоуральск, ул. Мичурина, д. 5