Меню

Как работать с конструктором Tilda

Как работать с конструктором Tilda

Как работать с конструктором Tilda

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

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

Почему выбирают Tilda

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

  • ZeroBlock. Одна из важнейших особенностей, которая как раз отдаляет Тильду от конкурентов. Благодаря ей можно создавать собственные блоки, включающие в себя 9 типов элементов (тексты, фигуры, изображения, кнопки и так далее), слои и направляющие, формы приема данных и многое другое.
  • Невероятная коллекция блоков. Из готовых решений можно найти такие блоки, как обложки, изображения, меню, формы и кнопки, плитки и ссылки, преимущества, этапы и многое другое. Подобные блоки – это отличный способ создать сайт, даже если вы не разбираетесь в дизайне.
  • Интернет-магазин. Тильда позволяет создавать не просто сайты-визитки или лендинги, но и целые интернет-магазины. Виджеты корзины, настройка формы заказа, платежные системы, каталог товаров, промокоды и акции. Можно найти весь арсенал для создания крупного магазина.
  • Ведение блога. Чтобы создать сайт для блога, ранее нам приходилось нанимать специалиста на WordPress или другой подобной CMS. Сейчас же все можно сделать самому: Тильда полностью адаптирована под подобные задачи.
  • Форма сбора данных и управление базой данных клиентов. Без сбора заявок сейчас не обходится практически ни один сайт. Создать подобный функционал на Тильде можно всего в несколько кликов.

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

Что умеет Тильда

Чтобы понять, на что способна Tilda, рекомендую посмотреть на готовые сайты, созданные с помощью данного конструктора.

Вот так может выглядеть сайт-портфолио:

Сайт-портфолио на Тильде

Лендинг для продажи интерактивных роботов:

Пример Лэндинга на Тильде

Лендинг для проката автомобилей:

Сайты на Тильде

Лендинг для продажи элитной недвижимости:

Пример сайта на Тильде

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

Посмотреть больше сайтов на Тильде можно здесь.

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

Владельцам аккаунтов доступно 3 тарифных плана – Free, Personal и Business.

Free

Free – бесплатный, активируется автоматически после регистрации учетной записи. Он вполне может сгодиться для создания сайта, но совсем простого. Подобный тариф разрешает пользоваться Zero-Block, однако в нем нет опции подключения собственного доменного имени, SSL-сертификата, аналитики сайта и многого другого. Тариф Free – это отличный способ разобраться в работе конструктора.

Лимиты тарифа: максимальное количество проектов – 1, количество страниц для каждого проекта – 50, объем загруженных файлов – 50 Мб.

Personal

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

Лимиты тарифа: максимальное количество проектов – 1, количество страниц для каждого проекта – 500, объем загруженных файлов – 1 Гб.

Стоимость тарифа: 750 руб./месяц + домен в подарок.

Business

Business – профессиональный тариф, который предназначен для размещения нескольких сайтов. Он позволяет на одном аккаунте создать 5 и более сайтов – для каждого отведено определенное количество страниц, свой домен и так далее.

Тарифный план также имеет разновидности – это Business 10, 15, 20 и 30. Число указывает на количество сайтов. Например, в тарифе Business 15 разрешено создавать до 15 сайтов.

Еще одно отличие от предыдущих тарифов – возможность экспорта исходного кода. Благодаря этому можно создать сайт на Тильде и перенести его на свой хостинг. Подойдет для тех, кто хочет подредактировать HTML-код и разместить его на другом хостинге.

Лимиты тарифа: максимальное количество проектов – от 5 до 30, количество страниц для каждого проекта – 500, объем загруженных файлов – 1 Гб.

Стоимость тарифа: от 1250 руб./месяц + домен в подарок.

Как убрать надпись «Made on Tilda»

Стоит заметить, что при ежемесячной оплате любого тарифа остается одна неприятная особенность – надпись «Made on Tilda» в подвале сайта.

Как убрать надпись Made on Tilda

Надпись исчезает, если оплатить тариф Personal или Business на год. Также вы можете подключить тарифный план Business, а затем экспортировать весь код и удалить в нем блок HTML-кода с надписью – такой вариант подойдет только для тех, кто собирается размещать сайт на другом хостинге.

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

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

