Полное руководство по Site Settings в Elementor: глобальные настройки шрифтов, цветов и макета

Введение

Elementor — один из самых популярных конструкторов страниц для WordPress, и одной из его ключевых особенностей является возможность централизованного управления дизайном всего сайта. Site Settings (Настройки сайта) — это панель, где вы можете задать глобальные параметры оформления, которые будут применяться ко всем страницам и элементам вашего сайта. Вместо того чтобы настраивать шрифты, цвета и отступы для каждого виджета по отдельности, вы можете определить эти параметры один раз в Site Settings, и они автоматически распространятся на весь сайт. Это не только экономит время, но и обеспечивает визуальную целостность и узнаваемость бренда. В этой статье мы подробно разберем каждый раздел Site Settings, чтобы вы могли полностью контролировать глобальный дизайн своего сайта.

Как открыть Site Settings

Доступ к Site Settings можно получить двумя способами:

Способ 1 — из редактора Elementor:

1. Откройте любую страницу или запись в режиме «Edit with Elementor».
2. В верхней панели инструментов нажмите на логотип Elementor (гамбургер-меню).
3. В выпадающем меню выберите Site Settings.

Способ 2 — из админ-панели WordPress:

1. Перейдите в WordPress Dashboard → Elementor → Editor.
2. В разделе «Jumpstart your web-creation» нажмите «Customize» под Site Settings.

После открытия панели Site Settings вы увидите три основных раздела: Design System, Theme Style и Settings.

Раздел 1: Design System — Система дизайна

Этот раздел отвечает за глобальные цвета и шрифты, которые формируют визуальную идентичность вашего сайта.

1.1 Global Colors (Глобальные цвета)

Глобальные цвета — это предопределенные цвета, которые можно использовать на любом элементе сайта. По умолчанию Elementor предлагает четыре системных цвета:

• Primary — основной цвет бренда (обычно используется для кнопок, ссылок, акцентных элементов)
• Secondary — вторичный цвет (для дополнительных акцентов)
• Text — цвет основного текста
• Accent — акцентный цвет (для выделения отдельных элементов)

Что можно делать с глобальными цветами:

• Изменять существующие цвета — нажмите на цветовой образец (swatch), чтобы открыть палитру и выбрать новый цвет.
• Создавать новые глобальные цвета — нажмите «Add Color» внизу списка, задайте имя и выберите цвет. Например, вы можете создать цвет «Headers» для всех заголовков.
• Применять глобальные цвета к виджетам — в настройках любого виджета выберите глобальный цвет вместо конкретного HEX-кода. При изменении глобального цвета все элементы, использующие его, обновятся автоматически.

Важно: Elementor по умолчанию использует свои собственные глобальные цвета, которые могут переопределять настройки темы. Если вы хотите, чтобы стили темы имели приоритет, в WordPress Dashboard → Elementor → Settings отключите опцию «Disable Default Colors».

1.2 Global Fonts (Глобальные шрифты)

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

• Primary — основной шрифт (обычно для заголовков)
• Secondary — вторичный шрифт
• Text — шрифт для основного текста
• Accent — акцентный шрифт

Настройка глобальных шрифтов включает:

• Семейство шрифтов — выбор из системных шрифтов, шрифтов Google или загруженных вручную.
• Размер — в пикселях, em, rem или других единицах.
• Вес (жирность) — от 100 (Thin) до 900 (Black).
• Межстрочный интервал (Line Height) — оптимальное значение для читаемости.
• Межбуквенный интервал (Letter Spacing).
• Регистр (Transform) — например, все заглавные буквы.
• Стиль — курсив или обычный.
• Декорация текста — подчеркивание, зачеркивание и т.д.

Как изменить глобальный шрифт:

1. В Site Settings выберите Global Fonts.
2. Нажмите на значок карандаша (pencil icon) рядом с нужной группой.
3. В открывшемся меню Typography настройте параметры шрифта.
4. Закройте меню — изменения сохранятся автоматически.

Создание нового глобального шрифта: Нажмите «Add Style» внизу списка, задайте имя (например, «Subheadings») и настройте типографику.

Раздел 2: Theme Style — Стиль темы

Theme Style — это глобальные настройки, которые задают стили для различных HTML-элементов: заголовков, кнопок, изображений, полей форм и т.д. Эти настройки действуют как базовый уровень (fallback) — они применяются, если для конкретного элемента не заданы индивидуальные стили. Они также могут переопределять стандартные стили темы WordPress.

2.1 Typography (Типографика)

Здесь настраиваются стили для текстовых элементов по умолчанию:

• Text Color — цвет основного текста.
• Typography — семейство, размер, межстрочный интервал и другие параметры для обычного текста.
• Paragraph Spacing — отступ после абзаца (margin-bottom).

Отдельно настраиваются ссылки (Normal и Hover):

• Цвет ссылки в обычном состоянии и при наведении.
• Типографика ссылок.

Для заголовков H1–H6:

• Цвет каждого уровня заголовка.
• Типографика (шрифт, размер, вес и т.д.) для каждого уровня.

2.2 Buttons (Кнопки)

