Свойства страницы
Стиль оформления (вкладка Style)
Откройте Свойства страницы -
вкладку Style (меню Page - Page Properties - вкладка Style).
Примечение: С версии WYSIWYG Web builder
8 моделирование (применение CSS) является отдельным от HTML (где
только возможно). Этим достигается более чистый код страницы,
ускоряется загрузка страницы.
Однако это означает, что более
чем когда-либо важно удостовериться, что
Ваши логины уникальны в пределах содержания страницы, иначе тот же
самый
объект получит многократные определения стилей.
Раздел Background (Фон)
Background mode - Определяет фоновый режим.
Transparent - Фон страницы
будет прозрачным (при просмотре в браузере фон будет белым)
Solid - Используйте сполошной цвет фона.
Image - Используйте изображение как фон.
Repeat
Задает расположение листов для фонового изображения (покрытие
"черепицей"):
Возможные варианты:
- Repeat in both directions - Повторите в обоих направлениях
- Repeat in horizontal direction - Повторить в горизонтальном
направлении
- Repeat in vertical direction - Повторить в вертикальном направлении
- Do not repeat - Не повторять
Background image size - Размер фонового изображения (это выпадающий
вариант справа от "повтора") - Задает размер фонового изображения.
empty - пусто (по умолчанию)
Фон-изображение имеет размер по умолчанию и
прокручивается вместе с содержимым.
fixed -
фиксированный
Фиксированный фон - это фоновое изображение,
которое будет оставаться на одном месте, в то время как остальная часть
текста и изображений прокручивается поверх него.
cover
Масштабировать фоновое изображение, чтобы фон
полностью покрыл всю страницу. Некоторые части фонового изображения
могут не отображаться в области позиционирования фона.
contain
Масштабируйте изображение до наибольшего
размера, чтобы его ширина и высота поместились внутри области
содержимого.
parallax
(параллакс)
Изображение прокручивается медленнее, чем
содержимое на переднем плане, создавая иллюзию 3D-глубины.
Для опытных пользователей:
Скорость по умолчанию-0.3. Это можно
изменить, добавив переменную сайта с именем $PARALLAX_SPEED$
Скорость, с которой работает эффект
параллакса. 0.0 означает, что изображение будет отображаться
фиксированным на месте, а 1.0 изображение будет течь с той же
скоростью, что и содержимое страницы.
percentages -
проценты
Например, '100% 100%' растянет изображения до
100% ширины/высоты объекта. Другие значения как "50% 50%" также
возможны.
pixels
- пикселы
Например: '320px 250px' покажет изображение в
указанном размере.
Horizontal
Align - Выравнивание по горизонтали
Устанавливает горизонтальное положение
фонового изображения.
Vertical Align- Выравнивание по вертикали
Устанавливает вертикальное положение фонового
изображения.
Gradient - Используйте градиент (с двумя цветами) как фон. Эта опция поддерживает много
различных стилей градиента, таких как linear, ellipse, glass,
glossy
-линейный, эллипс, стеклянный, глянцевый и т.д.
Опция
Repeat - повторение, т.е страница будет покрыта изображением как
черепицей.
Вы также можете использовать
градиенты
CSS3, включив опцию 'Use CSS3 gradients instead of images'
("использовать градиенты CSS3 вместо изображений") в
меню Tools -> Options ->
HTML.
Однако имейте в виду, что не все браузеры поддерживают CSS3.
По умолчанию фоновое
изображение будет произведено для эффекта градиента. Однако Вы можете
также использовать градиенты CSS3, в меню Tools выбрав Options -> HTML -> 'Use CSS3
gradients instead of images'
Эффект градиента может
использоваться графическими формами, ClipArt,
TextArt и другими инструментами
рисунка.
Имейте в виду однако, что не
все браузеры поддерживают CSS3.
Multi color gradient - Многоцветный градиент
Используйте многоцветный
градиент как фон.
WYSIWYG Web Builder включает
много цветных стилей градиента, но Вы можете легко создать свой
собственный стиль с Gradient Style Manager - Менеджером стиля
градиента.
Точно так же как стандартная
опция градиента, в этом случае поддерживается много различных стилей
градиента - линейный, эллипс, стеклянный, глянцевый и т.д.
Color - выбор цвета
Pattern -
Образец -
Используйте образец как фон.
Texture - Используйте текстуру как фон.
Border - Граница
Стиль границы -
Пунктирный, подчеркнутый штриховой линией, двойная линия и др.
Для многих объектов Вы
можете также установить индивидуальный стиль, ширину, цвет и радиус для
каждой стороны границы! Выберите 'Индивидуальный стиль для каждой
стороны' и затем щелкните "Settings".
Width - Определяет толщину
границы ( 0 - нет границ).
Color - Цвет границ
Radius - Определяет
закругленность углов
Новое для Фон (Background)
- Новая функция: добавлена поддержка рендеринга фона Карт Google (Google Maps).
Теперь вы можете использовать (статическое) изображение карты Google в
качестве фона в большинстве объектов.
Например: https://maps.googleapis.com/maps/api/staticmap?center=New +
York, NY&zoom=12 & размер=440x330
- Улучшено: фоновый режим - > изображение (Background mode ->
image) теперь отображает палитру цветов, чтобы выбрать цвет
для изображения + цвет и изображение + наложение.
- Новая функция: добавлена опция "image+fade"
(изображение+исчезать) в свойствах фона. Это добавит эффект
градиентного
наложения на фон.
- Новая функция: добавлена системная переменная $PROJECT_CSS$. Это
позволяет указать другое имя для глобальной (внешней) таблицы стилей
вместо имени проекта.
При использовании Сетки расположения (Layout
Grid)
- Новая функция: добавлена новая опция повторения фона: пробел. Фоновое
изображение повторяется в максимально возможной степени без обрезки.
Первое и последнее изображения прикрепляются по обе стороны от
элемента, и пробелы равномерно распределяются между изображениями.
- Новая функция: добавлена новая опция повторения фона: круглая.
Фоновое изображение повторяется и сжимается или растягивается, чтобы
заполнить пространство (без пропусков).
Новая функция: добавлено 28 стилей градиента
в свойства стиля
страницы. На выходе будет полноразмерный фоновый градиент с
использованием CSS (вместо изображений, как в предыдущих версиях).
Для обратной совместимости по-прежнему доступны варианты «по
горизонтали» и «по вертикали» (с выводом изображения).
Большинство встроенных объектов теперь поддерживают
стили. Это значит, что цветами и шрифтами этих объектов можно управлять
из одного места (в менеджере стилей). Подробнее
Темная цветовая схема Подробнее
Раздел "Defaults"
Text - Текст
Font - Шрифт
Style - Определяет стиль
текста такой как Bold, Italic or Regular-Полужирный, Курсив или
Регулярный.
Size - Определяет размер
текста.
Color - Определяет цвет
текста.
Theme -
Определяет тему страницы, основанную на ThemeRoller.
Эта тема будет
применена к позволенным объектам всей темы как jQuery UI
widgets (виджеты jQuery UI). Помимо
jQuery UI виджетов Вы можете также позволить темы (theming) для строки
меню,
навигационных панелей, меню счета, slidemenu, горизонтальной линии.
Этим
путем Вы можете дать оформление всей страницы в одном стиле. Темы
могут быть созданы и отредактированы с Менеджер темы (Theme
Manager).
Style Manager - Менеджер Стиля
С Менеджером стиля
(Style Manager)
Вы можете управлять стилями проекта. При использовании стилей Вы
можете изменить стиль всего вебсайта, все в одном месте.
Менеджер стиля можно
открыть, используя:
- Меню Format - Styles - Style Manager
- Ленту - вкладку Tools - раздел Site Tools - Style Manager
Подробнее
о Менеджере стиля
Макет страницы
В
WYSIWYG Web Builder v 12 возможно создание полного макета страницы
(Full Page Layouts) со слоями и создание макета страницы с
использованием карусели.
Создать полный макет страницы с карусели
Создать полноценный сайт-страницу с помощью Карусели.
При этом можно создать карусель с автоматической прокруткой. Это
означает, что вы можете использовать колесо прокрутки мыши, чтобы
быстро
перейти на следующую страницу/слайд.
В свойствах карусели (Carousel properties) установите режим
полной
ширины fullpage. При этом стандартный скрипт карусели с fullPage.js
будет заменен, чтобы создать не горизонтальную, а вертикальную
прокрутку.
Добавьте содержимое каждого слайда, со своим заголовком и другим
содержимым. Кроме того, каждый слайд может иметь свой цвет фона
или фоновое изображение.
Вы также можете добавить меню в верхней части страницы. Чтобы сделать
меню видимым все время, его можно добавить в липкий слой.
Подробнее
(англ. язык)
Посмотреть пример:
http://www.wysiwygwebbuilder.com/support/carouselfullpage.html
Скачать демо-проект:
http://www.wysiwygwebbuilder.com/support/carouselfullpage.zip
Связанные учебные материалы:
http://www.wysiwygwebbuilder.com/carousel.html
http://www.wysiwygwebbuilder.com/carousel3d.html
http://www.wysiwygwebbuilder.com/carouselevents.html
Цвета темы
Новое - По умолчанию палитра цветов WYSIWYG Web Builder отображает стандартную
цветовую палитру с 140 стандартными веб-цветами.
С опцией «Цвет темы» (по типу палитры цветов MS Office) вы можете
настроить собственную цветовую палитру из 12 цветов.
Светлые и темные варианты этих цветов будут генерироваться
автоматически, как в MS Office.
Цвета темы можно включить в Сервис -> Параметры -> Интерфейс
пользователя.
Подробнее
См. также:
Параллакс
Последнее
обновление: январь
2024 г.
|