Ну что, здороваться не будем. Начнем 8-й урок. У нас очень много дел. Переходим в наш план landing page. Мы вот это сделали. Я надеюсь, ты справился с заданием и нашел все иконки, которые нужны были. Переходим вот к этому пункту.

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

В ссылке к уроку ты найдешь файлы, которые можешь сюда вставить. Что у нас в плане? Фотографии с производства, сотрудников компании. Давай посмотрим. «Загрузить файл». Идем на рабочий стол. Вот у меня 8-й урок. И мы тут выбираем, что мы хотим. Вот, пожалуйста, как будто с производства у нас, вот это, например, шеф-повар, и еще что-нибудь с производства. Как будто бы это о нашей компании. Мы здесь копируем. Ctrl+A — Ctrl+C. Ctrl+A — выделяет весь текст. Ctrl+V. Удаляем, что нам не нравится. И выделяем текст, который нам нужно перенести. Удаляем опять. Исправляем ошибки. «Наши дизайнеры и технологи делают каждый торт неповторимым, вкусным и полностью натуральным. Мы отказались от искусственных красителей и добавок, поэтому наши торты имеют неброские пастельные и натуральные оттенки и хранятся меньше, чем обычно». Это об обычных тортах, а мы же про мороженое. Хотя, оставим, у нас такой странный landing page, написано про мороженое, но торты везде обычные. Но мне важно, чтобы у тебя просто получился landing page, а дальше ты сам разобрался, как сделать остальное. Поэтому не придираемся к контенту, продолжаем обучение.

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

Копируем текст. Ctrl+A — Ctrl+C. «Факты о нас». Ctrl+A — Ctrl+C. Ctrl+A — Ctrl+V.

Оставляй, что тебе нравится. Я оставлю серенькое, а ты оставишь то, что тебе нравится.

Этот пункт мы сделали.

Следующий пункт какой? «Наши сертификаты и награды», «Наши клиенты».

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

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

«Наши клиенты». Ctrl+A — Ctrl+C. Ctrl+A — Ctrl+V. С большой буквы, не забываем. А вот это убираем.

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

А здесь наши сертификаты и награды. Давай посмотрим, какой блок нам может подойти к сертификатам и наградам.

«Галерея» может подойти? Изображения в три колонки. Ну, нет.

«Слайдер картинок» — вот это может подойти.

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

Это без наполнения. Прокручиваем. Ты на нее жмешь и можешь прокрутить. Посмотреть. По ссылке сюда вставишь сертификаты. У нас в «Контенте», если ты посмотришь сертификаты, сейчас мы вот это с тобой удалим, «Загрузить файлы». Где у нас тут 8-й урок? Они все разные, в обычной жизни тебе так их и дадут, потому что сертификаты все разные. В принципе, смотрится ОК. Вот все сертификаты можно посмотреть. Чего не хватает? Заголовка не хватает. Где заголовок можно найти? Черный крестик — «Заголовок». Вот тебе список заголовков. Давай посмотрим, как у нас выглядит заголовок вот здесь, например. Лучше, наверное, от традиций не отступать, мы можем его вот здесь дублировать и переместить вот сюда.

Смотрим — «Наши сертификаты и награды». Убираем, делаем красиво. Давай напишем: «Более 10 наград за продукцию!».

Вот здесь бы какой-нибудь разграничитель поставить. Непонятно, что тут? Разграничители тоже можно сделать. Все это делается через тот же самый черный крестик. Есть такая штука, которая называется «Разделитель». Только разделитель везде должен быть одинаковый. Если ты где-то один разделитель, допустим вот такой, использовал, то потом вот такой разделитель использовать нельзя. Нужно запомнить еще и разделитель. Вот он — наш разделитель. Давай посмотрим, как он смотрится, действительно ли он разделяет? Действительно, разделяет. Отлично.

Перейдем обратно. У нас еще несколько пунктов, которые нужно доделать.

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

Можем вот так оформить предложение. «Услуги» посмотрим. «Карточки с картинкой и текстом в 2 колонки», кстати, тоже может подойти нам. Смотри, какое хорошее решение. Давай-ка, Ctrl+A — Ctrl+C, Ctrl+A — Ctrl+V. «Специальное предложение!» — «Агентствам!», это тоже агентствам, но надо уточнять, если для физических лиц, то мы это вот сюда. «Заказ свыше 3000 рублей» на заголовок пойдет. «15 гелиевых шариков в подарок!», «Доставка бесплатна», «Свечи на торт — бесплатно».

