Сколько зарабатывают на сайтах тильда

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

Вымышленный специалист будет работать с шаблоном, так как он не имеет представлений о веб-разработке. Одну из страниц сайта он создаст с чистого листа.

Что такое семантическое ядро и как его составлять

Как настроить сайт на Tilda: базовые опции

После регистрации на платформе перейдите в раздел тарифы и подключите тариф Personal. Новым пользователям доступен бесплатный тестовый период.

Нажмите кнопку «Активировать»

Перейдите в раздел «Мои сайты», создайте новый ресурс и укажите его название.

Нажмите кнопку «Создать новый сайт»

В разделе «Настройки сайта» укажите описание и выберите субдомен.

Заполняем название, описание и выбираем домен

Перейдите в разделы «Аналитика» и «SEO» и подключите сайт к системам «Яндекс.Метрика» и Google Analytics. В этом же разделе можно добавить на сайт контейнер Google Tag Manager. Если вы впервые делаете сайт, подключайте «Метрику» и Analytics напрямую.

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

Нам нужен номер счетчика

Вставьте номер в поле «Яндекс.Метрика» в разделе настроек сайта «Аналитика и SEO» в панели «Тильды».

Подключаем счетчик «Яндекс.Метрики»

Аналогичным образом подключите счетчик Google Analytics. Для этого нажмите кнопку «Подключить» в строке Google Analytics. Примите запрос от приложения tilde.cc на доступ к аккаунту Google Analytics. Выберите счетчик и сохраните изменения. Если на сайте уже есть страницы, опубликуйте их повторно.

Подключаем счетчик GA к Tilda

Перейдите в раздел «SEO», чтобы подключить сайт к службам Search Console и «Яндекс.Вебмастер».

Нажмите кнопку «Подключить» рядом с названием соответствующего сервиса, примите запрос от приложения tilda.cc на доступ к аккаунту. Нажмите кнопку «Зарегистрировать сайт».

После автоматической регистрации на панели появится статус «Домен подтвержден». Система предложит добавить в Search Console карту сайта. Воспользуйтесь этой возможностью.

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

Таким же способом зарегистрируйте ресурс в «Яндекс.Вебмастер».

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

Как подключить платный домен к сайту на Tilda

После регистрации домена в личном кабинете на сайте регистратора войдите в панель управления услугами. В DNS-записи укажите IP сервера Tilda 178.248.234.146.

Если вы зарегистрировали домен в Reg.ru, в личном кабинете перейдите в раздел «Управление доменом – DNS-серверы». А вот так можно отредактировать DNS у регистратора / хостинга Beget:

Нажмите кнопку «Редактировать DNS»

Укажите DNS-серверы ns1.reg.ru и ns2.reg.ru. Это нужно, чтобы использовать зарегистрированный в Reg.ru домен на стороннем хостинге.

Вернитесь в раздел «Управление доменом» и выберите подраздел «Управление зоной».

Нам нужен раздел «Управление доменами»

Удалите существующие записи класса A и добавьте вместо них новую запись.

Редактируем ресурсные записи домена

Добавьте IP сервера «Тильды» и сохраните изменения.

В разделе «Добавить запись CNAME» укажите поддомен www. Это нужно, чтобы сайт был доступен по адресам вида vashsite.ru и www.vashsite.ru.

В поле Canonical name добавьте значение «tilda.ws.», а в поле Subdomain – значение «www».

Редактируем CNAME домена/p>

В панели управления Tilda укажите домен в соответствующем разделе настроек сайта. Сохраните изменения.

Добавляем настроенный домен

Изменения вступают в силу в течение нескольких часов. После настройки домена приступайте к созданию страниц сайта.

Как создавать страницы сайта на Tilda

Чтобы создать страницу, нажмите соответствующую кнопку в панели управления сайтом.

Нажмите кнопку «Создать новую страницу»

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

Шаблонные страницы Tilda состоят из модулей, которые можно настраивать, менять местами, удалять и добавлять.

Чтобы вызвать меню редактирования, достаточно навести курсор на модуль.

Обратите внимание на кнопки вверху рабочего пространства

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

Выбираем вариант обложки

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

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

Настраиваем внешнее представление страницы

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

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

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

Редактируем текст прямо в окне предпросмотра

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

Дублируйте, удаляйте, прячьте любые элементы

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

Работать с модулями очень удобно

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

Открываем карту блоков