Приступим к практическим навыкам – в данном разделе мы научимся создавать полноценный сайт как с помощью обычных блоков, так и с помощью Zero-Block. Для примера возьмем небольшой сайт-визитку, включающий в себя такие блоки, как «Главный экран», «Информация о компании» и «Контакты». Но перед этим зарегистрируемся на сервисе.

  1. Открываем официальный сайт и на главной странице нажимаем «Создать сайт бесплатно».Регистрация на Тильде
  2. Указываем данные для регистрации и жмем «Зарегистрироваться». Обратите внимание на электронную почту – проверьте ее корректность, она потребуется для подтверждения аккаунта.Регистрация учетной записи на Тильде
  3. В результате мы попадаем в личный кабинет, где перед нами отображается модальное окно с просьбой создать новый сайт. Укажем для него название, например, «Мой первый сайт на Тильде», и нажмем «Создать».Как создать сайт на Тильде
  4. Перед тем как перейти к редактированию нашего сайта, давайте подключим тариф Personal, который бесплатно предоставляется на 2 недели. Благодаря ему у нас будет доступ ко всему функционалу Тильды, а это значит, что мы сможем создать практически любой сайт. Переходим для этого в раздел «Тарифы и оплата».Тарифные планы Тильда
  5. В нижней части выбираем «Активировать».Как получить Tilda Personal бесплатно на две недели
  6. Далее нас информируют о том, что все прошло успешно – здесь просто жмем «Продолжить».Тариф Personal на Тильде как получить бесплатно

