Как сделать многостраничный сайт
Навигация между главной страницей и внутренними через двойное меню, интеграция в сайт блога, который находится в другом проекте и подключен к субдомену.
Смотрите также:
Как сделать одностраничный сайт [видео]
Пошаговая демонстрация процесса создания сайта: от регистрации до публикации.
Как сделать интернет-магазин [видео]
Руководство по созданию магазина с корзиной и онлайн-оплатой.
Как сделать блог [видео]
Пошаговая демонстрация процесса создания блога: от регистрации до публикации.
Как сделать статью [видео]
Специальный выпуск с «Теориями и практиками»
Как сделать лонгрид [видео]
Пошаговая демонстрация процесса создания лонгрида: от регистрации до публикации.
Сайт, о котором вы мечтали, начинается прямо здесь
Зарегистрироваться
Как сделать сайт на Тильде самостоятельно: пошаговая инструкция
Пройдите тест, узнайте какой профессии подходите
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы
Для кого эта статья:
- Люди, интересующиеся созданием сайтов без навыков программирования
- Предприниматели и фрилансеры, нуждающиеся в простом инструменте для создания сайтов
-
Новички в веб-дизайне, желающие освоить интуитивные платформы для создания сайтов
Создание собственного сайта больше не требует глубоких знаний программирования или найма дорогостоящих разработчиков. Платформа Tilda произвела настоящую революцию в веб-дизайне, открыв доступ к созданию профессиональных сайтов буквально каждому! 🚀 Независимо от того, нужен ли вам сайт для бизнеса, личного блога или портфолио — Тильда предлагает интуитивно понятный интерфейс и богатый функционал. В этой пошаговой инструкции я расскажу, как создать свой первый сайт на Tilda без единой строчки кода и получить результат, который выглядит так, будто над ним работала профессиональная веб-студия.
Хотите освоить не только Tilda, но и стать настоящим профессионалом в веб-дизайне? Курс «Веб-дизайнер» с нуля от Skypro — это ваш шанс погрузиться в мир современного дизайна сайтов. Вы научитесь не только работать с конструкторами, но и освоите профессиональные инструменты, разработку UI/UX и сможете создавать по-настоящему уникальные проекты, которые будут выделяться среди шаблонных решений!
Вся правда о Тильде: с чего начать создание сайта
Tilda Publishing — это конструктор сайтов, который позволяет создавать профессиональные веб-страницы без знания программирования. Платформа появилась в 2014 году и с тех пор завоевала признание среди предпринимателей, маркетологов, дизайнеров и всех, кому нужен качественный сайт без лишних сложностей.
Основное преимущество Тильды — философия блочной верстки. Вместо того чтобы писать код, вы собираете сайт из готовых блоков (их более 450), как конструктор. Каждый блок можно настроить под свои нужды, изменив цвета, шрифты, размеры и другие параметры.
Прежде чем приступить к созданию сайта, определитесь с несколькими ключевыми моментами:
- Цель вашего сайта: продажа товаров/услуг, портфолио, блог, лендинг для мероприятия и т.д.
- Целевая аудитория: кто будет посещать ваш сайт и какие задачи будет решать
- Структура сайта: количество страниц и их содержание
- Визуальный стиль: цветовая гамма, типографика, общее настроение
Важно понимать, что Тильда предлагает как бесплатный, так и платный функционал. Сравним возможности разных тарифов:
Для создания полноценного сайта рекомендую выбрать хотя бы тариф Personal, поскольку бесплатная версия имеет серьезные ограничения: нельзя подключить свой домен, в футере будет логотип Тильды, а функционал значительно урезан. ⚠️
Елена Соколова, веб-дизайнер
Когда я только начинала свой путь в веб-дизайне, язык HTML казался мне китайской грамотой. Однажды клиент попросил срочно создать лендинг для запуска нового продукта — у меня было всего три дня. Я запаниковала, но коллега посоветовал попробовать Тильду.
Первые два часа я просто изучала интерфейс, затем выбрала подходящий шаблон и начала его адаптировать. К моему удивлению, к концу дня у меня уже была готова основная структура сайта! На следующий день я заполнила его контентом, а на третий — внесла финальные правки по комментариям клиента. Сайт был запущен вовремя, а клиент остался в восторге от результата.
Именно тогда я поняла, что Тильда — это не просто конструктор для новичков, а мощный инструмент, способный создать действительно впечатляющие проекты. С тех пор прошло три года, я значительно расширила свои навыки, но до сих пор использую Тильду для определенных типов проектов, особенно когда время ограничено.
Регистрация и настройка аккаунта на платформе Tilda
Первый шаг к созданию вашего сайта — регистрация на платформе Tilda. Процесс максимально прост и занимает всего несколько минут. Давайте разберем его пошагово: 📝
- Перейдите на официальный сайт Tilda Publishing (tilda.cc).
- Нажмите кнопку «Попробовать бесплатно» в верхнем правом углу.
- Заполните регистрационную форму: укажите email, придумайте пароль и введите своё имя.
- Подтвердите регистрацию, перейдя по ссылке из письма, отправленного на ваш email.
- Войдите в систему, используя созданные учетные данные.
После входа в систему вы попадете в Tilda Dashboard — главную панель управления, где будут отображаться все ваши проекты. Для начала работы нажмите кнопку «Создать сайт».
При создании нового проекта вам нужно будет указать его название и тип. Название может быть любым — оно будет видно только вам в панели управления. Что касается типа сайта, на выбор представлены несколько вариантов:
- Бизнес-сайт — для компаний и организаций
- Интернет-магазин — для продажи товаров онлайн
- Лендинг — одностраничный сайт для продвижения продукта или услуги
- Блог — для публикации статей и новостей
- Портфолио — для демонстрации работ и проектов
- Пустой сайт — если вы хотите создать проект с нуля
Выбор типа сайта влияет на рекомендуемые шаблоны, которые будут предложены системой, но не ограничивает вас в дальнейших настройках.
После создания проекта настройте основные параметры сайта в разделе «Настройки». Здесь важно обратить внимание на следующие моменты:
Если вы выбрали платный тариф, у вас есть возможность подключить собственный домен. Для этого перейдите в раздел «Домены» в настройках проекта и следуйте инструкциям по подключению. Тильда предоставит вам DNS-записи, которые нужно будет добавить у вашего регистратора доменных имен.
На бесплатном тарифе ваш сайт будет доступен по адресу вида project123456.tilda.ws, где цифры — это ID вашего проекта, который присваивается автоматически.
Выбор и адаптация шаблона для вашего проекта
Тильда предлагает более 700 готовых шаблонов, которые сгруппированы по категориям: бизнес, лендинг, портфолио, блог и т.д. Шаблоны созданы профессиональными дизайнерами и отвечают современным трендам веб-дизайна. 🎨
Выбор подходящего шаблона — важный шаг, который определит визуальный стиль и структуру вашего сайта. Однако помните, что любой шаблон можно значительно модифицировать, поэтому даже если вы не находите идеальный вариант, вы всегда можете адаптировать имеющийся под ваши потребности.
Для выбора шаблона:
- В Tilda Dashboard нажмите на ваш проект для входа в редактор.
- В редакторе выберите «Шаблоны» в верхнем меню.
- Просмотрите галерею шаблонов, используя фильтры по категориям.
- Нажмите на понравившийся шаблон для предпросмотра.
- Если шаблон вам подходит, нажмите «Использовать шаблон».
В Тильде существует два типа шаблонов:
- Готовые сайты — полноценные многостраничные проекты с продуманной структурой и дизайном.
- Коллекции блоков — наборы тематических блоков, которые можно комбинировать по своему усмотрению.
После выбора шаблона начинается самое интересное — его адаптация под ваш проект. В Тильде это делается через панель настроек, которая появляется при клике на любой элемент страницы.
Основные параметры, которые можно изменить:
- Цветовая схема — изменение основных и акцентных цветов сайта
- Типографика — выбор шрифтов для заголовков и основного текста
- Размеры и отступы — настройка пропорций и пространства между элементами
- Фоновые изображения — замена встроенных изображений на свои
- Эффекты анимации — добавление движения и интерактивности
Важная особенность Тильды — система глобальных стилей. Вместо того чтобы изменять оформление каждого элемента по отдельности, вы можете настроить общие стили для всего сайта. Это значительно ускоряет работу и обеспечивает визуальную согласованность.
Андрей Волков, маркетолог
Я запускал онлайн-ивент для IT-компании, и нам срочно требовался сайт. Клиент хотел «что-то современное, но не как у всех». Времени на разработку с нуля не было, поэтому решено было использовать Тильду.
Изначально я выбрал шаблон для мероприятий, но, честно говоря, он выглядел довольно стандартно. Тогда я решил рискнуть и взять за основу шаблон из совершенно другой категории — для ресторанов. На первый взгляд странное решение, но этот шаблон имел интересную анимацию и необычную компоновку блоков.
Заменив все гастрономические изображения на технологические, поменяв цвета на корпоративные и адаптировав тексты, я получил действительно уникальный дизайн, который выделялся среди типичных сайтов IT-мероприятий. Клиент был в восторге, а конверсия регистраций превысила ожидания на 40%.
Этот случай научил меня не ограничиваться очевидными решениями при выборе шаблонов — иногда стоит смотреть совсем в другие категории и мыслить нестандартно!
Если вы хотите создать действительно уникальный дизайн, обратите внимание на инструмент Zero Block. Он доступен только на платных тарифах и позволяет создавать блоки с нуля, с полным контролем над каждым элементом. Это своего рода «песочница» для дизайнеров, где можно реализовать практически любую идею.
После адаптации шаблона не забудьте проверить, как ваш сайт будет выглядеть на различных устройствах. В Тильде есть встроенный инструмент проверки адаптивности, который позволяет увидеть, как страница отображается на компьютерах, планшетах и смартфонах. При необходимости вы можете внести дополнительные корректировки для каждого типа устройств.
Наполнение сайта: добавление текста, фото и форм
После настройки шаблона наступает этап наполнения сайта контентом. От качества и релевантности этого контента во многом зависит успех вашего проекта. 📝
Наполнение сайта в Тильде происходит по блочному принципу. Каждый блок имеет свою структуру и предназначение. Вы можете добавлять, перемещать и удалять блоки, а также настраивать их содержимое.
Для добавления нового блока:
- Нажмите кнопку «+» в том месте страницы, где хотите расположить блок.
- В открывшемся каталоге выберите подходящую категорию блоков.
- Просмотрите варианты блоков и выберите нужный.
- Нажмите на выбранный блок, чтобы добавить его на страницу.
Основные типы контента, который вы можете добавить на ваш сайт:
Текстовые элементы
В Тильде можно использовать различные текстовые блоки: от простых абзацев до сложноструктурированных текстовых композиций. Для добавления и редактирования текста просто кликните на соответствующий элемент и введите свой контент.
При работе с текстом учитывайте следующие рекомендации:
- Используйте короткие абзацы (3-5 строк) для лучшей читаемости.
- Структурируйте информацию с помощью заголовков разных уровней.
- Выделяйте ключевые мысли жирным шрифтом или другим цветом.
- Добавляйте списки для перечисления свойств, преимуществ или этапов.
Изображения и видео
Визуальный контент играет решающую роль в восприятии вашего сайта. В Тильде вы можете добавлять как отдельные изображения, так и целые галереи или слайдеры.
Для добавления изображений:
- Выберите блок, в который хотите добавить изображение.
- Нажмите на плейсхолдер изображения (серый прямоугольник с иконкой).
- Загрузите изображение с компьютера или выберите из библиотеки.
- При необходимости настройте кадрирование и другие параметры.
Тильда также позволяет добавлять видео с YouTube, Vimeo или загружать свои видеофайлы (на платных тарифах).
Формы и интерактивные элементы
Для взаимодействия с посетителями используйте формы и другие интерактивные элементы. Тильда предлагает разнообразные блоки для создания:
- Контактных форм
- Форм подписки на рассылку
- Форм заказа товаров или услуг
- Форм для записи на мероприятия
- Опросов и голосований
При настройке форм обязательно укажите, куда будут отправляться данные: на email, в CRM-систему или специальный сервис.
Сравним основные способы получения данных из форм:
Важно помнить о законодательстве о персональных данных при сборе информации о пользователях. Добавьте на сайт политику конфиденциальности и получайте согласие на обработку персональных данных через специальный чекбокс в формах.
Не знаете, к какой сфере тяготеет ваш творческий потенциал? Хотите понять, подойдет ли вам веб-дизайн или другое направление в digital? Пройдите Тест на профориентацию от Skypro! Всего за 5 минут вы получите персональные рекомендации по развитию карьеры, основанные на ваших природных склонностях и интересах. Результаты помогут определиться с направлением обучения и выбрать оптимальный путь профессионального роста в сфере создания сайтов и цифрового контента.
Публикация и продвижение готового сайта на Тильде
Когда работа над дизайном и контентом завершена, наступает время публикации и продвижения вашего сайта. На этом этапе важно грамотно настроить все технические аспекты и разработать стратегию привлечения посетителей. 🚀
Перед публикацией обязательно проведите финальную проверку сайта:
- Протестируйте все ссылки и убедитесь, что они ведут на нужные страницы.
- Проверьте формы — отправьте тестовые заявки и проконтролируйте их получение.
- Убедитесь, что сайт корректно отображается на разных устройствах и в разных браузерах.
- Проверьте орфографию и пунктуацию во всех текстах.
- Оптимизируйте размер изображений для быстрой загрузки страниц.
Для публикации сайта:
- В редакторе Тильды нажмите кнопку «Опубликовать» в правом верхнем углу.
- В появившемся окне выберите «Опубликовать сайт».
- Дождитесь завершения процесса публикации.
После публикации ваш сайт станет доступен по адресу, указанному в настройках домена. На бесплатном тарифе это будет адрес вида project123456.tilda.ws, на платном вы можете использовать собственный домен.
Для успешного продвижения сайта важно уделить внимание SEO-оптимизации. В Тильде есть встроенные инструменты для базовой настройки SEO-параметров:
- Перейдите в раздел «Настройки» вашего проекта.
- Выберите вкладку «SEO и метатеги».
- Заполните поля «Заголовок страницы» и «Описание страницы».
- Добавьте ключевые слова и альтернативные тексты для изображений.
Помимо базовой SEO-оптимизации, существует множество способов продвижения сайта. Вот основные каналы, которые вы можете использовать:
Для наиболее эффективного продвижения рекомендуется использовать комбинацию различных каналов, учитывая специфику вашего проекта, бюджет и временные рамки.
Важно также настроить аналитику для отслеживания эффективности вашего сайта и маркетинговых кампаний. В Тильде есть интеграции с популярными сервисами аналитики:
- Google Analytics — для комплексного анализа трафика и поведения пользователей
- Яндекс.Метрика — для отслеживания посетителей из России и СНГ
- Встроенная статистика Тильды — для базового мониторинга
Подключение аналитики позволит вам понять, откуда приходят посетители, какие страницы наиболее популярны, сколько времени пользователи проводят на сайте и какие действия совершают. На основе этих данных вы сможете оптимизировать контент и маркетинговую стратегию.
Не забывайте регулярно обновлять контент на вашем сайте. Актуальная информация и новые материалы не только удерживают существующих посетителей, но и привлекают новых. Тильда позволяет легко редактировать контент даже после публикации сайта — просто внесите изменения и опубликуйте их заново.
Если ваш проект предполагает постоянное добавление новых материалов (например, блог или каталог товаров), рассмотрите возможность использования Tilda Publishing API для автоматизации этого процесса. Это особенно удобно для интеграции с внешними системами и базами данных.
И вот ваш сайт на Тильде уже работает и привлекает посетителей. Благодаря интуитивному интерфейсу и богатому функционалу платформы вы смогли создать профессиональный веб-проект без привлечения разработчиков и дизайнеров. Tilda — это мощный инструмент, который демократизирует веб-дизайн, делая его доступным для каждого. Главное преимущество платформы заключается в балансе между простотой использования и возможностью создания по-настоящему уникальных проектов. Начните с базовых функций и постепенно осваивайте более сложные инструменты — и вскоре вы сможете реализовывать самые смелые идеи!
Сегодня
на уроке мы:
· Узнаем,
как сделать многостраничный сайт в Tilda.
· Как
добавить новые страницы.
· Как
их связать.
· И
как задать им понятные адреса.
Давайте
создадим сайт «Клуб квестов».
Дадим
название проекта.
Сайт
у нас будет из трёх страниц: главная и две внутренние.
Начнём
с главной страницы. Чтобы создать новую, нужно нажать на кнопку «Создать новую
страницу». В самом начале можно выбрать из готовых шаблонов на Tilda, а можно
выбрать пустую страницу и начать собирать страницу с нуля из блоков.
На
главную страницу добавим обложку, блоки с описанием предлагаемых квестов с
фотографиями.
Следующий
раздел содержит информацию о команде, то есть о людях, которые разрабатывают
квесты. Далее идёт форма регистрации и контактные данные.
Создадим
ещё две внутренние страницы. Одна из них будет рассказывать про команду
организаторов, а вторая будет рассказывать про какой-нибудь квест. Чтобы
создать ещё одну новую страницу, вернёмся в раздел «Сайт».
Здесь
мы видим, что одна главная наша страница уже готова. Создадим теперь ещё одну.
На этот раз воспользуемся шаблонами, которые есть на Tilda. Переходим во
вкладку «Внутренние» и постараемся найти здесь шаблон, который подойдёт.
Выберем вот этот.
Здесь
нужно немного отредактировать страницу, заменить контент для того, чтобы
получилась страница, где есть подробный рассказ о каждом организаторе. Страница
готова.
Теперь
создадим вторую внутреннюю страницу. На этот раз возьмём пустую страницу за
основу и создадим всё с нуля. Эта страница с информацией об одном из квестов.
Добавим
нужные блоки и изменим контент.
Теперь
вернёмся к списку всех страниц, которые мы уже создали.
И
видим, что их теперь три – одна главная и две внутренние страницы у нас
получились.
Очень
важно, чтобы главная страница была отмечена и назначена главной ещё и в
настройках сайта. Для того чтобы это сделать, перейдём в настройки сайта и
найдём вкладку «Главная страница». И здесь во вкладке выбираем ту,
которая нам нужна. Сохраняем изменения и возвращаемся к списку.
Теперь
видим, что рядом с названием появилась небольшая иконка домика, и она говорит о
том, что именно эта страница теперь назначена главной. У каждой страницы должен
быть свой адрес, и давайте его зададим. В настройках сайта пропишем главный
адрес, по которому будет открываться главная страница.
Можно
прописать субдомен на Tilda, и ещё есть вариант – это добавить свой собственный
домен. Он подключается во вкладке домен. И здесь можно прописать свой адрес,
например, вот такой: kvests.com.
Вы
подключаете домен, задав его в Tilda. Для этого его нужно будет прописать
здесь, а потом нужно вернуться на сайт регистратора доменов, где вы его
покупали, и там прописать в настройках адреса IP-адреса, которые будут
ссылаться на конструктора Tilda. Сейчас будем использовать субдомен Tilda.
Сохраняем изменения.
Теперь
пропишем адреса для внутренних страниц, по которым они будут открываться. Это нужно
сделать в настройках сайта. Первая внутренняя страница будет называться Team,
а вторая – Piramida.
Для
того чтобы страницы открывались по заданным адресам, их для начала нужно опубликовать.
Опубликуем страницы и смотрим по адресу, который мы задали. Да, открывается
главная страница.
Чтобы
страницы хорошо выглядели в поисковой выдаче и в социальных сетях, в настройках
каждой страницы можно задать заголовок и описание. Запишем заголовок и описание
страницы.
А
также нужно загрузить бейджик. Бейджик – это та картинка, которая будет
отображаться, например, в социальных сетях. И, как правило, в качестве бейджика
подгружается при публикации первая фотографии, которые есть на странице. В
данном случае это фотография девушки-организатора. И можем заменить изображение,
загрузив сюда своё. Например, вот это фото. Сохраним изменения.
И
мы видим теперь, что здесь фото тоже изменилось.
Что
дальше? На одной из внутренних страниц красиво выглядит первый экран. Это узкая
обложка. Она отличается от обложки на главной странице. Давайте сделаем так,
чтобы такая же обложка была на странице с командой.
Скопируем
блок. Теперь перейдём на страницу с командой. Просто вставляем скопированный
блок и перемещаем его в самое начало. И осталось заменить контент, который
больше подходит для этой страницы. Меняем картинку, текст обложки и вносим
нужные изменения. Готово.
Теперь
и на странице с командой тоже появилась обложка. Ещё добавим здесь небольшой
текстовый блок, чтобы визуально отделить обложку от блока с командой.
Добавим
меню, по которому можно перемещаться на другие страницы. А также сделаем так,
чтобы на каждой внутренней странице были контакты и кнопка, по которой можно
было бы сразу отсюда записаться на квест.
Теперь
сделаем так, чтобы определённые блоки автоматически отображались на всех
страницах сайта. Такие блоки здесь будут называться header и footer. Это шапка
и подвал. В качестве шапки будем использовать блок меню. Для этого переходим к
списку всех страниц и создаём новую страницу. Эта страница будет отвечать за
header.
Выбираем
блок «Меню» из библиотеки. Здесь в разделе «Контент» изменяем
название компании. А во вкладке «Список пунктов меню» прописываем нужные
пункты.
Сделаем
переходы на главную страницу, на страницу команды и переход на страницу квеста.
Сохраняем.
Сейчас
можно увидеть меню. Теперь здесь нужно прописать ссылку, по которой будет
открываться соответствующая страница. Нажимаем на «Выбрать страницу» и выбираем
из списка страницу «Квест». Затем страницу Команда.
Чтобы
попасть на главную страницу, пропишем прямую ссылку на сайт. Сохраняем
изменения.
Только
что мы настроили меню, но ещё не до конца. Давайте сделаем фон меню прозрачным,
чтобы оно могло накладываться на узкую обложку, которую мы сделали для
внутренних страниц, и чтобы под меню не было чёрной плашки. Для этого в
настройках блока выбираем фон меню и задаём ему прозрачность. Сохраняем
изменения. В основных настройках можно выбрать позиционирование меню.
Сейчас
стоит статика, однако нам нужно, чтобы меню накладывалось на следующий блок, но
без фиксирования. Это значит, что при скролле страницы меню останется на
обложке и не будет фиксироваться наверху браузера. Сохраняем изменения.
Итак,
меню готово. Теперь надо сделать так, чтобы оно отображалось на всех страницах.
Возвращаемся
к списку страниц и в настройках страницы с меню прописываем, что это header.
Так будет удобнее. Чтобы задать эту страницу в качестве header, нужно в
настройках сайта выбрать вкладку «Шапка и подвал» и выбрать эту страницу
в качестве шапки. Сохраняем изменения.
Теперь
создадим footer. Добавим на страницу контакты и кнопку, которая будет вести на
форму регистрации. Внесём изменения в контенте и оформлении.
Вот
так стал выглядеть footer. Возвращаемся к списку страниц. Назовём страницу Footer
и назначим её в качестве подвала.
Обратите
внимание, как здесь очень удобно отображаются шапка и подвал.
Теперь
давайте посмотрим, что получилось. Откроем страницу команда. У нас только что
добавилось меню, которое мы сделали в шапке header. А ещё добавился подвал с
кнопкой и контактами.
Теперь
посмотрим, как выглядит страница квеста.
Тут
видим, что header и footer применились.
А
что же делать с главной страницей?
Потому
что к ней тоже применился и header, и footer.
Давайте
запустим предпросмотр. Как видим, здесь header лежит под основным меню, он
белого цвета, и мы не видим его сейчас.
Ещё
здесь мы видим footer. Получается, что на главной странице они нам не нужны.
Чтобы
их убрать, вернёмся в редактор главной страницы, в настройках переходим во
вкладку «Дополнительно» и видим специальные пункты, на которых написано
«Не использовать шапку» и «Не использовать подвал» для этой
страницы. Выбираем и сохраняем изменения. Смотрим, что получилось. Теперь шапка
и подвал больше не отображаются здесь.
Итак,
сейчас наши страницы никак не связаны между собой. Давайте посмотрим, как мы их
можем связать друг с другом. Во-первых, мы уже задали каждой странице адреса, и
мы можем теперь связать их через меню и через кнопки регистрации на внутренних
страницах.
Давайте
начнём с шапки и подвала. В header мы задали уже все адреса. И теперь нужно ещё
задать адреса на главной странице, потому что мы используем здесь другое меню,
не из header. Поэтому здесь все эти ссылки мы пропишем заново. Здесь выбираем
страницу квеста и выбираем страницу с командой. Сохраняем изменения.
Ещё
сейчас на главной странице у нас есть форма, на которой можно
зарегистрироваться на квест. На внутренних страницах у нас есть кнопка, которая
должна нас привести к этой форме. Она находится в footer.
Итак,
как нам связать эту кнопку с формой на главной странице?
Мы
сделаем это с помощью якорной ссылки. Прямо перед блоком с формой нам нужно
вставить блок из раздела «Другое». Он так и называется «Якорная
ссылка». Выбираем и в разделе «Контент» задаём ей имя. Сохраняем. А
теперь перейдём в подвал, где у нас находится кнопка.
Кнопка
«Зарегистрироваться» должна вести на форму. Здесь в разделе «Контент» нужно для
кнопки задать ссылку. Для начала прописываем прямую ссылку на сайт. И после
этого прописываем имя якорной ссылки вместе с решёткой перед ним. Сохраняем
изменения.
Теперь
опубликуем все страницы для того, чтобы посмотреть, как сработали все
изменения.
Главная
страница. Здесь попробуем перейти на страницу с командой.
Теперь
отсюда мы можем перейти на страницу квеста.
Скроллим
дальше.
Здесь
нажимаем на кнопку «Зарегистрироваться» и попадём к форме на главной странице.
Многостраничный
сайт готов. Поэкспериментируйте, добавьте новые блоки, страницы. Создайте сайт
на другую тему.
В
конце урока попробуйте ответить на следующие вопросы:
Зачем
в настройках каждой страницы задавать заголовок и описание?
Что
значит, если в списке страниц рядом с названием одной из них появилась
небольшая иконка домика?
Внимательно
посмотрев урок, вам не составит труда ответить на вопросы.
Обновили в 2022 году.
Этот сайт целиком построен на Tilda
Как все конструкторы, Tilda позволяет сделать сайт без специальных знаний. Интерфейс платформы интуитивно понятный. На каждом этапе работы система подсказывает пользователю следующие шаги. Готовые шаблоны и модули позволяют быстро создать красивый и функциональный ресурс.
Tilda выделяется на фоне других конструкторов ориентацией на визуальную привлекательность и легкость восприятия контента.
Пользователям Tilda доступны модули и шаблоны, с помощью которых можно быстро создавать конверсионные лендинги и даже интернет-магазины. На «Тильде» можно сделать корпоративный сайт, виртуальную визитку с портфолио, контент-проект.
Примеры созданных с помощью конструктора ресурсов можно найти в разделе MadeOnTilda на официальном сайте проекта. Обратите внимание на пример интеграции «Тильды» и WordPress. «Лайфхакер» использует конструктор для создания лонгридов, а основной сайт проекта работает на WP.
Пример интеграции одного движка в Tilida
У Tilda есть недостатки, которые будут рассмотрены ниже. Но главный из них нужно обсудить сразу.
Стоимость
Пользователям доступны три тарифных плана: Free, Personal и Business.
Возможностей бесплатного тарифа хватит для создания сайта-визитки. Пользователь получает 50 Мб дискового пространства и один сайт до 50 страниц. Функциональность сайтов на бесплатном тарифе ограничена.
Важный момент: пользователи бесплатного тарифа могут зарегистрировать сайт только на поддомене. URL выглядит так: vash-site.tilda.ws. Это не влияет ни на пользовательский опыт, ни даже на доверие к сайту со стороны поисковых систем.
Для корпоративного сайта, контент-проекта, интернет-магазина лучше использовать тарифный план Personal за 500 рублей в месяц. После оплаты пользователь получает доменное имя в зоне .ru или .com, возможность создать до 500 страниц и использовать 1 Гб дискового пространства. Также платный тариф открывает полный доступ к библиотеке модулей.
Доступ к конструктору стоит 6 000 рублей в год. Это неоправданно дорого. Полноценный сайт на любой CMS, например, WordPress, Joomla!, Drupal, OpenCart, обойдется гораздо дешевле.
Например, один из ведущих хостинг-провайдеров рунета, по состоянию на начало 2022 года, предлагает услугу виртуального хостинга за 1 545 рублей в год. Бонусом пользователь получает четыре домена в зонах .ru и .рф и бесплатный SSL-сертификат.
Тариф Business включает все возможности Personal. Дополнительно пользователь может создавать до пяти сайтов. Главное отличие – возможность экспортировать код и установить Tilda на свой сервер.
За подключение по тарифу Business нужно платить 1 000 рублей в месяц. Обратите внимание, услуги хостинг-провайдера нужно оплачивать отдельно.
Выбор тарифа зависит от формата сайта и потребностей владельца.
| Тариф & Характеристики | Цена в год | Возможности | Кому подходит |
| Free | Бесплатно | Сайт на поддомене, до 50 страниц, до 50 Мб на диске | Фрилансерам, которым нужен небольшой сайт-визитка |
| Personal | 6000 рублей | Сайт на платном домене, до 500 страниц, 1 Гб на диске, полный доступ к библиотеке модулей | Блогерам, издателям, компаниям, E-коммерсантам |
| Business | 12 000 рублей | Возможности тарифа Personal, опция экспорта кода, до 5 сайтов на одном аккаунте | Никому. На сервер лучше установить CMS с открытым кодом. Даже некоторые коммерческие CMS обойдутся дешевле |
Если высокая стоимость конструктора не проблема, переходите к пошаговой инструкции по созданию сайта на Tilda. В конце концов, каждый пользователь может испытать тариф Personal бесплатно в течение двух недель. По итогам тестирования можно понять, стоит ли пользоваться платформой.
Начните с планирования
Определить необходимую функциональность и дизайн поможет наше подробное руководство по заказу сайта. Вот еще один очень полезный гайд, с которым легко и удобно планировать сайт.
Решите, как вы будете делать сайт: создавать страницы с чистого листа с помощью готовых блоков из библиотеки или использовать предложенные шаблоны.
Первый способ позволяет делать страницы такими, какими их видите вы. С помощью модулей из библиотеки можно реализовать запланированные функциональность и внешний вид.
Полезная информация есть в наших гайдах и статьях:
- «Как обеспечить читабельность контента».
- «Визуальная иерархия в UX: как направить внимание пользователя».
- «Как написать, оптимизировать и сверстать статью».
Если вы решили делать страницы с нуля с помощью библиотеки блоков, начните с создания прототипов. Используйте Axure RP или другие инструменты прототипирования. Эскизы страниц можно нарисовать и на бумаге. А в крайнем случае просто перечислите блоки, которые должны быть на каждой странице. Второй способ подойдет тем, кто не доверяет собственному вкусу и не имеет ни малейшего представления о дизайне, функциональности и юзабилити сайтов.
Воспользуйтесь готовыми шаблонами страниц из библиотеки. В каталоге они объединяются по тематическим категориям: «Бизнес», «Магазин», «Событие», «Блог», «Контакты» и «Анкета».
Окно создания новой страницы
Шаблоны можно редактировать – удалять и добавлять блоки или менять их местами. Поэтому готовые решения обеспечивают практически такую же гибкость, как создание сайта с нуля из модулей.
Шаблон служит защитой от дурака. Он страхует далеких от веб-разработки пользователей от детских ошибок, например, использования лишних элементов в ущерб юзабилити.
Результатом планирования должно стать четкое представление о будущем сайте. Запишите как минимум следующую информацию:
- цель и задачи работы ресурса;
- структуру сайта: список и иерархию страниц;
- функциональность и дизайн основных страниц.
Чтобы наглядно показать возможности 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
После подключения все заявки с сайта будут приходить в 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 можно сделать бесплатно, но он будет доступен на поддомене.
Простота редактирования шаблона
С «Тильдой» любой пользователь без специальных знаний может почувствовать себя дизайнером. Для изменения шаблонов на WordPress нужны специальные знания.
Визуальная привлекательность страниц
Этот пункт – продолжение предыдущего. С помощью «Тильды» можно красиво оформить страницу сайта. Это не требует специальных знаний и много времени.
На WordPress можно выбрать визуально привлекательный шаблон. Но чтобы добавить дополнительное оформление, потребуется время и знания.
Простота
На Tilda проще создать сайт и управлять им. За простоту придется расплачиваться деньгами и ограничениями в функциональности ресурса.
Что в итоге
Конструктор Tilda – удобный и эффективный инструмент для создания сайтов. Он не имеет всех функций полноценного движка. Но функциональность CMS нужна далеко не всем пользователям. Едва ли не главное достоинство «Тильды» – возможность быстро сделать визуально привлекательный сайт. Ограниченность конструктора может быть плюсом для пользователей без опыта. Платформа защитит их от серьезных ошибок, которые могут снизить эффективность ресурса.
На сегодняшний день Tilda является наиболее популярным блочным конструктором сайтов, позволяющим делать визуально привлекательные проекты различной сложности без профессиональных навыков дизайна и программирования.
Запуск проекта – от простого лендинга до многостраничных сайтов для бизнеса и интернет-магазинов – на Тильде происходит быстро и легко. Разработчики платформы позаботились о комфорте пользователей и создали простой пользовательский интерфейс (так называемый интуитивно понятный UI) и доступный функционал с уже готовыми шаблонами и блоками, которые, словно в компьютерной игре, можно складывать в нужную «картинку» и получать необходимый результат.
Преимущества и недостатки разработки сайта на Tilda
Несмотря на шаблонность, сайты на Tilda могут быть стильными и уникальными. Конструктор располагает более 550 блоками, причем библиотека не перестает пополняться.
Каждый блок можно редактировать и менять на свой вкус, а если захочется чего-то нового и необычного, есть возможность создать свой собственный блок с помощью расширения Zero Block.
Также вам не придется работать над оптимизацией каждого из представленных в библиотеке блоков под разные устройства (кроме Zero Block, нулевые блоки необходимо адаптировать самостоятельно), Тильда уже сделала всю работу, ваш сайт будет удачно и гармонично смотреться на экранах любых расширений.
Кроме того, на платформе есть возможность задать базовые настройки для SEO, сделать интеграцию со сторонними сервисами приема платежей и CRM, создавать свои рассылки, внедрять на ваш сайт формы обратной связи, тесты и опросы, просматривать статистику посещений.
Плюсов у Тильды много, но и минусы тоже есть, и связаны они со специфическими особенностями коробочного IT-продукта, определенно проигрывающие индивидуальной разработке. А именно:
- ограниченный доступ к коду сайта (что становится помехой в кастомизации решения под определенные бизнес-запросы);
- отсутствие возможности реализовать сложные интеграции с сервисами, не входящих в список встроенных интеграций Тильды (например, с 1С);
- лимитированный объем хранилища данных (может стать проблемой для крупных и быстро развивающихся проектов с большим объемом данных и количеством страниц);
- проблемы в реализации на сайте какого-либо усложненного, нестандартного интерактива (все возможности упираются в представленные платформой функции);
- а также обеспечение высокого уровня безопасности и производительности (что особенно важно для проектов с большим трафиком и обилием конфиденциальных данных).
Таким образом, не любые сайты можно удачно создать на конструкторе Tilda. Поэтому, прежде чем приступить к воплощению вашего проекта в жизнь, обязательно хорошо продумайте весь необходимый будущий функционал.
Для реализации сложных задач резоннее сделать выбор в пользу кастомной разработки или другой платформы для создания сайтов, что, безусловно, потребует привлечения команды профессионалов.
Но если от сайта не требуется каких-то сверхвозможностей, то Тильда вполне подойдет. На ней оптимально создавать:
- портфолио
- промо-сайты
- блоги
- бизнес-сайты
- интернет-магазины (для малого бизнеса)
- лендинги, которые порадуют красотой и высокой конверсией.
Сколько стоит создание сайта на Tilda
Однако возможности конструктора варьируются в зависимости от выбранного тарифного плана, Тильда предлагает на выбор три: Free, Personal, Bussiness.
Тарифы Персональный и Бизнес платные, они включают в себя полный спектр функций платформы. В отличие от бесплатного тарифа, они подходят для создания сайтов с большим количеством страниц (до 500) и интернет-магазинов, требующих наличия различных интеграций и инструментов для оптимизации и продвижения. Если кратко, то Personal и Bussiness предоставляют:
- полную коллекцию блоков;
- 1 сайт до 500 страниц, 1Гб на диске;
- интеграции с 20+ сервисами сбора данных;
- возможность вставлять дополнительный html-код;
- возможность создавать email-рассылки;
- возможность подключить уникальный домен;
- возможность настраивать аналитику, совместный доступ к сайту и SEO-оптимизацию;
- персональный кабинет, ленты новостей, товарный каталог и многое другое (более подробно об этих тарифах и их наполнении написано в разделе «Тарифы» на официальном сайте).
Бизнес-тариф отличается от Персонал тем, что в нем, помимо вышеперечисленного набора возможностей, доступны еще некоторые опции: возможность экспортировать код (для быстрого переноса сайта), возможность создания до 5 сайтов с 5Гб дискового пространства, а также подключение безналичной оплаты. Personal обойдется в 500 руб./мес. или 6000 руб./год, а Bussiness будет стоить 1000 руб./мес. или 12000 руб./год, что может быть неоправданно дорого.
Но Tilda хороша тем, что предоставляет всем желающим возможность начать работу с базовым функционалом платформы и создать несложный сайт в рамках бесплатного тарифа. Это особенно актуально, когда бюджет и время жестко ограничены, а выходить в онлайн необходимо. Но прежде, чем скорее бежать в Тильду, стоит притормозить и понять, как сделать будущий сайт полезным для вашего бизнеса.
Что важно сделать до разработки сайта на Tilda
Этап 1. Маркетинговая стратегия
На этом этапе важно четко сформулировать уникальное торговое предложение, найти свою ЦА, обозначить цели проекта и список возможностей для их реализации.
Для создания стратегии нужно соблюсти три основных шага:
1) определение целевой аудитории;
2) анализ основных конкурентов;
3) установка целей и поиск действий для их достижения (непосредственно создание маркетингового плана).
После этого важно подумать, через какие каналы привлекать трафик, возможна ли оплата через сайт или он будет вести на сторонние ресурсы, а также продумать вариант повышения конверсии будущего сайта.
Этап 2. Эскиз и юзабилити
На Тильде можно пойти двумя путями. Первый путь – усложненный, подразумевает создание страниц с нуля из блоков, предложенных в библиотеке. Такой способ точно потребует создание прототипа, который можно нарисовать на бумаге или в специальном интернет-сервисе.
Второй и наиболее доступный способ – воспользоваться предложенными конструктором шаблонными страницами. Для вдохновения можно ознакомиться с разделом «Madeontilda», где представлены наглядные примеры различных выполненных на Тильде проектов.
Этап 3. Контент
Важно подготовить тексты для страниц, все фото и видеоматериалы. В идеале заранее подготовить весь контент, а затем разместить его на сайте.
Если вы занимаетесь созданием контента самостоятельно, то воспользуйтесь рекомендациями от Tilda Education:
Эксперты советуют писать короткие тексты, включающие только самую важную информацию, детали оставляя на конец. Также соблюдать информационный стиль и чистить текст от словесного сора. Нюансов очень много, если возникнут сомнения в собственных силах, лучше обратиться к опытным копирайтерам, они напишут эффективные и привлекательные тексты.
И вот когда будет продуман необходимый функционал сайта, сформировано представление о его внешнем виде, написан контент, тогда можно перейти к конструктору.
Пошаговая инструкция по созданию сайта на Тильда
К сожалению, возможности бесплатного тарифа Тильды очень сильно ограничены, и многие важные инструменты будут недоступны. Используя свободный доступ, не получится создать интернет-магазин с электронной торговлей, интеграцией с внешними сервисами, возможностью делать рассылки и многое другое, но можно сделать 1 проект с наполнением до 50 страниц контента, в распоряжении будет 50 Мб дискового пространства. Давайте наглядно разберем возможности тарифа Free.
Для начала работы с Тильдой необходимо зарегистрировать аккаунт по ссылке https://tilda.ru/registration/
Вам предложат дать название проекту, можно смело вводить любое значение в поле, эти данные видите только вы.
Далее произведем основные настройки – для этого перейдем в соответствующий раздел:
Во вкладке «Главное» укажем описание и субдомен сайта, по которому будет доступен наш проект после его публикации в сети.
Во вкладке «Шрифты и цвета» можем выбрать один из предложенных шрифтов или в режиме расширенных настроек подключить свой вариант с Google Fonts, Adobe Fonts, а также загрузить любой другой подготовленный заранее шрифт.
Выбор шрифта имеет большое значение, он придает изюминку стилю вашего сайта. Вы можете остановиться на одном шрифте или выбрать несколько, для заголовков и для текста, а также поработать с размерами, насыщенностью и цветами шрифта.
Вкладка «Главная страница» предназначена для выбора индексной страницы из перечня всех созданных в вашем проекте страниц. Подключение своего уникального домена (вкладка «Домен») доступно только на платных тарифах.
Во вкладке «Аналитика» можно будет посмотреть статистику сайта, но вот подключение счетчиков Google Analitics, Яндекс Метрики и других невозможно при бесплатном доступе.
С настройками оптимизации для поисковых систем тоже не густо – пользователи бесплатного тарифа не могут подключить https-протокол, Google search console, Яндекс Метрику, делать редиректы и многие другие полезные вещи, зато могут искать битые ссылки.
Возможность экспорта кода также не входит в перечень доступных опций, поэтому вкладку «Экспорт» пропускаем. Впрочем, как и вкладку «Формы», ведь подключение сервисов приема данных и форм возможно только на платных тарифах. Однако формы на страницах присутствовать могут (но есть небольшой нюанс, о котором напишем позже), просто данные приходить будут в раздел «Заявки» и храниться там 30 дней.
На бесплатном тарифе также нельзя:
- ограничить доступ к определенным страницам (вкладка «Ограничить доступ»),
- подключить сервисы для приема платежей (вкладка «Платежные системы»),
- создать личные кабинеты для клиентов и партнеров (вкладка «Личный кабинет»),
- организовать совместный доступ к сайту (вкладка «Сотрудники»),
- загрузить favicon,
- отключить лейбла Тильды,
- подключить пользовательские css-стили,
- создать пользовательскую страницу 404,
- подключить дополнительные модули (включая каталог товаров).
Во вкладке «Еще» возможно лишь настроить язык сайта и небольшой ряд дополнительных функций:
В целом, это все, что находится в разделе настроек. Мы видим, что доступ к большинству важных функций запрещен при использовании бесплатного тарифа. Все, что смогли, настроили, переходим к созданию страниц. Для этого вернемся в панель управления и нажмем на кнопку «Создать новую страницу».
Пользователю предлагается начать работу с пустой страницей или выбрать уже готовый вариант, адаптировав его под свои цели. Команда Тильды спроектировала разные варианты шаблонов и сгруппировала их по тематическому содержанию. Предлагаются следующие категории:
Список весьма обширный – мы рассмотрим, как работать с блоками и настройками страницы на примере одного из шаблонов.
Любая открывшаяся страница будет состоять из набора готовых блоков с проработанным дизайном и композицией. Шаблон страницы компании категории «Бизнес» состоит из хедера, «Обложки» с заголовком сайта, текстовых блоков с описанием, перечнем услуг, списком преимуществ, также блока отзывов, формы обратной связи, раздела с контактной информацией и галереи медиа-материалов.
Для завершенности картины не хватает только футера, но его легко добавить на страницу из библиотеки блоков, но сначала разберемся как работать с блоками.
При наведении на каждый блок появляется панель редактирования данного блока.
В нашем шаблоне в шапке сайта уже подготовлено место для логотипа, меню и ссылок на социальные сети. Чтобы редактировать содержание, нажмем на кнопку «Контент». В открывшейся панели можно редактировать список пунктов меню, прикреплять к ним ссылки как на другую страницу (в случае многостраничного сайта), так и на определенный блок лендинга. Также здесь можно загрузить логотип, добавить ссылки на мессенджеры и кнопки.
Это меню редактирования для блока шапки, но абсолютно аналогичным образом (во вкладке «Контент») меняется наполнение для любых других блоков на странице, содержимое вкладки варьируется от типа редактируемого блока.
У блоков из разных смысловых категорий также имеется свой набор опций во вкладке «Настройки». Рассмотрим на примере блока с заголовком некоторые из них.
Вызвав меню настроек, мы можем редактировать параметры шрифта, внешний вид кнопок, высоту и ширину блока, выбирается seo-тег для заголовка, корректировать отступы, настраивать анимацию и позиционирование фонового изображения/видео, а также здесь есть возможность конвертировать блок в Zero для кардинального изменения дизайна:
Самая левая кнопка панели редактирования вызывает выпадающий список блоков из других модулей – при наведении на блок появляется его миниатюрный облик:
Кнопки в верхнем правом углу позволяют передвинуть блок, копировать, удалить или скрыть его:
Для удобства работы с блоками в правом верхнем углу экрана во вкладке «Еще» можно активировать пункт «Блоки на странице», который откроет наглядную карту блоков с порядком их расположения на странице:
Чтобы добавить новый блок, нужно нажать на плюсик под или над каким-то блоком:
Откроется библиотека блоков со множеством разделов. Согласно условиям тарифа, в распоряжении пользователя дан весьма ограниченный набор блоков, разместить на странице можем только доступный.
Увидеть недоступные для добавления блоки очень просто. Но есть вероятность столкнуться с проблемой, когда в выбранном шаблоне страницы уже присутствует какой-то блок из списка «запрещенных». В таком случае блок будет присутствовать на странице, но лишь в том виде, в каком его задумал создатель.
На редактируемой нами странице это блоки с формой и отзывами, внешний вид которых изменить не выйдет, можно лишь довольствоваться их наличием, либо отказаться от них.
Когда буду внесены все желаемые изменения и добавлены недостающие блоки, можно перейти к настройкам страницы, кликнув на пункт «Настройки» в правом верхнем углу.
Здесь можно задать заголовок страницы, ее описание и адрес.
В разделе «Бейджик» добавьте изображение для превью страницы. Настройте отображение сниппета во вкладках «Соцсети» и «SEO». Дублировать, копировать или перенести страницу можно в разделе «Действия».
Во вкладке «Дополнительно» есть много полезных функций, пользоваться которыми бесплатно нельзя. Например, если возникнет потребность сделать для каких-либо данных семантическую разметку schema.org, то добавить такой код на страницу не получится.
Произведя все доступные настройки, можно посмотреть страницу глазами пользователей (кнопка «Предпросмотр»), а затем и опубликовать, нажав на одноименную кнопку.
Заключение
Тильда дает своим пользователям прекрасную возможность запустить лендинг или небольшой информационный сайт о бизнесе абсолютно бесплатно и быстро, а интуитивно понятный интерфейс значительно упрощает процесс создания сайта.
Резюмируя наш краткий экскурс, можно сказать, что у Тильды действительно много плюсов, однако, если говорить о выборе бесплатного тарифа, то эти достоинства во многом нивелируются за счет весьма ограниченных возможностей.
Кроме того, создать рентабельный сайт — это не просто «поиграть в конструктор», это еще и проработать маркетинговую стратегию, и спроектировать прототип, и сгенерировать контент. Практика показывает, что уже на первом этапе самостоятельной разработки часто могут возникнуть затруднения в сборе данных в одну стройную концепцию.
В таком случае не стоит полагаться на «авось», лучше обратиться за помощью к нашим специалистам. В рамках услуги «Создание сайтов и лендингов на Тильде под ключ» специалисты тщательно проработают ваши запросы, проведут анализ конкурентов, сформулируют цели сайта и уникальное торговое предложение, напишут крутой контент, представят прототип страниц и индивидуальный дизайн.
А затем сверстают, настроят интеграции, протестируют, запустят проект, а также обеспечат сопровождение проекта после сдачи. Полный набор! Ведь грамотный подход с первых этапов – залог успеха и процветания вашего бизнеса.
© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна