Top.Mail.Ru

Как создать сайт на Tilda: пошаговое руководство


Как создать сайт на Tilda: пошаговое руководство

Как создать сайт на Tilda: пошаговое руководство

Создать собственный сайт – не проблема с платформой Tilda Publishing. Сервис позволяет быстро спроектировать и опубликовать веб-ресурс. Главное преимущество в бесплатной версии – не нужно покупать домен и обладать навыками программирования. Система имеет интуитивно понятный интерфейс, в котором разберется каждый. Конструктор сайтов подходит для тех, кому нужно создать:

●       интернет-магазин;
●       портфолио;
●       резюме;
●       авторский проект;
●       персональный сайт;
●       медиа проект;
●       лэндинг.

Tilda – универсальный инструмент, в котором можно быстро сориентироваться и сделать полноценный сайт. В сервисе доступны: собственный графический редактор, огромная библиотека шаблонов блоков разных форматов, встроенная CRM и другие полезные функции.

Достоинства и недостатки Tilda

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

  • Простоту настройки. «Тильда» содержит готовые блоки или шаблоны для разных сфер бизнеса. Это облегчает настройку, информация будет отображаться корректно. Отступы не разъедутся, текст и изображения будут расположены на экране как надо, независимо от того, с какого устройства или браузера вы просматриваете страницу.
  • Быстрый результат. Работа по созданию сайта на «Тильде» занимает минимум времени. На каждом этапе настроек система сама будет предлагать вам дальнейшие шаги с самыми оптимальными вариантами оформления для вашей ниши.
  • Экономическая выгода. На «Тильде» есть бесплатный тариф, в котором вы сможете сделать простой сайт объемом не более 50 страниц и весом не более 50 мб на сервере. Для него не нужно покупать домен. Система предлагает внушительную библиотеку изображений и иконок. CRM уже встроена в платформу и адаптируется под любые мобильные устройства. Бесплатный тариф – идеальный и быстрый вариант для создания сайта-визитки.
  • Неограниченные возможности в дизайне. Tilda предлагает множество готовых блоков и шаблонов, их можно видоизменять с помощью приложения Zero Block. В этой программе можно корректировать шрифты, цвет текста и фона, настраивать анимацию, менять местами расположение элементов и т.д. Благодаря этому вы сможете создать полностью уникальный сайт, не похожий на другие.
  • Гибкость платформы. Дизайн сайта всегда зависит от сферы деятельности компании, для которой он создан. Например, для госучреждений сайты делают в деловом стиле, без лишних декоративных элементов и почти с полным отсутствием анимации. Для таких порталов характерна строгая и лаконичная структура, максимально доступная для пользователей всех возрастов. Сайты для развлекательных центров, фитнес-клубов и других заведений подобного типа привлекают внимание своей интерактивностью и красочностью. Здесь может быть много видео-формата и креативных фишек перехода по страницам. Если речь идет об интернет-магазине, то оптимальным вариантом будет структурированный каталог с карточками товаров и услуг, описаниями и характеристиками. В «Тильде» можно сделать любой формат сайта под ваши задачи.
  • Аналитика и СЕО. На платформе внедрены все необходимые сервисы для СЕО продвижения. В специальном разделе можно добавить сайт в поисковые системы Google и «Яндекс». Здесь есть детальное руководство по оптимизации страниц, можно получить бесплатный SSL-сертификат. Есть блок с отчетами, где вы будете отслеживать статистику, анализировать ошибки и устранять недочеты. Для того чтобы ускорить индексацию сайта в системе есть встроенная карта сайта. В предустановленной статистике вы найдете информацию о: конверсии, рейтинге страниц, среднем времени присутствия пользователей на сайте, трафике, количестве заявок и целевых действиях и т.д. Для коммерческих компаний и магазинов сервис предлагает отдельную вкладку с аналитикой продаж.
  • К «Тильде» можно подключить «Яндекс.Метрику» и другие счетчики для расширения маркетингового функционала. Платформа дает все возможности для быстрого и удобного продвижения сайта в сети без сложных настроек.
  • Доступная стоимость. У «Тильды» сегодня одни из самых выгодных тарифов. Существуют другие аналогичные сервисы, которые предлагают тарифы по такой же или более низкой цене, но на этих платформах функционал гораздо меньше. За кажущейся дешевизной спрятаны опции за дополнительную плату, подключив которые в итоге вы заплатите дороже. Если сравнивать создание сайта на Tilda с традиционным способом с привлечением команды специалистов, то первый вариант однозначно дешевле и быстрее. Вам не придется нанимать программистов и тестировщиков, тратить баснословные деньги на обслуживание сайта после запуска. В платных тарифах «Тильды» есть возможность приобрести доменное имя и подключить надежный хостинг с хорошим уровнем безопасности.
  • Быстрый запуск. Если нужно оперативно создать сайт для бизнеса, «Тильда» будет как никогда кстати. Заказывая разработку сайта у специалистов, вы упустите несколько месяцев, в то время как на Tilda вы запустите свой сайт за несколько дней.
  • Надежность и безопасность. Tilda фильтрует и блокирует подозрительные запросы, защищает от DDoS-атак. Вероятность потери данных сведена к нулю, так как платформа ежедневно делает резервные копии всей вашей информации.

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

