Переваги та недоліки конструктора Tilda

Содержание

Слайд 2

Конструктор використовує блочну систему для створення сайту. Сайт розбивається на блоки

Конструктор використовує блочну систему для створення сайту.
Сайт розбивається на блоки з

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

Зручність використання конструктора

Слайд 3

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

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

проект.
Tilda дозволяє створити:
Сайт компанії
Невеликий інтернет-магазин
Промо-сторінку
Лендінг товару або послуги
Портфоліо спеціаліста
Презентацію
Анкету
І багато іншого

Зручність використання конструктора

Слайд 4

Платформа дає можливість зробити дійсно красиві та різноманітні дизайни сайтів завдяки

Платформа дає можливість зробити дійсно красиві та різноманітні дизайни сайтів завдяки

великій кількості налаштувань в редакторі кожного блоку та використання Zero Block.
Zero Block - це спеціальний блок, контент в якому, можна розташувати за бажанням. Також можна налаштовувати вигляд блоку на різних пристроях.

Дизайн

Слайд 5

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

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

налаштувати різні степені жирності.
Якщо шрифтів по замовчуванню замало є можливість додати Google Fonts, Adobe Fonts або завантажити файли із шрифтами з Інтернету.

Дизайн

Слайд 6

Платформа має багато функцій, які можуть допомогти сайту бути одним із

Платформа має багато функцій, які можуть допомогти сайту бути одним із

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

Пошукова оптимізація (SEO)

Слайд 7

Tilda дає можливість налаштувати оптимізацію сайту з допомогою: Налаштування HTTPS протоколу

Tilda дає можливість налаштувати оптимізацію сайту з допомогою:
Налаштування HTTPS протоколу

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

Пошукова оптимізація (SEO)

Слайд 8

Щоб повноцінно використовувати всі можливості платформи потрібно буде купляти тариф, яких

Щоб повноцінно використовувати всі можливості платформи потрібно буде купляти тариф, яких

Tilda є декілька, в залежності від потреб:

Недоліки конструктора

Слайд 9

Можна залишатись і на безкоштовному тарифі, але тоді нам будуть доступні

Можна залишатись і на безкоштовному тарифі, але тоді нам будуть доступні

лише базові блоки для створення сайту і тільки 50МБ для завантаження файлів. Також не буде можливості прив'язати свій власний домен, а доведеться використовувати субдомен Тільди. Для того щоб оцінити можливості платних тарифів Tilda дає можливість оформити безкоштовну пробну підписку на два тижні, при користуванні якою ви зможете оцінити весь потенціал конструктора.

Недоліки конструктора

Слайд 10

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

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

необхідна лише електронна адреса.
Після чого потрібно перейти на головну сторінку та натиснути кнопку «Створити новий сайт» та придумати для нього назву.

Створення першого сайту

Слайд 11

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

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

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

Сторінки сайту

Слайд 12

Для прикладу оберемо пусту сторінку, на яку самостійно будемо додавати блоки.

Для прикладу оберемо пусту сторінку, на яку самостійно будемо додавати блоки.

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

Структура сайту

Слайд 13

Для прикладу на цьому курсі ми будемо розробляти сайт-візитку компанії. Це

Для прикладу на цьому курсі ми будемо розробляти сайт-візитку компанії. Це

буде односторінковий сайт з такою структурою:
Логотип, назва компанії та меню сайту
Яскрава картинка, та призив до дії, банер з акцією або пропозицією
Ваші послуги з детальним описом
Переваги компанії, чим вона відрізняється від інших
Контакти, заявка на зворотній зв’язок

Структура сайту

Слайд 14

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

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

3-4 кольори, які підходять одне одному. Палітру для свого сайту ви можете зробити на таких сервісах як: Colormind http://colormind.io
Adobe Color https://color.adobe.com

Палітра кольорів

Слайд 15

Після створення структури можна почати додавати блоки відповідно до неї. Перше

Після створення структури можна почати додавати блоки відповідно до неї. Перше

в структурі нашого сайту – це меню з логотипом та назвою.
Натиснемо кнопку «Всі блоки» та перейдемо у вкладку «Меню». В ньому можна вибрати підходящий блок для нашого сайту.
Як приклад, оберемо блок ME201.