После редактирования модулей и контента уделите внимание настройкам страницы. Соответствующий раздел доступен в вертикальном меню в верхней части экрана или в выпадающем меню «Еще».

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

Заполняем все обязательные поля

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

В разделе Facebook и SEO отредактируйте сниппет страницы в социальных сетях и поисковой выдаче. По умолчанию данные для сниппета подтягиваются из заголовка и описания страницы.

Первая картинка (по умолчанию) и есть бейдж

В настройках Facebook и SEO есть дополнительные возможности. В разделе «Отображение в поисковой выдаче» нажмите кнопку «Задать специальные meta-данные». Здесь можно при необходимости изменить title и description. Не тратьте время на указание ключевых слов, так как поисковые системы не учитывают метатег keywords.

Отредактируйте каноническую ссылку на страницу: сделайте URL удобным для пользователей. Например, вместо автоматически сгенерированной ссылки на страницы контактов или портфолио vashsite.tilda.ws / page1554510.html укажите ЧПУ vashsite.tilda.ws / contact или trubnikoff.tilda.ws / portfolio соответственно.

При необходимости запретите поисковым системам индексировать страницу или предложите поисковикам не переходить по ссылкам на странице.

Настраиваем как будет выглядеть сниппет

В настройках отображения в «Фейсбуке» можно указать ID приложения и аккаунт в Twitter.

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

Обратите внимание на вкладку «Дополнительно» в меню настроек страницы. Здесь пользователям доступна очень важная функция: вставка произвольного HTML-кода в хедер страницы. Ее можно использовать, чтобы добавить в конкретный раздел сайта коды отслеживания или микроразметки Schema.org.

Благодаря добавлению своего кода, вы сможете кастомизировать страницу

Чтобы добавить на страницу микроразметку Schema.org, реализованную через JSON-LD, воспользуйтесь бесплатным генератором кода. Создайте скрипт. В дополнительных настройках страницы нажмите кнопку «Редактировать код». На открывшейся странице добавьте и сохраните микроразметку.

Размечаем элементы страницы семантическими тегами

После публикации страницы проверьте корректность микроразметки с помощью инструмента Google.

Валидация пройдена успешно

Подробнее о внедрении структурированных данных через JSON-LD читайте в нашей статье о новой реальности в поиске.

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

После публикации страница станет доступна всем пользователям. Теперь создайте остальные страницы: «Услуги», «Портфолио», «О нас», «Контакты», «Блог».

Как работать с внутренними страницами сайта

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

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

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

Пример обложки для страницы с портфолио

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

В нашем случае мы решили отредактировать вводный текстовый блок и добавить в него презентационное видео

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

Нас интересуют настройки списка страниц

С помощью выпадающего меню выберите подходящий шаблон модуля. Отредактируйте контент. Чтобы добавить ссылки на работы, создайте соответствующие страницы с описанием. В меню «Контент» отметьте нужные варианты и сохраните изменения.

После блока портфолио добавьте на страницу конверсионный модуль. Подходящий вариант найдется в разделе библиотеки «Форма и кнопка».

Выбираем подходящий формат виджета

Отредактируйте контент и укажите ссылку для кнопки. Это может быть страница с контактной информацией или подходящий блок с существующих страниц.

Редактируем параметры блока

Вы сделали страницу портфолио со ссылками на реализованные проекты и конверсионной кнопкой.

Пример созданной страницы

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

Как сделать страницу на Tilda с чистого листа

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

Нажмите кнопку выбрать «Выбрать»

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

Настраиваем вид страницы

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

Созданная с чистого листа страница блога

Вы создали основные страницы сайта. Уделите внимание навигационному меню.

Как сделать меню сайта на «Тильде»

Чтобы сделать меню, создайте новую страницу сайта. Используйте чистый лист, а не шаблон. В библиотеке блоков выберите раздел меню. Здесь найдите подходящий модуль.

Настраиваем новое меню

Добавьте пункты меню и ссылки на страницы в настройках контента блока. Название пункта меню укажите в поле слева. С помощью кнопки «Выбрать страницу» добавьте ссылку на нужный раздел сайта.

Кастомизируем внешний вид меню

В разделе настроек контента «Логотип» добавьте название сайта. Если у вас есть логотип, загрузите его.

Этот шаг необязательный

Добавьте ссылки на профили в соцсетях, отредактируйте кнопку Contacts. Укажите настройки страницы и опубликуйте ее.

