Окно Стиль Полос

Этап 4 - Страницы > Команды панели инструментов и сетка >

Окно Стиль Полос

Previous pageReturn to chapter overviewNext page
Verborgen tekst tonen/verbergen

С помощью команд этого окна, открываемого кнопкой Стиль Полос, расположенной на панели инструментов Модульной сетки в окне Создание Страниц, можно настроить стиль строки, то есть горизонтальной полосы, занятой группой объектов, расположенных на странице.

Это окно состоит из следующих разделов:

Общие
Full Height
Кликните, чтобы развернуть/уменьшитьСправка: команды в разделе Общие

Данный раздел предлагает:

Сетка, воспроизводящая конфигурацию страницы так, как задано в окне Создание Страниц;
список доступных опций.

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

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

Можно объединить несколько последующих строк и придать им один стиль. В зависимости от расположения объектов в сетке или от их упорядочивания, при работе над адаптивным сайтом, некоторые строки могут объединиться автоматически. Для получения дополнительной информации см. Как работать над стилем строки.

После того, как вы выбрали строку или группу строк, над которыми вы намерены работать, прежде всего, следует определить тип Фон, который вы хотите задать, выбрав среди:

Цветной— фон строки окрашен одним сплошным цветом.

Градиент— фон строки занят цветовым переходом, в котором можно настроить начальный и конечный цвет, а также направление градиента.

Изображение— фон строки создается импортированным изображением.

Список изображений— в качестве фона строки задается слайд-шоу, в котором изображения отображаются одно за другим.

Видео— в качестве фона строки используется видео.

Карта— в качестве фона строки используется карта.

В зависимости от типа фона можно использовать различные параметры вкладки Настройки. Доступные опции:

Цвет— указывает цвет для окрашивания фона.
Начальный цвет / Конечный цвет— указывают начальные и конечные цвета для создания градиента.
Диффузия— задает, будет ли в градиенте доминирующим начальный или конечный цвет, указывая пространство (в %), в котором должен произойти переход первого цвета во второй.
Направление— задает величину угла, определяющего ориентацию эффекта размытия.
Локальный файл на компьютере— указывает на файл изображения (в форматах .JPG, .GIF или .PNG), используемого в качестве фона. Изображение можно найти в онлайн-библиотеке открываемой кнопкой , или в локальных папках кнопкой Выбор файла.
Положение— указывает, должно ли повторяться фоновое изображение. Изображение может повторяться по горизонтали, по вертикали или сразу в обоих направлениях, чтобы занять все отведенное пространство. Фоновое изображение должно быть специально откадрировано так, чтобы можно было заполнять им пространство.
Выравнивание— указывает как должно выравниваться изображение, вставленное в качестве фона, относительно области, занимаемой строкой.
Добавить… / Удалить— позволяют создать список изображений, которые можно использовать в качестве фона строки, добавив новые файлы (в формате .JPG, .GIF, .PNG) или удалив выбранные файлы из тех, которые уже вставлены.

Если нажать треугольник на кнопке Добавить..., появляется подменю со следующими пунктами: Добавить изображение... и Изображение из онлайн-библиотеки....

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

Сдвинуть вверх / Сдвинуть вниз— определяет порядок отображения изображений, входящих в список, сдвигая вверх или вниз выбранное изображение.
Отображение— указывает, каким образом должен происходить переход между фоновыми изображениями строки. В вашем распоряжении следующие варианты:
Изображения во временной последовательности изображения отображаются последовательно, одно за другим, с эффектом исчезновения при переходе. Переход происходит через заданный интервал в 3 секунды.
Изображения, отображающиеся последовательно в зависимости от прокрутки изображения отображаются одно за другим, без какого-либо эффекта перехода. Показываемое изображение зависит от положения прокрутки страницы.
Наложенные изображения все изображения отображаются одновременно, одно поверх другого. В этом случае рекомендуется использовать изображения в формате .PNG с прозрачным фоном и применять эффект параллакса.
Тип видео— указывает, должен ли использоваться для видео, применяемого в качестве фона строки, Локальный файл на компьютере, Файл в Интернет или Видео из Youtube.
Локальный файл на компьютере / Файл в Интернет / URL видео в Youtube— предлагаемые в зависимости от выбранногоТип видео, эти параметры позволяют выбрать, какой видеофайл будет импортирован, или ввести URL-адрес в Интернете, где расположен этот видеофайл.
Обложка— указывает изображение в режиме предпросмотра, ассоциированное с видео. И в этом случае изображение можно найти в онлайн-библиотеке открываемой кнопкой , или в локальных папках кнопкой Выбор файла.

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

Адрес— это адрес, который должен отображаться на карте, заданной в качестве фона строки.
Стиль— определяет как должна отображаться карта, выбирая из Улица, Спутник, Гибрид и Рельеф.
Режим масштабирования— определяет масштаб увеличения для отображения карты.
Непрозрачность— задает степень прозрачности применяемого цвета /градиента /фонового/видеофайла/карты изображения. Чем меньше (ближе к нулю) заданное значение, тем выше прозрачность фона строки, тем лучше виден фон страницы.

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

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

И, наконец, можно активировать следующие Параметры:

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

Эффект параллакса, основанный на разной скорости перемещения изображений, нельзя активировать, если в качестве фона строки задан один сплошной цвет.

Кликните, чтобы развернуть/уменьшитьСправка: команды в разделе Full Height

С помощью команд этого раздела можно настроить Строки таким образом, чтобы каждая Строка (или группа Строк, объединенных между собой) принимала всегда как минимум высоту окна браузера, независимо от высоты размещенного в ней контента. В результате при навигации Страницы Строки будут отображаться в виде последующих слайдов или, в зависимости от настроенной функции перехода, будут накладываться друг друга.

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

После того, как это будет сделано, можно указать, как должен происходить переход от одной строки к другой:

Разрешить автопрокрутку— если активировать эту опцию, то, когда при прокрутке Страницы начинает показываться новая Строка, Страница прокручивается автоматически так, чтобы полностью отобразить данную Строку.

Наконец, также возможно обеспечить Команды навигации:

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

 


Лучшая практика:

-

Как работать надСтиль Полос


Более подробная информация:

-

Блочная модель в WebSite X5