Раздел Page Preloader в конструкторе Gridbox посвящен настройке экрана предварительной загрузки страниц сайта. Прелоадер отображает плавную анимацию во время загрузки ресурсов страницы (изображений, шрифтов, стилевых таблиц и скриптов), маскируя процесс рендеринга и создавая ощущение целостного и премиального веб-приложения.
1. Основные возможности Page Preloader
Ключевые преимущества и функционал встроенного прелоадера в Gridbox:
- ■ Устранение скачков макета (CLS): Предотвращает отображение «сырых» элементов и смещение блоков в момент построения DOM-дерева страницы.
- ■ Гибкая кастомизация: Выбор готовых типов CSS-анимаций, настройка цветовой гаммы фона, акцентного цвета индикатора и размеров спиннера.
- ■ Глобальное действие: Активация прелоадера в настройках сайта мгновенно применяет экран загрузки ко всем страницам и разделам проекта.
2. Пошаговая активация и настройка прелоадера
Чтобы включить и настроить экран предварительной загрузки:
- В верхней панели редактора Gridbox перейдите в меню Site ➝ Site Preloader (или через глобальные настройки темы).
- Активируйте главный переключатель Enable Preloader.
- Выберите понравившийся тип анимации в поле Animation.
- Настройте цвет фона (Background Color), цвет анимации (Color) и размер индикатора загрузки.
- Нажмите кнопку Save для применения изменений.
3. Сводная таблица параметров Page Preloader
Полный перечень всех доступных опций и настроек экрана прелоадера:
| Параметр / Опция | Описание и назначение настройки | Формат / Тип данных |
|---|---|---|
| Enable Preloader | Включение или полное отключение отображения экрана загрузки при переходе по страницам. | Переключатель (Yes/No) |
| Animation | Выбор визуального стиля спиннера или анимационного эффекта индикатора загрузки. | Выпадающий список типов |
| Background Color | Цвет фона экрана прелоадера, перекрывающего контент до полной готовности страницы. | Палитра цветов (HEX / RGBA) |
| Preloader Color | Цветовой оттенок самого анимированного элемента (спиннера, точек, кругов). | Палитра цветов (HEX / RGBA) |
| Size | Масштаб и геометрический размер иконки индикатора загрузки на экране. | Ползунок / Числовое значение (px) |
| Save | Сохранение выбранных параметров отображения экрана прелоадера. | Кнопка действия |
Прелоадер особенно актуален для имиджевых сайтов, портфолио и интернет-магазинов с большим количеством визуального контента. Он позволяет сгладить переход между разделами и задать фирменный стиль еще до начала просмотра страницы.
Подбирайте цвет фона прелоадера (Background Color) точно под основной цвет фона первого экрана вашего сайта (например, шапки или Hero-секции). Это сделает исчезновение прелоадера бесшовным и исключит резкое мигание контрастных цветов при открытии страниц.