Тут скопировался стиль слоя, поэтому нам нужно зайти в «Контент», в «Карточки» и стиль этого слоя убрать. Видишь — «Несортированный список» — маркеры мы с тобой убираем, либо мы всем троим выставляем маркеры. «Для агентств сотрудничество — 10%», здесь можно попросить заказчика дописать какие-то интересные предложения: «скидка на торты, доставка для ваших клиентов в костюме супергероя или розового мишки». Здесь тоже получается два, нужно также оформить. Давай посмотрим еще раз: «Контент» — «Карточки», вот тут тоже надо маркированный список сделать. Отлично! Только картинки нужны. Давай представим, что агентствам праздничные картинки какие-то нужны, что-то связанное с праздником. Загружаем картинку, например вот такую. Вот она высветилась. А сюда, давай какое-нибудь торжество детское, например вот такую штучку.

«Специальное предложение!» — давай «Агентствам и физическим лицам».

Специальное предложение отработали.

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

Давай «Людмила»: Ctrl+A — Ctrl+C. Смотри, у нас даже фотографии можно не искать, действительно, Людмила. Кто у нас еще? Ренат. И давай вместо Иришки, чтобы не искать фотографию, пусть будет какой-нибудь человек — Илья вместо Иришки.

Вот эти штуки удобно использовать, если ты указываешь социальные сети. Зайди в «Карточки» и посмотри, где это располагается. Вот оно. В описании можно указывать, например, социальные сети: VK/user. Чтобы ссылку сделать, вот сюда жмешь, и «Вставить ссылку», у тебя получается ссылочка. Посмотрим. Например, давай VK кого-нибудь возьмем. Обычно, конечно, никто не щелкает и не ходит проверять социальные сети, но лучше это располагать. Давай на Vandrouki как раз будем Ctrl+C. Еще раз, как привязать ссылку? Выделяешь, щелкаешь, «Вставить ссылку», Ctrl+V. Тут можно текст поменять, цвет ссылки, цвет линии сделать. «Сохранить и закрыть». Проверяем, как работает. Все, загружено.

Здесь ссылки на соцсети могут быть и, соответственно, их отзывы, этих людей. Ctrl+A — Ctrl+C. Давай Ренатику напишем — Ctrl+C, Ctrl+A — Ctrl+V. Ctrl+C. Ctrl+V.

Убираем лишнее, а то у нас блок увеличивается.

Это не «Наши клиенты любят нас», а «Отзывы».

Что делать, если отзывов больше. Просто плоди карточки. Карточки плодятся очень легко. Делается это так: «Дублировать», «Сохранить и закрыть», появился человек.

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

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

«Отзывы».

Это универсальные карточки. Зайди в «Контент», посмотри — это те же самые универсальные карточки, мы с ними работали, поэтому ничего страшного в них нет. Ctrl+C — скопируем. Ctrl+A – Ctrl+V — готово.

Здесь можно либо убрать это совсем, давай уберем. Либо ссылку сделать. Но мы уберем.

Теперь, если ты будешь больше отзывов брать, то тут просто каруселечка такая, она будет длиннее. Это сделано для тех, кто любит щелкать на стрелочки.

И остался у нас последний пункт с тобой — это «Закажи торт прямо сейчас и получи 2 бутылки детского шампанского и 3 пачки бенгальских огней в подарок!», «Форма», «Контакты — телефоны, адреса и т. д.». Вообще, это два блока, потому что контакты, телефоны, адрес — это обычно футер, а форма — это форма. Поэтому смотрим.

Форма тут есть прямо. «Форма и кнопка» называется. Кнопки сначала идут, потом формы идут. Форма может быть и так, но лучше бы ее на фоне сделать. Форма может быть и вот такой, и вот такой, и вот такой, разной, можно и вот так красивенько сделать. Давай выберем вот такую.

«Закажи торт прямо сейчас»: Ctrl+C — это заголовок. Ctrl+A — Ctrl+V. «И получи 2 бутылки» – Ctrl+С – Ctrl+V. «И получи 2 бутылки детского шампанского» давай на следующую строчку перенесем. «И 3 пачки бенгальских огней в подарок!». И здесь человек все это дело оставляет и присылает нам на почту. Опять мы столкнулись с тобой с настройкой форм. Поэтому мы идем в «Контент» и смотрим. Заголовок и описание мы с тобой настроили.

«Обложка» нам такая не подходит, нам нужна другая. Нам нужен наш торт. Вот такую картинку мы загрузили. Все отлично. E-mail может быть — это обязательное поле. Телефон — это не Phone — это «Телефон». Имя — не name, а «Имя», мы же говорим по-русски. «Сохранить и закрыть».

