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

Итак, что же такое landing page? Landing page — это одна страница. Это может быть одна страница на сайте, или это может быть просто одностраничный сайт.

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

Landing page бывает длинным, бывает коротким. А, в принципе, я сейчас покажу.

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

Акция сразу. Как работает приложение.

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

Если этого недостаточно, они приводят всякие доказательства, почему этот GPS-ошейник хорош: влагозащита, без абонентской платы и т. д.
Как можно обезопасить?
Для чего этот продукт, они объясняют тем, кто не понимает, что это.

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

Вот тут видно, из чего эта штука состоит. Тут можно посмотреть про комплектацию, размеры и цвета.

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

Дальше — условия доставки и оплаты.

Отзывы обязательно. Несмотря на то что их никто особо не читает, или читает, но не особо сильно верит, в любом случае, они, как must have, должны быть.

Вопросы.

И везде вот эти кнопки, которые невозможно не заметить: «Задать вопрос», «Перезвонить». Везде кнопки, которые можно нажать. Кроме вот этих, все остальные кнопки конверсионные. Видишь, сразу заказываешь ошейник. Телефон, e-mail пошли. «Заказать ошейник». «Перезвонить мне» — перезвонят тебе. Задать вопрос можно.

Тут все понятно.

Следующий landing page вот такой нашла.

Тоже все понятно сразу. Про фундаменты. Сколько это стоит, картинка фундамента, как связаться. Как тут сэкономить можно. Получить предварительную смету. Тут ты оставляешь свои телефоны.

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

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

Вот здесь — бла-бла-бла, здесь всякие плюсы, здесь опять получить, опять эта кнопка.

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

Опять «Рассчитать стоимость». Видишь, что бы не нажал, одно и то же всплывает.

И, в общем, все об одной и той же вещи.

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

Не хватает тебе теории, вот тебе фотки, какие бывают.

Забронируйте.

В общем, этот landing page заточен на то, чтобы ты нажал кнопку хоть раз. Всплывет это окно, плюс еще с хорошим предложением — «сэкономьте до 20%». Телефон оставляешь, тебе перезванивают.

Я, так как мне не хочется рисовать эту схему, возьму ее прямо с Tilda. На Tilda будем работать, на Tilda будем брать эти знания.

Стандартный, функциональный landing выглядит таким образом.

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

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

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

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

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

И дальше идут блоки доверия. Это обычно отзывы, какие-то гарантии. Это может быть, например, список людей, которые у вас уже купили, компаний крупных. Если у вас будет стоять в партнерах какой-нибудь РБК, «Ростелеком», какой-нибудь Кремль, правительство Москвы, уже будет казаться весомой компания.

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

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

И дальше идет целевое действие и контакты.

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

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

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

Вот так у нас выглядит типичный функциональный landing page.

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

Дальше идет рассказ о проекте.

Дальше — выгоды, понятные выгоды.

Дальше — блоки доверия: почему мы самые крутые.

И потом — целевое действие.

Итак, начинаем.

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

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

У меня аккаунт на Tilda уже есть, поэтому мне регистрация не нужна. Но, в принципе, сама регистрация достаточно легкая. Я больше чем уверена, что все с этим могут справиться.

Итак, я вхожу сюда. В твоем случае здесь все будет пусто. В моем случае, так как я уже что-то делала, у меня здесь уже что-то есть. В любом случае вот эти две кнопки будут неизменными: первая — создать новый сайт; вторая — создать рассылку. В рамках курса про одностраничники, про landing page, мы «Создать рассылку» не делаем. Это где-нибудь попозже. А нам важно создать новый сайт.

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

Так как я делаю этот проект в рамках обучения по Tilda, я просто напишу здесь «Обучение». «Обучение Tilda», тем более у меня тут подсказочка есть. «Создать».

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

Вот кнопочка «Настройки сайта», мы сюда жмем.

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

Подумала я и решила, что мой landing page будет про мороженое. Твой — тоже.
Rusicecream. Отлично. Название сайта Rusicecream.

