Що таке сторінка

Менеджер стилів дозволяє налаштовувати зовнішній вигляд і відчути ваш сайт без написання будь-якого коду. Клацніть на будь-який елемент, який ви бачите на вашому сайті і змініть його кольори, шрифти, спати, тіні і багато іншого. Ви можете створювати різні стилі для світло-режиму і темного режиму, перевірити, як виглядають речі на мобільних пристроях, і застосувати зміни до конкретних сторінок або всього сайту.

Подумайте про це, як візуальний редактор, який сидить на вершині вашого сайту, даючи вам точку та натисніть, щоб зробити зміни дизайну миттєво.

[Screenshot: page-overview]

Як отримати тут

Навігація Панель адміністратора > Шаблони > Менеджер по дизайну

Розуміння сторінки

Коли ви вперше відкриваєте менеджер стилів, ви побачите дві основні райони, бокові:

ліва панель: редактор стилю

Це панель управління з семи вкладок для різних варіантів укладання:

• Колір - Текстові кольори та фони (включаючи градієнти)
• Типографія - Шрифти, розміри та форматування тексту
• Проксимус - Падінг і маржі
• Кордони - Стилі кордону, ширина, кольори та тіні
• Прованс - Налаштування дисплея, позиціонування та flexbox
• Ефекти - Можливість, трансформатори, фільтри
• Розмір - Ширина, висота та співвідношення сторін

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

Клавіатура: Живий перегляд

Цей веб-сайт показує ваш фактичний сайт у вікні попереднього перегляду. Ви можете:

• Навігація на різні сторінки
• Натисніть елементи, щоб вибрати та стильувати їх
• Toggle між робочим столом, планшетом та мобільними видами
• Перемикач між світловими та темними режимами
• Перегляньте ваші зміни миттєво, як ви робите їх

Топ управління

Панель заголовка включає:

• Легкий режим / Темний режим гудзики - Оберіть спосіб редагування
• Зберегти всі - Збережіть всі зміни стилю
• Всі - Видаліть всі користувацькі стилі та запустіть свіжі

Загальні завдання

Як стильувати елемент

Це базовий робочий процес, який ви використовуєте для всіх завдань укладання.

1. Натисніть кнопку Режим редагування кнопка (імпературна ікона) в панелі інструментів попереднього перегляду.
2. У верхній частині екрана з'являється зелений індикатор "Редагувати режим"
3. Перемістіть мишу над елементами в попередньому перегляді - вони виділять з синім контуром.
4. Натисніть елемент, щоб вибрати його.
5. Ви побачите інформацію про обраний елемент у верхній частині лівої панелі.
6. Використовуйте вкладки (Колони, Типографія та ін.) для зміни, як це виглядає.
7. Переглядайте ваші зміни миттєво в попередній перегляд.
8. Коли ви щасливі з змінами, натисніть кнопку Зберегти зміни в нижній частині лівої панелі.

[Screenshot: вибір і видалення]

Як змінити кольори

Після вибору елемента:

1. Натисніть кнопку Колір вкладка в ліву панель.
2. Розгорнути Колір тексту розділ для зміни текстового кольору.
3. Клацніть колір swatch (забарвлений квадрат) для відкриття кольорового маркера.
4. Виберіть колір або ввести код шестигранного в текстовому полі.
5. Елементи оновлюються відразу в попередньому перегляді.

Для зміни фону:

1. У Колір вкладка, розширення Підземелля секція.
2. Обрати Суцільний для одного кольору або Проксимус для колірної суміші.
3. Для твердих фонів натисніть на колір swatch і підберіть колір.
4. Зареєструватися Прозорий якщо ви не хочете фону взагалі.

[Screenshot: color-picker-interface]

Як створити фон градієнта

Градієнти змішують кілька кольорів разом плавно.