Тарифные планы Tilda

Пользователям представлено три тарифа:

  1. Free. Бесплатный тариф подходит для создания сайта-визитки, портфолио или одностраничника. В структуре ресурса может быть не более 50 вкладок. Доступна регистрация на поддомене, принадлежащем платформе. Свой домен в бесплатной версии подключить нельзя. Здесь можно пользоваться аналитикой, настроить покупку и оплату с сайта. Это хороший вариант для стартапа.
  2. Personal. Очень бюджетный вариант с хорошим набором функций. Цена составляет всего 500 рублей в месяц или 6000 рублей в год. За символическую плату вам открывается доступ к собственному доменному имени в зоне .ru или .com. На сайте можно создавать до 100 страниц, вам доступен 1 тб пространства на диске. В расширенный функционал входит прием заказов и платежей, подключение «Яндекс.Метрики» и других счетчиков. Этот тариф подходит для создания интернет-магазинов, корпоративных сайтов и сайтов услуг.
  3. Business. В этом тарифе включены все функции Personal, и дополнительно можно экспортировать код сайта на свой сервер. Можно создать до 5 сайтов в одном аккаунте. Эта функция особенно актуальна для владельцев бизнеса в разных сферах или предпринимателей, у которых зарегистрировано сразу несколько магазинов.

Создаем сайт на Tilda

Для создания сайта в конструкторе Tilda на первом этапе нужно продумать концепцию. Платформа состоит из блоков, объединенных по смыслу. Благодаря модульной системе можно быстро создать эффективный логически структурированный ресурс со всеми необходимыми разделами. Каждый блок спроектирован дизайнерами с учетом современных трендов. Модули решают задачи для каждой сферы бизнеса. В блоках уже настроены поля, ориентация текста, видеоконтента и картинок, чтобы это было максимально доступно пользователям. Далее рассмотрим все этапы создания сайта подробнее.

Идея

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

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

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

Проанализируйте составленные блоки. Если в каком-то разделе много информации, разделите ее на подпункты, чтобы клиентам было проще ориентироваться на сайте. После детальной проработки структуры, у вас должно получиться «дерево» сайта. Его можно начертить на бумаге или создать в программе XMind. От того насколько тщательно вы проработаете структуру и предусмотрите все ходы клиентов зависит эффективность бизнеса. Поэтому уделите больше внимания на этом этапе.

Прототип сайта

Прототип в конструкторе Tilda – это макет будущего сайта, который отражает полную структуру со всеми страницами, кнопками, вкладками и их содержанием. В прототипе прописывается логика каждой страницы. Этот этап нужен для того, чтобы понять, какие материалы размещать на страницах. Прототип удобно составлять в сервисе Figma.

Подготовка материалов

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

Регистрация в Tilda

