Редактор стилей сайта
Содержание |
Введение
С переходом сайта B2C в новый дизайн Простой режим изменений внешнего вида сайта в настройках Mid Office Manager потерял свою актуальность, в замен ему разработано новое решение редактора стилей сайта. В настоящей статье будет изложена инструкция по ручной работе со стилями сайта B2C.
Ручной режим настройки стилей сайта
Для того, чтобы запустить последнюю версию редактора стилей необходимо:
- Иметь учетную запись в личном кабинете сайта B2C
- В браузере открыть страничку по адресу: http://editor.ibe.gridnine.com:7788/editor/АДРЕС_САЙТА_КЛИЕНТА/site/,
где вместо АДРЕС_САЙТА_КЛИЕНТА нужно прописать домен B2C - запустится окно:
в котором нужно заполнить логин и пароль от личного кабинета сайта B2C и нажать кнопку Вход - сайт B2C запустится в режиме редактирования стилей:
На странице сайта справа появится ярлычок Toggle - переключатель в режим редактирования стилей сайта. При нажатии Toggle откроется панель с группированными в блоки полями:
Каждая группа полей отвечает за настройки определенных фрагментов сайта. Существуют три вида редактирования стилей на сайте:
- Шрифт: стиль и размер шрифтов
- Цвет: выбор цвета основного и дополнительных фонов, выбор цвета шрифтов
- Загрузка графических объектов: логотипа и фонового изображения.
В дополнение к инструкции по изменению дизайна на сайте представлена статья по встраиванию B2C во фрейм агентского сайта.
Описание полей для редактирования стилей
Вся страница
- группа полей в редакторе стилей сайта содержит (см. рисунок выше):
Ширина страницы: регулируемая ширина страницы сайта. В редакторе стилей сайта по умолчанию указана оптимальная ширина, подходящая для всех диагоналей мониторов компьютера со значением 972px. Допустимое значение этого поля варьируется от 800px до необходимой вам ширины - чем больше значение ширины сайта, тем меньшее количество пользователей будут видеть весь контент сайта без прокрутки страницы по горизонтали. Самой популярной шириной на данный момент является 1440px - не рекомендуем увеличивать ширину контента сайта выше 1400px.
При ширине до 750px отображение сайта адаптируется под мобильные устройства - контент сайта приобретает вид для удобного отображения на мобильных устройствах. Сайт, встроенный во frame с фиксированной шириной, не сможет переходить в мобильный режим, и если ширина frame будет меньше 750px, то в нем всегда будет отображаться мобильная версия сайта.
Фон: фоновый цвет всей страницы сайта; по умолчанию указано значение белого фона: #ffffff.
|
Выбранное в цветовой палитре значение можно добавлять в список часто используемых цветов, а при настройке других цветовых полей выбирать его : |
Логотип: логотип агентства. По умолчанию загружен логотип Sabre. По кнопке Выберите файл можно загрузить логотип агентства. Допустимые для загрузки форматы файла: *.png, *.jpg, *.bmp. Оптимальная для загрузки и корректного отображения высота графического объекта должна составлять 30px.
Картинка заднего фона: фон страницы сайта, исполнение которого может быть как с обычной цветовой заливкой, так и с размещением графического изображения. На картинке выше загружена стандартная тема оформления сайтов Sabre. По кнопке Выберите файл загрузите свое изображение.
Шрифт: текстовое поле, содержащее список шрифтов, который может включать одно или несколько наименований, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Times New Roman, то оно должно заключаться в одинарные или двойные кавычки.
Когда браузер встречает первый шрифт в списке, то проверяет его наличие на компьютере пользователя. Если этот шрифт отсутствует в OS, берется следующее имя из списка и также анализируется на наличие. Если же ни один шрифт не найден, то будет отображаться шрифт считающийся браузером по умолчанию. Несколько шрифтов в поле Шрифт увеличивает вероятность того, что хотя бы один из них будет обнаружен на клиентском компьютере. Последовательность шрифтов лучше начинать с экзотических типов и заканчивать базовыми - те, что поддерживаются во всех браузерах и присутствуют в OS.
Размер основного шрифта: размер шрифта, который будет применен к сайту, допустимые размеры: 12-20px, по умолчанию применяется шрифт с размером 16px.
Размер заголовка: размер основных заголовков сайта. Допустимые размеры: 16-22px, по умолчанию указан оптимальный - 18px.
Размер дополнительного текста: размеры дополнительных/остальных заголовков и текстов на страницах сайта. Допустимые размеры: 12-16px, по умолчанию указан 14px.
Тень элементов сайта: добавление тени к элементам сайта с помощью переключателя включения/отключения
Размер скруглений в документе: радиус закругления углов элементов. Чем выше число, тем сильнее скругление; значение 0 даст прямой угол, оптимальное значение: 4px
Задний фон при лоадере: цвет затемнения при обработке запроса
Шапка
- группа полей редактора стилей сайта содержит следующие поля настроек (см. рисунок выше):
Фон: цветовое решение шапки.
Например, выберем значение 
и получим изменение цвета шапки.
Цвет элементов оформления: горизонтальная полоса и не пройденные шаги сайта:
Цвет текста: учетная запись при входе в личный кабинет, цвет кнопок личного кабинета и переключателя языка.
Цвет подтверждения: это цвет пройденных/активных шагов, подсветка при наведении курсора мыши на кнопки личного кабинета, переключателей языка, а также при нажатии их.
Поле 1
- группа основных полей на всех страницах сайта, к которой относятся поля сайта с информацией по перелету, поля данных пользователя и пассажира, данные о заказах личного кабинета, поля вариантов оплаты, окно матрицы +/-3дня, окно обзора перелетов, заполнение визовой информации. Это основные поля, размещенные справа в личном кабинете сайта:
Группа Поле 1 содержит следующие поля настроек:
Фон: основной фон, по-умолчанию задан белый фон.
Цвет первого заголовка: все основные заголовки полей, относящиеся к группе Поле 1 - на рисунке отмечено цифрой 1.
Цвет второго заголовка: все дополнительные заголовки полей, относящиеся к группе Поле 1 - на рисунке отмечено цифрой 2.
Цвет основного текста: основной текст полей, относящихся к группе Поля 1 - на рисунке выше отмечен цифрой 3. Приведем пример применения значений настроенных полей в группе Поле 1: Обзора перелетов:
Цвет ссылок: цвет ссылок, размещенных в Поле 1. Например:
Цвет важных частей: цвет текста, информирующего о размещенной важной информации
Цвет ошибок: выделение полей с ошибками при валидации (проверка значений, указанных пользователем, и отображение найденных ошибок).
Цвет дополнительного текста: подсказка и цвет рамки в полях данных пассажира и пользователя сайта -страница Данные пассажиров на сайте, Личный кабинет сайта; код геолокации в перелетах сайта.
Цвет элементов оформления: горизонтальные линии - разделители блоков, кнопки, разворачивающие дополнительную информацию. Приведем пример: вкладка Пассажиры личного кабинета сайта:
Цвет подтверждения: это цвет заполненных значениями полей, например, на странице "Данные пассажира" или пользователя личного кабинета сайта
Цвет фона инпутов: фон полей для заполнения. Например, страница Данные пассажиров поля для заполнения реквизитов пассажира. По умолчанию указан белый цвет.
Поле 2
- группа полей дополнительной информации, размещение которых слева на странице сайта. Это информация о перелете на страницах “Данные пассажиров”, “Варианты оплаты”.
Описание полей аналогичны тем, что приведены для Поля 1, но применимы только к группе Поле 2. Пример: блоки размещенные слева на сайте - для личного кабинета, выбранного перелета:
Кнопка 1
- основная кнопка, размещенная в Поле 1. Это кнопка Подобрать на странице Маршрут, Выбрать на страницах Варианты перелетов и Другие тарифы, Сохранить на странице заполнения данных пользователя личного кабинета сайта, кнопка Создать бронирование на странице Данные пассажиров, кнопка Выбрать или Оплатить при выборе варианта оплаты:
Кнопка 2
- дополнительная кнопка, размещенная в Поле 1. Это кнопка Другие тарифы на странице Вариантов перелетов, Отменить бронирование в личном кабинете сайта:
Длительность пересадки
- настройка цвета пересадок в отображении дополнительной информации о перелетах на сайте:
Заключение
Для того, чтобы получить общее представление сайта с настроенными стилями, нажмите кнопку 
- вы получите превью сайта - то, как он будет выглядеть, но не полноценное изменение его дизайна.
Для того, чтобы подобранные вами стили применились к сайту, необходимо экспортировать переменные стилей сайта в файл с помощью кнопки 
и прислать файл на адрес технической поддержки разработчика сайта support@gridnine.com с указанием в обращении наименования агентства и доменного имени сайта.
Файл с переменными стилей разработчики добавят в сборку сайта на сервере. Данная процедура необходима для последующих корректных обновлений сайта.
