Як зробити сайт на Тільда

Освоюємо конструктор Tilda: робимо сайт-візитку з нуля

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

«Тільда» — це онлайн-конструктор сайтів. З його допомогою можна швидко і просто створити свій сайт-візитку, протестувати і опублікувати в інтернеті. Щоб зробити сайт на «Тільда», не потрібно купувати доменне ім’я або вчитися програмувати — досить розставити по місцях готові блоки.

Чому саме «Тільда»:

  • Простий і інтуїтивно зрозумілий візуальний редактор, який освоїть навіть новачок.
  • Багато готових блоків і шаблонів — легко почати, а результат буде акуратним і красивим.
  • Автоматична адаптація дизайну сайту під всі пристрої і екрани.
  • Один з найпопулярніших в рунеті конструкторів сайтів.
  • Є безкоштовний тариф — підійде для експериментів, навчання та адаптації на платформі. Від платного відрізняється обмеженням в деяких функціях. Наприклад, неможливо підключити свій домен.

Автор статей по дизайну. У веб-дизайн прийшов в 2013 році, усвідомлено почав займатися з 2015 року. Паралельно освоїв верстку. Час від часу публікує переклади на Хабре.

Що буде в цьому уроці

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

Як зробити сайт на Тільда

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

Виявляється, що бюро спеціалізується на великих, складних проектах і є експертом в таких замовленнях. Робимо висновок, що недостатньо просто хороших картинок з підписами, потрібен текст — досить докладні описи вихідних даних, процесу, пояснення і обґрунтування рішень. Також ми розуміємо, що проектів багато, але показувати все необхідності немає. Концентруємося на наймасштабніших. І ще момент, потрібно розповісти про людей, пояснити, чому вони експерти в своїй справі.

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

Розробка Лендінзі для школи дизайну. Сторінка повинна пояснити майбутнім студентам і їх батькам хто такий дизайнер.

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

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

ідея: Що якщо виділити кілька основних напрямків дизайну: інтерактивний дизайн, графічний, промисловий і взяти інтерв’ю у трьох найкрутіших представників? Особисті історії дуже емоційні і добре працюють. Розповісти чим вони живуть, як домоглися успіху, додати класні фотографії. Людям буде цікаво прочитати, вони для себе побачать, що це за людина, близький він, чи надихає його спосіб життя.

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

нюанс: не пишіть головну сторінку як початок «дерева». Нехай сторінка «контакти» матиме той же рівень, що і «головна». Це допоможе, коли ви будете робити навігацію.

Як створити сайт на Tilda: інструкція для новачків

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

Щоб почати працювати з Tilda, потрібно створити обліковий запис. Через акаунти в соцмережах авторизуватися не вийде. Єдиний варіант — реєстрація через електронну пошту. У формі ви вказуєте адресу діючої і пароль. Після натискання на кнопку «Зареєструватися» на вказаний ящик прийде лист з посиланням для підтвердження реєстрації.

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

  • Доступні не всі блоки з каталогу конструктора.
  • Не можна підключити свій домен — опублікований сайт буде розташовуватися за адресою виду site.tilda.ws.
  • Можна створити тільки 1 проект з 50 сторінками на 50 МБ дискового простору.
  • Не можна прибрати лейбл «Made on Tilda» внизу сторінки.

Безкоштовний тариф хороший, якщо ви хочете потренувати свої навички створення сайтів на Tilda або робите візитку / портфоліо.

Для великих сайтів, спецпроектів, інтернет-магазинів, блогів будуть потрібні можливості платних тарифів. Їх два: Personal (750 р / міс) і Business (від 1200 р / міс). Між ними два ключових відмінності:

  1. На Personal можна створити тільки 1 проект з 500 сторінками на 1 ГБ дискового простору, на Busines — 5 проектів з аналогічними параметрами.
  2. На Business підтримується експорт коду. Це означає, що ви можете створити сторінку на Тільда, а потім інтегрувати її з іншим сайтом, використовуючи різні сценарії публікації.

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

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

створення проекту

Після авторизації на Tilda ви потрапляєте в панель управління, яка називається «Мої сайти». Тут будуть посилання на всі ваші проекти.

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

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

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

створення сторінок

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

Головне завдання зараз — створити і налаштувати першу сторінку.

Створити нову сторінку

Відкрийте проект і натисніть на кнопку «Створити нову сторінку». З’явиться бібліотека шаблонів, розділена на кілька категорій:

  • «Бізнес» — шаблони для сайтів-візиток, портфоліо, сторінок корпоративних порталів.
  • "Магазин" — шаблони для сторінок інтернет-магазинів.
  • «Подія» — макети для Лендінзі і звітів про заходи.
  • «Блог» — приклади структури для записів в блог і спецпроектів в ЗМІ.
  • «Контакти» — шаблони для сторінки з контактною інформацією.
  • «Анкети» — зверстані макети різних опитувальників і форм реєстрації.
  • «Внутрішні» — кілька варіантів внутрішніх розділів багатосторінкових сайтів: ті ж контактні дані, відомості про компанії, новини, питання.

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

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

