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

Публикуем сайт

По умолчанию платформа присваивает новому сайту буквенно-цифровой адрес вида project1234567.tilda.ws. Но мы хотим красивую ссылку, поэтому нажимаем на My site в левом верхнем углу редактора.

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

Страница шаблонов сайта

Переходим в настройки сайта.

Кнопка «Настройки сайта»

Указываем нужное название ссылки шдля публикации. Она будет отображаться в адресной строке браузера, и по ней можно зайти на ваш сайт. Мы не привязывали к сайту свой домен второго уровня (например, skillbox.ru), поэтому сделаем красивый домен третьего уровня. В моём примере ссылка на сайт будет webisamurai.tilda.ws.

Меняем имя ссылки субдомена

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

1. Со страницы шаблонов проекта — с помощью кнопки «Публиковать».

Публикация сайта со страницы рабочих шаблонов

2. В режиме редактирования страницы — с помощью кнопки «Опубликовать».

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

Публикуем. Ждём подтверждения от «Тильды».

Подтверждение публикации и активная ссылка сайта

Переходим по ссылке, нажав на кнопку «Открыть страницу», и проверяем, всё ли работает

Обращаем внимание на адресную строку браузера

Проверяем ссылку в адресной строке

Всё работает корректно, а по ссылке можно посмотреть результат этого урока.

Где искать заказы на разработку сайтов

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

Биржи фриланса. Это основной источник для новичков. Здесь множество простых и малобюджетных заявок, которые отлично подходят для получения опыта и наработки портфолио. Вот некоторые из бирж: Freelance.Ru, Kwork.Ru, FL.Ru. Конкуренция на них достаточно высокая, однако и заказов много, поэтому работы хватит на всех, а если вы предложите более низкую цену – то наверняка получите свои первые заказы. После того как наработаете портфолио и хорошую репутацию, искать клиентов станет проще. 

Сайты с вакансиями. Здесь может быть два метода поиска клиентов: смотреть вакансии на поиск веб-дизайнера или собирать базу предпринимателей, чтобы рассылать им коммерческое предложение. Второй метод менее эффективен, но все-таки и его нужно иметь в виду. Примеры таких сайтов: HH.ru, RosRabota.Ru, Zarplata.Ru и т.д.

Группа ВК Тильды. Сейчас в ней состоит более 50 тыс. пользователей. В нее заходят не только веб-дизайнеры, но и потенциальные заказчики. 

Ваш сайт, блог, аккаунт в соцсетях. Вы можете вести свой интернет-ресурс и продвигать его. Если это сайт, то поможет контекстная реклама Яндекс и Google. Если это соцсети – таргетированная реклама. 

Тематические группы ВК

Обратите внимание на группы, посвященные малому бизнесу. Там собираются индивидуальные предприниматели

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

Сарафанное радио — лучший источник клиентов. А для этого потребуется качественно выполнять заказы. Не стесняйтесь просить клиентов рассказать о вас или оставить отзыв о вашей работе. 

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

Tilda Expert. Это раздел на самом сайте Тильда представляет собой каталог дизайнеров и систему заказов, позволяющую исполнителю и заказчику найти друг друга. Вы можете зарегистрироваться в Тильде экспертом, создать свое портфолио и управлять им. Плюс заключается в том, что сервис не берет комиссию  и проценты. Когда вы регистрируетесь как тильда-эксперт и выкладываете свое портфолио, ваш профиль оценивается специалистами по пятибалльной шкале. Например, вы получаете 4 балла. Далее вам доступны проекты с той ценой, которые отвечают требованиям к специалистам с 4 баллами. Чем выше оценка – тем дороже и сложнее проекты. К системе подключается ранжирование, поэтому новичку сложнее получить заказ таким образом. Однако попробовать стоит.

Тарифные планы 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 руб./месяц + домен в подарок.

Как начать зарабатывать на создании сайтов

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

Шаг 1. Определяем специализацию

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

После этого определитесь с целевой аудиторией. 

Шаг 2. Получаем навыки и опыт

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

Шаг 3. Собираем портфолио

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

