Почніть звідси.

Стайлінг

Давайте почнемо зі стилізації шаблону.

Кольори

Шаблон Web3 X побудовано з використанням колірних зразків, що означає, що ви можете легко редагувати колірний зразок, щоб оновити його на всьому сайті.

Для цього вам потрібно перейти на вкладку "Стиль" у правій бічній панелі, потім прокрутити до розділу "Кольори в типографіці", і якщо ви натиснете на колір, ви зможете побачити всі зразки кольорів і відредагувати їх, щоб оновити весь сайт до будь-якого потрібного кольору.

Шрифти

Шаблон Web3 X використовує один єдиний шрифт на всю ширину сторінки, і він налаштований у селекторі Body (Всі сторінки ), тому ви можете легко оновити шрифт на всьому сайті в один клік.

На будь-якій сторінці просто натисніть помаранчевий перемикач у верхньому правому куті вкладки "Стиль", а потім виберіть "Основний текст (всі сторінки)". Після цього ви можете перейти до розділу " Типографіка " нижче і змінити шрифт на будь-який шрифт для вашого бізнес-бренду.

Якщо вам потрібен кастомний або преміум-шрифт, який недоступний у Webflow, ви завжди можете перейти в Налаштування проекту > Шрифти і завантажити кастомні шрифти або підключити свій обліковий запис Adobe Fonts.

Графіка та іконки

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

Це відбувається тому, що ці графічні елементи є зображеннями (PNG, JPG, SVG тощо), тому оновлення CSS (стилів) веб-потоку не вплине на них. Якщо ви хочете використовувати цю графіку повторно, ви завжди можете завантажити її та відредагувати за допомогою будь-якого дизайнерського програмного забезпечення (наприклад, Photoshop, Illustrator, Sketch, Figma тощо) або безпосередньо завантажити власні зображення/графіку, які відповідають вашому бренду.

Статичні сторінки

Статичний контент - це весь контент, який не базується на CMS, тобто не є динамічним (наприклад, публікація в блозі).

Ви можете легко ідентифікувати весь цей вміст, оскільки він відображається сірим кольором на лівій бічній панелі Навігатора, а при натисканні або наведенні курсору на нього з'являється синя рамка.

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

Динамічний контент (CMS)

Динамічний контент - це весь контент, який є динамічним і буде автоматично згенерований на основі контенту, доданого в розділі CMS на лівій бічній панелі (відразу під іконкою Сторінки).

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

Цей вміст слід оновлювати безпосередньо в розділі CMS. Це зроблено для того, щоб вам було дуже легко його оновлювати, оскільки дуже ймовірно, що його потрібно буде постійно оновлювати (наприклад, додавати нову публікацію в блозі).

Крім того, якщо ви хочете відредагувати повністю автоматично створену сторінку CMS (наприклад, публікацію в блозі), ви знайдете цю сторінку, доступну для редагування, внизу всіх сторінок у розділі "Сторінки" на лівій бічній панелі.

Продукти (електронна комерція)

Продукти або контент електронної комерції функціонують так само, як і динамічний контент CMS, однак це стосується виключно продуктів електронної комерції.

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

Цей контент слід оновлювати безпосередньо у вкладці "Електронна комерція" на лівій бічній панелі. Це зроблено для того, щоб вам було дуже легко його оновлювати, оскільки дуже ймовірно, що його потрібно буде постійно оновлювати (наприклад, змінювати ціну на товар або додавати нові акції).

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

Корисні поради

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

Взаємодія

Якщо ви хочете відредагувати будь-яку взаємодію шаблону (наприклад, видалити ефект появи), ви можете легко визначити елементи, які мають взаємодію, оскільки вони мають маленьку піктограму взаємодії (маленький грім) на лівій бічній панелі Навігатора.

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

Перегляд з мобільного або планшета

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

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

Редагування метазаголовка, опису та основного зображення

Якщо ви хочете налаштувати заголовок, опис і зображення, які показуються, коли ви ділитеся своїм веб-сайтом в будь-якому місці (наприклад, Facebook, Twitter тощо), ви можете легко перейти до розділу Сторінки на лівій бічній панелі, натиснути маленьку іконку Налаштування сторінки, яку ви хочете налаштувати, і всі ці налаштування з'являться на екрані.

Зверніть увагу, що важливо змінювати цей параметр на кожній сторінці.

Резервні копії

Якщо щось піде не так, наприклад, якщо вам не подобається, куди переходить сайт, якщо ви видалили деякі критичні класи, які були необхідні для гарного вигляду шаблону, або якщо ви просто хочете повернутися до попередньої версії з будь-якої причини, ви завжди можете перейти до розділу "Резервні копії".

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