Приветствую тебя на третьем уроке!

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

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

Заходим в наш аккаунт. У тебя здесь будет только Rusicecream. Я захожу в Rusicecream. У тебя уже есть два landing page, которые мы сделали по шаблонам. Теперь нам нужно начать играть по-взрослому. Мы создаем новую страницу. И создаем новую страницу — вот такую чистенькую беленькую. Выбираем. Великолепно.

А теперь внимание! Обложка.

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

Я выключилась снова, чтобы показать тебе и не отвлекать внимание на себя. Смотри, у обложки, как и у любого элемента, вот здесь есть название. Для обложки оно начинается CR01, 02, 04. И посмотри, каждая обложка представляет собой разный набор элементов. Каждая обложка подразумевает под собой разные функции.

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

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

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

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

У нас отсчет времени еще вот такой есть.

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

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

На бэкграунде этой обложки может быть jpg-иллюстрация, т. е. растровая иллюстрация. Это может быть jpg, gif, png. Либо это может быть векторная иллюстрация. Векторная — значит svg. Если мы говорим про svg, мы выбираем файл, мы лепим нашу картинку, главное, чтобы она по композиции совпадала, загружаем ее, и при любом ресайзе, т. е. что вот такой большой у нас экран, что у нас маленький экран, картинка сохраняет свои свойства, она быстро грузится и все с ней отлично.

Сейчас покажу. Но это еще и анимация программная. Но вот видишь, я увеличила насколько и ничего не меняется. Вот это и есть svg.

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

Вот тоже landing page. Понятно, что здесь анимация, но анимация тоже векторная. Если ты посмотришь: я приближаю, и у нас никакого пикселя нет. Вот это и есть векторная иллюстрация, которая может быть на landing page, вместо обычного jpg.

Если мы говорим про jpg. Например, мы скачиваем оригинальный файл с Unsplash. Unsplash дает обычно оригинальные файлы, фотографии 5000 пикселей на 3000 пикселей. Важно понимать, что такие фотографии будут грузиться очень долго, особенно на каких-нибудь мобильниках или планшетах. Поэтому любая картинка, которую мы загружаем, должна быть адаптирована для интернета. Что это значит? По размеру она не должна в ширину превышать 1920 пикселей. А в длину — 1080. Где мы готовим эти картинки? Мы готовим их в Photoshop.

Тебе при адаптации картинки к интернету нужно добиться ее разрешения 75 dpi, по длине не больше 1920 пикселей, по высоте — не больше 1080 пикселей. Это то, какой файл будет подходить под нашу обложку.

Мы начинаем от теории к практике.

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

Вот у нас есть «Бриф клиента». Потом у нас есть «План LP».

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

Мы с тобой вот этот этап как будто бы прошли, но когда ты составляешь landing page, либо сначала это делает менеджер проекта, лучше, чтобы у тебя по окнам был план: что, о чем будет написано на каждой странице, поэкранно. Мысли поэкранно. На первом экране — это, на втором — то.

У нас есть план landing page стандартный. То, о чем мы на предыдущем уроке говорили, — стандартный план landing page.

Сначала что, потом — утверждение, к концу — целевое действие.

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

Сейчас наша задача — создать обложку. У нас есть бриф от заказчика. У нас есть план landing page. Мы сегодня создаем только обложку. От нас требуется — логотип, телефон и кнопка. Мы делаем landing page про торт-мороженое. Вот тут, что здесь должно быть написано, а тут — кнопка или форма отправить свое имя, заказ какой-то сделать.

Мы подбираем себе обложку. Нам нужна обложка с формой. Ищем обложку с формой.

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

У нас есть картинка, есть заголовок. Мы идем, копируем заголовок. Вот он заголовок. Ctrl+C — Ctrl+V. Не важно, пусть так. Мы потом это все подправим. Сейчас важно скопировать текст. Ctrl+C — Ctrl+V. И вот тут — «Бесплатная доставка по Москве». Ctrl+C. Вставить некуда — «Надзаголовок». Ctrl+V.

Смотри, какая красота. Сейчас нужно изменить шрифт, т. к. он слишком большой. Давай менять. Сделаем 38. Маловат. Шрифт можно менять и так. Ты выделяешь, у тебя всплывает менюшка, и тут ты можешь менять свой шрифт сколько тебе угодно. Давай побольше — 52. Вроде все хорошо. Мы выполнили.

Теперь форма. Она у нас по умолчанию, но форму надо настраивать. Когда ты берешь форму, здесь вот такое сообщение всплывает: «Форма подключена успешно. Текущие настройки. Домены, с которых будут приниматься данные… Данные отправляются на: Обязательно опубликуйте страницу, чтобы применить внесенные изменения». Куда отправляются данные, у нас не указано. Но не важно. Сейчас мы поработаем с видом.

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