Дизайн сторінки

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

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

У редакторі Тільди використовується bootstrap-сітка з 12 стовпців. По ній ви будете вирівнювати контент. Сторінка верстається строго вертикально. Ви додаєте блоки один за іншим і міняєте черговість їх появи на екрані при Скролл.

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

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

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

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

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

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

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

Перед публікацією сторінки натисніть на кнопку «Налаштування». Вам потрібно заповнити кілька важливих полів.

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

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

Якщо ви створюєте багатосторінковий сайт (наприклад, інтернет-магазин з картками товарів), то потрібно скористатися функцією дублювання для швидкого створення однакових сторінок. Вона доступна на вкладці «Дії». Тут же можна видалити сторінку, передати її на інший рахунок або перенести на інший сайт.

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

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

публікація сторінки

Робота з Zero Block

Zero Block — це потужний редактор для тих, хто хоче створити на Тільда ​​унікальний дизайн. Щоб навчитися з ним працювати, потрібно витратити не один день. Часто дизайну на Zero Block вчать на спеціальних курсах, тому що він пропонує дуже багато цікавих можливостей для побудови інтерфейсу сайтів.

нульовий блок

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

В Zero Block можна додати такі елементи:

  • текст
  • зображення
  • геометричну фігуру
  • кнопку
  • Відео
  • підказку
  • Блок для вставки HTML-коду
  • форму
  • галерею

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

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

Головна перевага Zero Block — покрокова анімація. Саме завдяки їй він став таким популярним інструментом серед дизайнерів. Покрокова анімація дозволяє створювати інтерактивні сайти, які стали візитною карткою конструктора Tilda.

Налаштування анімації

Конструктор пропонує два типи анімації:

  • Basic Animation — стандартні ефекти. Наприклад, фіксація, паралакс або плавне поява блоку на сторінці.
  • Step-by-step Animation — покрокове зміна стану елемента для створення унікального поведінки.

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

Покрокова анімація налаштовується тільки в редакторі Zero Block. Її можна застосувати до будь-якого елементу інтерфейсу. У налаштуваннях є розділ «Step by Step Animation». Щоб приступити до додавання кроків, натисніть «Add».

Для початку потрібно вибрати умови старту анімації. Всього їх п’ять:

  • Element on Screen — старт при відображенні елемента.
  • Block on Screen — старт при відображенні блоку.
  • On Scroll — анімація працює тільки під час скролла.
  • On Hover — старт при наведенні курсору.
  • On Click — старт анімації при натисканні.

У початку також є три додаткові налаштування:

  • Start Trigger — прив’язка анімації до області, при появі якої буде спрацьовувати умова (верх, центр або низ вікна).
  • Trigger Offset — зміщення старту анімації щодо тригера.
  • Loop — зациклення програвання.

Щоб подивитися, як це працює, використовуйте кнопки «Play Element» і «Play All». У першому випадку програється анімація обраного елемента, в другому — поведінка всіх елементів, які є на екрані. Але перш ніж запускати попередній перегляд, потрібно налаштувати кроки — тобто показати конструктору всі етапи анімації.

Кроки додаються кнопкою «Add Step». Далі потрібно змінити стан елемента. Всього є 7 властивостей:

  1. Duration — тривалість відтворення анімації. Якщо включено зациклення (Loop), то після завершення анімація запускається заново.
  2. Move — місце розташування елемента. Можна ставити його конкретними значеннями або просто пересувати елемент мишкою.
  3. Scale — розмір.
  4. Opacity — прозорість.
  5. Rotate — поворот елемента.
  6. Easing — Виберіть потрібний ефект відтворення: Linear — лінійне, easeIn — уповільнення на старті, easeOut — уповільнення перед вінішем, easeInOut — уповільнення на старті і перед фінішем, bounceFin — невеликий ривок перед початком анімації.
  7. Delay — затримка перед відтворенням.

Порада: якщо ви хочете, щоб елемента спочатку не було на екрані, задайте йому нульовий крок з 100% прозорістю.

По суті, анімація — це додавання кроків зі зміненими властивостями елемента. Наприклад, на першому кроці він в лівому верхньому кутку блоку, а на другому — в правому нижньому. Тривалість анімації — 2 секунди. Це означає, що ваш елемент при спрацьовуванні умови буде протягом 2 секунд повзти з одного кута блоку в інший. Це примітивний приклад анімації. Насправді, в Zero Block можна створювати вражаючі ефекти.

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

