Scroll

Дизайн

1. Фон
2. Цвета
3. Стиль текста
4. Темы
5. Размеры и значения

1. Фон

Параметр "Стиль фона" определяет дизайн фона. Он реализован в виде выпадающего списка, в котором доступны все созданные ранее варианты.
____1.png

При помощи кнопки "Фоны страниц" можно создать новый шаблон для фона.Оригинальный шаблон фона удалить нельзя.
____2.png

Набор настроек фона - этот раздел содержит список существующих и доступных для использования стилей фона. У каждого из них есть свое собственное уникальное название. В случае необходимости набор настроек можно создать, отредактировать или удалить. Стандартный набор настроек удалить нельзя.
Чтобы создатьновый набор настроек, необходимо нажать на кнопку "Добавить".
Для создания нового фона в списке насбора настроек фона, необходимо нажать на кнопку "Добавить".


Чтобы продублировать существующий набор настроек, необходимо нажать кнопку "Дублировать".
Чтобы удалить набор настроек, необходимо нажать на кнопку "Удалить".

"Название" - поле, в котором отображается название набора настроек фона. Название должно быть уникальным. Минимальная длина названия составляет 2 символа, максимальная - 200 символов.
____10.png

Как только мы создадим набор настроек фона ниже станет доступным блок "Свойства фона". Он содержит в себе ряд настроек, отвечающих за внешний вид.

"Цвет" - определяет цвет фона.
____11.png

Чтобы изменить цвет, необходимо нажать на его поле. В результате откроется палитра цветов. В ней представлено 25 предустановленных и 5 дополнительных цветов. Любой из них можно заменить, нажав на кнопку "Больше цветов".


В открывшемся окне можно выбрать любой цвет. Для удобства при подборе цвета присутствует два поля для цвета - "текущий" и "новый". В первом поле отображается используемый цвет, а во втором - тот, который мы выбираем в качестве альтернативы. Когда подходящий цвет найден, необходимо нажать кнопку "ОК". Если по каким-то причинам решение об измении цвета изменилось, то достаточно нажать "Отмена".
____13.png

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


Блок "Свойства фона" изменится и в нем появятся дополнительные настройки для изображения.
Чтобы изменить фоновое изображение, необходимо нажать на кнопку "Редактировать".
После этого нужно выбрать другое изображение и нажать на кнопку "Применить".

Чтобы удалить изображение из фона, необходимо нажать кнопку "Удалить".
Кнопка "Сбросить" отменит все изменения, которые были внесены в набор настроек после момента сохранения.
"Размер" - определяет логику использования изображения. На выбор доступно 3 варианта - "Не масштабировать""Вписать по ширине" и "Вписать по высоте".
____18.png

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

При помощи параметра "Расположение" можно задать положение изображение относительно одного из краев экрана или угла. Также есть возможность разместить изображение относительно центра экрана.
____19.png

При помощи выпадающего списка "Повторять" можно задать логику использования повторений изображения на странице.
____20.png

"Не повторять" - вариант, использующийся по умолчанию. Повторение не используется.
"Повторять"  - вариант, который позволит повторить изображение несколько раз на странице (с использованием оригинальных размеров). 

"Повторить горизонтально" - вариант, который позволяет включить повторение изображение по горизонтали (с использованием оригинальных размеров). 


"Повторить вертикально" - вариант, который позволяет включить повторение изображение по вертикали (с использованием оригинальных размеров). 


"Зафиксировать" - параметр, который позволяет зафиксировать положение изображения. По умолчанию включен. Если же его отключить, то изображение будет перемещаться со страницей при ее прокрутке.
____21.png 

2. Цвета

Основные цвета. В палитре представлены 25 предустановленных и 5 основных цветов. Основные цвета генерируют 5 дополнительных в виде вертикальной последовательности.  Любой из пяти основных цветов можно заменить._____1.png

Для того, чтобы открыть палитру цветов, достаточно просто нажать на любой цвет. "Текущий"/"Новый" отображает используемый и новый цвета, для удобства сравнения.
_____2.png 

"Больше цветов" предоставляет возможность использовать в палитре разные цвета. Для того, чтобы заменить какой-то из действующих цветов, достаточно просто нажать на нем и выбрать альтернативный.
_____3.png

Кнопка "Сбросить" может сбросить все те изменения, которые уже внесены в сайт после нажатия кнопки "Сохранить".
_____4.png

3. Стиль текста

Раздел "Стили текста" позволяет добавить новый стиль текста или отредактировать существующий.
______1.png 

"Добавить текстовый стиль" - позволяет добавить новый стиль для текста.______2.png
"Стили текста" содержит настройки нового стиля.
______3.png
"Имя стиля" - обязательно поле для названия стиля (оно пустое по умолчанию). Минимальная длина составляет 2 символа, максимальная - 200.
______4.png

"Свойства стиля" - содержит основные настройки стиля текста.
"Предпросмотр" - позволяет увидеть те изменения, которые были внесены в стиль текста. Если говорить просто, то Вы выбираете шрифт, его размер, цвет и др. настройки внешнего вида.
______6.png

B (Bold) - может сделать шрифт жирным.
I (Italic) - может применить курсив к шрифту (сделать его наклонным)
A (Font Color) - выбор цвета шрифта.
Для того, чтобы изменить цвет текста, нужно нажать на кнопку "А". Откроется окно с 25 предустановленными цветами, а также 5 независимыми дополнительными. Если нужен другой цвет, то его можно добавить при помощи кнопки "More colors".