1. Виберіть елемент і перейдіть до Колір Увійти
2. Розгорнути Підземелля і натисніть кнопку Проксимус кнопка.
3. Виберіть напрямок, натиснувши одну з 8 напрямних гудзиків (або ввести користувальницький кут).
4. Ви побачите принаймні 2 колірні зупинки. Натисніть кожен колір годинника, щоб вибрати кольори.
5. Налаштуйте позиції слайдерів (0-100%) для контролю, де з'являється кожен колір.
6. Зареєструватися + Додати Стоп щоб додати більше кольорів до вашого градієнта.
7. Натисніть кнопку X поруч з кольором, щоб видалити його (Ви повинні тримати принаймні 2).
8. Переглядайте оновлення градієнта попереднього перегляду, як ви вносите зміни.

[Screenshot: градієнт-будівельник]

Як змінити шрифти та текст

Після вибору тексту або будь-якого елемента з текстом:

1. Натисніть кнопку Типографія Увійти
2. Розгорнути Розмір шрифтуй
3. Виберіть шрифт з шрифту Сім'я шрифтів (Робото, Інтер, Монсеррат і т.д.).
4. Встановити Розмір шрифту за допомогою вхідної кількості і виберіть блок (ПВ, rem, em або %).
5. Виберіть Вага шрифту щоб зробити текстовий тонше або болдер (400 нормально, 700 сміливо).

Для форматування тексту:

1. Розгорнути Форматування тексту секція.
2. Натисніть кнопку вирівнювання, щоб вирівняти зліва, центр, право або простоити.
3. Обрати Переклад текстів Щоб зробити текст UPPERCASE, нижньої колонтитули або капіталізований.
4. Обрати Текстове оформлення додати лінії, удари або перекриття.

[Screenshot: типографія-за бажанням]

Як додати Спакінг

Просторий контроль порожній простір навколо і внутрішніх елементів.

1. Виберіть елемент і натисніть кнопку Проксимус Увійти
2. Розгорнути Наклейка і введіть номер, щоб додати простір всередині елемента.
3. Розгорнути Маргін і введіть номер, щоб додати простір поза елементом.

Як додати кордони і тіні

Після вибору елемента:

1. Натисніть кнопку Кордони Увійти
2. Розгорнути Приват налаштувати кордон.
3. Виберіть Прикордонний стиль (Solid, Dashed, Dotted тощо).
4. Встановити Ширина кордону в пікселів.
5. Натисніть кнопку Прикордонний колір swatch вибрати колір.
6. Комплекти Прикордонний радіус щоб закруглити кути.

Щоб додати тінь:

1. Розгорнути Коробка тіней секція.
2. Натисніть кнопку Shadow preset (Нон, SM, MD, LG, XL) для звичайних стилів тіні.
3. Або введіть користувальницьке значення тіні в Користувальницькі тіні поле.

[Screenshot: прикордонно-шадово-контрольні]

Як стиль Hover ефекти

Похабний ефект тригер, коли хтось пересуває мишу над елементом (як кнопки).

1. Виберіть елемент, який ви хочете додати ефект конюшини до.
2. Шукаємо Державний оглядач бар нижче інформації елемента.
3. Натисніть кнопку :мар кнопка.
4. Стилі для редагування конюшини ви можете переглянути на екрані.
5. Зробіть свої зміни - спробуйте змінити колір фону або додавши трансформацію.
6. Перемістіть мишу над елементом попереднього перегляду, щоб побачити ефект конюшини.
7. Зареєструватися Зберегти зміни при виконанні.

[Screenshot: стан-селектор-ховер]

Як стильувати світло і темний режим окремо

Ваш сайт може виглядати різним у режимі освітлення, що суперечить темному режимі.

1. Зареєструватися Легкий режим в заголовку для редагування стилів освітлення.
2. Виберіть елементи та налаштуйте їх у бажанні.
3. Зареєструватися Зберегти зміни для кожного елемента.
4. Зареєструватися Темний режим в заголовку для перемикання на редагування темного режиму.
5. Перегляд автоматично перемикається в темний режим, щоб ви могли бачити, що ви редагуєте.
6. Виберіть однакові елементи і налаштувати їх на темний режим.
7. Збережіть зміни темного режиму.