Готово! Мы создали сайт и активировали тариф Personal. Теперь можно переходить к редактированию будущего веб-ресурса, подключению домена и т.д. Первым делом наполним наш сайт теми блоками, что мы решили создать.

  1. После того как мы создали новый сайт, перед нами отобразилось главное окно с доступными сайтами – в нашем случае это «Мой первый сайт на Тильде». Приступим к его редактированию – нажмем «Создать новую страницу».Как работать с конструктором Tilda
  2. Здесь перед нами открывается доступ к многочисленному числу различных шаблонов. В ходе статьи мы не будем на них останавливаться, можете посмотреть их самостоятельно. С их помощью можно всего в несколько шагов сделать сайт выбранной тематики, но из этого выходят довольно типичные, шаблонные решения. Поэтому создадим сайт с нуля через блок «Пустая страница».Как создать пустой сайт на Тильде
  3. Для начала выбираем «Все блоки».Как на Тильде добавить новый блок
  4. В отобразившемся меню для нас открывается доступ к различным блокам. Каждый блок включает в себя необходимое содержимое для сайта – например, изображение, описание проекта, преимущества и многое другое. Нас интересует блок «Обложка», предназначенный для создания главного экрана. Открыв его, мы увидим множество различных вариантов – для примера возьмем блок под названием «CR19A».Как создать сайт-визитку на Тильде
  5. В результате перед нами отобразится выбранная главная страница. Давайте ее немного подредактируем – первым делом изменим заголовок. Чтобы это сделать, просто кликнем по нему левой кнопкой и изменим текстовое описание. Обратите внимание на верхнее меню, которое появляется при выборе текста – в нем можно изменить начертание, цвет и размер шрифта, прикрепить ссылку и даже указать межстрочное расстояние. Поиграйтесь с параметрами и подберите наилучший вариант.Как в Тильде изменить содержимое блока
  6. Также изменим название кнопки – это происходит в разделе «Контент». Чтобы включить отображение этой кнопки, достаточно навести курсор мыши на экран редактирования.Как в Тильде изменить название кнопки
  7. Пролистываем вниз и указываем название для кнопки, например, «Узнать подробнее». Также добавляем ссылку, которая будет открываться при нажатии на кнопку. В завершение не забываем нажать на кнопку «Сохранить и закрыть». Как в Тильде поменять название и цвет кнопки
  8. Также давайте поменяем цвет кнопки – сделать это можно в разделе «Настройки».Как работать с конструктором Тильда
  9. Следующим шагом нажимаем «Кнопки» и выбираем «Цвет фона». В результате отобразится панель цветов – она предназначена для изменения цвета. Для примера возьмем бирюзовый, вы же можете указать любой другой.Как поменять цвет кнопки в Тильде
  10. Вот такая у нас получилась главная страница:Как работать с Тильдой
  11. Перейдем к следующему блоку – «Информация о компании». Его уже создадим с помощью окна редактирования Zero-Block, который позволяет располагать элементы блока так, как вам захочется. Чтобы добавить данный блок, внизу страницы воспользуемся опцией «Все блоки» и выберем «Нулевой блок».Как в Тильде добавить Zero Block
  12. Блок создан, но пока что он наполнен ненужной нам информацией. Отредактируем ее – для этого воспользуемся опцией «Редактировать блок».Редактирование Zero Block на Тильде
  13. Мы попадаем в самое сердце Тильды – окно редактирования зиро-блока, в котором можно менять контент и адаптировать его. Первым делом избавимся от старого контента – для этого выделим все объекты комбинацией клавиш «CTRL+A» и нажмем клавишу «Delete». В результате блок станет пустым: Как создать страницу о компании в Тильде
  14. Так как мы решаемся в этом блоке рассказать о компании, нужно создать соответствующий заголовок. Не будем долго думать и назовем его «О компании». Чтобы добавить заголовок, нажимаем в верхнем левом углу на кнопку в виде плюса и выбираем «Add Text».Как в Тильде добавить заголовок
  15. Вводим заголовок («О компании») и нажимаем на кнопку «Settings», расположенную в нижнем правом углу.Как создать заголовок в Zero Block Тильда
  16. В отобразившемся окне предоставляется доступ к модификации текстового элемента. Зададим в верхней части расположение по центру, укажем размер шрифта в строке «SIZE» и добавим толщину «WEIGHT».Как изменить текстовый блок в Тильде
  17. Следующим шагом нам нужно написать что-нибудь о компании. Для примера возьмем простой рыбный текст.Как добавить текст в Zero Block Tilda
  18. Последним действием добавляем картинку, на которой будет показан дружный коллектив компании. Для этого в верхнем правом углу нажимаем на плюсик и выбираем «Add Image».Как добавить изображение в Zero Block Tilda
  19. Размещаем блок справа от текста и увеличиваем его размер – просто кликаем по нему и тянем за нижний левый ползунок. Аналогичным образом изменяем ширину текстового блока. После этого переносим свое изображение в добавленный блок: Как в Tilda создать страницу о компании
  20. В завершение жмем «SAVE», а затем «CLOSE».Как создать Zero Block на Тильде
  21. Аналогичным образом добавим еще один блок, но уже не Zero, а простой, из раздела «Контакты».Как создать сайт-визитку на Тильде
  22. Редактируем блок так, как мы это делали в самом начале. Изменяем заголовок на «Наши контакты» и прописываем дополнительную информацию. Как добавить блок контакты в Тильде
  23. Готово! Наш сайт-визитка создан, осталось разместить его в интернете. Для этого в верхней части жмем «Опубликовать» и задаем доменное имя, например, myfirstsiteki. Затем нажимаем «Сохранить и продолжить».Как задать адрес для сайта на Тильде
  24. После этого нас попросят верифицировать email. Достаточно зайти на почту и найти письмо от Tilda. В случае с телефоном – жмем на кнопку «Подтвердить телефон» и вводим код из сообщения. Как только это будет сделано, сайт опубликуется и будет доступен по ссылке.Как опубликовать страницу на Тильде
  25. Что получилось:Создание продающего сайта на Тильде
Читайте также:  Почему происходит перезагрузка брелка

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

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

Как настроить сайт на Tilda

Те функции, с помощью которых мы создали сайт, – это не все, что может Тильда. Есть еще один раздел редактирования, в котором можно поменять различные настройки веб-сайта. Чтобы его открыть, достаточно перейти в раздел «Мои сайты», выбрать «Редактировать сайт» и затем нажать «Настройки сайта».Настройка сайта на Тильде

Здесь находятся все внутренности сайта: настройка шрифтов, цвета и главной страницы, аналитика сайта, добавление собственного доменного имени, подключение SEO-сервисов и многое другое.Как изменить домен на Тильде

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

Заключение

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

Источник



Конструктор сайтов Tilda: подробный обзор и инструкция по настройке интеграций

Максим Волошин

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

Что такое конструктор «Тильда» и для чего он нужен

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

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