И кнопочка тоже должна быть не такой. А что на ней должно быть написано? «Отправить».

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

Сообщение: «Спасибо! Мы свяжемся с вами в ближайшее время!». Это сообщение будет показываться, когда человек называет кнопку.

«Адрес страницы в случае успеха» — не будем.

И вот здесь — «Вы согласны», помнишь этот текст? Давай скопируем его. Где он у нас? Вот это. Ctrl+С. «Контент» — Ctrl+V. «Сохранить и закрыть».

И у нас осталось вот это — это футер. Точно так же. Где у нас «Футер»? «Подвал» он здесь называется. Вот так это может выглядеть. Ссылки на социальные сети я не рекомендую делать на landing page, потому что человек может просто уйти с твоего landing page, не оставив никаких контактов, потому что кто-то там что-то написал, позвонил, всё, человек пропал. Нам нужно что-то такое здесь — это пункты меню, на которые человек переходит, если вдруг он хочет туда перейти. Пунктов меню не должно быть много, особенно на landing page. Давай 4 пункта меню. «Контент» — «Пункты меню»: «О нас», «О тортах», «Цены», «Спецпредложение». Все остальное нам не надо, удаляем. Давай вместо «Спецпредложения» (слишком долго) будет «Акция».

Здесь вот это — «Торты из мороженого в Москве». Пусть будет так.

Сделать-то мы сделали. Все отлично. Контакты у нас есть, прямо вот «Контакты». Это делается вот так. Это может являться и футером в том числе.

Нам нужно настроить меню. Это важнее, чем контакты.

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

У каждого блока есть свое ID. Где посмотреть ID? ID смотрится в «Настройках». Заходи в «Настройки», самый последний, смело листай, это ID. У каждого блока есть ID, даже у разделителя есть ID. Ты копируешь его и идешь в «Меню». Где у нас «О нас»? «Контент» — «Пункты меню» — «О нас» — Ctrl+V. «Сохранить и закрыть». Давай посмотрим как сработает. «Опубликовать».

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

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

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

Вот здесь не хватает кнопочки. Как понять, что здесь не хватает кнопочки? После каждого продающего текста, а это продающий текст — «Специальное предложение!», после этого заинтересованные люди захотят купить, у них должна быть на виду кнопка, кроме вот этой. Эта кнопка всегда статична, она не перемещается. Еще одна должна быть. Где найти эту кнопку?

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

Мы идем в «Контент» — «Карточки» — мы идем вот сюда — «Название кнопки»: «Заказать». «Сохранить и закрыть». Вот у нас появились такие недокнопки. Мне они не очень нравятся, но они функциональны.

«Кнопки» — «Ссылка со стрелкой», «Стандартная кнопка» может быть. Вот такая стандартная кнопка.

Помним, как настраивать кнопки? Где у нас кнопочка хоть одна?

Вот эту хотя бы взять. Нам нужен такой же цвет и такое же закругление краев. Давай посмотрим. «Настройки» — «Кнопка» — «Стиль кнопки». Копируем цвет — Ctrl+C, переходим вот сюда и нам нужно залезть в «Настройки» — «Кнопки» — «Цвет фона» — Ctrl+V, «Цвет текста» — белый. «Сохранить». Вот они поменялись. А теперь скругление — «Радиус скругления бордюра» — 50. Вот такие кнопочки.

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

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

Теперь кнопочки надо настроить, они же должны на что-то вести.

Вспоминаем, на что вести? У нас есть pop-up форма, которая всплывает, и pop-up форма находится вот здесь, и это ее ID. Тебе нужно его скопировать — Ctrl+C, найти еще раз «Кнопки» и вставить ссылку на эту форму. «Контент» — «Карточки». Где у нас кнопочка? Ctrl+V. «Сохранить и закрыть».

Эти кнопки мы настроили. Отлично. Но что делать, если нам, например, эти две кнопки не нужны? А у нас вот эта есть, и нужно, чтобы она одна работала. Давай посмотрим, что можно сделать с этой кнопочкой? Первое, что можно сделать, подложку у нее поменять, чтобы она была такая же серая. Идем в «Настройки», смотрим фон. Фон вот такой — Ctrl+C. Идем сюда за фоном — «Настройки» — где фон? — Ctrl+V. Теперь он тоже серый, этот фон.

