header-logo
Узнайте как использовать Wix для создания своего сайта и бизнеса.
Создавайте и управляйте своим сайтом, используя интуитивно понятные функции Wix.
Управляйте подписками, планами и счетами.
Управляйте своим бизнесом и общайтесь с пользователями.
Узнайте, как приобрести, подключить или перенести домен на свой сайт.
Получите инструменты для развития вашего бизнеса и присутствия в интернете.
Повышайте свою видимость с помощью инструментов SEO и маркетинга.
Получайте расширенные функции, которые помогут вам работать более эффективно.
Находите решения, узнавайте об известных неполадках или свяжитесь с нами.
placeholder-preview-image
Совершенствуйте навыки с помощью наших курсов и учебных статей.
Получайте рекомендации по веб-дизайну, маркетингу и многому другому.
Узнайте, как увеличить органический трафик из поисковых систем.
Создайте собственный сайт на нашей полнофункциональной платформе.
Найдите подходящего специалиста, который поможет вам достичь целей.
placeholder-preview-image

Редактор Wix: настройка хедера сайта

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

Изменение дизайна хедера

Вы можете изменить дизайн хедера. Выберите дизайн из множества пресетов и настройте такие параметры, как цвет, интервал и углы.
Вы можете настроить хедер для 2 разных состояний - в покое и при прокрутке. Состояние прокрутки позволяет настроить хедер таким образом, чтобы он выглядел по-разному, когда посетители прокручивают страницу вниз. Например, вы можете настроить изменение цвета заголовка или добавить границу, чтобы он выделялся.  

Чтобы изменить дизайн хедера:

  1. Перейдите в редактор.
  2. Нажмите на хедер
  3. Нажмите Изменить дизайн хедера.
  4. Нажмите на состояние В покое или Прокрутка.
  5. Используйте параметры для настройки дизайна хедера:
    • Цвет и прозрачность: выберите цвет фона для хедера и настройте его прозрачность.
    • Граница: перетащите ползунки, чтобы добавить верхнюю и нижнюю границы к хедеру. Затем настройте прозрачность и цвет границ.
    • Уголки: сделайте углы границы более квадратными.
    • Тень: добавьте тень, чтобы придать хедеру 3D эффект.
Скриншот панели изменения дизайна хедера в редакторе Wix.

Установка изображения в качестве фона хедера

Чтобы еще больше персонализировать сайт, вы можете установить изображение в качестве фона хедера. Перетащите изображение в хедер, чтобы прикрепить его, затем используйте ручки перетаскивания, чтобы растянуть изображение на всю ширину. Затем вы можете переместить изображение на задний план, чтобы оно не скрывало элементы хедера.
Изображение должно быть меньше, чем хедер, чтобы поместиться внутри него и быть прикрепленным корректно. Мы рекомендуем использовать изображение с разрешением и размером, совместимым с размером хедера, например изображение баннера. 

Чтобы использовать изображение в качестве фона хедера:

  1. Перейдите в редактор.
  2. Добавьте новое изображение или выберите уже созданное.
  3. Перетащите изображение в хедер и отпустите его, когда увидите сообщение Прикрепить к хедеру
  4. Растяните изображение, чтобы закрыть весь хедер, перетащив боковые ручки вокруг изображения.
  5. Переместите фото на задний план:
    1. Нажмите на изображение правой кнопкой.
    2. Наведите курсор на Переместить и нажмите Назад.
Скриншот панели быстрого редактирования хедера в редакторе Wix.
Совет:
Замените изображение хедера в любое время с помощью панели быстрого редактирования, нажав Заменить рядом с текущим изображением. 

Как сделать фон хедера прозрачным

Сделайте хедер прозрачным, чтобы создать современный, элегантный дизайн, гармонично сочетающийся с фоном вашего сайта.

Чтобы сделать фон хедера прозрачным:

  1. Перейдите в редактор.
  2. Нажмите на хедер
  3. Нажмите Изменить дизайн хедера.
  4. Нажмите на состояние В покое или Прокрутка.
  5. Перейдите в раздел Цвета и прозрачность в окне настройки. 
  6. Установите прозрачность фона на 0%.
Панель Дизайн хедера с параметром прозрачности 0

Изменение размера хедера

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

Чтобы изменить размер хедера:

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

Добавление эффекта прокрутки в хедер

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

Чтобы выбрать эффект прокрутки для хедера

  1. Перейдите в редактор.
  2. Нажмите на хедер
  3. Нажмите значок Настроить .
  4. Выберите эффект прокрутки:
    • Прокрутка с сайтом: эффект прокрутки не применяется. Когда посетители прокручивают страницу вниз, они также прокручивают и хедер (т. е. верхнюю часть страницы). 
    • Замирает: хедер остается вверху страницы, когда посетители прокручивают вверх и вниз, что дает им легкий доступ к меню вашего сайта.
      Совет: при выборе этого эффекта мы рекомендуем держать хедер коротким, чтобы он не перекрывал контент при прокрутке.
    • Исчезает: когда посетители прокручивают сайт, хедер постепенно исчезает. Чтобы хедер появился снова, посетители должны начать прокрутку вверх.
    • Расплывается: хедер медленно исчезает, когда посетители прокручивают сайт, и появляется снова, когда они начинают прокручиваться обратно наверх.
Скриншот настроек прокрутки хедера в редакторе Wix.

Часто задаваемые вопросы

Нажимайте на вопросы ниже, чтобы получить дополнительную информацию.