При помощи палитры цветов можно выбрать и использовать абсолютно любой цвет. "Текущий" демонстрирует текущий используемый цвет. "Новый" отображает тот цвет, которым можно заменить "Текущий". Для того, чтобы сохранить действие, необходимо нажать "ОК", если отменить - "Отмена".
______8.png

"Высота строки" - регулирует межстрочный интервал для текста.
"Межстрочный интервал" - регулирует размер шрифта.
______9.png

"Свойства ссылок" - позволяет изменять внешний вид ссылки.
"Normal" и "Hover" задают внешние настройки ссылки при наведении на нее мышки и в неактивном состоянии. "Normal" используется по умолчанию. Чтобы перейти к редактированию определенного стиля, нужно нажать на него. Стили каждого из них редактируются независимо друг от другого.
link properties.png

Оба раздела имеют аналогичные настройки (поле предпросмотра, стиль шрифта, цвет и др.) Все функции имеют аналогичную логику работы с настройками "Свойства стилей".
Чтобы удалить существующий стиль, следует нажать на кнопку "Удалить". Она находится справа от стиля.
______12.png

Чтобы продублировать существующий стиль, необходимо использовать на нем кнопку "Дублировать".

4. Темы

Темы - это раздел со специальными настройками, которые оптимизируют внешний вид шрифтов, виджетов и д.п.
У каждой темы есть "Имя", "Миниатюра" и "Версия".


В каждом шаблоне используется собственная уникальная тема. Для нее периодически будут выходить обновления. Каждый пользователь может вручную обновить тему своего шаблона.
Также у темы есть следующие параметры - "Цвета", "Шрифты", "Стиль текста", "Списки", "Фоны" и "Виджеты" ("Изображение", "Кнопка", "Меню" и "Разделители").
Раздел "Цвета" содержит 30 цветов на выбор (5 основных, 20 дополнительных и 5 стандартных).  

Раздел "Шрифты" содержит не стандартные шрифты, которые можно использовать в теме (используются шрифты из сервиса Google Fonts). 

Раздел "Стили текста" содержит 15 предустановленных стилей. 

theme3.png

 

theme4.png 

Раздел "Списки" позволяет использовать новые стили для списков в текстовом редакторе.

theme5.png

В разделе "Фоны" на выбор предоставлены 3 предустановленных фона (один стандартный и два дополнительных).
theme6.png

Раздел "Виджеты" делится на четыре подраздела: "Изображения", "Кнопки", "Меню" и "Разделители".
Подраздел "Изображения" содержит пять предустановленных стиля изображений.

Подраздел "Кнопки" содержит 5 предустановленных стиля кнопки и 3 дополнительных стиля разного размера (маленький, средний и большой).theme8.png

 

Подраздел "Меню" содержит 3 типа меню на выбор. 

2014-10-21_11_46_19-typography-page_1_.jpg__1600_7847_.png

Подраздел "Разделители" состоит из трех типов разделителей (сплошной, пунктир и штриховка).
Обновление. Каждая тема имеет собственную версию, которая может регулярно обновляться. Если Вы используете устаревшую версию темы - Вы увидите необходимое уведомление в разделе Дизайн:

В разделе "Темы" присутствует определенное количество тем и если Вы используете устаревшую версию темы - появится кнопка "Обновить" напротив выбранной темы.

Шаг 1. После нажатия на кнопку "Обновить" начнется скачивание файлов обновления для темы. На экране появится соответствующее уведомление:_________ru_1-1.png 

Шаг 2. Как только система скачает файлы, произойдет запуск процедуры обновления. На экране появится соответствующее уведомление:_________ru_1-2.png 

Шаг 3. Если весь процесс прошел успешно, выведется сообщение об этом. Ниже будет кнопка "Продолжить", которую необходимо будет нажать для того, чтобы продолжить работу с панелью управления шаблоном._________ru_1-3.png

5. Размеры и Значения

Данный раздел позволяет Вам отредактировать отступы для объектов на страницах сайта.

В разделе Размеры и Значения Вы можете отредактировать отступы для всех типов устройств: ПК, планшет, телефон (ландшафтный режим) и телефон (портретный режим).

В разделе Отступы Вы можете увеличить/уменьшить Малый, Средний и Большой отступ для всех сторон объекта. Это позволяет Вам установить уникальное расположение объекта на любом устройстве.

Чтобы проверить расположение виджета (к примеру, виджета меню) на странице сайта, Вам необходимо выбрать опцию предпросмотра (к примеру, телефон в портретном режиме).

Затем Вам необходимо зайти в соответствующий раздел (в данном примере - портретный режим телефона), где представлены отступы Малый, Средний и Большой.

Увеличить/уменьшить каждый из этих отступов Вы можете в соответствующем поле.

При предпросмотре изменения будут автоматически отображаться в панели управления сайта.

Чтобы активировать отступы для объекта Вам необходимо зайти в раздел Страницы и выбрать необходимый объект.
Данные изменения касаются исключительно таких отступов, как Малый, Средний и Большой. Если используется отступ 0 (нулевой) или Авто - никакого эффекта не произойдет.

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 3 из 5
Еще есть вопросы? Отправить запрос

Комментарии