Як застосувати стилі до конкретних сторінок

За замовчуванням, стилі поширюються на весь сайт. Але можна зробити стилі, які тільки з'являються на певних сторінках.

Менеджер стилю автоматично виявляє яку сторінку ви переглядаєте:

Для застосування стилів сторінок:

1. Використовуйте навігацію попереднього перегляду, щоб перейти на сторінку, яку ви хочете налаштувати.
2. Зареєструватися Режим редагування і виберіть елементи на цій сторінці.
3. Зробіть зміни стилю.
4. Зареєструватися Зберегти зміний
5. Ці стилі будуть застосовуватися лише до цієї конкретної сторінки.

Як змінити стилі

Заміна одного елемента:

1. Виберіть елемент, який ви хочете скидати.
2. Зареєструватися Заміна елемента в нижній частині лівої панелі.
3. Підтвердження натисканням Зареєструватися в попуп.
4. Всі спеціальні стилі для цього елемента видаляються.
5. елемент повертає його оригінальний вигляд.

Змінити все:

1. Зареєструватися Всі в заголовку.
2. Читайте попередження уважно - це видаляє всі ваші користувацькі стилі.
3. Зареєструватися Зареєструватися підтвердити.
4. Всі користувацькі стилі по всьому сайту видаляються.
5. Ваш сайт повертається на зовнішній вигляд за замовчуванням.

Контроль перегляду

Навігація панелі інструментів

Панель інструментів у верхній частині попереднього перегляду дозволяє навігувати і контролювати попередній перегляд:

Опис пристрою

Тестуйте, як ваші стилі дивляться на різні розміри екрана, натиснувши ці кнопки в заголовку попереднього перегляду:

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

[Screenshot: responsive-preview-modes]

Темний режим Toggle

Ікона місяця в заголовку попереднього перегляду перемикає перегляд між світлом і темним режимом. Це відокремлюється від кнопки режиму в головному заголовку:

• Кнопки режиму заголовка - Контроль, які стилі ви SAVING (світло або темне)
• Preview місяць кнопка - Контроль, який режим ви переглядаєте

Розуміння вкладок стилю

Кожна вкладка в лівій панелі фокусується на різних візуальних властивостях.

Колір Вкладка

• Колір тексту - Колір тексту всередині елемента
• Підземелля - Суцільний колір, градієнт або прозорий фон
• Вигідний конструктор - Створення гладких колірних сумішей з декількома кольоровими зупинками

Типографія Tab

• Сім'я шрифтів - Оберіть з професійних шрифтів
• Розмір шрифту - Текстовий розмір з гнучкими блоками (ПВ, rem, em, %)
• Вага шрифту - Як з'являється тонкий або сміливий текст
• Висота лінії - Простір між лініями тексту
• Лист Спаксінг - Простір між окремими літерами
• Форматування тексту - Вирівнювання, капіталізація, основи та ін.

Табличка

• Наклейка - Простір всередині елемента (захоплення вмісту та кордону)
• Маргін - Простір за межі елемента (забутній елемент і сусіди)

Вкладка кордонів

• Прикордонний стиль - Суцільний, змащений, пунктирний або декоративні лінії
• Ширина кордону - Як товстий кордон
• Прикордонний колір - Колір кордону лінії
• Прикордонний радіус - Як закруглені кути
• Коробка тіней - Краплі тіні для створення глибини

Табличка

• Показати - Як елемент породив (блок, inline, flex, сітка тощо)
• Головна - Як розташовується елемент (статичний, відносний, абсолютний тощо)
• Кошик - Контроль для облаштування дитячих елементів в рядах або стовпчиках

Ефекти закладка

