Редактор Studio Two: Настройка дизайна меню сайта

В Редакторе Studio Two можно точно настроить дизайн меню с помощью панели «Инспектор». Настройте отдельно каждое состояние: В покое, При наведении, Выбрано или Текущая страница. Также можно изменить цвет заливки, стиль текста, тень и другие настройки.

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

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

1. Перейдите в редактор.

2. Нажмите меню на холсте.

3. Нажмите значок Открыть Инспектор  в правом верхнем углу редактора.

4. Перейдите на вкладку Дизайн.

5. Выберите элемент, дизайн которого хотите настроить, в разделе Выберите, что настроить: например, Панель меню, Пункты меню, Выпадающие меню, Кнопка прокрутки.

6. Выберите нужное состояние: В покое, При наведении или Выбрано.

7. Настройте дизайн меню с помощью доступных параметров, например:

   • Заливка: измените цвет фона, значка или наложения.

   • Границы: добавьте или настройте границы.

   • Углы: сделайте углы более прямыми или скругленными.

   • Тень: добавьте тень, чтобы создать эффект глубины.

   • Интервал: настройте расстояние вокруг пунктов и между ними.

   • Поведение: настройте соответствие меню направлению сайта и расположение его пунктов.

   • Положение: задайте тип положения и поля.

   • Внешний вид: настройте прозрачность и поворот.

   • Курсор: добавьте собственный курсор в виде изображения или SVG-файла.

   • Якорь: добавьте якорь, чтобы посетители могли переходить по ссылке прямо к этой области.

   • Пользовательский CSS: добавьте пользовательский CSS-код для расширенного управления дизайном.

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

1. Перейдите в редактор.

2. Нажмите меню-гамбургер на холсте.

3. Нажмите раскрывающийся список режимов и выберите режим, который хотите настроить: Обычный режим или Меню-гамбургер.

4. Настройте режим с помощью доступных параметров:

   • Обычный режим: 

     • Выберите часть для настройки дизайна: нажмите раскрывающийся список и выберите Кнопка меню-гамбургера или Значок.

     • Выберите состояние: выберите нужное состояние, например В покое или При наведении.

     • Настройте дизайн: используйте доступные параметры, чтобы изменить внешний вид и макет:

       • Размер: настройте размер меню-гамбургера.

       • Заливка: измените цвет фона, значка или наложения.

       • Границы: добавьте или настройте границы.

       • Углы: сделайте углы более прямыми или скругленными.

       • Тень: добавьте эффекты тени.

       • Интервалы: настройте расстояние вокруг пунктов и между ними.

       • Поведение: настройте расположение пунктов меню в соответствии с направлением сайта.

       • Положение: задайте тип положения и поля.

       • Внешний вид: настройте прозрачность и поворот.

       • Курсор: добавьте собственный курсор с помощью изображения или файла SVG.

       • Пользовательский CSS: добавьте собственный код CSS для расширенной настройки дизайна.

   • Меню-гамбургер:

     • Выберите часть для настройки дизайна: выберите нужную часть в разделе Выберите, что настроить:

       • Меню-гамбургер: настройте контейнер, который открывается, когда посетители нажимают меню-гамбургер.

       • Кнопка закрытия: настройте значок, который посетители нажимают, чтобы закрыть меню.

       • Значок: настройте дизайн значка.

     • Выберите состояние: выберите нужное состояние, например В покое, При наведении или Отключено. Доступные состояния зависят от выбранной части.

     • Настройте дизайн: используйте доступные параметры, чтобы изменить внешний вид и макет:

       • Заливка: измените цвет фона, значка или наложения.

       • Границы: добавьте или настройте границы.

       • Углы: сделайте углы более прямыми или скругленными.

       • Тень: добавьте эффекты тени.

       • Интервалы: настройте расстояние вокруг пунктов и между ними.

       • Поведение: настройте расположение пунктов меню в соответствии с направлением сайта.