Так выглядит модуль на готовой странице

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

Нажмите кнопку «Настройки сайта»

Выберите раздел «Шапка и подвал» и с помощью выпадающего меню укажите нужную страницу.

Назначаем меню в подвал

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

Обратите внимание на верхнее меню

Сайт-визитка специалиста с базовыми функциями готов. При необходимости воспользуйтесь дополнительными возможностями «Тильды».

Что еще может Tilda

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

Интеграция с WordPress

Реализацию идеи можно оценить на примере «Лайфхакера». Сайт проекта работает на WordPress, а с помощью «Тильды» редакция сделала серию лонгридов.

Чтобы интегрировать Tilda с WordPress, необходимо оплатить бизнес-тариф и установить любой подходящий плагин.

CMS WordPress имеет достаточно платных и бесплатных инструментов для создания лендингов и оформления лонгридов. Учитывайте это при оценке целесообразности оплаты бизнес-тарифа.

Подготовка писем для рассылки

Конструктор писем можно найти в панели управления Tilda. Инструмент позволяет делать письма из готовых шаблонов и отправлять их подписчикам через сервисы SendGrid или MailChimp. Также можно экспортировать код на другие платформы email-маркетинга.

Созданные письма можно хранить на субдомене вида nashi-pisma.tilda.ws. Шаблоны писем редактируются и настраиваются, как страницы сайтов на Tilda.

Этот шаблон можно кастомизировать

Создание пользовательских блоков

Эта функция подойдет специалистам, которые имеют как минимум базовые представления о веб-дизайне. С помощью редактора Zero Block они могут создавать модули страниц самостоятельно.

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

Кнопка доступна с любой страницы

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

Сайт на «Тильде» можно интегрировать с внешними службами:

• CRM;
• системами приема платежей;
• формами для получения контактов.

Для интеграции в настройках сайта выберите меню «Формы» и «Платежные системы».

У Tilda широкие возможности для интеграций со сторонними сервисами

Создание промокодов

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

Подраздел «Промокоды» находится в разделе «Платежные системы»

Электронная торговля

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

В разделе «Бизнес» есть адаптированные для электронной торговли шаблоны страниц.

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

В разделе «Другое» есть модули для интеграции сайта на «Тильде» с платформой для создания ecommerce-сайтов «Эквид».

В два клика мы можем сделать полноценный интернет-магазин на Tilda

Пользовательская страница 404

Пользователи «Тильды» могут самостоятельно назначить и отредактировать страницу 404. Для этого создайте и опубликуйте страницу. В настройках сайта в разделе «Еще» с помощью выпадающего меню выберите нужный вариант.

Сперва 404-я создается, затем назначается в этом разделе («Еще», «Страница: 404 Ошибка»)

Tilda CRM

Осенью 2018 года Tilda предложила пользователям полезный инструмент – бесплатную CRM. Чтобы работать с системой, выберите соответствующий раздел в вертикальном меню и нажмите кнопку «Создать новый лист».

Откройте раздел CRM

В настройках в разделе «Сайт» подключите к CRM сайт.

Будем настраивать подключение CRM-системы к сайту

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

После подключения все заявки с сайта будут приходить в CRM. Если заявка получена по телефону, ее можно добавить в систему вручную с помощью кнопки «Добавить заявку».

Есть одна заявка

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

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

Изучаем поступившие заявки

Tilda или сайт на движке?

Tilda – удобный и функциональный инструмент. давайте сравним его с WordPress, самым популярным движком.

Что вы потеряете, если выберете Tilda вместо WordPress

Деньги

За доступ к полной функциональности Tilda придется платить как минимум 6 000 рублей в год. Есть тариф Free, с которым можно создать на сайте до 50 страниц. Пользователи плана Free могут добавлять на страницы только базовые модули.

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

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

Безопасное соединение

По умолчанию сайты на поддомене «Тильды» доступны по https. После оплаты тарифа Personal или Business можно купить SSL-сертификат и настроить доступ к сайту по безопасному протоколу через сервис CloudFlare.

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

Удобство внедрения микроразметки

На страницы сайтов на Tilda можно добавлять структурированные данные. Делать это придется вручную: создавать разметку и публиковать ее на каждой странице отдельно.

На страницах сайта на WordPress можно задать базовые типы разметки, например, Article или BlogPosting, для всех страниц публикаций. Это можно делать с помощью SEO-комбайнов, например, All in One SEO Pack. Также есть отдельные плагины, например, WPSSO Schema JSON-LD MarkUp.