Глобальные настройки для всех кнопок на сайте:

• Typography — шрифт кнопок.
• Text Shadow — тень текста.
• Text Color (Normal/Hover) — цвет текста в обычном состоянии и при наведении.
• Background Color (Normal/Hover) — цвет фона.
• Border Type — тип рамки (Solid, Double, Dotted, Dashed, Groove, None).
• Box Shadow — тень кнопки.
• Border Radius — скругление углов.
• Padding — внутренние отступы.

2.3 Images (Изображения)

Глобальные стили для изображений — например, рамки, тени, скругления (подробные настройки упоминаются в документации Elementor).

2.4 Form Fields (Поля форм)

Настройка внешнего вида полей ввода на сайте (формы обратной связи, комментариев и т.д.):

• Label Color — цвет подписей полей.
• Label Typography — шрифт подписей.
• Field Typography — шрифт текста в полях ввода.
• Text Color (Normal/Focus) — цвет текста в поле.
• Background Color (Normal/Focus) — цвет фона поля.
• Border Type — тип рамки.
• Border Radius — скругление углов.

2.5 Header и Footer (для темы Hello)

Если вы используете тему Hello от Elementor, здесь доступны дополнительные настройки шапки и подвала сайта: ширина, цвет фона, меню, внешний вид элементов.

Раздел 3: Settings — Основные настройки

Этот раздел объединяет все остальные глобальные параметры сайта.

3.1 Site Identity (Идентичность сайта)

• Site Name — название сайта.
• Site Description — краткое описание.
• Logo — загрузка логотипа сайта.
• Favicon — иконка сайта (отображается во вкладке браузера).

3.2 Background (Фон)

• Site Background — фоновое изображение или цвет для всего сайта.
• Mobile Background — отдельный фон для мобильных устройств.

3.3 Layout (Макет)

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

• Content Width — ширина контента для контейнеров в режиме «Boxed». Стандартное значение — 1140 пикселей, что оптимально для большинства десктопных экранов. Если вы хотите, чтобы контент занимал всю ширину экрана, выберите «Full Width».
• Container Padding — внутренние отступы контейнера (расстояние от границ контейнера до его содержимого). Можно задать разные значения для каждой стороны.
• Gaps — промежутки между элементами внутри контейнера. Можно настроить отдельно вертикальные и горизонтальные отступы.
• Page Title Selector — CSS-селектор заголовка страницы. По умолчанию — h1.entry-title. Если ваша тема использует другой селектор, укажите его здесь, чтобы скрывать заголовки страниц при необходимости.
• Stretched Section Fit To — тег, ограничивающий ширину страницы. Обычно это body, но если ваша тема использует другой контейнер, укажите его здесь.
• Default Page Layout — макет страницы по умолчанию:
  • Default — определяется настройками темы.
  • Elementor Canvas — полностью пустой холст без шапки и подвала.
  • Elementor Full Width — контент на всю ширину экрана, но с сохранением шапки и подвала.

3.4 Lightbox

Настройка всплывающего окна для изображений, галерей и видео:

• Включение/отключение Lightbox.
• Настройка анимации, цвета фона, поведения.

3.5 Page Transitions

Анимации перехода между страницами — эффекты появления/исчезновения при загрузке новой страницы.

3.6 Custom CSS

Возможность добавить пользовательские CSS-правила, которые будут применяться глобально ко всему сайту. Это полезно для тонкой настройки дизайна без изменения файлов темы.

Экспорт и импорт настроек

Настройки Site Settings можно экспортировать и импортировать с помощью плагина Settings Manager for Elementor. Это удобно для переноса дизайна между сайтами или для создания резервных копий глобальных настроек. При импорте можно выбрать стратегию:

• Merge — объединить с существующими настройками.
• Replace — полностью заменить существующие настройки.

Практические рекомендации

1. Начинайте с глобальных настроек — прежде чем приступать к дизайну отдельных страниц, настройте цвета, шрифты и макет в Site Settings. Это заложит фундамент для всего сайта.
2. Используйте глобальные цвета и шрифты везде — при настройке виджетов всегда выбирайте глобальные переменные вместо конкретных значений. Это обеспечит гибкость и упростит будущие изменения.
3. Документируйте свою дизайн-систему — запишите, для каких целей используются Primary, Secondary, Text и Accent. Это поможет команде поддерживать единообразие.
4. Тестируйте на мобильных устройствах — глобальные настройки шрифтов и макета должны хорошо выглядеть на всех размерах экранов.
5. Отключайте дефолтные стили Elementor при необходимости — если вы используете кастомную тему, которая уже имеет свои стили, отключите «Disable Default Colors» и «Disable Default Fonts» в Elementor → Settings.

Site Settings в Elementor — это мощный инструмент для централизованного управления дизайном сайта. Правильно настроенная дизайн-система (глобальные цвета и шрифты), стили темы и параметры макета позволяют создавать визуально целостные сайты с минимальными затратами времени на поддержку. Освоив все разделы Site Settings, вы сможете:

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

Начните с настройки Site Settings прямо сейчас — и ваш сайт обретет профессиональный и последовательный вид.