Налаштування дизайну

Налаштування дизайну

Налаштування візуального оформлення публічного сайту турагенції.
Round Pushpin Де знаходиться: Ліве меню → Кольори сайту або напряму:  xopulse.pro/uk/site 
Зміни кольорів застосовуються до публічного сайту одразу після натискання Зберегти. Кнопка Скинути відміняє незбережені зміни.


Призначення

Сторінка дозволяє:
  • обрати готову колірну тему оформлення сайту;
  • вручну налаштувати кольори заголовків, кнопок, фонів та акційних елементів;
  • визначити фірмовий стиль сайту відповідно до бренду агенції;
  • зберігати зміни або повертатись до попередніх налаштувань.


Основні блоки інтерфейсу

Вибір готової теми

Випадаючий список Кольори у верхній частині сторінки містить вісім готових колірних тем. Кожна тема відображає два кольорові кружечки-попереднього перегляду
Назва теми
Основний
Другорядний
Стандартна
Темно-синій
Блакитний
Нічний Нью-Йорк
Темно-фіолетовий
Синій
Париж у сутінках
Рожевий
Малиновий
Марракеш
Фіолетовий
Помаранчевий
Кападокія
Коричневий
Теракотовий
Альпійські вершини
Синій
Жовтий
Амстердамські канали
Бордовий
Лавандовий
Мальдіви
Бірюзовий
Золотий
Вибір теми автоматично заповнює всі поля нижче. Ви можете одразу зберегти або відкоригувати окремі параметри вручну.


Загальні кольори

Чотири основних параметри, що визначають загальну палітру сайту:
Параметр
За замовч.
Де застосовується
Головний
#19546C
Заголовки, акценти, основний брендовий колір
Другорядний
#36B6EA
Посилання, підзаголовки, допоміжні елементи
Головна картинка
#19546C, 30%
Накладка (overlay) на головний банер сайту
Колір пошуку турів
#F4BA40
Фон блоку пошуку турів на головній


Акційна ціна

Визначає вигляд бейджа зі знижковою ціною на картках турів:
Параметр
За замовч.
Де застосовується
Колір акційної ціни
#F44040
Фон бейджа зі знижковою ціною
Колір тексту акційної ціни
#FFFFFF
Текст усередині бейджа знижки


Кнопки

Визначає вигляд двох типів кнопок на сайті:
Параметр
За замовч.
Де застосовується
Кнопка «залишити запит»
#F4BA40
Фон основної кнопки
Текст кнопки «залишити запит»
#FFFFFF
Текст основної кнопки
Фон другорядної кнопки
#36B6EA
Фон кнопки другорядної дії
Текст другорядної кнопки
#FFFFFF
Текст другорядної кнопки


Кнопки керування сторінкою

Розташовані внизу сторінки:
  • Зберегти — застосовує всі зміни на публічному сайті.
  • Скинути — скасовує незбережені зміни і повертає до поточно збережених значень.


Логіка роботи

Теми та ручне налаштування

Сторінка працює за принципом «обери тему → відкоригуй → збережи»:
  • Вибір теми зі списку — автоматично підставляє всі кольори у поля нижче.
  • Ручне редагування — кожне поле можна змінити незалежно: клацніть на кольоровий квадрат або введіть код кольору.
  • Теми та ручні зміни не залежать одна від одної: можна обрати тему і потім скоригувати окремі кольори.
Натискання Скинути видаляє всі незбережені зміни. Після збереження скидання не відновить попередній стан.

Відображення змін на сайті

  • Зміни застосовуються після натискання Зберегти.
  • Якщо зміни не відображаються — оновіть сторінку сайту (Ctrl+Shift+R або Cmd+Shift+R) для скидання кешу браузера.


Як користуватись

Застосувати готову тему

    Відкрийте сторінку Кольори сайту у лівому меню.
    Клацніть на випадаючий список Кольори у верхній частині.
    Оберіть тему зі списку — наприклад, «Мальдіви».
    Переконайтеся, що поля нижче змінилися відповідно до теми.
    Натисніть Зберегти.


Налаштувати кольори вручну

    Відкрийте сторінку Кольори сайту.
    За бажанням оберіть тему як відправну точку.
    Клацніть на кольоровий квадрат потрібного параметра — відкриється колірний пікер.
    Оберіть колір або введіть код кольору у поле поруч.
    Повторіть для кожного параметра, який потрібно змінити.
    Натисніть Зберегти.
Щоб перевірити результат — відкрийте свій сайт у новій вкладці та оновіть сторінку після збереження.


Приклади використання

Приклад 1. Фірмові кольори агенції

Якщо агенція має корпоративну палітру — задайте її безпосередньо:
  • Головний колір: код основного кольору (наприклад, #1A4731)
  • Другорядний: код акцентного кольору (наприклад, #C9A84C)
  • Кнопка «залишити запит»: той самий акцентний
Результат: сайт виглядає як єдине ціле з брошурами, візитками та соцмережами.

Приклад 2. Сезонне оформлення

Перед літнім сезоном оберіть тему Мальдіви або Марракеш — яскрава палітра одразу задає настрій. Після завершення сезону поверніться до Стандартної.

Приклад 3. Виділення акційних турів

Щоб бейджи зі знижками одразу впадали в очі:
  • Колір акційної ціни: #E5000F (яскраво-червоний)
  • Колір тексту акційної ціни: #FFFFFF (білий)
Результат: контрастні бейджи добре помітні на тлі карток турів.