Оптимизация скорости загрузки страниц

Пользователи Tilda практически не могут влиять на скорость загрузки страниц. Можно только удалять со страниц отдельные модули и сжимать изображения. В остальном придется довериться разработчикам «Тильды».

Приемлемо, но лучше улучшить

Пользователи WordPress могут самостоятельно оптимизировать скорость загрузки страниц.

Ускоренные мобильные страницы

Пользователи Tilda пока не могут внедрять AMP. У пользователей WordPress такая возможность есть. Google охотно направляет пользователей на ускоренные страницы.

Доступ к файлам сайта

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

Редактирование карты сайта и файла robots.txt

Tilda создает sitemap.xml и robots.txt автоматически, и пользователи не могут их редактировать. На WordPress карту сайта и файл robots.txt можно создать самостоятельно с помощью плагинов, например, All in One SEO Pack. Пользователь может редактировать карту и директивы для поисковых роботов.

Что вы приобретете, если выберете Tilda вместо WordPress

Деньги

Если вам нужен одностраничный сайт или онлайн-визитка с портфолио и контактными данными, дешевле работать с «Тильдой». Сайт-портфолио на Tilda можно сделать бесплатно, но он будет доступен на поддомене.

Простота редактирования шаблона

С «Тильдой» любой пользователь без специальных знаний может почувстWowать себя дизайнером. Для изменения шаблонов на WordPress нужны специальные знания.

Визуальная привлекательность страниц

Этот пункт – продолжение предыдущего. С помощью «Тильды» можно красиво оформить страницу сайта. Это не требует специальных знаний и много времени.

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

Простота

На Tilda проще создать сайт и управлять им. За простоту придется расплачиваться деньгами и ограничениями в функциональности ресурса.

Что в итоге

Конструктор Tilda – удобный и эффективный инструмент для создания сайтов. Он не имеет всех функций полноценного движка. Но функциональность CMS нужна далеко не всем пользователям. Едва ли не главное достоинство «Тильды» – возможность быстро сделать визуально привлекательный сайт. Ограниченность конструктора может быть плюсом для пользователей без опыта.

Платформа защитит их от серьезных ошибок, которые могут снизить эффективность ресурса.

Источник: texterra.ru

Как создать сайт на конструкторе сайтов Тильда

«Тильда»— конструктор сайтов. Его главные достоинства — стильный визуальный редактор и возможность без манипуляций с кодом собрать полноценный проект в широком диапазоне популярных форматов и тематик. Тонкостям работы с сервисом посвящена наша статья.

Конструктор Tilda: для чего нужен и кому подойдет

Конструктор сайтов Tilda часто называют визуальным редактором лендингов (посадочных страниц). Это точнее передает суть и ключевые особенности платформы:

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

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

Все — от макета до настройки CRM (системы управления и контроля над коммуникацией с клиентами) можно сделать самостоятельно. Если при этом у вас не хватает знаний и подготовки, не беда. Каждый этап работы сопровождает подробная и понятная инструкция, а пробелы в художественном образовании легко заполняют визуально совершенные шаблоны и модули.

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

• Для больших и сложных проектов — сайтов-многостраничников, маркетплейсов и сервисов «Тильда» не подойдет.

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

Стоимость Tilda и стоит ли платить

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

Free

Бесплатная версия активируется вместе с регистрацией. Можно собрать один простенький лендинг или сайт-визитку в границах 50 страниц. Автоматом идут:

• инструмент индивидуального дизайна страниц — Zero Block;
• подключение субдомена tilda.ws;
• адаптация под мобильные устройства (iPhone, iPad, Android и Windows Phone);
• система управления заявками — Tilda CRM;
• все уровни анимации;
• доступ к внутреннему каталогу изображений, иконок, блоков.

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

Personal

Базовый пакет, который выбирает 90% аудитории. Цена — 120$ при оплате за год, и 15$, если платить помесячно. Доступный объем увеличен до 500 страниц, с выделением 1 Гб на сервере, против 50 Мб в бесплатной версии. К основным опциям добавлены:

• неограниченный доступ к базе модулей;
• подключение внешнего домена;
• загрузка собственных шрифтов;
• защита от DDoS атак;
• командная работа над проектом.

Полный перечень функций можно найти на официальном сайте конструктора «Тильда». Если вы фрилансер, блогер или владелец компактной нишевой торговой точки, выбирайте Personal — не пожалеете.