Когда все материалы будут подготовлены можно регистрироваться на платформе Tilda. Для этого вам понадобится в открывшемся окне указать адрес своей электронной почты и придумать пароль. После авторизации вы попадете на главный экран сервиса. Не забудьте воспользоваться привилегией для новых пользователей – зайдите в раздел «Тарифы и оплата» и активируйте бесплатный пробный 2-х недельный тариф Personal.

Настройка сайта на Тильде

Чтобы создать сайт на «Тильде» кликните по разделу «Мои сайты», нажмите кнопку «Создать новый сайт». В высветившемся окне напишите название проекта. Эта информация будет доступна только вам и не видна пользователям. Далее нажмите кнопку «Настройка сайта», здесь вы можете выбрать субдомен, добавить название и описание сайта. На первых порах этого достаточно и можно переходить к созданию страниц.
В страницах каждый блок можно настраивать по-своему в меню слева. Там можно менять визуальные форматы: цвет фона, шрифты, расположение контента на странице, ширину блоков, адаптивность под разные экраны и т.д. Здесь можно прописать заголовки H1, H2 и H3. Более конкретно об оформлении страниц поговорим в отдельной главе. А пока разберемся, что означает каждая вкладка на платформе Tilda.

Главное

В этом разделе указывают описание сайта и субдомен. Если вы подключили платный тариф, вам будет доступна функция подключения собственного домена.

Шрифты и цвета

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

Аналитика

Конструктор Tilda сам даст подсказки, как настроить аналитику и подключить метрики для анализа посещаемости сайта. В самой платформе по умолчанию уже имеются базовые функции аналитики. На платных тарифах можно дополнительно подключить: «Яндекс.Метрику», Google Analytic, VK Pixel, Mail.ru, Google Tag Manager, Facebook* Pixel.

SEO

В этом разделе система предложит вам настроить главное зеркало сайта, «Яндекс.Вебмастер», протокол безопасности и Google Search Console. Эти сервисы помогут оптимизировать выдачу в поисковых системах, проверить отображение сайта в разных браузерах и на разных мобильных устройствах, отслеживать индексирование сайта в реальном времени.
На платном тарифе можно добавить фавикон вашего сайта – мини-картинкау или символ, который будет располагаться в выдаче слева от названия компании. Это придаст ресурсу индивидуальности. Загрузка фавикона доступна в формате ico.
На период разработки страниц, в разделе SEO можно отключить сайт от индексации в поисковых системах. Поставьте галочку на «Запретить поисковикам индексировать этот сайт».

Формы

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

Настройка сбора заявок

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

Создание и наполнение страниц

Для создания страниц нужно зайти во вкладку «Редактировать сайт». Платформа предлагает более 250 шаблонов для разных ниш бизнеса. Выберите опцию «Создать новую страницу», вам откроется перечень шаблонов с готовым дизайном. Страница имеет модульную систему, все элементы можно менять местами, удалять или добавлять.
Откройте «Библиотеку блоков», в выпадающем столбце вам будет представлен перечень доступных элементов, которые можно установить на странице: «обложка», «о проекте», «заголовок», «текстовый блок», «изображение», «галерея», «ключевая фраза», «прямая речь», «кнопка», «форма», «преимущества», «колонки», «магазин», меню» и т.д. Элементов очень много, разработчики учли абсолютно все потребности бизнеса в любом направлении.
Выбрав конкретный блок для редактирования, кликните на него, и вам откроется подменю с двумя кнопками: настройки и контент. В настройках можно редактировать формат модуля и его отображение. Здесь можно корректировать фоновый цвет для всей страницы, фон для текста, габариты блока, параметры отступов сверху и снизу, ориентацию на странице, кнопки, анимацию, типографику. Настройки для каждого блока будут разными в зависимости от выбранного шаблона назначения сайта.
Наполнить блок контентом можно двумя способами: нажать на кнопку «Контент» или напрямую кликнуть 2 раза в нужный раздел, чтобы открыть редактор. Изменять можно тексты и картинки.
Обратите внимание, что выбор готового шаблона не означает, что вы ограничены в дизайне и структуре страниц. Шаблоны даны для упрощения работы, на этой базе вы можете создавать страницы по своему усмотрению. Для добавления нового блока можно нажать кнопку «+» на границе любого модуля.
Посмотреть, как будут выглядеть блоки на сайте можно в карте блоков. Для того чтобы воспользоваться этой функцией нажмите вкладку «Еще» на верхней панели инструментов и перейдите во всплывающем списке в «Блоки на странице».
Определившись с количеством и форматом блоков, переходите к созданию заголовка. Настройки находятся в верхнем правом углу меню. Заголовок должен точно отражать содержание страницы, он будет виден пользователям. Используйте в нем ключевые слова. Далее заполните описание страницы, эта информация также будет высвечиваться пользователям. В нижнем поле блока укажите URL страницы.
Во вкладке «Бейджик» добавьте изображение, которое будет отображаться в превью страницы. Следующие разделы «Соцсети» и «СЕО» существуют для того, чтобы вы смогли создать сниппет для соцсетей и поисковых систем. Если эти блоки не редактировать, в них по умолчанию будет высвечиваться информация с заголовком и описанием страницы.
Кнопка «Экспорт» создана для переноса данных с других страниц. Если нужно полностью продублировать страницу нажмите кнопку «Действия». Эти форматы редактирования пригодятся владельцам интернет-магазинов для создания каталога товаров.

