Найти в Дзене

Создание сайта с помощью конструктора Tilda с нуля

Оглавление

Tilda — это бесплатный конструктор сайтов, который позволяет создавать их без программирования. Разработчики сервиса придумали способ: делать сайты можно из блоков, таким образом он с первых дней получается красивым и почти на 100% обладает дружественным интерфейсом.

В Tilda можно создавать:

  • Cайт бизнеса или компаний
  • Лендинги
  • Промо-страницы мероприятий
  • Интернет-магазин
  • Блог
  • Личный сайт или портфолио
  • Корпоративный блог или презентацию

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

Форма регистрации

Приступим к делу. Прежде чем начать создавать свой первый сайт, нужно зарегистрироваться на сервисе.

После потребуется подтвердить e-mail, а Tilda будет любезно делиться с вами статьями с полезным содержанием.

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

С чего начать создание сайта на Tilda?

Анализ конкурентов

Прежде чем начать создание сайта, проанализируйте эту нишу у конкурентов. Внимание стоит уделять не визуальному оформлению, а структуре. Оценивайте то, как они выглядят, а содержание: какие выделили разделы, из каких пунктов состоит меню, что расположено на главной странице.

Это не обязательно должен быть сайт прямых конкурентов. Выделяйте схожую категорию. Например, создавая сайт музыкального концерта, обратите внимание на сайты театральных спектаклей и т.д.

На этом этапе важно скорее структурное оформление, чем визуальное.

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

Вы уже проанализировали сайты конкурентов, поняли, что вам нужно, теперь пора изобразить это не только в голове, но и на бумаге. Возьмите листок и ручку и нарисуйте будущие блоки. По-умному такая совокупность блоков называется прототип.

У построения прототипов есть свои правила:

  • Текст изображается прямыми линиями
  • Шапка — полосой сверху
  • Картинка рисуется перечеркнутым крестом прямоугольником

И так далее. Вообще, можете изображать, как вам удобно. Главное, чтобы на этапе сборки сайта на Tilda разобраться, что к чему.

Повторюсь, что прототип должен состоять из блоков и отображать порядок: от главной страницы с привлекательной картинкой и текстом до контактов и адреса.

Сбор контента

Контент — важнейшая составляющая для сайта. Реакция аудитории во многом от этого зависит.

Поэтому вам нужно собрать фото- и видео-материалы, а также написать текст. Если вы готовы это сделать сами, то не нужно использовать клише и штампы. Пишите простым языком, как будто говорите сами.

Создание сайта

Выбор шаблона

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

Важно: никто не запрещает вам удалять блоки и менять их местами, шаблон — не конечный вариант.

Допустим, мне нужно сделать сайт для частных уроков фортепиано Светланы Родченковой (имя вымышленное).

-2

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

Блоки

В каждом шаблоне можно менять тип блоков. Их в сервисе более 450, поэтому вы точно найдете подходящий. Делается это с помощью кнопки в левом верхнем углу.

-3

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

Фото и видео-контент + анимация

После того, как вы выбрали блок, наполните его заранее подготовленным контентом. Изображения меняются во вкладке «контент» или просто переносом, то же самое с текстом.

  • Фотографии можно добавить с помощью бесплатных фотостоков-партнеров Tilda. Просто нажмите на «искать в библиотеке» в разделе «контент». Изображение можно загрузить из архивов Unplash, Google.
  • Также можно использовать бесплатные иконки, разработанные дизайнерами Tilda и Linea.io.
  • Самая крайняя вкладка справа — Instagram. Интегрируйте будущий сайт с лентой Instagram, которая будет автоматически обновляться или выгружайте оттуда фотографии.
-4

В блоки также можно загружать видео с компьютера, с других сервисов в формате «mp4» и «webm».

-5

Цвета и фильтры также можно поменять в настройках.

-6

Во всех блоках можно настроить анимацию стандартного вида: прозрачность (сверху, снизу, справа, слева), увеличение. Также можно более продвинуто подойти к созданию анимации с помощью Zero Block, но об этом в отдельной теме.

-7

Редактор текста

Текст редактируется точно так же, как картинки: в режиме редактирования или через кнопку «контент». Блоки в Tilda спроектированы удобно красиво для пользователя, однако вы всегда можете изменить сочетание шрифтов, кегль и другие параметры (даже отступы).

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

-8