Business

Тариф для серьезных парней. Позволяет создавать и курировать до 5 проектов. Обойдется в 25$ при ежемесячных взносах и 240$, если заплатить авансом за год.

От базового пакета отличается двумя опциями:

• разрешением на экспорт исходного кода и API, что позволяет интегрировать проект с любой внешней системой, к примеру, Битрикс 1С или WordPress;
• возможностью для ЮЛ и ИП выставлять счета для безналичной оплаты.

Считается, что цена конструктора сайтов «Тильда» в среднем выше, чем у конкурентов. Возможно. Просто попробуйте. Платформа дает 14 дней бесплатного теста в рамках тарифа Personal. Достаточный срок, чтобы сделать выводы.

Начало работы: планирование и структура

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

Идея

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

• Зачем вам проект?
• Зачем он целевой аудитории (ЦА)?
• Как она (аудитория), будет взаимодейстWowать с ресурсом?

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

Структура

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

Составьте список разделов. Стандартные страницы проектов в конструкторе сайтов Tiida:

• продукт/услуга;
• стоимость;
• кейсы;
• о компании/владельце;
• контакты;
• блог.

Прикиньте, сколько места потребует раскрытие темы раздела. Если все пункты списка помещаются на одну страницу — планируйте landing-page или визитку, в ином случае понадобится многостраничник и, возможно, поиск полноценной CMS.

Прототип

Так в веб-разработке называется визуальная схема расположения элементов — графический план. Эскиз можно набросать на бумаге, это проще и быстрее, чем создавать макет при помощи специального ПО (Figma или Axure RP), но менее ответственно.

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

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

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

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

Как настроить сайт на Tilda: базовые опции

После несложной регистрации, и активации двухнедельного пробного периода пора переходить к основным настройкам.

Название и описание проекта

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

Если вас не смущает субдомен типа tilda.ws, который конструктор сайтов предлагает бесплатно, его тут же можно и зарегистрировать. Подключение внешнего, платного домена рассмотрим ниже.

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

Раздел позволяет выбрать и детально настроить шрифт для текстов и заголовков. Источники выбора:

• встроенная библиотека шрифтов;
• сервисы Google Fonts и Adobe Fonts;
• личная/локальная библиотека (формат файлов для загрузки — WOFF или WOFF2).

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

В отличие от многих аналогичных сервисов конструктор сайтов «Тильда». доступен на русском языке. У вас не будет проблем с корректным отображением кириллических знаков.

Аналитика

Здесь происходит настройка метрик эффективности всего сайта и отдельных блоков. Пользователю доступны:

• внутренняя статистика — сессии, заявки, устройства просмотра;
• подключение счетчиков Google Analytics и Яндекс.Метрика;
• установка пикселей конверсии от Facebook и VK;
• интеграция кода Mail.ru Counter ID.

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

SEO

Панель оптимизации для поисковых систем. Если у вас нет опыта, воспользуйтесь предложенными рекомендациями, индексация пройдет быстрее и проще.

• настройка HTTPS с получением SSL-сертификата от Let’s Encrypt;
• SEO-анализ страниц сайта и точные рекомендации по устранению ошибок;
• добавление сайта в Google Search Console и Яндекс.Вебмастер;
• настройка редиректа с кодом 301;
• редиректы для WWW, HTTPS;
• редактирование Favicon.

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

Формы сбора заявок

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

Кроме email, владельцу сайта доступна интеграция с Google Sheets, Telegram и Trello. Очень широко представлены системы управления клиентами (CRM) — девять сервисов, включая Bitrix24, MegaPlan, AmoCRM и службы рассылок — семь платформ, среди которых GetResponse, Mailchimp и SendPulse.

К сожалению, тариф Free не позволяет использовать всю мощь коммуникаторов. Для автоматизации сайта придется перейти на платную версию конструктора сайтов tilda.ru.

Как подключить платный домен к сайту на Tilda

Если бесплатный субдомен вида tilda.ws, который закрепляется автоматически, вас не устраивает, можно подключить собственное доменное имя, купленное у внешнего регистратора: REG.RU, Beget.ru, Timeweb.com, HOSTIQ.ua и т. д.

• При оформлении домена система потребует паспортные данные или учредительные документы компании. Не рекомендуем делегировать процедуру регистрации независимым специалистам, к примеру, разработчикам, так как в будущем, это может привести к проблемам с доступом и доказательствами права собственности.