Tilda подходит для создания разных типов сайтов. Среди них:

  • лендинги;
  • интернет-магазины;
  • сайты компаний;
  • корпоративные и личные блоги;
  • промосайты;
  • сайты-визитки.

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

Основные возможности Tilda

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

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Блоки Tilda


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

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Шаблоны Tilda


Инструменты для интернет-продаж. В конструкторе можно создать сайт для приема денег через популярные платежные системы. Такой вариант подойдет, например, для заработка на вебинарах. Более того, система позволяет собрать полноценный магазин с карточками товаров. Заказы будут отображаться во встроенной CRM прямо в личном кабинете Tilda.

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Шаблоны для интернет-магазинов


Настройки домена. Система позволяет бесплатно зарегистрировать домен вида «имя-сайта.tilda.ws». На платных тарифах к сайтам также можно подключать собственные домены вроде «имя-сайта.com». При этом первый год использования домена входит в подписку, далее его придется оплачивать отдельно.

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Настройки домена


SEO-инструменты. Вы можете оптимизировать сайты для продвижения в поисковых системах. Tilda позволяет прописывать мета-теги, выбирать теги заголовков, настраивать URL страниц, а также проверять отображение в поисковиках с помощью интеграций с Google Search и «Яндекс.Вебмастер». При желании сайт можно сделать невидимым для поисковых систем.

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | SEO-инструменты


Аналитика. Вы можете следить за посещаемостью и поведением пользователей на сайте. Конструктор отображает такие показатели, как число посетителей и просмотров, конверсии, количество заходов с мобильных устройств, процент дочитывания страниц, число заявок и так далее. Для более подробной аналитики можно подключать сторонние системы Google Analytics и «Яндекс.Метрику».

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Аналитика в Tilda


Конструктор писем. В Tilda можно собирать не только сайты, но и письма для почтовых рассылок. Принцип тот же: выбираете шаблон, редактируете блоки, сохраняете. Система позволяет отправлять письма прямо из личного кабинета, но для этого к нему нужно подключить один из сервисов email-рассылок: MailChimp, UniSender или SendGrid.

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Конструктор писем


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

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Продвинутый редактор

Интеграции Tilda с другими системами

Как вы уже знаете, Tilda из коробки поддерживает интеграции с различными сервисами: платежными системами, аналитическими инструментами, сервисами email-рассылок и так далее.

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

  • CRM. Подключайте свой магазин к amoCRM, «Битрикс24», retailCRM, U-ON.Travel, «МойСклад», «Клиентикс», GetCourse, Odoo, YClients, Intrum, Creatio или «Мой склад». В результате заявки будут автоматически попадать из формы вашего сайта в выбранную систему управления заказами.
  • Мессенджеры. Хотите получать уведомления о новых заказах на сайте прямо в любимом мессенджере? Просто подключите форму своего магазина к Viber, Telegram или Slack.
  • Сервисы SMS-рассылок. Интеграция Tilda с одним из сервисов рассылок позволит наладить автоматическую отправку уведомлений с подтверждением заказа. Заполнив форму на сайте, клиент получит соответствующее SMS. Коннектор поддерживает TurboSMS, AlphaSMS, Intel Telecom, SMS.RU, «SMS-Центр», SMS Club и прочие сервисы рассылок.
  • Системы управления проектами. Если вы принимаете через сайт заявки на услуги, можете подключить к нему Trello, Meistertask, Worksection, «Мегаплан» или Planfix. В таком случае каждая заявка будет автоматически добавляться в выбранный планировщик в виде новой задачи.
  • Онлайн-таблицы. После интеграции с Google Sheets все оставленные посетителями данные будут автоматически копироваться из форм в «Гугл таблицу». К примеру, если вы принимаете через сайт заказы, то сможете использовать Google Sheets как CRM.
Читайте также:  Инструкция к Стиральной машиной узкой Daewoo DWD MH1011

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

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

Как настроить интеграцию: на примере Tilda и Google Sheets

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

Для наглядности разберем процесс по шагам. В качестве примера подключим к Tilda Google Sheets, чтобы данные из форм автоматически попадали в таблицу. Это позволит нам вести учет всех заказов в одной удобной системе.

Итак, регистрируемся на сайте ApiX-Drive. Заходим в личный кабинет и кликаем «Создать связь».

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Создаем связь

После этого приступаем к подключению.

