|
|||||||
Содержание
Введение |
СлоиСлой (Уровень) - контейнер для других объектов. Вставка слоев Уровни вставляются на страницу, используя: Панели вставок - Layer Лента - вкладка Insert - раздел Other - Advanced - Layer В авторской справке для работы со слоями применен термин Z-Order, то есть положение слоя по оси Z. WYSIWYG Web Builder использует CSS. CSS работает в трех измерениях - высота, ширина и глубина. В WYSIWYG Web Builder каждый объект (элемент) Вашей web-страницы помещен в отдельный уровень, который позволяет накладываться объектам друг на друга. Обычно это нельзя сделать, используя стандартный HTML. Элементы с более высоким z-индексом накладываются на элемент с более низким z-индексом. Редактор автоматически производит z-индекс для каждого объекта, который Вы добавляете к своей странице. Таким образом у первого элемента будет z-индекс '0', следующий объект '1' и т.д. Чтобы изменить z-индекс объектов, Вы можете использовать инструменты упорядочения:
Следующие инструменты упорядочения доступны: Move
To Front - Переместите объект на передний план
Move To Back - Переместите объект на задний план Move object to next position in z-order - Переместите объект на одну позицию вниз Move object to previous position in z-order - переместите объект на одну позицию вверх Move Back - Переместите объект в предыдущую позицию в z-заказе Для перемещения нескольких объектов в "стопке слоев" выделите объекты, после этого в меню Arrange выберите Arrange -> Move to Front (переместить на передний план). Вы можете также использовать Object Manager (Менеджера Объекта), чтобы продвинуть объект вверх или вниз в z-заказе. У контекстного меню формы также есть 'Arrange objects' -'опция объектов Упорядочения, которая позволяет Вам перестраивать порядок объектов в форме. Объекты можно перетаскивать и отпускать на уровне. Некоторые из достоинств уровней: регулируемая прозрачность, возможность показать/скрыть, точное позиционирование, несколько фоновых повторений и опций выравнивания. Настройки слоев
Opacity - Непрозрачность - Измените прозрачность уровня от 0 до 100 % Overflow - Переполнение
Примечание:
Чтобы создать/обновить содержание уровня, Вы должны изменить размеры этого в проектировщике, таким образом все объекты будут видимы. После того, как Вы создали/обновили размещение, Вы можете изменить размеры уровня к желательному размеру. Вы не можете прокрутить содержание уровня в Web Builder. Режимы слоев - Layer Mode У слоев (уровней) есть несколько режимов: Default mode - режим по умолчанию. В режиме Default уровень будет установлен в местоположение, куда Вы поместили его Sticky Layer Mode - режим прилипания. Режим Sticky Layer сохраняет уровень видимым всегда. Это может быть полезно, если, например, Вы хотите сохранить меню видимым, даже если страница прокручивается. Новое для Sticky
Layer (Липкие слои) - Добавлено свойство «z-index» в липкий слой. Это
позволяет перезаписать автоматически сгенерированный z-индекс.
Например, если вы хотите, чтобы липкий слой находился поверх всего
остального. Оставьте поле пустым для поведения по умолчанию.
Header/Footer mode - режим верхнего и нижнего колонтитула. Режим Header/Footer может быть полезным, если Вы используете уровень как заголовок или нижний колонтитул для Вашей страницы обычно в комбинации с опцией ''relative horizontal resizing'. Обычно эта опция (и другие относительные опции) добавят код "after the <body>" - после тега<body> (см. Вставка кода), приводящий к более высокому z-индексу. Выбор режима 'Header/Footer' вставит код перед тегом <body>, таким образом уровень будет позади всего другого содержания. Есть также режим уровня Docking layer, который позволяет Вам состыковывать уровень с определенной стороной экрана или разместить в центре экрана. Главное различие между этим режимом и липким режимом уровня - то, что режим стыковки уровня не использует JavaScript, вместо этого используется CSS. Этот режим может также быть полезным для верхних и нижних колонтитулов. С Anchored Layer (Поставленным на якорь Уровнем) Вы можете поставить на якорь одну или более сторон уровня к сторонам страницы. Например, если Вы допустите 'Anchor Left' или 'Anchor Right', то уровень будет простираться, если Вы измените размеры окна браузера (при смещении левая и правая границы страницы останется тем же самым). Но Вы можете также поставить на якорь только одну границу (или все). Разделители (Dividers) Разделители фигур (Shape Dividers) — это фигуры на основе SVG, которые можно использовать для разделения разделов страницы. Вы можете выбирать из более чем 30 форм разделителей, но вы также можете добавлять файлы SVG пользовательских форм. Разделитель доступен в слоях, Сетках расположения и Flexbox. (см. Сайты для разных экранов) Разделители фигур представляют собой файлы SVG и хранятся в подпапке «разделители» системной папки. Обычно это C:\Users\Имя пользователя\Documents\WYSIWYG Web Builder\system\dividers. Разделители могут быть добавлены вверху или внизу (или в обоих местах) слоя. Из настроек - Orientation определяет, какая сторона редактируется в данный момент, цвет фигуры. ширина, высота. Фигуры можно переворачивать по горизонтали/вертикали. Это позволяет использовать формы, предназначенные для использования сверху, а также снизу (отразить по вертикали). «Смещение» (offset) используется для перемещения разделителя в центр (50%) контейнера (или куда-либо еще). Адаптивные свойства - видимость, положение объекта, размер объекта, фон, цвет границы, радиус границы, тень. См. также: Panel Layer Panel Layer (Слой панели) изначально невидим, но может перемещаться с правой или левой стороны страницы с помощью Событий (показать/скрыть). Также возможно вызвать панель через Panel Menu (Меню панели). Отображение определяет связь панели с содержимым страницы. «Push» передвигает страницу, а «overlay» отображает слой поверх содержимого. В режиме Fixed (Фиксированный слой панели всегда будет виден (только слева и справа). Dismissible: указывает, можно ли закрыть панель, щелкнув ее снаружи. Точка останова: если область просмотра меньше указанного значения точки останова, слой панели станет полной ширины. Новое
для Panel Layer - Добавлен «фиксированный» режим отображения для слоя
панели. В фиксированном режиме слой панели всегда будет виден.
Новые функции:
- добавлена поддержка вертикальных разделителей формы Shape Dividers. Это позволяет добавлять разделитель слева или справа от слоя, сетки макета и т. д. - добавлена опция «смещение». Полезно для перемещения разделителя в центр (50%) контейнера. Контейнер Flex (Flex container) Dialog / Modal Layer Диалоговый/модальный слой - Новая функция: добавлена возможность установить тег заголовка для заголовка диалога (применимо только к Bootstrap). Раньше для тега title было установлено значение <h4>, но теперь вы можете управлять им самостоятельно. Это может быть полезно для оптимизации заголовка вашего веб-сайта и/или улучшения показателей скорости света. Создание адаптивных сайтов с использованием плавающих слоев Объект Layer (слой) в WYSIWYG Web Builder является очень мощной функцией для продвинутых веб-макетов, и может быть использован для многих различных типов макета. В WYSIWYG Web Builder 9 введено понятие "плавающих слоев". Такие слои могут использоваться для создания "отзывчивых" макетов, т.е. такие макеты будет автоматически адаптироваться на основе доступного размера экрана (например - на экранах мобильных телефонов). Floating Layer - Плавающий режим слоя для расширенного использования. Это сделает уровень плавающим вместо того, чтобы иметь неподвижную позицию. Если многократные плавающие уровни будут помещены на страницу, то они будут размещены друг рядом с другом (слева направо) в зависимости от доступного места экрана. Режим плавающего слоя сделает слой "плавающим" вместо фиксированного положения. Если на странице размещено несколько плавающих слоев, то они будут располагаться рядом друг с другом (слева направо) в зависимости от доступного места на экране. Если слой не умещается в текущей строке, то он будет перенесен в следующую строку. Подробнее (англ. язык) Пример веб-страницы для экранов разных размеров (измените ширину окна браузера) См. также Сайты для разных экранов). Режим опции Floating может использоваться, чтобы управлять плавающими уровнями Default
- уровень
будет установлен к правой стороне предыдущего плавающего объекта (или
при переполнении строки объект будет перемещен в следующую строку)
Clear Left - Левый уровень будет перемещен к следующей строке. Full Width - уровень будет использовать полную ширину (100 %) страницы. Никакие другие объекты не могут быть на той же самой строке. Этот режим может быть полезным для заголовков или нижних колонтитулов. Modal Layer - установит уровень на самый верх стопки уровней. Другие элементы на странице будут заблокированы, пока Вы не закроете уровень. В основном это преобразует уровень в диалог jQuery Диалог, но без theming. Panel Layer - Уровень Панели. Первоначально невидим, но может скользить от правой или левой стороны страницы при использовании события (показать/скрыть). Display - определяет отношения панели к содержанию страницы. Default Mode Relative horizontal position - Похож на режим Default. Вместо того, чтобы использовать абсолютные координаты, позиция уровня теперь будет относительно ширины страницы. Это свойство только имеет эффект, когда страница отображена в браузере! Relative vertical position -Относительная вертикальная позиция Вместо того, чтобы использовать абсолютные координаты, позиция уровня теперь будет относительно высоты страницы. Это свойство только имеет эффект, когда страница отображена в браузере! Relative horizontal sizing - Вместо того, чтобы использовать абсолютные измерения, ширина уровня теперь будет относительно ширины страницы. Это свойство только имеет эффект, когда страница отображена в браузере! Relative vertical sizing -Относительное вертикальное установление размеров Вместо того, чтобы использовать абсолютные измерения, высота уровня теперь будет относительно высоты страницы. Это свойство только имеет эффект, когда страница отображена в браузере! Right - Устанавливает позицию объекта относительно правого края страницы. Это заменит 'левый' признак. Bottom - Основание Устанавливает позицию основания объекта относительно основания страницы.
Примечания о Stretch content: Эта функция была прежде всего создана, чтобы использоваться для верхнего и нижнего колонтитулов, которые должны занимать всю ширину окна браузера. Но эта опция будет только работать также с такими объектами, как изображения, формы, текст, и не будет работать с расширенными объектами, такими как меню, расширения, блог, галереи и т.д. Эти объекты не могут быть растянуты на всю ширину окна браузера. Растяжение изображений может снизить качество изображений. Sticky Mode - Режим прилипания Orientation - Ориентация - Определяет, какой стороны окна браузера будет 'придерживаться' уровень. Вы можете использовать значения смещения, чтобы установить горизонтальное и вертикальное смещение от границ. Значение Delay определяет задержку мультипликации. Связанная обучающая программа: http://www.wysiwygwebbuilder.com/using_layers.html Новое в WYSIWYG Web Builder 11 Относительные слои теперь используют числа плавающей запятой в процентах, чтобы уменьшить округление ошибок. Липкий слой теперь использует Affix. Добавленная функция 'Box Sizing', которая используется, чтобы сказать браузеру, что должны включать свойства калибровки (ширина и высота). Выбор 'Box Sizing' особенно полезен для полных слоев ширины, где Вы обычно хотите границу в области видимости (viewport). С 'Box Sizing' размер границы будет добавлен к полной ширине (будет более 100 %). Добавлена опция 'Enable form' (Позволить форму) - этот выбор преобразует слой в форму. Добавлена опция 'Enable backdrop' (Позволить фон) Добавлена опция 'Close on escape' для Модального (плавающего) слоя. Слой исчезает при щелчке вне слоя (посмотреть пример модального слоя). Определяет, закроет ли нажим клавиши 'esc' модальный слой. Добавлена опция 'Display close button' (Показать кнопку закрытия) Добавлен выбор 'Animation' ('Мультипликации') для Модального Слоя. Определяет, используется ли мультипликация, чтобы показать/скрыть модальный слой Добавлен способ Full Screen (‘Полный Экран’). Это установит ширину/высоту слоя к 100 % представления. И другое Посмотреть пример Обучение Modal Layer Режим слоя Modal Layer расположит слой поверх всего на странице. Другие элементы на странице будут отключены, пока вы не закроете этот слой. Enable background - указывает, включено ли наложение фона. Close on escape - указывает, будет ли нажатие клавиши 'esc' закрывать модальный слой. Модальный тип jQuery UI (как и в предыдущей версии WWB) или Bootstrap. В отличие от опции jQuery UI Bootstrap является отзывчивым, так что слой может иметь различный размер в контрольных точках (точках останова). Также Bootstrap использует заголовок слоя в заголовке. Слой панели изначально невидим, но может скользить с правой или левой стороны страницы с помощью событий (Показать / Скрыть). Display, определяет отношение панели к содержимому страницы. "Push" толкает страницу и "overlay" отображать слой над содержанием. Dismissible указывает, можно ли закрыть панель, щелкнув снаружи на странице. Точка останова, когда видовой экран меньше заданного значения точки останова, слой панели становится полной шириной. Связанные онлайн учебник: http://www.wysiwygwebbuilder.com/floating_layers.html Новое
в Диалоговом/модальном слое (Dialog / Modal Layer) - добавлена
возможность установить тег заголовка для заголовка диалога (применимо
только к Bootstrap). Раньше для тега title было установлено значение
<h4>, но теперь вы можете управлять им самостоятельно. Это может
быть полезно для оптимизации заголовка вашего веб-сайта и/или улучшения
показателей скорости света.
Rollover Layer Rollover Layer работает так же, как и Rollover Image, но вместо изображений теперь можно использовать объекты любого типа. В дополнение к фиксированному режиму (где вы можете разместить объект в любом месте), объект также поддерживает плавающий режим, поэтому его можно использовать в Layout grids (Сетках расположения). Новое в WYSIWYG Web Builder 12 Улучшено: поля плавающих слоев теперь реагируют (responsive), поэтому они могут иметь разные значения в точках останова (в Контрольных точках). - добавлена опция ‘Position children’ ("положение детей"). По умолчанию дочерние элементы слоя используют абсолютные позиции, поэтому их можно разместить в любом месте. При использовании плавающего режима 'floating' объекты внутри слоя будут плавать вместо фиксированного положения. Это может быть полезно при использовании плавающих слоев, для которых задан 'Relative horizontal sizing' ("относительный горизонтальный размер"), для создания жидких макетов. - добавлена функция "100vh" в опции плавающего режима. При этом высота слоя будет равна 100% видового экрана. Это может быть полезно для создания плавающих слоев с относительным горизонтальным размером. Например, для создания столбцов полной высоты. - добавлена опция наложения фона. При этом используется указанный цвет фона (и Альфа-значение) для добавления и наложения на фоновое изображение. - добавлена возможность использовать видео в качестве фона. Поддерживаются URL-адреса Youtube и Vimeo. Это особенно полезно для полной ширины/полноэкранных слоев. - Новая функция: добавлена возможность выбора семантического тега HTML5 вместо универсального < div>. Доступные параметры: <article> (<статья>), <aside>, <footer> (<нижний колонтитул>), <header> (<заголовок>), <nav> (<навигация>), <section> (<раздел>). В WYSIWYG Web Builder 14 Новая функция: добавлено свойство breakpoint ("точка останова" или Контрольная точка) для слоя панели. Если область видимости меньше заданного значения точки останова, слой панели будет иметь полную ширину. В WYSIWYG Web Builder 15 - Новая функция: добавлена поддержка «перетаскивания» для реорганизации плавающих элементов. Теперь вы можете перетаскивать плавающий слой (сетка макета / flexbox) до или после другого плавающего объекта. - Новая функция: добавлен режим Lightbox («лайтбокс»). Это позволяет отображать содержимое слоя в лайтбоксе. Лайтбокс может быть открыт / закрыт через события (показать / скрыть). Поддерживаемые лайтбоксы: fancybox, magnificpopup, colorbox, lightcase, prettyphoto, swipebox, tosrus, venobox. Посмотреть пример Новое для Слой (Layer) - добавлены параметры плавающего режима, добавлено вертикальное выравнивание для плавающих макетов, добавлена возможность устанавливать отступы и другое. Подробнее См. также: Параллакс Работа со слоями и пр. (видео) Наложение фонового заполнения (видео) Всплывающее окно (Лайтбокс) Последнее обновление: январь
2024 г.
|
||||||
|