Стандартная схема подключения платного доменного имени:

• в личном кабинете выбираем целевой ресурс и переходим в раздел «Настройки сайта»;
• открываем страницу «Главное», внизу формы находим и активируем ссылку (выделена цветом) «Подключить свой домен»;
• в открывшееся поле вводим нужный домен и сохраняем изменения;
• отправляемся на сайт регистратора доменных имен и проводим настройку подключения согласно регламенту (у каждого регистратора он свой);
• возвращаемся на «Тильду» и периодически проверяем активацию.

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

Как создавать страницы сайта на Tilda

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

Работа с шаблонами

Макеты в каталоге разбиты на категории: «Бизнес», «Событие», «Блог», «Магазин». Если у вас нет времени или желания заниматься уникальным дизайном, выберите соответствующий теме шаблон и отредактируйте его.

• Каждая шаблонная страница в конструкторе — это набор настраиваемых модулей, которые можно передвигать, настраивать, а при необходимости удалять.

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

• В панели управления шаблоном пользователь может задавать теги заголовкам, согласно иерархии, начиная с H1 и далее по порядку: H2, H3, …

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

Для удобства оценки общего внешнего вида и работоспособности страницы предусмотрена карта блоков, спрятанная в разделе «Еще», в правом верхнем углу панели управления проектом.

Как работать с внутренними страницами сайта

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

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

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

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

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

Как сделать страницу на Tilda с чистого листа

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

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

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

Добавляем и редактируем блоки

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

Как сделать меню сайта

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

• добавляем нужные либо убираем лишние пункты, редактируем названия страниц;
• в настройках контента для блока делаем перелинковку пунктов с целевыми разделами;
• загружаем логотип или добавляем название сайта, используя меню настроек блока;
• и в шапке-меню, и в подвале обязательно закрепите иконки/ссылки на профили в социальных сетях.

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

Редактируем фон меню

Управление фоном меню находится в настройках блока. Пользователь может выбрать:

• цвет фона;
• процент непрозрачности поля для фиксированного отображения и при скроллинге страниц;
• параметры тени меню и элементов.

Для упрощения редактирования можно на время установить шахматную расцветку фона и отключить ее после настроек блока.

Режим предпросмотра

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

ЗадейстWowать ее несложно, достаточно войти в режим редактирования, выбрать в расположенной над первым экраном панели инструментов пункт «Предпросмотр», и переключаясь между иконками, символизирующими типы устройств, проверить качество адаптивной верстки страниц.

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

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

• Модуль одинаково доступен как для пустой страницы каталога, так и для любого шаблона из библиотеки.

Опции редактирования Zero Block

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

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

Есть два типа контейнеров:

• Grid — область из 12 колонок, вертикальные границы которой ограничены стандартной сеткой (1200 px), а высота задается произвольно. Любой новый элемент, добавленный сюда, будет отображаться строго внутри сетки.
• Window — пространство, условно повторяющее размеры экрана браузера. Верстка, привязанная к рамкам этого контейнера, меняет контуры элементов вслед за сменой разрешения экрана и потому называется «резиновой».

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

Теперь рассмотрим свойства панели добавления элементов в Zero Block:

• Text — добавляет на рабочую область абзац текста («рыбу»), для которого можно изменять тип и размер шрифта, интервалы, прозрачность, пространственное положение;
• Image — позволяет подгружать на экран картинки и фото с компьютера/интернета;
• Shape — три типа фигур (квадрат, круг, линия), абрис и тело которых можно трансформировать при помощи цвета, тени, толщины обводки;
• Button – кнопка с изменяемым дизайном (форма, размер, шрифт) и параметрами анимации (скорость, смена фона или подсветки);
• Video — загрузка роликов с хостингов Youtube и Vimeo. Есть возможность настройки параметров автовоспроизведения, повторов и звука;
• Tooltip — всплывающая интерактивная иконка-подсказка с возможностью форматирования текста ответа;
• HTML — опция интеграции на страницу внешних сервисов и виджетов, позволяющая разнообразить стандартное меню конструктора сайтов Tilda cc;
• CRM Form — добавление и настройка формы обратной связи. Модуль можно подключить как к внутренней CRM «Тильды», так и к внешним сервисам обработки данных;
• Gallery — установка слайдера изображений. Настраивается количество картинок, размер элемента, расположение на экране, режимы воспроизведения — по клику или автоматически.

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