Используемые шрифты также можно поменять на стандартные, загрузить новые с других сервисов или выгрузить свои во вкладке Your own fonts.

-9

Дополнительные функции

Формы и кнопки заявок, создание лендингов

С помощью форм обратной связи можно получать заявки на бесплатное занятие, бронирование отеля, а также обратную связь о мероприятии или заведении. Для этого существует отдельный раздел блоков «Форма и кнопка».

Формы могут быть абсолютно разными: от самой простой с заполнением номера телефона и имени до сложно построенной с выпадающими списками, несколькими шагами и т.д. На Tilda можно фантазировать!

Все заявки могут поступать в личный кабинет Tilda (раздел «Заявки»), или вы можете подключить один из 18 сервисов:

  • Для рассылки: UniSender, MailChimp, Sendgrid, Sendinblue, Mailerlite
  • Email, Google Таблицы
  • CRM: Pipedrive, AmoCRM, Битрикс24, GetResponse, Мегаплан, Trello, Zapier
  • Telegram, Slack

Формы можно внедрять и в отдельные сайты или так называемые лендинги, в этом вам поможет шаблон из раздела «Анкеты».

Форма заявки для нашего сайта-примера уроков игры на фортепиано:

-10

Интеграция с платежными системами для интернет-магазинов

Вам нужен интернет-магазин? И с этим справится Tilda! Можно создавать карточки товаров и настроить оплату онлайн, либо просто настроить оплату для различных вебинаров и курсов.

Платежные системы, с которыми интегрируется Tilda: Яндекс.Касса, Яндекс.Деньги, Robokassa, Cloudpayments, Tinkoff банк, Сбербанк, Альфа банк, LiqPay, Stripe, PayPal.

О каждой заявке приходит оповещение на email, а полный список остается в личном кабинете на Tilda или собирается в Google Таблицу.

Email-рассылка

Email-рассылка — рассылка, основанная на добровольном соглашении. Гораздо приятнее получать красивые структурированные сообщения, чем разбираться в построении текста и его смысле. В Tilda можно оформить рассылку в виде странички.

Отправить сам email можно через Tilda с помощью сервисов: UniSender, SendGrid, MailChimp. А также есть возможность просто скопировать HTML-код и вставить его в свой сервис.

Подключение собственного домена

В Tilda есть возможность подключение своего домена. Для этого зайдите в «Настройки сайта» — «Домен». По уникальному адресу посетителям будет легче найти ваш сайт, однако всегда есть бесплатный домен от сервиса, если пока что нет необходимости тратиться.

-11

Настройка и подключение Яндекс Метрики и Google Analytics

-12

В разделе «Аналитика и статистика» есть все необходимые пункты для продвижения сайта в поисковиках, вы можете:

  • Задать мета-теги — ключевые запросы, по которым можно попасть на вашу страницу
  • Подставить теги для заголовков — стандартные теги h1, h2 и т.д. помогают поисковикам понять, о чем сайт и когда его показывать
  • Подключить сторонний вебмастер или доверить проверку вебмастеру Tilda
  • Подключить сервисы Яндекс.Метрика и Google Analytics — часто используемые сервисы поисковых систем для SEO
  • Добавить значок сайта или страницы, чтобы можно было легко находить среди вкладок

Сервисы помогут продвинуть ваш сайт в топ в поисковиках, это обязательный пункт грамотного ведения бизнеса.

Facebook бейджик

Продвижения возможно не только в по поисковым системам, но и с помощью социальных сетей. Обязательно добавляйте к блоку контактов ваши страницы в социальных сетях, так люди смогут рассказывать о сайте или делиться им с друзьями. Для публикации на Facebook существует отдельная вкладка «Бейджик», там вы задаете параметры: как будет выглядеть ссылка на сайт.

Бывает такое, что вы уже изменили картинку, например, а Facebook все еще выводит старую информацию.

1. Опубликуйте страницу еще раз.

2. Если не помогло, перейдите по ссылке: https://developers.facebook.com/tools/debug/og/object/

введите адрес сайта и нажмите Fetch New Scrape Information.

Адаптация сайта для мобильных

Сайты, созданные на Tilda адаптивны. Вы можете с любых устройств просматривать странички, и ничего не поползет в разные стороны, сайт сохранит свою структуру и презентабельный вид.

