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

Які сайти можна створювати на Tilda

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

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

Інтернет-магазини. Якщо компанія має невеликий каталог товарів, їй не обов'язково створювати сайт на CMS. Тільда ​​буде ідеальним варіантом для монопродуктового магазину, який пропонує кілька варіантів одного і того ж товару чи послуги.

Промосторінки заходів. Щоб просувати концерти, театральні постановки та інші події, ви можете створити на Тільді візитку і зробити зв'язку з сервісом продажу квитків (наприклад, дати пряме посилання).

Особисті портфоліо. Будь-який контент-проект зручно реалізувати за допомогою цього конструктора, оскільки він надає широкий перелік можливостей. Розробник може прописати title, description, теги H1-H3, Alt для зображень.До кожного лонгріду можна додати кнопки для репостів у соціальних мережах. У всіх сторінках можна настроїти адреси, додати форми підписки, платформа підтримує генерацію RSS-стрічки.

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

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

Дізнайтесь, яка професія у дизайні вам підійде

Можливості для створення сторінок за допомогою Tilda

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

Відеонавчання перед створенням сайту

Готові шаблони

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

Як зробити ефективний лендинг на Tilda, покрокова інструкція

Готові блоки

Якщо жоден із шаблонів не підходить, але для створення сторінки з нуля немає часу та досвіду, можна використовувати готові блоки. Для цього дизайнери розробили відповідні елементи.У бічному меню можна вибрати текстові блоки, зображення, "Про компанію", відеоролики, кнопки, форми зворотного зв'язку, переваги і т.д. Майданчик підлаштовує готові блоки під різні пристрої, щоби на смартфонах, десктопах, планшетах сайт відображався в оптимальному вигляді. Елементи додаються на сторінку натисканням на них у редакторі або з меню зліва (у цьому випадку можна вибрати один з декількох прикладів).

Створення сторінки за допомогою готових блоків

Текст та зображення

Щоб змінити текст, на нього потрібно натиснути, після цього можна відразу почати редагування. Існує ще один варіант: у вибраному блоці потрібно натиснути на помаранчеву кнопку Контент, тоді зліва відкриється додаткове вікно. У текстовому редакторі можна створювати списки, виділяти жирним, підкреслювати, закреслювати, встановлювати міжрядкову відстань і т.д. Зображення завантажуються з диска (можна перетягнути прямо з Провідника), можна також розмістити посилання на картинку.

Zero-блоки

Zero-блоки — складніший інструмент для верстки сайтів, який рекомендується використовувати досвідченим розробникам. Щоб розпочати налаштування за допомогою цього інструмента, потрібно зайти в розділ «Порожня сторінка» та натиснути Zero у меню. Тут можна повністю адаптувати дизайн сторінки під свої завдання та різні пристрої (зверніть увагу, що дизайн не оптимізується автоматично).

Zero-блок у Tilda: як працювати з анімацією лендінгу

Як створити сторінку на Tilda

Створення сторінки на платформі Тільда ​​– швидкий процес, складність якого залежить від того, який варіант дизайну ви вибрали.

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

Щоб створити сторінку на Tilda, потрібно виконати такі кроки:

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

Кожен блок на новій сторінці можна редагувати. Щоб змінити текст, потрібно навести на нього мишкою і натиснути, зверху з'явиться панель типографіки. Щоб отримати доступ до більш широких можливостей, натисніть «Параметри» або «Контент». Перша опція дозволяє керувати SEO-параметрами та дизайном: налаштовувати горизонтальне та вертикальне вирівнювання, відступи, ефекти при скролі, кольори, анімацію та ін. Друга опція дозволяє керувати вмістом блоку: зображеннями, текстом та відео (у тому числі додавати новий графічний контент).Кожен блок має свої варіанти для редагування — найчастіше це колір, розмір і діапазон видимості.

Можливості для SEO

Створення сайту на Тільді дозволяє виконати оптимізацію для пошукового просування. Розглянемо які можливості надає конструктор.Отримання сертифіката SSL. Користувачі Тільда ​​з тарифами вищими за безкоштовне можуть підключити безкоштовний сертифікат Let's Encrypt. За допомогою нього можна настроїти HTTPS.Спочатку потрібно підключити сайт до оплаченого домену, а потім зайти в "Мої сайти" – "Новий проект" – "Налаштування сайту" – SEO. Тут можна знайти пункт «Налаштування HTTPS» та натиснути «Редагувати». Після цього перевести перемикач у положення "Захищений протокол для сайту включений".

Процес налаштування HTTPS для сайту