Подключение формы Tilda

Выбираем Tilda в качестве системы-источника данных.

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Выбираем источник

Выбираем действие, которое должен совершать коннектор: «Получить данные из форм».

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Настраиваем коннектор для загрузки данных из форм

Кликаем «Подключить аккаунт «Tilda».

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Подключаем аккаунт Tilda

Копируем URL для приема данных — он поможет подключить нужную форму.

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Копируем URL

Открываем в новой вкладке личный кабинет Tilda. Заходим в настройки сайта, который хотим подключить к Google Sheets, открываем раздел «Формы» и выбираем Webhook. Затем вставляем только что скопированный URL и нажимаем «Добавить».

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Вставляем скопированный URL

Добавляем приемщик данных ко всем формам.

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Подключаемся ко всем формам

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

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Применяем изменения

Открываем наш сайт и отправляем через форму любые данные.

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Отправляем тестовые данные

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

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Настраиваем фильтр

На экране появятся данные, которые мы отправили в качестве тестового заказа. Переходим к следующему этапу.

» title=»Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Проверяем прием загруженных данных
» data-description=»Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Проверяем прием загруженных данных
»/>

Подключение таблицы Google Sheets

Кликаем «Начать настройку Приема Данных».

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Переходим к настройке приемника

Выбираем Google Sheets в качестве приемника данных.

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Выбираем таблицу приемником данных

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

» title=»Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Настраиваем коннектор для отправки данных
» data-description=»Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Настраиваем коннектор для отправки данных
»/>

Подключаем аккаунт Google Sheets.

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Подключаем таблицу

Выбираем таблицу (файл) и лист, в которые ApiX-Drive будет вставлять заказы. Затем выбираем, какие именно данные по каждому заказу будут попадать в Google Sheets. Для этого кликаем по нужным полям и выбираем подходящие типы данных. Каждое поле соответствует колонке в нашей таблице. Лишние поля оставляем пустыми.

» title=»Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Выбираем куда именно и какие данные будет передавать коннектор
» data-description=»Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Выбираем куда именно и какие данные будет передавать коннектор
»/>

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

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Проверяем пример отправленных данных

» title=»Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | При необходимости вносим правки
» data-description=»Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | При необходимости вносим правки
»/>

Включаем обновление, чтобы разрешить передачу данных.

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Запускаем связь

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

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Настраиваем интервал передачи данных

Примерно так переданные заказы будут отображаться в Google Sheets:

Конструктор сайтов Tilda: обзор и интеграция с Google Sheets | Пример переданных данных в таблице

На этом все. ApiX-Drive начнет передавать данные в соответствии с заданными параметрами.

Источник

Как сделать сайт на Тильде: пошаговая инструкция

Автор статей и SMM-специалист Svoemedia Ирина Сорогина рассказала о первом опыте создания сайта на Тильде ― о том, с какими сложностями столкнулась и сколько времени на это ушло.

Как сделать сайт на Тильде: пошаговая инструкция

Я занимаюсь контентом, но захотела сделать лендинг онлайн-курса на Тильде. Чтобы сайт получился сильным, я расспросила об этапах создания сайта коллегу Антона Чикова — главного дизайнера оперативной группы Svoemedia. Советы Антона включила в этот материал.

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

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

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

У многостраничников и интернет-магазинов своя структура, а у лендингов ― традиционная: оффер на первом экране, описание компании или продукта, призыв к действию, преимущества, отзывы и контакты.

Сайты на Тильде состоят из блоков и страниц. Один блок — один экран.

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

Как сделать сайт на Тильде: пошаговая инструкция

Количество блоков на сайте неограниченно, всё зависит от задач. Чем сложнее задача, тем больше блоков нужно: для сайта пейнтбольного клуба хватит 6‒7 блоков, а продавцу буровых установок может не хватить пятнадцати.

Подготовка контента для сайта

Дальше я подготовила текст и фотографии. Вот несколько советов по подготовке текста:

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

В блоге Тильды есть статья, которая поможет написать полезный текст для сайта.

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

Используйте свои иллюстрации или покупайте на стоках. Мы берём фото с Энвато — недорого и с коммерческой лицензией. Обратите внимание на оптимальный размер фото для Тильды — 1680px по большей стороне.
Если у вас много иллюстраций на сайте, сожмите их. Иначе у пользователя с нестабильным интернетом сайт не загрузится и он уйдёт. Сжимать фото можно на бесплатном сервисе Optimizilla.

