Лендинг на Joomla по макету Figma — курс Land Master

Какой сайт собираем в курсе Land Master

Макет в Figma уже есть, но между красивой картинкой и работающей страницей остаётся целый ряд задач. Нужно подготовить Joomla, перенести изображения, подобрать шрифты и собрать блоки так, чтобы ими можно было управлять на сайте. Именно этот путь разбираем в моём курсе «Land Master. Создай сайт за 24 часа».

Это практический курс по сборке лендинга на Joomla с Helix Ultimate и SP Page Builder. В уроках последовательно появляются шапка, первый экран, услуги, акция, описание номера, преимущества, FAQ, контакты и подвал. Ниже собрал программу, основные видео и материалы, с которых удобно начать практику.

«За 24 часа» — название курса, а не гарантия срока для любого проекта. Время зависит от вашего опыта, готовности текстов и изображений, сложности макета и количества доработок. Удобнее ориентироваться на законченные этапы: подготовили основу, собрали экран, проверили результат и перешли дальше.

Если вы впервые открываете Joomla, сначала пригодится курс «Joomla. Начало». А отдельные параметры шаблона подробнее разобраны в обзоре курса Helix Ultimate. Land Master связывает эти инструменты с конкретной задачей — переносом дизайна страницы.

Где смотреть курс Land Master

На YouTube и Rutube доступны одинаковые по порядку 19 уроков. Все встроенные видео в этой статье открываются с Rutube. Под каждым плеером есть ссылки на обе площадки, чтобы можно было открыть урок отдельно.

Весь курс на Rutube · Весь курс на YouTube

Программа курса по этапам

Порядок уроков построен от подготовки сайта к сборке его содержимого. Для первого прохождения я бы сохранял эту последовательность: настройки хостинга и шаблона нужны раньше, чем работа с отдельными блоками.

Что понадобится для практики

В курсе используются четыре инструмента. Joomla — система управления сайтом. Helix Ultimate задаёт общую основу оформления. SP Page Builder помогает собирать содержимое страницы из блоков. Figma нужна для работы с исходным дизайном и графикой.

Для повторения уроков подготовьте доступ к учебному сайту, макет и изображения, которые разрешено использовать. Я бы не начинал эксперименты на работающем сайте компании: сначала удобно разобраться в настройках на отдельной копии, а затем переносить проверенные решения.

Перед установкой сверяйте совместимость Joomla, PHP, Helix Ultimate и SP Page Builder. Интерфейс актуальных выпусков может отличаться от показанного в записи. Для конструктора также проверьте выбранную редакцию и доступность нужных элементов: наличие видеокурса само по себе не предоставляет лицензию на программные продукты.

Хостинг, домен и установка Joomla

Первые три урока посвящены подготовке основы: регистрации хостинга и установке Joomla, домену и управлению пользователями. Эти шаги лучше закончить до переноса дизайна. Проверьте, что сайт открывается по нужному адресу, а вы можете войти в административную часть.

Для учебного сайта можно зарегистрировать виртуальный хостинг Timeweb. Отдельно подготовил подробную инструкцию регистрации с бонусом: её удобно держать рядом во время подключения. Актуальные условия предложения и параметры хостинга проверьте перед оплатой.

Урок 4 переходит к Helix Ultimate. Здесь важно подготовить общее оформление страницы, прежде чем настраивать содержимое в конструкторе. Иначе изменения шаблона и изменения блоков будут смешиваться и станет сложнее понять, что отвечает за результат.

Урок 1. Правильная регистрация хостинга и установка CMS Joomla

Смотреть урок на Rutube · Смотреть на YouTube

Как подготовить макет Figma и графику

Уроки 5–6 — переход от подготовки Joomla к работе с дизайном. Сначала устанавливаем Figma и загружаем учебный шаблон, затем разбираем экспорт графики. Это отдельный этап: картинки и декоративные элементы нужно подготовить до того, как расставлять их на странице.

Посмотрите на макет как на структуру будущего сайта. Где заканчивается шапка? Что входит в первый экран? Какие элементы повторяются в списке услуг? Такое разделение помогает собирать страницу последовательно, а не пытаться воспроизвести весь дизайн сразу.

Во время практики давайте файлам понятные названия и сохраняйте исходный макет отдельно от экспортированных изображений. Для своего проекта используйте собственные материалы или графику с подходящими правами. Размер и вес изображений проверяйте уже на готовой странице.

Урок 6. Экспорт графики из Figma

Смотреть урок на Rutube · Смотреть на YouTube

Собираем шапку, первый экран и шрифты