Есть еще одна полезная вкладка «Дополнительно», здесь можно снимать страницу с публикации, просматривать статистику показов, указать html-код, задать пароль на страницу и многое другое.

После настройки блоков нажмите «Сохранить изменения» и «Опубликовать», чтобы сайт стал доступен пользователям в сети.

Как сделать меню сайта на Tilda: шапка и подвал

Для любого многостраничного сайта в первую очередь задаются модули «Шапка» и «Подвал». Эти элементы будут дублироваться на каждой странице. Создайте новую страницу, выберите блоки, из которых она будет состоять. Опубликовать страницы нужно во вкладке «Шапка и подвал».
В разделе «Контент» можно редактировать отображение меню, добавив нужные пункты, установить логотип и контактные данные.

Свой дизайн: Zero Block

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

В столбце в настройках выберите раздел Zero Block или «Нулевой блок», нажмите «редактировать блок». Слева система предложит меню элементов, которые можно добавить: текст, изображение, фигуру, кнопку, видео, форму, подсказку, галерею, HTML код. На верхней панели инструментов по центру располагается функция просмотра, как контент будет отображаться на разных устройствах. Чтобы сайт хорошо выглядел и был функциональным на ПК и телефоне, провалитесь в каждую вкладку с изображением диапазона экрана. В настройках подкорректируйте местоположение блоков. В каждом диапазоне сохраните настройки.
Область содержания контента на странице называется контейнером. Их бывает два:

●       Grid Container – ориентация контента строится по сетке. Контент будет выстраиваться, по столбцам, независимо от формата экрана.
●       Window Container – контент меняет формат в зависимости от габаритов экрана, с которого пользователь смотрит информацию. Элементы могут растягиваться или сжиматься.

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

Текст

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

В этом разделе «Тильда» позволяет настраивать ссылки на элементы в различных форматах: в текущем окне и в отдельном окне. Ссылку можно скрыть от поисковых роботов. Функция DIV позволяет создавать форматы заголовков для СЕО. А при нажатии Pointer events, настраивается курсор мыши, который будет отображаться на сайте.

Изображение

Загрузка картинки доступна двумя способами: по ссылке и с компьютера. Воспользовавшись свойством Border, появляются настройки изображения: тип, стиль и цвет обводки. Опция Shadow дает возможность настроить цвет, насыщенность и направление тени. Для того чтобы алгоритмы поисковых систем правильно считывали графическую информацию, появляется функция Alt для обозначения картинки в СЕО. С помощью опции Zoomable изображение можно изменить по габаритам: увеличить или уменьшить о клику. Функция Lazyload предотвращает загрузку изображений, формат которых выходит за область экрана, благодаря этому скорость сайта не замедлится.

Встроенный редактор изображений на «Тильде» отличается обширным функционалом. Здесь можно отражать, поворачивать, обрезать картинки, добавлять различные фильтры, добавлять текст, менять пропорции и ориентацию изображений.