Шаг 5. Развиваемся и зарабатываем больше

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

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

Несколько советов тем, кто хочет зарабатывать на Тильде

1. Для начала обязательно ознакомьтесь с обучающим материалом, который представляет сама платформа. Есть как полезные статьи, так и видео-уроки (раздел «Обучение»). Можете пройти дальнейшее обучение – и подобрать курс по веб-дизайну, чтобы разобраться в нюансах работы с Тильдой. 

2. Тренируйте насмотренность, смотрите на сайты от крутых веб-дизайнеров, вдохновляйтесь. Можно подписаться на инстаграмы: @tildapublishing, @interfacely, @dailywebdesign

3. Создайте хорошее портфолио с качественными работы по той специализации, в которой планируете развиваться. Выберите 5-10 проектов. Не стоит показывать все работы – как правило, заказчик оценивает уровень специалиста по самому слабому проекту. Если только начинаете путь веб-дизайнера, сделайте 3-5 бесплатных проектов, но с полной свободой, чтобы показать свой уровень. 

4. На Тильде есть партнерская программа – ее суть в том, что вам дается специальная ссылка, по которой регистрируется другой пользователь. Когда он впервые вносит оплату за тариф, то платформа дарит месяц бесплатного пользования и вам, и рефералу. Это выгодно использовать, когда делаешь сайты на заказ и регистрируешь аккаунт заказчика. 

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

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

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

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

Добавляем блок «Меню»

Нажимаем на Main page и возвращаемся к редактированию шаблона. В пункте «Меню» выбираем шаблон «Фиксированное меню», обозначенный как ME204 (в сером овале в левом нижнем углу). Раньше он был недоступен — ведь мы пользовались бесплатным тарифом.

После активации нового тарифа стали доступны все шаблоны

Нажимаем и смотрим, что получилось.

Установка блока меню

Мы добавили на страницу блок с меню, теперь нужно поменять его пункты и вписать своё название вместо CompanyName. Для этого наводим курсор мыши на блок и нажимаем появившуюся кнопку «Контент».

Кнопка редактирования контента

Добавляем нужные пункты меню, а рядом проставляем внутренние (якорные) ссылки через знак # — это нужно для удобного перехода между блоками главной страницы сайта. У нас на странице пока ещё ничего нет. Но мы заранее подготовили список блоков — вот из них и сделаем якорные ссылки. Портфолио станет #portfolio, услуги — #services, и далее по такому же принципу.

Меняем пункты меню и прописываем якорные ссылки

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

Меняем логотип

Здесь же (в самом низу) надо удалить языковые версии Ru и En — они не понадобятся.

Убираем языковые версии шаблона с помощью кнопки «Контент»

Мы настроили первый блок — «Меню». Теперь добавим следующий блок «Обо мне».

Добавляем блок «Обо мне»

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

Добавление блока с помощью «+»

Слева появится знакомая нам библиотека блоков. Находим пункт «Обложка» и выбираем обложку с фотографией автора с номером CR31.

Выбираем обложку

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

Редактируем контент блока «Обо мне»

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

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

Включаем режим предпросмотра

Промежуточный результат.

Смотрим результат в новой вкладке

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

Найден баг — меню в режиме редактирования и предпросмотра отображается по-разному

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

Нужно вернуться в режим редактирования. Жмём в левом нижнем углу соответствующую кнопку.

Кнопка возврата в режим редактирования

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

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

Заходим в настройки и устанавливаем цвет фона меню

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

Меняем цвет блока меню на белый

Проверяем результат в режиме предпросмотра.

Меню теперь видно

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

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

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

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

Дизайнер Тильды должен уметь: 

• Создавать удобные для пользователя интерфейсы – нужны навыки UX-дизайна;

• Работать с популярными визуальными редакторами: Photoshop, CorelDraw и т.д.;

• Проводить A/B-тестирования сайтов;

• Применять знания по интернет-маркетингу и теорию цвета; 

• Знать технические ограничения платформы, чтобы четко понимать, какой проект реально создать на Тильде, а какой – нет.