Прототипирование

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

Как сделать сайт на Тильде: пошаговая инструкция

В Svoemedia делают прототипы и согласовывают проекты сайтов в Фигме: в ней удобно работать командой и не приходится менять дизайн в Тильде.

Шрифты, цвета, иконки

Для начинающих самый простой способ подобрать шрифт и цвет — подсмотреть на других сайтах по схожей тематике. Несколько ресурсов, где можно вдохновиться: One Page Love, Lapa Ninja, Land-Book.

Если у вас уже есть корпоративные цвета и шрифт, используйте их. Шрифт и цвета можно посмотреть с помощью расширения для Google Chrome CSS Pepper.

Как сделать сайт на Тильде: пошаговая инструкция

Лучше не использовать на сайте больше 2‒3 цветов. Один цвет — основной, остальные — акцентные.

Советуем не использовать больше двух разных шрифтов. Лучше пользоваться шрифтовыми парами, уже подобранными дизайнерами Тильды. Забудьте о курсиве и шрифте Roboto — он «состарит» сайт».

Как сделать сайт на Тильде: пошаговая инструкция

Я не стала искать иконки, решила ограничиться стандартными иконками Тильды. Мои коллеги-дизайнеры для поиска иконок пользуются сайтами Flaticon или Thenounproject. На первом сайте иконки бесплатные, их можно скачать в любом цвете и в формате SVG. На втором сайте — хорошие подборки, можно найти несколько разных иконок в едином стиле.

Как сделать сайт на Тильде: пошаговая инструкциякурс

Введение
в цифровой дизайн

  • Научитесь с нуля создавать рекламную графику, макет сайтов и анимацию для видеопроектов
  • Получите готовые дизайн-работы в своё портфолио
  • Разберёте востребованные задачи в digital: от вёрстки баннеров до оформления соцсетей

Вёрстка в Тильде

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

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

Вот несколько блоков моего лендинга:

Как сделать сайт на Тильде: пошаговая инструкция

Как сделать сайт на Тильде: пошаговая инструкция

Как сделать сайт на Тильде: пошаговая инструкция

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

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

Мысленно проведите две линии слева и справа ― элементы сайта не должны выходить за эти линии.

Отрегулировать ширину блока можно в его настройках. Можно установить ширину 12 колонок.

Как сделать сайт на Тильде: пошаговая инструкция

Чтобы сайт на Тильде не выглядел шаблонным, его можно кастомизировать. Есть несколько простых приёмов, которые помогут сделать сайт непохожим на все остальные:

  • Загрузите видео на обложку вместо фото. Это просто сделать, и сайт будет выглядеть эффектно.
  • Подключите анимацию к блоку. Когда на сайте всё движется, информацию тяжело воспринимать, поэтому лучше с ней не перебарщивать.
  • Разбавьте стандартные блоки zero-блоками. С их помощью картинку или текст располагают в определённом месте, а не там, где они размещены в стандартных блоках. Но потом этот блок придётся отдельно адаптировать для мобильных устройств.
Читайте также:  Контроллер Polair EVCO EVKB21 с датчиком

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

Действия перед публикацией сайта

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

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

  • Проверить ссылки — в правильное ли место они ведут.
  • Проверить, как сайт выглядит на мобильных устройствах, если вы использовали zero-блоки.
  • Настроить и протестировать формы приёма данных.
  • Сделать базовое SEO. П рописать заголовки: H1, H2, H3 и так далее. Заголовок H1 содержать ключевой запрос, по которому будут искать ваш сайт. Также нужно прописать title и description ― их видно в поисковике и когда отправляете ссылку на свой сайт.
    Тильда позволяет прописать разные варианты заголовка и описания для отображения в поисковой выдаче и при шеринге в социальных сетях.
  • Добавить документы о защите персональных данных, если собираете информацию о пользователях: имя, e-mail, телефон и другое.
  • Добавить фавикон и бейджик для соцсетей.
  • Подключить домен.
  • Включить индексацию в настройках сайта.
  • Проверить оптимизацию для поисковиков через Тильда-панель вебмастера.

Что в итоге

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

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