Формы

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

Форма связи с клиентом представляет собой раздел, где клиенты оставляют свои контактные данные: имя, телефон, электронную почту. Информация автоматически попадает в архив сбора данных на сайте. Настроить формы можно во вкладках: «Форма», «Обложка», «Контакты», «Подвал». Для настройки опросов с расширенным перечнем вопросов нужно зайти в категорию «Анкеты». Редактор позволяет выбирать количество полей для ввода. Есть возможность настраивать наименование поля, подзаголовок, подсказку значения, ввод переменных и обязательность заполнения.

Кнопка

Кнопки в разделах страниц нужны, чтобы пользователи переходили к нужной информации и делали покупки. В редакторе доступен выбор параметров и форм кнопок, цвета заливки и окантовки. В кнопке нужно написать ее название, например «Купить», «Оформить заказ», «Заполнить заявку» и т.д.

Видео

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

Tooltip: Подсказка

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

HTML-код

HTML-код отвечает за расположение элементов на странице. Добавить его можно несколькими способами. Зайдите в раздел «Добавить блок», выберите раздел «Другие блоки», нажмите на блок "HTML-код" и вставьте ваш код в открывшийся редактор.

Другой способ добавления кода – через настройки сайта. В этом случае код будет применен ко всем страницам. В настройках выберите подраздел «Еще» на верхней панели инструментов и перейдите в "HTML-код для вставки", здесь вы сможете добавить код для сайта.

CRM форма

В конструкторе «Тильда» есть встроенная CRM для бизнеса. Систему управления заявками можно настроить горизонтально или вертикально. Подключив листы сайта к CRM, система автоматически будет загружать сюда данные о пользователях: ФИО, электронную почту, телефон, геолокацию, UTM-метки и другие полезные данные для статистики. Визуальное оформление CRM можно настраивать под свои предпочтения. Здесь доступно редактировать поля, заголовки, подсказки, анимацию кнопок.

Галерея

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

  • Слайдер – изображения сменяют друг друга по настроенному таймеру, либо по клику по стрелкам или точкам.
  • Комбинация – на экране высветится сразу несколько картинок (расположение, ориентацию и габариты изображений можно редактировать).

У галереи есть разные свойства:

  • Прокрутка изображения. Опция Stretch подстраивает изображение под формат экрана. Опция Contain вставляет картинку с заданными полями. Но если высоты или длины рисунка не хватает, на экране останутся засветы. С помощью опции Cover картинка полностью закрывает экран, но может отображаться только определенная часть изображения. Отцентровать картинку можно с помощью функции Position. Скорость смены картинок настраивается в опции Slide Speed.
  • Оформление стрелок. В этом блоке можно редактировать изображение стрелок, их размер, направление, расположение, цвет и прозрачность, контур и обводку.

Настройка анимации

В «Тильде» есть два типа анимации: базовая и пошаговая. Базовая версия подходит для любых блоков. В ней можно настраивать момент появления элемента и его местоположение. Команда Duration отвечает за длительность отображения элемента, а Delay за задержку появления анимации.
Пошаговую анимацию можно делать только в Zero Block. В настройках нужно выбрать тип активации анимации: при появлении какого-то элемента или блока на странице, во время скроллинга, при наведении курсора или клике.

Интеграции со сторонними сервисами

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

Заключение

«Тильда» имеет неограниченные возможности по созданию сайтов любого формата. На бесплатном тарифе можно сделать качественный сайт-визитку, лендинг или портфолио. За символическую плату, вы получаете огромное количество функций для разработки полноценного креативного сайта. Для отслеживания статистики и продвижения к платформе можно подключать различные сервисы аналитики, метрики и счетчики.
Оставь заявку сейчас
и получите предложение
по увеличению продаж
Вы сразу получите консультацию эксперта по увеличению прибыльности вашего бизнеса через каналы интернет-маркетинга
Оставь заявку сейчас
и получите предложение
по увеличению продаж
Вы сразу получите консультацию эксперта по увеличению прибыльности вашего бизнеса через каналы интернет-маркетинга