• Можливість - Як прозорий елемент (0% = невидимий, 100% = твердий)
• Трансформація - Ваги, обертати або перемістити елемент
• Фільтри - Блір, яскравість, контрастність і сірий ефект

Розмір вкладки

• Навігація - Як широкий елемент
• Навігація - Як високий елемент
• Мін/Макс Ширина та висота - Розмір обмеження
• Код об'єкта - Як зображення і відео підходять всередині контейнерів
• Аспект Ратіо - Основні пропорції (квадрат, 16:9 та ін.)

Поради для нових користувачів

Виправлення несправностей

Попередній перегляд не завантажується або показує порожні сторінки

Що ви бачите: Правильна панель порожній, білий або показує помилку.

Як закріпити її:

1. Натисніть кнопку Реверс кнопка в панелі інструментів попереднього перегляду.
2. Перевірте, чи працює ваш сайт, відкривши його в новій вкладці браузера.
3. Якщо сайт працює, але попередній перегляд не може звернутися до адміністратора сайту - це може бути питання конфігурації.

Я не можу вибрати елементи, коли я натискаю їх

Що ви бачите: Натискання елементів у попередньому перегляді не робить нічого.

Як закріпити її:

1. Про нас Режим редагування гудзик (ідеальна ікона) виділяється в зеленому кольорі.
2. Спробуйте освіжаючи попередній перегляд за допомогою кнопки оновлення.
3. Деякі дуже маленькі елементи (менше 5x5 пікселів) не можна вибрати - спробуйте натиснути до сусідніх елементів.

Моя зміна не відображається на живому сайті

Що ви бачите: Змінює шоу в попередньому перегляді, але не на фактичному сайті.

Як закріпити її:

1. Переконайтеся, що ви натискаєте Зберегти зміни в нижній частині лівої панелі (не тільки Зберегти всі).
2. Очистити кеш браузера і освіжати живий сайт.
3. Якщо ви переглядаєте сайт в іншому режимі (світло проти темного), режими перемикання, щоб побачити, чи застосовуються зміни.

Не працює

Що ви бачите: Ви влаштовували :hover State, але нічого не буває, коли ви голодуєте.

Як закріпити її:

1. Переконайтеся, що ви натискали :мар кнопка в Державному реєстраторі перед внесенням змін.
2. Навпрошення тільки працювати з мишкою - мобільні користувачі не побачать їх.
3. Перевірити, якщо ваші оригінальні стилі веб-сайтів мають конфліктні наслідки, які наділяються вашими.

Кольори виглядають неправильно або не відповідають, що я забрав

Що ви бачите: Кольоровий маркер показує один колір, але елемент показує інший.

Як закріпити її:

1. Натисніть елемент знову, щоб відновити його і освіжити поточні значення кольору.
2. Переконайтеся, що ви редагуєте право власності - Колір тексту відокремлений від фону.
3. Збережіть і освіжте попередній перегляд, щоб побачити кінцевий результат.

Я не можу зберегти мої зміни (Зберегти кнопку)

Що ви бачите: Заощаджуйте всі кнопки відключені і відсихають.

Як закріпити її:
Увімкнено помаранчевий банер у верхній частині сторінки. Демо режим запобігає збереженню змін. Якщо необхідно зберегти зміни, зв'яжіться з адміністратором сайту, щоб вимкнути демо-режим.

Моя градієнт не показує

Що ви бачите: Ви створили градієнт, але елемент все ще показує суцільний колір.

Як закріпити її:

1. Переконайтеся, що ви натискали Проксимус кнопка (не твердий) в розділі «Задня».
2. Перевірте, що у вас є хоча б 2 колірні зупинки з різними кольорами.
3. Заощаджуйте свої зміни та отримайте попередній перегляд.

Схожі сторінки

Цей посібник для власників сайтів ComusThumbz і операторів. Він фокусується на використанні інтерфейсу Style Manager для налаштування зовнішнього вигляду вашого сайту без кодування.