«Заголовок» разобрали.

«Обложка» — мы пока не трогаем картиночку.

«Поля для ввода». «Имя». «Подсказка значения» — Name. Но нам здесь надо не Name, мы же не англоговорящие. «Имя».

Если мы сделаем заголовок поля, он будет над самой строчкой. Давай все сделаем. «Заголовок поля» — «Заголовок». Чтобы мы понимали, где что. «Подзаголовок поля» — «Подзаголовок». «Имя переменной» — «Имя переменной».

Сохранить. Видишь?! «Контент» еще раз. Мы это все исправляем. Нам все это не нужно. «Поле ввода» — заголовок нам не нужен, подзаголовок нам не нужен, имя переменной нам не нужно.

Здесь можно сделать обязательно это поле для заполнения или нет. Если обязательно, то без его заполнения человек не сможет отправить форму. Если человек хочет заказать торт, то, наверное, он захочет позвонить, поэтому имя и телефон нам нужны. E-mail нам не нужен, поэтому мы жмем «Удалить» и удаляем. А здесь оставляем телефон. «Автоматическая маска с кодом страны». Сначала будет высвечиваться тогда вот так. И тоже поле обязательное для заполнения. Сохраняем. Смотри, что получается.

Заголовок — вот он. Нам это не нужно. Обрати внимание, цвет мы указывали вначале, вот он такой красивый здесь и стоит. Нам этот английский текст не нужен. Нам нужно что? Заказать торт. Пусть будет: «Закажите торт сейчас». А здесь, например, что у нас в брифе: «Заказ сделаем в течение 2 дней». Ctrl+C — Ctrl+V. И текст кнопки – «Отправить».

«Сообщение об успешной отправке данных» — это когда у нас человек нажимает «Отправить», и у него должно что-то всплыть на окне, подтверждающее его действие. Это правило такое. Напишем: «Спасибо, менеджер свяжется с вами в течение 5 минут».

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

И здесь вот эта подпись. Зачем она нужна? По Российскому законодательству существует порядок сбора и хранения персональных данных. Сбором данных являются такие вещи, как cookie-файлы. Если сайт использует cookie-файлы, нужно об этом уведомлять. У нас сайт никаких cookie-файлов не использует. У нас сайт очень простой, но мы собираем данные: имя и телефон. И когда вы собираете данные, т. е. имя и телефон, имя и имейл, телефон, имейл, имя, вот здесь — «Текст под кнопкой в области с формой» — мы упоминаем, что, нажимая эту кнопку, вы даете согласие на обработку персональных данных. Здесь должна быть указана ссылка на политику конфиденциальности. Под политику конфиденциальности на сайте должна быть сделана еще одна страница, чтобы пользователь, который заходит на сайт, мог кликнуть на ссылку, которая находится в тексте под формой и ознакомиться с политикой конфиденциальности и хранения персональных данных. Это очень важно, потому что за это компании хорошо штрафуют.

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

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

«Сохранить и закрыть».

Итак, у нас landing page, первая вступительная страница почти готова. Но дальше мы идем в «Настройки». Здесь можно форме задать любой цвет. Она может быть какая угодно. Можно задать прозрачность, например, такую. Но это не очень красиво, потому что у нас достаточно темный фон. Можно задать стиль полей для ввода. Радиус скругления бордюра (100 или 10). Вообще, для тортов, которые мы делаем для праздников детских, она должна быть более шаловливая. Т. е. никаких очень острых углов эта тема не должна содержать. Поэтому я беру 100 и делаю скругленные поля.

Можно еще задать стиль. Он бывает вот таким. Но, если честно, это выглядит гораздо более официально, чем это было со скругленными краями.

Кнопки.

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

Типографика.

Заголовок нас устраивает. В принципе, по умолчанию все ОК.

А почему мы вот этот текст не исправили? Вспоминаем, где исправляем этот текст? В «Контенте». Заходим в «Контент». Вот оно. Почему-то не сохранилось. «Отослать» или «Заказать». «Заказать». И вот это тоже. Что у нас в брифе написано? «Заказ в течение 2 дней». Возвращаемся в настройки.

Фоновое видео нам не надо.

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

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

Здесь будет Icecreamcakes. «Сохранить и продолжить». «Открыть страницу».

Вот, что я имею в виду. Еще раз я обновлю страницу. Смотри, как ведет себя надзаголовок. Это потому, что мы его анимировали.

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

Анимация надзаголовка — прозрачность сверху. Заголовок мы не трогаем. Анимация описания — прозрачность снизу. Форму мы тоже не трогаем.

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

«Сохранить и закрыть». И публикуем. Смотрим, что получилось. По-моему, отлично.

