Сайт Apple.com — эталон современного веб-дизайна, сочетающий минимализм, строгую типографику, кинематографичные полноэкранные Hero-секции и сложную интерактивную навигацию. В этом подробном мастер-классе пошагово разбирается создание полноценного клона Apple.com на связке Joomla + Gridbox: от конфигурации рабочей среды и кастомных шрифтов до верстки многоколоночного мега-меню с размытием фона и кастомной стриминговой карусели.
Полный видеокурс по верстке сайта Apple.com
Пошаговый видеоурок от Balbooa с демонстрацией каждого клика при сборке макета:
Таймкоды мастер-класса
0:00 — Введение и демонстрация готового результата0:42 — Установка Gridbox и подготовка рабочей среды1:35 — Настройка фавикона и параметров темы оформления2:30 — Загрузка и подключение кастомных шрифтов (SF Pro Display / Text)4:15 — Структура навигации: создание пунктов меню Joomla5:38 — Верстка шапки (Header), полупрозрачности и Мега-меню11:20 — Создание Hero-блоков продуктов (iPhone, MacBook, iPad)19:10 — Верстка двухколоночной сетки промо-блоков (Grid Promo Banners)24:45 — Интеграция и стилизация слайдера Apple TV+ (Custom Carousel)30:30 — Создание многоколоночного подвала (Footer) со служебными ссылками34:50 — Подключение кастомного CSS (эффекты размытия, сглаживание шрифтов)38:15 — Адаптивная оптимизация под планшеты и смартфоны1 Подготовка рабочего пространства, темы и шрифтов
Перед началом верстки выполни базовую подготовку темы в панели управления Gridbox:
Настройка среды
1. Установка Gridbox: установи последнюю версию компонента в Joomla и активируй лицензию.2. Фавикон: перейди в Сайт ➝ Настройки сайта ➝ Фавикон и загрузи иконку яблока (32x32 px / PNG).3. Кастомные шрифты: Инструменты ➝ Менеджер шрифтов ➝ Загрузи семейство шрифтов San Francisco (SF Pro Display и SF Pro Text в формате WOFF2).4. Настройки темы: в глобальных стилях темы установи базовый цвет фона (#fbfbfd / #000000 для темных секций) и системный шрифт SF Pro по умолчанию.2 Создание хедера и размывающегося Мега-меню
Создай глобальный хедер с темным полупрозрачным фоном (rgba(22, 22, 23, 0.8)) и включи эффект липкой шапки (Sticky Header):
Конфигурация навигации
• Логотип: SVG-иконка Apple по центру/слева с фиксированной шириной 16px.• Меню: плагин «Главное меню» с горизонтальным расположением, шрифтом 12px и цветом текста #f5f5f7.• Мега-меню: в настройках пункта меню включи «Mega Menu», добавь многоколоночную структуру с категориями устройств (Store, Mac, iPad, iPhone, Watch, AirPods).• Иконки поиска и корзины: плагины «Поиск» (Search) и «Корзина» (Cart) у правого края хедера.3 Верстка Hero-секций продуктов и промо-сетки
Собери структуру посадочной страницы из крупноформатных секций с фоновыми изображениями высокого разрешения:
Архитектура блоков страницы
1. Hero-баннер #1 (iPhone Pro): полноэкранная секция (100vh), темный фон, заголовок H1 (56px, bold), подзаголовок H2 (28px) и CTA-кнопки со скруглением pill (border-radius: 980px).2. Hero-баннер #2 (iPhone базовый): светлая секция (#fbfbfd), контрастная типографика.3. Hero-баннер #3 (MacBook / Apple Watch): центрированный контент с крупным визуалом устройства.4. Промо-сетка (Promo Grid 2x2): двухколоночные строки с отступами между карточками 12px, где каждая колонка имеет отдельный фон и внутренние ссылки «Узнать больше» и «Купить».4 Интерактивная карусель премьер (Custom Carousel)
Добавь плагин Слайдшоу (Slideshow / Carousel) в нижней части страницы, укажи режим отображения нескольких слайдов и в поле Class Suffix плагина пропиши класс:
Class Suffix
custom-carousel5 Добавление продвинутых стилей и эффектов размытия (CSS)
Перейди в Инструменты ➝ Редактор кода ➝ CSS и вставь стили для сглаживания шрифтов, размытия фона при открытии мега-меню и тонкой стилизации карусели:
CSS
/* Сглаживание шрифтов под стиль Apple */body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}/* Скрытие стандартных стрелок в выпадающем меню */li.megamenu-item i.ba-icons.ba-icon-caret-right { display: none !important;}/* Эффект матового размытия (Backdrop Blur) страницы при открытии Мега-меню */.page .main-body::before { background: rgb(0 0 0 / 40%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); pointer-events: none; visibility: hidden; position: fixed; opacity: 0; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 10; transition: opacity 0.3s ease, visibility 0.3s ease; content: "";}.page .main-body.megamenu-active::before { opacity: 1; visibility: visible;}/* Стилизация кастомной карусели стриминга (Apple TV+) */.custom-carousel ul li { width: calc((100% - 24px) / 3) !important; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;}.custom-carousel .ba-slideshow-caption { flex-direction: row; justify-content: flex-start; padding: 55px 70px; align-items: flex-end; transition: background-color 1s linear;}li.item.active[data-position="1"] .ba-slideshow-caption { background: transparent !important;}.ba-slideshow-caption > * { opacity: 0; transition: opacity 1s linear;}li.item.active[data-position="1"] .ba-slideshow-caption > * { opacity: 1;}.custom-carousel .ba-slideshow-caption > * { padding: 0;}.custom-carousel .slideshow-title-wrapper { order: 2; margin-left: 20px;}.custom-carousel .slideshow-button-wrapper { order: 1;}Обрати внимание:
Для корректной работы эффекта матового стекла backdrop-filter: blur(20px) в шапке сайта всегда задавай полупрозрачный фоновый цвет в формате RGBA (например, rgba(22, 22, 23, 0.8)). Если фон будет задан непрозрачным HEX-цветом (#161617), размытие находящегося под шапкой контента не сработает.