Додавання блоків

Слайд 16

Після того, як ми обрали блок він повноцінно з’явиться на сторінці.

Після того, як ми обрали блок він повноцінно з’явиться на сторінці.

При наведенні мишкою на нього з’являться кнопки «Контент» та
«Налаштування».
З допомогою першої кнопки ми можемо додати текст, картинки, іконки і будь-який контент, а за допомогою другої кнопки налаштувати відображення цього контенту та блоку на сайті. Окрім цього в правій частині екрана є кнопки, які дозволяють дублювати, видалити, виключити, копіювати та перемістити блоки.

Редагування блоків

Слайд 17

Згідно нашій структурі сайту зверху ми повинні додати меню. Ми обрали

Згідно нашій структурі сайту зверху ми повинні додати меню. Ми обрали

блок ME201. Тепер проведемо його налаштування. Потрібно зайти у вкладку контент та створити пункти меню.
Створюємо пункти, по яким можна буде зручно знаходити ключові блоки сайту. До кожного пункту можна підв’язати посилання на сторінку або блок. Їх можна буде додати пізніше, після їх створення.

Редагування блоків

Слайд 18

Ми виділили найчастіші помилки і зробили прості правила, які застосовуються до

Ми виділили найчастіші помилки і зробили прості правила, які застосовуються до

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

Рекомендації по дизайну

Слайд 19

Інформацію простіше сприймати, якщо вона розділена на блоки за змістом. Щоб

Інформацію простіше сприймати, якщо вона розділена на блоки за змістом. Щоб

візуально відокремити блоки один від одного, використовуйте великі відступи (від 120 до 180 px) і відокремлюйте блоки за допомогою різного кольору фону.

Немає розділення на смислові блоки

Слайд 20

Слайд 21

Між смисловими блоками повинні бути однакові відстані. Інакше сторінка виглядатиме неакуратно

Між смисловими блоками повинні бути однакові відстані. Інакше сторінка виглядатиме неакуратно

і може скластися відчуття, що блоки нерівнозначні за змістом.

Різні відступи між елементами

Слайд 22

Слайд 23

Щоб різні смислові частини не виглядали як єдине ціле, важливо їх

Щоб різні смислові частини не виглядали як єдине ціле, важливо їх

розділяти і використовувати досить велику відстань між ними (не менше 120 px).

Маленькі відступи, що не дозволяють розділити смислові блоки сайту

Слайд 24

Слайд 25

Текст не повинен зливатися з фоновим зображенням. Щоб він добре читався,

Текст не повинен зливатися з фоновим зображенням. Щоб він добре читався,

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

Текст погано читається на фотографії

Слайд 26

Слайд 27

Велика кількість різних стилів типографіки і оформлення на одній сторінці виглядає

Велика кількість різних стилів типографіки і оформлення на одній сторінці виглядає

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

Багато стилів

Слайд 28

Слайд 29

Виділення кольором окремих вузьких елементів сторінки дробить смислові блоки і виглядає

Виділення кольором окремих вузьких елементів сторінки дробить смислові блоки і виглядає

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

Вузький кольоровий блок

Слайд 30

Слайд 31

Коли в вузьких колонках багато тексту, його важко читати - очам

Коли в вузьких колонках багато тексту, його важко читати - очам

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

Багато тексту у вузьких колонках

Слайд 32

Слайд 33

Вирівнювання тексту по центру доречне при невеликій кількості слів, інакше його

Вирівнювання тексту по центру доречне при невеликій кількості слів, інакше його

буде складно сприймати. При цьому текст варто зробити побільше, від 24 пікселів.
Якщо вам необхідна велика кількість тексту, використовуйте блок з розкривається текстом (TX12, TX16N або кнопка BF703).

Багато тексту з вирівнюванням по центру

Слайд 34

Слайд 35

Не варто розташовувати текст на значущих частинах фотографії та дрібних деталях.

Не варто розташовувати текст на значущих частинах фотографії та дрібних деталях.

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

Текст накладається на важливу частину зображення

Слайд 36

Слайд 37

Щоб на сторінці була помітна смислова ієрархія інформації, заголовок на обкладинці