Аналіз помилок. Після налаштування метатегів, завантаження контенту, додавання Alt та інших параметрів користувач може зайти в розділ SEO та знайти пункт «SEO-рекомендації», натиснути «Подивитися» та отримати звіт з усіх помилок.

Підключення аналітики. Користувач може підключити до свого сайту Яндекс.Метрику, Яндекс.Вебмайстер, Google Analytics, Search Console Google, VK Pixel, Mail.ru Counter ID. Все це доступно тільки на платних тарифах і за умови, що користувач вже має лічильники на перерахованих майданчиках. Підключити всі ці інструменти можна в меню «Налаштування сайту», закладках «Аналітика» та SEO.

Дизайн-хвиля – ваше експрес-занурення у дизайн-професії. Беріть участь в ефірі з експертами, виконайте нескладні практичні завдання та отримайте подарунки.

Підключення домена. Безкоштовний тариф дозволяє зареєструвати домен лише за назвою виду [ваш сайт].tilda.ws. Якщо купити платну передплату, можна підключити власний домен, щоб сайт отримав унікальну адресу. Зверніть увагу на те, що пошукові системи високо цінують саме контент, тому субдомени .tilda.ws не песимізуватимуться у видачі. Однак не варто забувати про людський фактор: довіра користувачів до сайтів із подібними адресами зазвичай нижча.

Інші переваги. Є й інші можливості для пошукового просування, які важливо відзначити:

• зміна favicon (завантаження доступне лише у форматі .ico);
• додавання сторінки помилки;
• введення людинозрозумілих URL (написані на латиниці, але зрозумілі для читача);
• керування метатегами;
• керування тегами заголовків (H1, H2 і т.д.);
• вказівку Alt для зображень;
• вилучення сторінок із індексації;
• редиректи з кодом 301;
• керування файлом request.csr для отримання національних сертифікатів.

Все це дозволяє організувати повноцінне SEO просування сайту.

Як створити сайт у Tilda

Інші можливості Tilda

Інтеграція з WordPress

Розробник може інтегрувати Tilda з WordPress на тарифі Business за умови встановлення спеціального плагіна Tilda Publishing, який можна знайти на офіційному сайті CMS. Розробник може створити основний сайт на WordPress, а пов'язаний з ним блог для лонґрідів оформити за допомогою Tilda.

Створення листів для email-розсилки

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

Підключення електронної торгівлі

За допомогою Tilda можна запустити свій інтернет-магазин та приймати оплати. Розділ із шаблонами «Бізнес» пропонує варіанти сторінок, адаптованих до ведення торгівлі.

Підключення Tilda CRM

Tilda надає користувачам доступ до CRM навіть у безкоштовному тарифі. Для цього потрібно натиснути на відповідну кнопку у верхньому горизонтальному меню та клацнути на «Створити новий аркуш». Потім у налаштуваннях веб-ресурсу на Tilda потрібно підтвердити підключення CRM. Як тільки це буде зроблено, всі заявки із сайту потраплятимуть до CRM. Ті заявки, які надходитимуть телефоном, можна додати вручну, для цього передбачена кнопка «Додати заявку».

Підключення Tilda CRM

Інтеграція зі сторонніми сервісами

Розробник може підключити до сайту на Tilda багато різних сервісів. Для цього потрібно сплатити тариф та зайти в меню «Форми». Тут можна додати Google Sheets, форми Telegram, заявки на дошку Trello або Slack. Розробник може навіть підключити можливість створювати власний кабінет для клієнтів.

Список сервісів для інтеграції із сайтом

Вартість тарифів Tilda

Користувачі Tilda можуть вибрати один із трьох доступних тарифів: Free, Personal та Business.

Тарифи та їх вартість

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

Personal. Цей тариф коштує 750 рублів на місяць при щомісячній оплаті та 500 рублів на місяць при покупці доступу відразу на рік (економія 3000 рублів та домен у зоні .ru або .com у подарунок). Personal добре підходить, якщо потрібно зробити невеликий інтернет-магазин, корпоративний сайт, блог. На цьому тарифі все ще можна створити лише один сайт, але вже з обмеженням 500 сторінок і дисковим простором 1 Гб. Користувач може завантажувати власні шрифти, користуватися онлайн-підтримкою технічних фахівців, отримувати автоматичний захист від DDoS-атак, створювати каталог товарів та ін.

