Стоит ли проходить курс Skillbox «Дизайнер сайтов на Tilda»: о чем он и кому подойдет

Всем привет!

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

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

Давайте посмотрим, из чего состоит курс от Skillbox, что есть в каждом предмете, чего от него можно ждать, а чего не стоит.

Вот содержание, которое университет показывает на странице описания:

• Знакомство с Тильдой: основы блокировки и работы с контентом
• Начните с Тильды
• Дизайн сайта
• Чехлы и слайдеры
• Меню
• Формы и кнопки
• ЗЕРО-блок: базовая анимация и мобильная версия
• ZERO-блок: пошаговая анимация
• Пользовательский код
• Блоги и новости, лонгриды
• Интернет-магазин
• Мобильная версия (индивидуальная раскладка)
• Аналитика
• Принять данные формы, CRM
• Подготовка к запуску
• Работа с клиентами

Пройдемся по всем пунктам, посмотрим, что внутри.

Вы можете сами протестировать курс — Skillbox дает бесплатный доступ к первым 4 модулям!

Содержание курса

Знакомство с Tilda: основные блоки и работа с контентом

Большую часть курса ведет Святослав Трипольский, генеральный директор веб-студии We Make Digital. В первом блоке он объясняет, что такое Тильда вообще, какие задачи можно решать с ее помощью, а также какие блоки контента у нее есть и как вообще проходит процесс их настройки.

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

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

Какие возможности для работы с контентом предлагает Тильда

Несколько блоков контента

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

Начинаем работу с Tilda

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

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

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

Создаем шапку для страницы — общую для всех страниц — и обложку.

Учимся работать с папками, куда разложим однотипные страницы сайта

Оформление сайта

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

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

В рамках темы «Дизайн» Святослав анализирует следующие моменты:

• Титулы
• Сепараторы
• Отступ
• Шрифты и типограф
• Текстовый редактор
• Галереи
• Иконки
• Подготовка и обработка изображений для страницы
• Блочная анимация

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

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

Работа с заголовками

Что такое типограф и как в нем форматировать тексты

Процесс выбора подходящего значка

создание реального сайта фитнес-клуба для клиента

Обложки и слайдеры

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

И ДЗ — создать пару страниц, где все это будет реализовано.

Выберите тип обложки или слайдера

Научитесь настраивать и создавать градиент на обложке

Изготовление чехла для фитнес-клуба

Меню

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

Настроить полноценное меню для сайта

Оформляем «Вкладки» и привязываем к ним блоки страниц

Проверяем, как наше меню выглядит на разных мобильных телефонах

Настройка меню на матч-проекте — сайт для тренировочных клубов

Формы и кнопки

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

Настройка полей формы захвата

Создать опрос

Создание викторины и варианты ответов

Настройка типа запросов для отправки на почту или в CRM систему

Создаем форму для тренировочного клуба

ZERO-блок

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

Работа с сеткой нулевых блоков

Настройка эффекта параллакса

Как заставить нулевой блок правильно отображаться на мобильных устройствах

Создание двухэтапной анимации

А теперь все то же самое, но на сайте тренажерного зала

Кастомный код

Если вы хотите добавить на свою страницу карту, календарь, виджет, код счетчика, пользовательские стили CSS, вам нужно знать, как вставить пользовательский код в Tilda. Об этом и целом блоке — здесь подробно рассмотрен процесс добавления календаря на сайт, комментариев, пользовательских стилей.

Куда и как вставить пользовательский код

Работа со сторонним календарем для его дальнейшей интеграции на сайт

Вот что получилось после интеграции

Работа с пользовательскими стилями CSS

Вводим календарь в расписание на сайте спортзала

Блоги и новости, лонгриды

Очень интересная и полезная часть — не о технических моментах, а о подходах к визуальному оформлению разных типов контента. Спикер блока – Филипп Соломин, руководитель студии OKTÂEDER.

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

Выбор правильного шаблона блога

Какие есть способы организовать навигацию на странице

Красивые способы оформления статьи

Как сделать заманчивую шапку для лонгрида, чтобы он читал больше

Интернет-магазин

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

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

Из чего состоит стандартный интернет-магазин

Создать каталог продукции

Делаем открытку из отдельного продукта

Создать форму заказа

Мобильная версия (адаптивная вёрстка)

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

На что обратить внимание при разработке мобильной версии сайта

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

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

Аналитика

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

В блоке Филипп рассказывает о различных способах анализа происходящего на сайте — встроенных функциях Тильды по отслеживанию приложений и их источников, подключении сторонних сервисов (Google Analytics и Яндекс.Метрика) и использовании их нестандартных возможностей, размещение пикселя ВК — и ФБ (то есть как отследить аккаунты Вконтакте и Фейсбук, которые пришли на ваш сайт, чтобы потом ловить их с рекламой).

Тильда умеет считать входящие заявки со страницы

Тильда также понимает источники посещений

А Яндекс.Метрика видит, куда пользователь кликал на странице, как он ее прокручивал, и вообще позволяет внимательно следить за его поведением

Захватываем пользователей ВК на нашем сайте, затем в самом ВК настраиваем для них ретаргетинг — захват рекламы

Приём данных форм, CRM

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

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

Способы отзыва и обработки заявок

Так работает встроенная CRM Тильды

Добавлен запрос в Google Sheets

Подготовка к запуску

Как признается автор блока Филипп, это та часть работы — нудная, но необходимая — которая будет занимать до 20% времени от всей работы над сайтом.

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

О чем нужно помнить перед запуском веб-сайта

Настраиваем грамотное и красивое отображение сайта в социальных сетях

Редиректы — что нужно для того, чтобы страница правильно отображалась и ранжировалась в поиске

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

Работа с клиентами

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

Как рассчитать стоимость часа вашей работы

Что нужно сделать ДО того, как вы приступите к разработке самого сайта

Мое мнение о курсе: плюсы и минусы

После прохождения курса я хорошо понимала, кому он подойдет, а кому не стоит.

Сам Skillbox на странице курса очень точно указывает, для кого предназначен этот курс и чему вы научитесь в процессе:

Но также хочу подчеркнуть, чтобы у вас не было неоправданных ожиданий от курса — курс технический, он о том, как работать с конкретным конструктором сайтов, Тильдой.

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

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