Підготовка сайту до публікації

У нас є готовий проект з усіма зверстаний сторінками. Залишилося підготувати його до публікації — підключити домен, перевірити настройки, додати лічильники від Яндекса і Google для збору статистики.

публікація сайту

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

  1. На вкладці «Головне» додайте опис сайту — ця інформація буде відображатися при публікації посилання в соцмережах і месенджерах.
  2. На вкладці «Головна сторінка» виберіть, яку сторінку користувач бачитиме першої при відкритті сайту.
  3. На вкладці «Домен» підключіть свій домен (докладніше про те, як це зробити, трохи нижче).
  4. На вкладці «Аналітика» підключіть інструменти від Google і Яндекса. Можна вказати номер лічильника, який відображається в кабінеті на сервісі аналітики, або натиснути на кнопку «Підключити» і дозволити Tilda Publishing доступ до аккаунту.
  5. На вкладці «SEO» натисніть на кнопку «Подивитися» в розділі «SEO-рекомендації». Майстер перевірить всі сторінки і видасть рекомендації по їх оптимізації. Тут же можна підключити Google Search Console і Яндекс.Веб-майстер.
  6. На вкладці «Шапка і підвал» виберіть створені хедер і футер, які повинні відображатися на кожній сторінці (актуально для багатосторінкових проектів).
  7. На вкладці «Ще» завантажте фавікон (в іншому випадку в браузері буде відображатися значок Тільди), змініть колір або приберіть лейбл (пункт Platform Label), вкажіть сторінку 404.

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

підключення домену

На платних тарифах можна додати на сайт домен. Його доведеться реєструвати на інших майданчиках. Щоб прив’язати домен до сайту, потрібно в його налаштуваннях додати запис А і вказати в ній IP-адреса 185.165.123.36.

Для поддомена або домену з www створюється ще один запис А з адресою 185.165.123.36.

Після додавання записів в налаштуваннях домену на сайті реєстратора вкажіть його ім’я в настройках сайту на Тільда. Оновлення записів займає від 3 до 24 годин.

Сценарії публікації

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

На безкоштовному тарифному плані можна опублікувати проект на домені третього рівня — site.tilda.ws. Весь контент зберігається на хостингу Tilda. Ви отримуєте повноцінний сайт, на який можуть заходити інші користувачі. Ви можете розміщувати посилання на нього в соцмережах і месенджерах, його сторінки з’являться в пошуковій видачі — якщо ви хоча б трохи оптимізували їх під ключові запити.

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

Ще один варіант — підключення субдомена. Наприклад, у вас є інтернет-магазин на CMS, але ви хочете доповнити його спецпроектом з розповіддю про бренди одягу. Ви створюєте субдомен — наприклад, special.myshop.ru. Потім підключаєте його до проекту на Tilda. Після поновлення записів DNS контент, зверстаний на конструкторі, буде доступний по прив’язаному Субдоменів. В обох випадках все дані зберігаються на сервері Tilda.

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

  1. Ви верстаєте проект на Тільда, а потім берете весь код і розміщуєте його на своєму сайті. Це може бути весь проект або тільки його частина — наприклад, окремі сторінки зі спеціальним оформленням.
  2. Більш просунутий варіант — повна інтеграція з сайтом. Ви створюєте контент на Тільда, а потім експортувати код і отримуєте проект з елементами стилю основного сайту.
  3. Ще більш складний підхід — автоматична інтеграція через API. Ви створюєте контент на Tilda, потім публікуєте його, і він з’являється на основному сайті, вписуючись в його макет. Налаштування цього варіанту вимагає участі веб-розробників.
  4. Інтеграція з сайтом на WordPress за допомогою плагіна — та ж інтеграція, тільки максимально зручна завдяки розширенню, створеному розробниками Tilda.

Найпоширеніший сценарій — публікація сайту на домені другого рівня. Після натискання на кнопку «Опублікувати» сайт буде доступний за тією адресою, яку ви вказали в його настройках.

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

висновок

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

Для створення інтерактивних сайтів з вражаючою анімацією і унікальним дизайном розробники використовують потужний Zero Block. Щоб створювати в ньому привабливі і функціональні блоки, потрібно пройти навчання. У довідці Tilda навіть є безкоштовний підручник з відеоуроками, що пояснюють основні операції. Якщо часу на навчання немає, то можна спочатку обходитися стандартними блоками. У них теж є анімація, нехай і не така цікава, як в настройках Zero Block.

З інструментами Тільди можна працювати на безкоштовному тарифі, проте він підходить тільки для навчання і створення зовсім простих сайтів. Всі можливості конструктора доступні на тарифі Personal, а якщо вам потрібно експортувати код або створити більше 5 сайтів, то доведеться купувати підписку на Business.

Ссылка на основную публикацию