Единственное, что мне не нравится, — это шрифт. Надо его сделать побольше. Как мы делаем побольше шрифт? Мы можем зайти в «Контент» и сделать побольше шрифт. Или мы можем, если у нас открытый текст, пожалуйста, шрифт исправить вот здесь и посмотреть заодно, как он будет выглядеть.

И вот это побольше я сделала бы. Не 14, попробуем 16, сделаем 18.

Пойдем в настройки. Я еще раз кое-что объясню. Что такое 100 vh? Это высота экрана. Вот картинка, если тут написано 100 vh, она займет весь экран, сколько бы экран в пикселях не был. Если ты здесь сейчас вобьешь 80 vh, ты увидишь, что картинка уменьшается. И она будет пропорционально уменьшаться на всех устройствах.

Т. е. если тебе важно, чтобы первая страница занимала всю страницу, ты делаешь ее 100 vh. Если тебе важно, чтобы отсюда какие-то пункты торчали, сделай 80 или 90.

Нам нужно 100. Важно понимать, что мы сейчас говорим не про пиксели, а про процентное соотношение, про 100 процентов экрана. У нас экран поделен. Ты этого не видишь, но визуально он поделен на 2 блока. И вообще в Tilda существует 12 колонок. У нас тут 2 колонки. У одной ширина — 7, у второй ширина — 4. 7+4=11. И для того чтобы был какой-то зазор, какое-то расстояние между этими двумя колонками, у нас есть «Отступ слева у второго блока — 1 колонка». Мы, например, хотим вот это сделать поменьше. Мы можем сделать 6 колонок. Сохранить. А здесь он подвинулся. Мы не хотим, чтобы он двигался. Мы делаем 2 колонки. «Сохранить».

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

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

Вот наша картинка в Photoshop. Как теперь нам подогнать ее под обложку? Мы идем в File image. И тебе нужно Image size. Здесь уже 72 мегапикселя — отлично. А вот здесь у нас с пикселями беда-беда. Вспоминаем, что я говорила про то, как подгонять ширину и высоту? Ширина у нас должна быть не больше чем 1920 пикселей. Не забудь вот здесь, когда будешь смотреть в Photoshop, нажать такую цепочку. Почему? Потому что, если ты не нажмешь цепочку, сейчас покажу, что будет. Если ты не нажмешь цепочку и начнешь менять что-нибудь, то исказится твой рисунок. Например, вот так. Поэтому обязательно нажимай вот эту цепочку. Это значит, что ширина и высота будут между собой связаны.

Как я и говорила, ширина у нас не превышает 1920 пикселей. Разрешение у нас — 72 dpi. А вот высота у нас — 1280, а нам нужно 1080. Мы пока говорим «ОК», потому что нам важно сохранить пропорции. Вот картинка сразу уменьшилась, и теперь она, более–менее нам подходит. А теперь мы будем урезать ее до 1080. Как это сделать? Выбираем вот это — W + H: width — это ширина, height — это высота.

Тебе нужно будет здесь вбить обозначения: 1920 — это в пикселях, а здесь — 1080. И потом вот так подвигать, как тебе хочется. Т. е. ты зажимаешь мышкой и ведешь. Мне хочется, чтобы обрезалось вот так. Галочку нажимаешь, твоя картинка готова. Теперь ее осталось только сохранить. File — Save. Картинка у нас получается шириной 1920, высотой — 1080 и разрешение у нее — 72 dpi. Теперь она готова к использованию для обложки.

Пошли загрузим. Как загрузить обложку? У нас есть кнопочка «Контент». Идем в «Контент», заходим в «Обложка» — «Фоновое изображение» — «Загрузить файл». Выбираем файл на рабочем столе. Вот он загрузился. «Сохранить» и «Закрыть».

Вот, пожалуйста, торт. Еще раз «Настройки». Давай сделаем даже 6, а отступ у второго блока сделаем 2.

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

Вспоминаем. Если нас устраивает контент, но не устраивает, как это выглядит, куда мы идем? Мы идем в «Настройки». И у любой обложки обязательно есть настройки по поводу ее затемнения. Чтобы это сделать, нужно зайти в «Стиль обложки», здесь есть «Эффект при скролле» — тоже относится к анимации, можно сделать, давай сделаем «Параллакс», посмотрим, как это выглядит. И фильтр сделаем в начале сверху желтовато-оранжевый, по умолчанию — 60, и в конце сделаем фиолетовый и 70. Посмотрим. Будет не очень, но мы можем поменять. Да, не очень, давай поменяем цвет, и мне кажется, слишком насыщенно. Давай сделаем 40 и 60 или даже здесь 30 сделаем. Очень даже все в тон.

Сейчас мы с тобой еще сделаем меню.

Как добавить меню сюда? У нас в брифе что написано? План landing: лого, телефон и кнопка.

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