Описание сайта — натуральное мороженое.

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

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

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

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

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

И вообще, не все тут нужно заполнять, если ты делаешь landing page.

Но! Шрифты и цвета — нужно.

Заполняем их. Ты переходишь на закладочку «Шрифты и цвета». И вот такое у нас тут дело по умолчанию.

Здесь важно выбрать шрифтовую пару. Что такое шрифтовая пара? Шрифтовая пара — это шрифт заголовка и шрифт текста. Здесь, вот в этих горошинках, ты можешь посмотреть, как выглядит шрифтовая пара. Как будет выглядеть твой текст, когда он будет на сайте.

Существуют шрифты с засечками. Засечки — это вот эти маленькие полосочки.
Есть шрифты без засечек. Они выглядят вот так.

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

Когда ты выбираешь шрифт, нужно понимать, что каждый шрифт несет свой характер, свое настроение сайту.

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

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

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

Допустим, мы выбрали вот это. Вот это нам нравится. Нажимаешь кнопочку «Выбрать». Выбрала.

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

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

Тут насыщенность и размер, и цвета. Здесь — можно выбирать цвета.

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

Итак, заголовки у нас будут вот такие. Текст будет почти черный, но не черный. Вот такой.

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

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

Background color мы не трогаем. Зачем нам это надо?

Сохраняем изменения.

Главную страницу (закладку) мы использовали бы, если бы у нас был многостраничный сайт. Но так как у нас одностраничник, у нас эта закладочка не задействована.

Домен, если бы мы подключали, мы бы сюда его ввели.

Аналитика — это не для нас, это для маркетологов. Кто будет за тобой этот сайт смотреть, тот пусть ее и делает.

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

«Шапка и подвал» не надо.

«Платежные системы» — это потому, что прямо с Tilda можно платить.

«Действия»: передать сайт или удалить сайт. Передать сайт – это, например, если ты дизайнер и постоянно делаешь сайты на Tilda, а потом ты говоришь своему заказчику: «Оплачивайте Tilda сами». Потому что Tilda стоит денег: 500 рублей в месяц, если один сайт. И, например, ты сделал дизайн и заказчику понравилось, и теперь заказчик должен платить. И через «Передать сайт на другой аккаунт» ты можешь это сделать.

Также можешь ограничить доступ людям разным.

Личный кабинет сделать. Тебе это тоже не надо.

Как я говорю, тут половину не надо из того, что нам надо для практики.

А вот это нужно. Мы потом еще к этому подойдем, потому что повторение — мать учения, мы этим воспользуемся.

Мы будем здесь загружать Favicon. Что это такое? Если ты обратишь внимание на самые верхние закладки, ты увидишь, что здесь есть кино. Я смотрела кино, здесь есть «Игра престолов». Favicon с какой-то кнопочкой, что это кинотеатр. Это то, что мы до сих пор на Tilda находимся, у меня две закладки по Tilda. И что-то я искала по брендам. И конкретно по «Картье». И тут Google стоит значок.

Favicon — это 16 на 16 пикселей, маленькая картиночка, которая репрезентует твой сайт. Это важно, если сейчас у меня мало закладок открыто, но если много закладок, когда закладка может всего лишь вот такой уголочек занимать, и по этому Favicon можно найти твой сайт. Это очень важно, потому что без Favicon это выглядит немного некрасиво. Поэтому Favicon мы с тобой создадим, мы здесь его будем загружать.

Что важно знать?

У Tilda есть лэйбл-платформа. Она автоматическая, это можно отменить, только если Tilda оплачена на год вперед. Если она не оплачена на год вперед, Tilda оставляет за собой право после всего твоего сайта в самом низу, после подвала, делать такую маленькую полосочку, на которой написано, что это сделано на Tilda. Made on Tilda. Или что-то в этом роде.

У лэйбла может быть черный, белый или серый цвет.

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

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

И так далее.

Вот это мы трогать не будем.

Когда мы все заполнили — «Сохранить изменения», «Закрыть».

Мы проделали с тобой эту работу. Мы на этом остановимся.

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

Пока!