Урок 4. Как поменять дизайн своего сайта?

15 июля 2015

1. Настройки фона сайта на

 

2. Как управлять цветами сайта

 

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

 

4. Категория «Темы» для тонкой настройки сайта

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

 

Следует так же указать для изображения нужное размещение фона. Могут быть такие варианты:

— не масштабировать

— вписать по ширине

— вписать по высоте

 

Вариант — «Не масштабировать» предполагает использование картинке в ее оригинальном виде и размере.

 

 

Вариант — «Вписать по ширине» позволит растянуть картинку на весь экран в ширину, но при этом сохранятся все пропорции.

 

 

Вариант — «Вписать по высоте» растягивает изображение по высоте экрана, пропорции также остаются правильными.

 

 

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

 

 

Мы можем задать на странице повторение фона несколько раз. Для этого тоже есть несколько вариантов:

 

«Не повторять»— вариант, использующийся по умолчанию. Повторение не используется.

 

 

«Повторять» — вариант, который позволит повторить изображение несколько раз по все странице (с использованием оригинальных размеров).

 

 

«Повторить горизонтально»— соответственно, повторяем горизонтально.

 

 

«Повторить вертикально»— повторяем вертикально.

 

 

«Зафиксировать»— фиксирует фон. По умолчанию это параметр включен, если его отключить, то изображение будет перемещаться при прокрутке страницы.

 

Как управлять цветами сайта
Чтобы управлять цветами сайта в Свойствах дизайна имеется специальный инструментарий Цвета.

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

 

 

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

 

Кнопка Сбросить может быть использована для обнуления всех внесенных изменений. Если все сделано верно, в панели управления появится сообщение: «Цвета были успешно сохранены».

Как работать со стилями текста на сайте
В специально созданном разделе Стили текста можно создать новый стиль или же отредактировать существующий.

 

 

Чтобы добавить новый стиль для текста, который используется на сайте, нужно воспользоваться кнопкой Добавить стиль.

 

При клике на стиль текста открываются новые настройки.

 

 

Имя стиля — поле для ввода имени стиля. Длина названия стиля может быть 2-200 символов.

Свойства стиля — опция, содержащая основные настройки текста.

Предпросмотр — предварительный просмотр всех внесенных изменений: шрифта, размера текста, цвета и т.д.

 

B (Bold) — жирный шрифт.

I (Italic) — курсив.

A (Font Color) — цвет шрифта.

 

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

 

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

 

 

Высота строки — межстрочный текстовый интервал.

Межстрочный интервал — опция, которая регулирует размер текста.

Свойства ссылок — изменение внешнего вида ссылки. Инструменты Normal и Hover используются для настройки ссылок при наведении на них. По умолчанию используется режим Normal.

 

Все существующие в панели управления стили можно дублировать и удалять. После удаления стиля в Панели управления появится сообщение следующего содержания: «Стиль был удален», а при дублировании: «Стиль был скопирован».

Категория «Темы» для тонкой настройки сайта MotoCMS
Специальный раздел, в котором находятся настройки для редактирования внешнего вида сайта.

 

 

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

 

Категория «Темы» включает в себя параметры для изменения цвета шаблона, шрифтов, стилей текста, списков, фона и виджетов.

Цвета
На выбор представлено 30 цветовых схем, 5 из которых являются основными, 20 дополнительными и еще 5 стандартными.

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

Стили текста
Здесь находится 15 предустановленных стиля.

 

Списки
Чтобы использовать новые стили для списков, необходимо обратиться в раздел Списки. Здесь можно управлять списками в текстовом редакторе.

Фоны
Выбрать фон для сайта можно из трех имеющихся фонов, два из которых являются дополнительными.

Виджеты
Данный раздел содержит четыре опции: Изображения, Кнопки, Меню, Разделители.

Изображения
Здесь находятся стили изображения (5 предустановленных).

 

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

 

 

Для изучения предыдущих уроков:

Урок 1. Первый шаг к созданию своего сайта на MotoCMS 3.0

Урок 2. Настраиваем систему МотоCMS 3.0 под свои задачи

Урок 3. Создаем новые разделы и страницы сайта на МотоCMS 3.0

Не можете найти ответ на вопрос?