Щоб на сторінці була помітна смислова ієрархія інформації, заголовок на обкладинці

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

Недотримання візуальної ієрархії

Слайд 38

Слайд 39

Дуже великий шрифт добре підійде для короткої фрази. Якщо заголовок довгий,

Дуже великий шрифт добре підійде для короткої фрази. Якщо заголовок довгий,

краще використовувати менший розмір шрифту, так його буде легше читати і всім елементами на обкладинці не буде тісно.

Занадто великий і довгий заголовок

Слайд 40

Слайд 41

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

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

в цьому. Використовуйте меню, щоб людям було простіше зорієнтуватися і швидше знайти те, що їм потрібно.
Не перевантажуйте меню надлишковою інформацією. Оптимальна кількість пунктів меню - 5-7.

Перевантажене меню

Слайд 42

Слайд 43

Домен - це унікальне ім'я сайту, за яким можна на нього

Домен - це унікальне ім'я сайту, за яким можна на нього

перейти. При створенні сайту Tillda дає можливість зробити назву сайту із їх субдоменом. Наприклад mysite.tilda.ws.
При оплаті тарифу відразу на рік Tilda дає можливість створити унікальний домен в зонах .ru .su .рф .com .net .info .org. Окрім цього, якщо ви надалі не будете користуватись конструктором, то ви все одно матимете повні права на використання домену.

Що таке домен та як його підключити?

Слайд 44

Також домен можна орендувати у різноманітних хостингів. Після вибору вільного домену

Також домен можна орендувати у різноманітних хостингів. Після вибору вільного домену

та оплату, хостинг надасть вам можливість налаштувати цей домен. А саме додати А-запис з потрібною IP-адресою.
Домен можна додати через відповідне меню в налаштуваннях сайту. В цьому ж меню буде відображатись необхідна IP-адреса.

Додавання домену

Слайд 45

В конструктор інтегровано багато сервісів, які дозволяють вдосконалити ваш сайт та

В конструктор інтегровано багато сервісів, які дозволяють вдосконалити ваш сайт та

його адміністрування. Tilda має такі сервіси:
Сервіси прийому даних
Системи управління клієнтами (CRM)
Сервіси розсилок
Платіжні системи
Сервіси доставки
Інші сервіси
Всі сервіси можна підключити через кнопку «Налаштування сайту» в основному меню.

Додавання сервісів

Слайд 46

Для того, щоб зручно отримувати дані із заявок можна підключити сервіси

Для того, щоб зручно отримувати дані із заявок можна підключити сервіси

для їх прийому, а саме:
Telegram
Email
Google Sheets
Trello
Можна підключити всі сервіси разом, або підключити один із сервісів для конкретної форми зворотнього зв’язку.

Сервіси прийому даних

Слайд 47

До сайту можна підключити CRM-систему, яка дозволить зручно переглядати дані про

До сайту можна підключити CRM-систему, яка дозволить зручно переглядати дані про

користувачів та інформацію, яку вони відправляють через форми зворотнього зв’язку.
CRM-систему можна комбінувати з сервісами прийому даних. Наприклад в Telegram вам приходять сповіщення про нові замовлення, а в СRM ви можете їх детально переглянути.

Системи управління клієнтами (CRM)

Слайд 48

У конструктор вже вбудована CRM-система, яка дозволяє вести облік будь-яких заявок

У конструктор вже вбудована CRM-система, яка дозволяє вести облік будь-яких заявок

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

Tilda CRM

Слайд 49

Конструктор має майже два десятки різних платіжних систем, які можна підключити

Конструктор має майже два десятки різних платіжних систем, які можна підключити

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

Платіжні системи

Слайд 50

Сервіси доставки допомагають вибрати спосіб та місце доставки товару при замовленні.

Сервіси доставки допомагають вибрати спосіб та місце доставки товару при замовленні.


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

Сервіси доставки

Слайд 51

Favicon – це маленька іконка сайту, яка відображається у вікні вкладки

Favicon – це маленька іконка сайту, яка відображається у вікні вкладки

браузера.
Favicon можна створити зі звичайної картинки, але її треба конвертувати в формат .ico
Це можна зробити на сервісі: https://www.xiconeditor.com

Створення Favicon