Способность качественно оживлять элементы на экране считается одним из главных преимуществ конструктора перед аналогами. В «Тильде» три вида анимации.

Базовая анимация

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

• Простое меню — эффекты легко освоит новичок.
• Два вектора движения элементов — с четырех сторон и увеличение.
• Мгновенная загрузка — эффекты не замедляют работу сайта.

Базовая анимация в Зеро Блоке

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

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

Пошаговая анимация в Зеро Блоке

Step-by-step — пошаговая трансформация движения объектов. Если упростить — тонкая и детальная настройка максимально возможного числа параметров элемента.

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

Пошаговая анимация — технически сложный инструмент и, возможно, неопытным пользователям лучше остановиться на более прозаичных решениях. Однако, если вам необходим по-настоящему уникальный дизайн, анимация step-by-step при создании сайтов на конструкторе Tilda — оптимальный выбор.

Тестирование публикаций сайта

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

Заполните форму и отправьте сообщение. Посмотрите, как отреагирует на него подключенная CRM. Проверьте настройку внутренних ссылок, кнопок, интерактивных элементов. Если все в порядке, запускайте.

Что еще может Tilda

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

Интеграция с WordPress

В сети достаточно примеров эффективной коллаборации CMS WordPress и «Тильда». Как пример, WP можно использовать в качестве базовой платформы, на которой расположен главный ресурс, а при помощи конструктора собирать ситуационные лендинги или лонгриды.

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

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

Подготовка писем для рассылки

Редактор писем «Тильды» здорово облегчает жизнь. Во-первых, если для общения с подписчиками используются сервисы MailChimp, UniSender или SendGrid, не нужно тратить время на внешние переходы — рассылка собирается и отправляется прямо из редактора.

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

Создание промокодов

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

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

Электронная торговля

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

В каталоге есть готовые шаблоны онлайн-магазинов. Если этого мало, библиотека блоков позволяет собрать, используя модули из раздела «Магазин», свою версию торговой точки.

Длинный список доступных для интеграции внешних сервисов, CRM-систем и платежных агрегаторов решает вопрос автоматизации. Регистрируйся, собирай сайт, торгуй!

Пользовательская страница 404

Для создания автоматической страницы ошибки 404 в конструкторе предусмотрен отдельный раздел.

Откройте пустую страницу, оформите ее в нужном стиле и опубликуйте. Затем перейдите в настройки сайта, отыщите пункт «Еще», в нем находится форма подключения страницы 404.

Вставьте внутреннюю ссылку в поле формы и подтвердите выбор. Система автоматически подключит новую страницу. Доступно только на платных тарифах.

Tilda CRM

Взаимоотношения с посетителями сайта нельзя строить ситуативно. Прибыль любого коммерческого предприятия в огромной степени зависит от умения грамотно организовать процессы приема и реакции на заявки покупателей. Лучший помощник в этом — CRM-система.

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

• Система простая и лаконичная. Она не рассчитана на сложные задачи и большие коллективы. Ее цель — частные предприниматели и небольшие компании с относительно скромным ассортиментом.
• Не требует обучения, подключается за пару кликов. Метрики статистики: откуда человек пришел на сайт, как себя вел на нем, какой у него визит по счету.
• Для пользователей тарифов Personal и Business — CRM бесплатна. Пакет Free не закрывает доступ к ней, но ограничивает функциональность.
• Данные, которые проходят и хранятся в системе зашифрованы. Обмен информацией между браузером и сервером конструктора защищен SSL.

Если ваш бизнес относится к малому или среднему, то даже не думайте покупать отдельную внешнюю CRM. Возможностей «Тильды» хватит за глаза.

Вместо заключения: Tilda или CMS?

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

WordPress и Tilda похожи только внешне. В реальности — это два совершенно разных по возможностям инструмента. Даже с учетом великолепного визуального редактора — главного достоинства «Тильды», конструктор проигрывает CMS, ведь у него есть Elementor.

• Это бесплатный плагин, при помощи которого можно верстать проекты намного более сложные и эффектные, чем с применением Zero Block.

А еще у WordPress есть очевидные преимущества качественного хостинга: высокая скорость, открытый доступ к настройкам сервера, неограниченное пространство. И в плане дизайна WP превосходит шаблоны конструктора сайтов Tilda. У WordPress их больше, они разнообразнее и функциональнее.

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

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

Источник: www.web-dius.ru