Однако вы можете сами добавить полезные кнопки звонка, которые будут перенаправлять пользователя сразу же на звонок или в мессенджеры.

Адаптивность сайта помогает выйти сайту на высокие позиции в поисковиках.

Разработчикам (API, DDOS)

Код всегда можно экспортировать, при экспорте вы получаете ссылку на скачивание архива, который содержит html-код и файлы в разрешении css, js и т.д. Любой знающий человек сможет с легкостью загрузить код на свой сервер и больше не зависеть от сервиса Tilda.

API (application programming interface) — программный интерфейс, который помогает настроить автоматическое скачивание кода и его обновление на вашем сайте. Доверьте это знающему человеку, либо не используйте вовсе, если нет острой необходимости.

Все сайты на Tilda защищены от DDOS-атак. Сайты российских пользователей хранятся на серверах России, остальные могут использовать швейцарский IP.

Увеличению скорости загрузки контента помогает CDN, а загруженные изображения оптимизируются с помощью Lazy Load.

Zero Block — конструктор с нуля

-13

Если вас не устраивают стандартные компоненты Tilda, и вы хотите создать что-то свое, используйте Zero Block или нулевой блок — профессиональный редактор, который содержит все необходимые инструменты для дизайнеров.

Чтобы добавить нулевой блок нужно нажать «Добавить нулевой блок на страницу» в библиотеке блоков в разделе «Другое». У него есть все функции обычного блока: можно перемещать, редактировать, менять местами и т.д.

Сеткой разделена основная рабочая область, в которую можно добавлять основные элементы: текст, кнопка, изображение и т.д. Изображение также переносится или добавляется через кнопку «Контент».

Элементы можно перемещать, менять размер. Есть функция выделения нескольких объектов и их трансформации, выравнивания и т.д. Также существуют горячие клавиши, элементы редактируются с помощью клавиатуры.

Шрифты текста подгружаются или выбираются из предложенных. К изображениям можно добавлять альтернативный текст.

Добавляйте фигуры и кнопки, настраивайте адаптацию сайта — в Zero Block сайты создаются по вашим пожеланиям.

Отдельным блоком хочу выделить анимацию в Zero Block: кроме эффекта появления, можно настроить длительность, дистанцию, задержку и триггеры. Сделать параллакс (чередование) при скролле и фиксацию элементов.

Тарифы Tilda

У вас есть несколько вариантов выбора тарифов:

  • создать сайт бесплатно по тарифу Free
  • купить тариф Personal: доступны все функции, кроме экспорта кода
  • купить тариф Business: возможно создавать более 5 сайтов и экспортировать код

Есть возможность первую неделю пользоваться бесплатно тарифом Personal.

Подробнее о тарифах

-14

Free

Позволяет создать 1 сайт с 50 страницами, предоставляет 50MB на сервере. И дает возможность создавать сайты с помощью блоков и шаблонов. Домен используется стандартный: yourname.tilda.ws. Но он тоже неплохо индексируется.

Personal

Предоставляет: 1 сайт, 500 страниц, 1GB места на сервере, доступ к полной коллекции блоков, подключение своего домена и т.д. Стоимость: 500 руб при оплате на год, 750 руб — ежемесячная оплата.

Business

Возможности: более 5 сайтов, 500 страниц для каждого, 1GB места на сервере и возможность экспорта исходного кода. Можно создать один сайт на этом тарифе за 200 руб или оплатить сразу на год за 1000 руб в месяц, 1250 руб — ежемесячная оплата.

Каждый, кто первый раз знакомится с сервисом, может обратиться в чат за поддержкой, что очень удобно.

Недостатки и достоинства конструктора Tilda

Tilda — отличная возможность создать лендинг, интернет-магазин, сайт компании, блог или сайт для своего бизнеса программирования.

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

Для тех, кто более продвинут в разработке сайта, есть раздел Zero Block, в котором все создается с нуля и без клишированности шаблонов.

У Tilda есть огромный плюс — сайты, созданные в конструкторе, интегрируются с большим количеством сервисов и систем аналитики, что позволяет продвигать их, как сайты за большие деньги от разработчиков.

Заранее продуманная адаптация сайта, интеграция с социальными сетями, возможность сделать интерфейс максимально клиентоориентированным — со всем этим может разобраться среднестатистический пользователь.

Пользуйтесь с удовольствием и профитом для вашего бизнеса!