Создание лендинга заняло 2 дня: один на подготовку контента и прототип и день на вёрстку в Тильде, оптимизацию и тестирование.

Источник

Как создать сайт на Тильда: 8 простых шагов

Как создать сайт на Тильда

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

Шаг 1. Регистрация

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

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

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

Шаг 2. Знакомство с Tilda

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

Вводим наименование проекта

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

Знакомство с Tilda — выберите подходящий макет

Исследуйте сервис и выберите подходящий макет сайта на «Тильде».

Шаг 3. Выбор шаблона

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

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

На скрине пример сайта-визитки для фрилансера (копирайтера)

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

При прокручивании страницы появляется информация: навыках, услугах, реализованных проектах

История заканчивается предоставлением контактов, ссылками на соцсети:

Контактов, ссылками на соцсети

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

Шаг 4. Основные настройки

Несмотря на то, что Tilda предлагает готовые решения, подумайте, какие блоки хотите видеть на вашем сайте. Пользователю (или заказчику) должно быть удобно, интересно и полезно посещать ваш ресурс. Сайт должен располагать к сотрудничеству с вами. Чтобы откорректировать настройки, находим слово «Ещё» и нажимаем на стрелочку рядом с ним.

Находим слово «Ещё» и нажимаем на стрелочку рядом с ним

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

Указываем основные настройки

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

Настройка стиля и цвета шрифта

Возвращаемся в верхнее меню, нажимаем на слово «Ещё», затем на «Настройку страницы».

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

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

Во вкладке «Бейджик» можно добавить картинку, которая будет представлять ваш сайт на других ресурсах. Например, на Фейсбуке.

Отображение в Фейсбуке

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

Меню «Настройки» на каждом блоке

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

Вносим изменения и нажимать на кнопку «Сохранить»

Шаг 5. Изменение контента

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

Возможности редактирования контента модуля

Старайтесь не писать большое количество текста и используйте маркированные списки.

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

Не открывая меню редактируем контент модуля

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

Меню управления модулем

При желании страницу можно дополнять блоками. Для этого нажмите на знак плюса:

Добавляем на страницу новый блок

И вызовите соответствующее меню:

Библиотека блоков

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

Нажмите на «Предпросмотр»

Дополнительные опции Tilda

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

  • подключение WordPress. Эта функция может заинтересовать пользователей, у которых есть ресурс на WordPress и кто хочет подключить Tilda для красивого оформления текстов. Например, сторителлингов, лонгридов. Их можно превратить в настоящий лендинг и эффектно презентовать читателям. Выбирайте в конструкторе Tilda шаблон «Рассказ», подключайте немного воображения — и создавайте необычное оформление ваших работ!

Дополнительные опции Tilda

Чтобы использовать эту возможность, нужно оплатить бизнес-тариф.

  • создание писем для e-mail рассылки. Чтобы добавить в рассылку нотку креатива и сделать её удобной для чтения, используйте также одну из возможностей Tilda. Для этого нужно подключить немного фантазии и нажать на «Конструктор писем». Плюс сервис предлагает целое руководство по созданию e-mail маркетинга на Tilda.

Дополнительные опции Tilda — создание писем для e-mail рассылки

  • подключение внешних сервисов. Tilda позволяет интегрировать систему приёма платежей, Трелло, CRM и другие внешние службы. Добавление этой опции возможно через путь «Мои сайты» → «Название проекта» → «Настройки сайта» → «Формы» либо «Платёжные системы».

Дополнительные опции Tilda — подключение внешних сервисов

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

Дополнительные опции Tilda — генерация промокодов

Опции, которые доступны бесплатно:

Подключаем тариф Personal Подключаем тариф Personal

Сколько нужно заплатить по разным тарифам можно посмотреть на скриншоте:

Тарифы Tilda

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

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

Выводы

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

Чтобы профессионально освоить работу с Tilda, создание сайтов самостоятельно, можно пройти онлайн-обучение:

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

Опытные менторы преподают материал:

  • увлекательно;
  • понятно;
  • с закреплением на практике.

По окончании обучения созданию сайта на «Тильде» выдаётся диплом. Отдельный приятный бонус — гарантия трудоустройства.

Кому удалось освоить Tilda без особых навыков? Для какой цели создавали странички?

Источник