ПОЧНІСТЬ З ВІДСИ

Початок роботи

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

Якщо ви не дуже знайомі з Webflow, ми настійно рекомендуємо вам пройти прискорений курс Webflow 101 від Webflow University, оскільки він навчить вас усім основам. Або можете продивитися відео курс Webflow Start

Стилізація

Почнемо зі стилізації сайту.

‍

Кольори

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

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

Шрифти

У сайті використовується один єдиний шрифт на всій стороні, і він налаштований у селекторі «Body» (all pages), тож це означає, що ви можете легко оновити шрифт на всьому сайті одним клацанням миші.

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

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

стилі текстів/кнопок

Ви можете легко відредагувати стилі будь якого елементу на сторінці клікнувши на нього після. Після в праві панелі у вас з'являться стилі. Вам потрібен розділ Typograthy. Там розміщенні всі текстові стилі елменту.

‍

Редагування контенту сторінок

‍

текст

Для редагування тексту вам достатньо 2 рази клікнути на текст, після цього ви можете редагувати текст.

ПОСИЛАННЯ

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

ЗОБРАЖЕННЯ

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

Іконки

В проекті усі іконки працюють через HTML Embed в який додається код іконки з Figma. Для того замінити іконку вам потрібно скопіювати у Figma нову іконку як SVG (права клавіша миші). Та вставити код в HTML Embed.

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

Сховати/показати елемент

Для того щоб тимчасово прибрати елемент вам потрібно jбрати його клікнувши на нього або вибравши його в панелі слоїх (Z на клавіатурі).

Опісля перейти в налаштування елементу клікнувши на значок шестерні в правій панелі або натиснути D на клавіатурі.

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

‍

Додавання видалення елментів

Ви можете легко додати елмент, для цього вам необхідно клікнути на значок плюс у верхьому лівому куту. Після цього у вас відкриється список з елементами. Ви можете додати heading, paragraph, button, div block..

‍

Локалізація

На сайті працює кастомна система система локалізації. Вона працює за рахунок трьох папок (UA, EN, PL) в які складені стоірнки з відповідним перекладом. Важливо щоб Slug тег на сторінках з перекладом і батьківської (Української) стоірнки були однаковими, в випадку якщо вони будуть різними локалізація не спрацює. Важливо розмішани стоірнки по мовним папкам.

Додавання нової сторінки

Спершу вам потірбно створити сторінку українською мовою да дати їй власний slug тег та помістити сторінку на в мовну папку.

Опісля створість дублікат сторінки для другої мови та помістіть і дуругу мовну папку.

Потім відредагуйте контент на дублікаті да дайте йому такий самий slug тег.

Опублікуйте стоірнку

‍

Корисні примітки

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

‍

Взаємодії

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

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

Мобільний або планшетний перегляд

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

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

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

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

‍

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

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

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

‍

Підтримка

Якщо ви коли-небудь виявите будь-яку проблему, потребуєте допомоги або просто хочете привітатися, надішліть нам в Telegram‍