Великолепно, только кнопка очень далеко отстоит от наших карточек, вот сюда бы ее поместить. Что такое, что случилось и как это исправить? Помнишь, я тебе говорила, вот здесь есть отступы. Чтобы проверить, есть ли отступы на самом деле, ты идешь в «Настройки» и смотришь, есть они или нет. Вот они — отступы. Отступ сверху — 3 line (90 пикселей), а мы делаем ноль. Вот у нас поднялась кнопочка, но не совсем высоко. Нам бы повыше. Где посмотреть? У нас этот блок закончился, мы уже отступов никаких не видим, у нас уже следующий блок начинается, значит отступы есть здесь. Давай проверим. Где у нас отступы? Вот они. Отступ снизу 5,5, давай сделаем 90 пикселей. «Сохранить». Вот у нас кнопочка подошла ближе к нашим карточкам, и кажется теперь, что это единый блок.

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

«Настройки», чтобы взять цвет кнопки. Вот у нас «Кнопка», мы копируем — Ctrl+C. «Настройки» — «Цвет текста», «Цвет фона» — Ctrl+V, текст должен быть белым. Радиус скругления бордюра — 50. «Сохранить и закрыть».

Надо убрать еще обводку. «Настройки», где обводка, вот «Обводка», ноль вот здесь ставишь, и обводка исчезает.

Вместо Lets go, что должно быть? «Заказать». Идем в «Контент», здесь пишем «Заказать», а вместо вот этого должна быть ссылка на наш pop-up. Давай пойдем посмотрим, где она. Как наш pop-up называется? Вот так — Ctrl+C. Идем в «Кнопку» обратно. Где она? Столько много кнопок, что я запуталась. Идем в «Контент» и, пожалуйста, сюда делаем ссылку на наш pop-up. «Сохранить и закрыть». Давай посмотрим. «Предпросмотр». Перейдем к нашему блоку и проверим: эта кнопочка работает, эта кнопочка — работает и эта кнопочка тоже работает.

В твоем распоряжении понять, какие кнопки ты хочешь оставить, какие — убрать.

Кстати, вот эту кнопку тоже надо настроить. Почему она оранжевая? Все остальные розовые, а она — оранжевая? Давай посмотрим еще раз.

«Настройки» — «Кнопки» — копируем цвет. Идем в «Настройки» — «Кнопки» — вставляем цвет, вставляем скругление. «Сохранить и закрыть». Теперь другое дело.

Я тебе расскажу кое-что про SEO — это те вещи, которые ты должен обязательно выполнять, чтобы наш сайт хорошо индексировался в поисковиках.

Заходим в «Настройки», и у нас здесь есть такая вещь, которая называется «SEO. Тег для заголовка». И он тут у нас не задан. На первой странице «SEO. Тег для заголовка» должен быть Н1 — это то, как поисковик понимает, о чем здесь идет речь. Он видит — Н1 заголовок — это главный текст, по нему поисковик понимает, что это «Про натуральные торты из мороженого». Вот здесь тоже этот заголовок надо настроить. Так как Н1 у нас один, страница одна, вот этот заголовочек будет Н2. Мы идем в «Настройки», в «SEO. Тег для заголовка» — Н2. «Сохранить и закрыть». Здесь тоже — «Настройки» — Н2. «Сохранить и закрыть».

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

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

Ну что же, поздравляю тебя с первым landing page.

Немножко расскажу еще про базовую анимацию, я уже затрагивала эту тему. Но в любом случае у нас есть вот такой пункт — «Анимация», и здесь есть, что ты можешь анимировать. Никогда не анимируй больше, чем 2 объекта, это слишком много. И старайся вообще по минимуму анимацию делать. И чтобы она была, если мы говорим про одинаковые объекты, — это заголовок например, — чтобы она была одинаковая.

Если предыдущий заголовок у тебя падал вниз. Посмотрим: «Настройка» — «Анимация» — нет, прозрачность сверху. Значит, и этот заголовок должен быть «Прозрачность сверху». Давай-ка: «Настройки» — «Анимация» — «Заголовок блока» — «Прозрачность сверху». Почему? Потому что это однородные объекты, они должны быть примерно в одном стиле сделаны, чтобы сохранять целостность. Давай посмотрим, как у нас это происходит. Здесь подзаголовок наверх подъехал, а здесь мы подзаголовок не анимировали. Давай его тоже анимируем. Как тут, еще раз? «Прозрачность снизу», значит, и там должна быть что? «Прозрачность снизу». «Подзаголовок» — «Анимация описания блока» — «Прозрачность снизу». «Кнопка блока» — не будем ничего делать.

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

На следующем уроке мы проходим zero-блок анимации, и вот там поговорим про анимацию получше.