Business. У цей тариф входять всі переваги Personal, до яких додаються можливість інтеграції з сервісами API та безготівкова оплата для юридичних осіб.Також користувач має можливість зробити на Тільді до 5 сайтів. За помісячної оплати ціна становить 1250 рублів. Якщо купити річну передплату, вартість місяця становитиме 1000 рублів. Цей тариф підійде тому, хто веде великий та диверсифікований бізнес, а його клієнти – фізичні та юридичні особи.

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

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

Переваги

• Розробка сайтів на Tilda – недорогий спосіб створити власний веб-ресурс.
• Послуги програміста не є обов'язковими для редагування та оновлення сайту. Інтерфейс Тільди дуже простий і не потребує спеціальних знань.
• Розробка сайту займає мінімум часу. Наприклад, створення лендингу може піти лише один день.
• У більшості випадків не потрібно дбати про адаптацію сторінок — вони автоматично підлаштовуються під різні пристрої.
• За допомогою Тільди можна втілити практично будь-яку дизайнерську ідею завдяки Zero-блокам. Весь контент у них можна адаптувати за бажанням користувача.
• На платних тарифах можна необмежено користуватись послугами техпідтримки, яка допоможе розібратися у складностях.
• Конструктор має велику бібліотеку допоміжних матеріалів: вебінари, відеоуроки, довідковий центр, FAQ. Вони допомагають новачкам швидко освоїтися з інструментом та розвинути свої навички у створенні сайту на Тільді.

Недоліки

• Тарифи Personal і Business коштують досить дорого для створення нескладного сайту з обмеженням лише 500 сторінок. Можливостей Tilda не вистачить для запуску повноцінного інтернет-магазину, блогу маркетингового агентства або ресурсу новин, яким потрібно набагато більше вільного дискового простору та доступних сторінок.Якщо проект має реальні перспективи зростання і розвитку, правильним рішенням буде відразу використовувати WordPress або іншу CMS і звернутися до професійних розробників.
• Базових блоків та шаблонів може виявитися недостатньо. За відсутності дизайнерських навичок користувачеві доведеться наймати професіонала для верстки сайту. Це нівелює основні переваги Тільди: низьку ціну, простоту та високу швидкість створення сайту.
• Вільний дисковий простір на хостингу обмежений максимумом 1 Гб. Для деяких завдань цього недостатньо. Якщо користувач планує розміщувати зображення у високій якості, відео та анімації, їх доведеться вбудовувати через код. Це вимагатиме додаткового часу та спеціальних знань.

Приклади сайтів на Tilda

На Тільді створюється безліч сайтів для компаній різних напрямків. Наведемо приклади.

LIKE4LIKE – консалтингова компанія, яка допомагає бізнесу розробляти стратегії.

KÖRPER – інтернет-магазин модного бренду одягу.

VANIN – особистий сайт дизайнера з прикладами робіт.

«Кінокампус Горького» – креативний простір для розвитку дітей та підлітків.

Франшиза «Куля Бургер» – федеральна мережа Бургер. Сайт займається рекламою та продажем франшизи.

Sber 500 – IT-акселератор Сбера, сайт для залучення інвестицій у проекти.

Все про дизайн за 2 години

Безкоштовний практикум + гайд "300 корисних ресурсів для дизайнера" ​​після реєстрації

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

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

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

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

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

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

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

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

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

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

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

Додати відео з YouTube або Vimeo. Використовуйте різні комбінації: один або два плеєри, поєднання відео та тексту.

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

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

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

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

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

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

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

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

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

Футер з корисною інформацією та зручною навігацією: логотип та текст, посилання, іконки соц. мереж та форма підписки.

Додайте блок з карткою, впишіть вашу адресу в налаштуваннях, і клієнтам буде легше вас знайти.
Потрібна підказка чи додаткова інформація? Додайте на сторінку підказки.
Безшовно підключіть сторонні послуги: Disqus, JivoChat, CallbackHunter, TimePad, Yclients та інші.
Додайте на сайт унікальні елементи за допомогою вставки свого html-коду (включаючи js та css).

ІІ-помічник для генерації тексту

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

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

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

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

Створіть фірмову дизайн-систему в рамках одного облікового запису. Відредагуйте базовий або Zero Block та додайте його до бібліотеки.

Будь-який Zero Block можна перетворити на спливаюче вікно, додавши на сторінку блок-модифікатор T1093 "Popup: Zero Block в попапі" з категорії "Інше".

Ви можете самостійно налаштувати роздільну здатність екранів для різних пристроїв і досягти ідеального розташування всіх елементів сайту. Діапазон для контрольних точок (брейкпоінтів) варіюється від 320 до 1920 px.

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

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

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

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

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