В уроке 7 собираем Header — верхнюю часть страницы. Затем переходим к первому экрану из Figma. Шапка и первый экран должны работать вместе: человек видит, что предлагает сайт, находит нужный раздел и понимает, какое действие можно выполнить дальше.

Я бы после первого собранного экрана остановился и проверил основу: совпадает ли общий порядок элементов, читается ли заголовок, на месте ли изображение и понятна ли кнопка. Так проще найти ошибку, чем после переноса сразу всей длинной страницы.

Урок 9 отдельно посвящён шрифтам в SP Page Builder. Здесь полезно заранее определить основные размеры и начертания, чтобы одинаковые элементы не выглядели по-разному в каждом новом блоке. После этого в уроке 10 продолжаем перенос макета и собираем второй экран.

Урок 8. Верстам 1й экран сайта из Figma в Joomla

Смотреть урок на Rutube · Смотреть на YouTube

Услуги, акция и другие блоки лендинга

Самая большая часть плейлиста — уроки 11–17. В них собираем список услуг, подробное описание услуги, блок акции, ещё один блок услуг и дополнительные предложения. Затем разбираем описание гостиничного номера и преимущества.

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

Повторить учебную структуру полезно для освоения конструктора. На своём сайте состав блоков лучше выбирать по задаче посетителя. Например, для услуги важно объяснить, что входит в работу и как связаться с компанией; для размещения — показать сам номер и сведения, которые нужны перед обращением.

Не переносите из учебного примера чужие цены, условия акции и контакты. Они относятся к демонстрации в записи. Для своего проекта подготовьте актуальные сведения и проверьте, что одинаковые условия не противоречат друг другу в разных местах страницы.

Урок 16. Верстаем блок "Описание гостиничного номера" в Joomla и SP Page Builder

Смотреть урок на Rutube · Смотреть на YouTube

FAQ, контакты и подвал страницы

Урок 18 посвящён FAQ и контактам, урок 19 — подвалу лендинга и контактному блоку. FAQ — ответы на частые вопросы. Здесь удобнее снять конкретные сомнения посетителя: как проходит работа, что нужно подготовить, где уточнить условия.

Контакты и подвал помогают завершить путь по странице. После описания предложения человек должен понимать, как связаться с компанией и где найти важные сведения. На своём сайте проверьте адреса ссылок, телефон и переходы — наличие блока на макете ещё не означает, что он правильно работает после переноса.

В названиях этих уроков нет отдельного полного разбора аналитики, SEO или юридической подготовки сайта. Перед запуском эти задачи нужно проверить дополнительно. Отдельно откройте страницу на телефоне: длинные заголовки, кнопки и изображения могут вести себя иначе, чем в макете на большом экране.

Урок 18. Верстаем блоки FAQ и Контакты из Figma в Joomla

Смотреть урок на Rutube · Смотреть на YouTube

Где скачать инструменты и материалы

Программы и расширения лучше получать у разработчиков. По этим ссылкам можно выбрать подходящий выпуск и проверить условия использования:

• Joomla — официальный сайт загрузки
• Helix Ultimate — официальный сайт
• SP Page Builder — официальный сайт и редакции
• Figma — официальные приложения

Скачать памятку по прохождению курса в TXT. В ней — последовательность практики и список проверок перед запуском.

Учебный макет Figma и отдельные файлы из уроков пока не приложены к статье. Для точного повторения используйте материалы автора курса; официальный сайт Figma не является ссылкой на учебный макет. После добавления исходников они появятся в этом разделе.

Как проходить курс и проверять результат

1. Подготовьте основу. Хостинг, домен, Joomla и доступ к настройкам должны работать до переноса макета.
2. Разберите дизайн. Выделите блоки, подготовьте изображения и определите повторяющиеся стили.
3. Соберите один законченный экран. Сравните его с макетом и проверьте текст, изображение и действие кнопки.
4. Продолжайте по блокам. После каждого урока сохраняйте изменения и открывайте страницу как посетитель.
5. Проверьте страницу целиком. На компьютере и телефоне пройдите от первого экрана к контактам. Проверьте меню, ссылки, реальные тексты, скорость загрузки изображений и способы обращения.

Хороший результат практики — не количество просмотренных роликов. Важно, чтобы вы могли объяснить структуру своей страницы, найти настройку нужного блока и самостоятельно внести небольшое изменение без случайной поломки соседних элементов.

Полный список уроков Land Master

Ниже сохранены названия и порядок уроков. Выберите удобную площадку: весь плейлист Rutube · весь плейлист YouTube.