Что нужно? Нужно все это исправить. Как исправить? Идем в «Контент», потому что нас не устраивает наполнение. Нам нужен «Логотип». В папочке, которую я тебе подготовила, есть уже логотип. Мы загружаем файл логотипа. Тут у нас есть заголовок — это может быть логотип, т. е. он может быть просто написан, вот как сейчас. Мы здесь можем написать «Торты из мороженого». Смотри, это может быть вот так, если у тебя нет логотипа как такового, то это может быть письменно. Но у нас есть логотип, поэтому мы идем в «Загрузить файл» и идем в ту папку, которую я тебе подготовила.

Вот логотипчик. «Сохранить и закрыть».

Смотрим, как выглядит. Вот он у нас появился.

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

Появилось. Дальше что? «Контент». Нам вот это не нужно, плюс это написано на английском языке.

С логотипом мы разобрались.

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

«Дополнительно». Разворачиваем. Вот он наш текст. Допустим, это наш телефон, мы ничего придумывать не будем. Давай здесь напишем cakes@rusicecream.com. Это как будто наша почта. Адрес мы не хотим указывать. Убираем это.

«Сохранить». Смотрим, что у нас тут. Остался телефон, осталось, как нам написать, потому что текста нет. Иконка один относится к тексту один, иконка два относится к тексту два.

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

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

И здесь ты можешь попытаться найти на английском языке. Нам нужен телефон — phone. Вот, пожалуйста, — телефончики. «Загрузить» — «Выбрать» — «Сохранить» — «Закрыть» или просто «Сохранить». Вот у тебя телефончик поменялся.

Либо у тебя есть другой вариант развития событий. Ты можешь пойти на Flaticon.com. Заходим. Набираешь здесь phone. Ищешь. И вот у тебя иконки. Загрузим вот эту, например, иконочку. Загружаем в svg, Free download. Вот он ее загрузил куда-то по умолчанию, у меня – в Download. Открываем нашу Tilda, «Загрузить файл». Находим, где этот файл у нас был загружен. «Телефон.svg» — «Open» или два раза щелкаешь. Он загружается. Делаем «Сохранить». Смотри, что происходит.

«Сохранить и закрыть».

Эта кнопка нам не нужна. Нам нужно совсем другое. «Текст кнопки» — «Заказать».

Пока здесь ссылки никакие не указываем. Меня интересует только то, как это визуально работает.

Когда нас устраивает контент, но не устраивает, как это выглядит, например мне не нравится, что кнопка синяя, куда мы идем? Мы идем в «Настройки».

И у «Меню», как и у всех элементов Tilda, есть свои настройки, потому что это отдельный блок, и у каждого блока есть свои настройки.

Основные настройки меню.

«Поведение позиционирования меню» — «Статика». Что это значит? Что вы прокручиваете вверх, и оно стоит на месте. Может быть, «С наложением на следующий блок, но без фиксирования». Это значит, что он будет накладываться на эту картинку, но когда вы скроллите вверх, получается, что оно тоже уходит наверх. И есть «Фиксация при скролле». Как я всегда говорю, это лучший вариант для landing page, чтобы кнопка всегда была под рукой. Мы делаем фиксацию при скролле.

«Фон меню»: у нас цвет прозрачный, но можем сделать его темным, черным; непрозрачность фона по умолчанию, он будет накладываться при скролле на следующий блок, т. е. на нашу фоновую картинку, поэтому сделаем 50% или белым сделаем.

«Непрозрачность фона меню после начала скролла», в общем, здесь все общие настройки ты можешь посмотреть. Тень меню можно сделать.

И, наконец, мы пришли за тем, зачем мы сюда пришли. Это кнопка. Мне не нравился цвет. Цвет ты можешь выбрать вот здесь. «Сохранить и закрыть». Либо, если ты хочешь точного повторения цвета, а не полагаться на глаз-алмаз, что мы делаем? Мы идем в «Настройки», находим здесь меню про кнопку, копируем. «Сохранить и закрыть». Переходим в «Настройки» здесь, находим кнопку, Ctrl+V. «Сохранить и закрыть». Теперь они точно совпадают, у них один индекс.

Мы возились с меню, но почему у нас меню внизу? Для того чтобы переставить местами меню и обложку, тебе нужно нажать вот эту стрелочку. Теперь меню у нас над изображением.

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

«Настройки» — «Стиль обложки» — потемнее выбираем цвет. «Сохранить».

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

«Сохранить и закрыть». «Опубликовать».

Откроем страницу. Смотрим. Кнопки у нас сейчас не работают. Если ты «Заказать» нажмешь, ничего не произойдет. Почему? Потому что мы ничего не прописали вот здесь. Но мне это сейчас не надо.

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

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

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

Пока!