Привет! Это наш заключительный урок, который мы посвятим Zero Block. Сегодня мы будем проходить, как создать блок, который не похож ни на что, в Tilda его просто не существует. Это будет личный Zero Block, который мы еще наполним анимацией. Поехали!
Zero Block создается точно по такой же черной кнопочке. Мы заходим в самый низ, он называется нулевой блок. Редактируем блок, т. е. мы просто берем и удаляем все, что нам не нужно. Если ты щелкаешь на листе, когда тут ничего нет или просто когда что-то есть, тоже щелкаешь на листе, не на предмет, а на лист, то по умолчанию здесь настройки листа (страницы) нам выпадают. Вот нам 550 слишком маленький блок получается, нам бы 1000 сделать. А 1080 — стандартный, 80 оставим на анимацию.
Вот у нас такая получается первая страница. Смотри, здесь можно задать BG Color — это получается background color, т. е. это вот это. Также сюда можно загрузить background image. Чем отличается background image от простой картинки, которую ты сюда можешь разместить. Она просто полностью закрывает этот слой. И полностью ему всегда будет соответствовать. Нам сюда этот image надо загрузить. Загружаем наш розовый тортик. Я решила взять картинку из lesson 3 на background image и загрузить ее. Посмотрим, какую я хочу. Вот эту хочу. Вот она загрузилась — это у нас обложка.
Смотри, у обложки точно так же есть фильтр. Можешь выбрать цвет, можешь выбрать процент, например такой, а здесь — голубой. Тоже может быть градиент какой-то. В общем, у тебя есть здесь выбор.
Настройки самого background, самой страницы. Ты можешь настроить высоту страницы, можешь настроить background страницы, он может быть любого цвета. Grid container — это то, как у него располагаются внутри вот эти объекты. Он может быть от центра.
Смотри еще раз какие настройки. 1000 пикселей — это высота страницы. Здесь можно выбрать цвет background. У нас картинка, поэтому это не очень повлияет. Тут можно загрузить картинку. Можно эту картинку сделать скроллируемой или фиксируемой, т. е. она может оставаться на месте, когда блок идет вперед, либо она может, как сейчас, скроллиться вместе с блоком. Давай я покажу тебе «фикс», как отличается. Вот видишь, что происходить будет? Картинка зафиксирована, а блок — скроллируется. А можно вот так сделать. Также мы можем разместить нашу картинку относительно канвы, т. е. относительно background. Она может быть вот тут, она будет равняться — Right top — правому верхнему углу. Может — по центру, может — по низу. Здесь не очень видно, потому что она подходит. Но если бы она была квадратная, ты бы сразу увидел изменения. Но мы делаем «центр» — «центр».
Также здесь можно фильтры настроить, как я сейчас настроила. Все это касается только background. Сохраним это все.
Сейчас нам нужны с тобой надписи. Если мы говорим с тобой об обложке, то какие-то надписи, давай, не мудрствуя лукаво, посмотрим какой у нас landing page, и что у него за надписи такие. У нас есть план, вот такие вещи тот есть. Это у нас заголовок. Чтобы добавить сюда заголовок, тебе нужно зайти вот сюда. И здесь нет никаких заголовков, здесь есть просто текст. Мы добавляем текст и — Ctrl+A — Ctrl+V — вставляем его. Как выглядит этот текст и что он из себя представляет — это наша забота. Поэтому мы, когда щелкаешь на объекте, теперь этот его Settings, должны сами позаботиться о его цвете, потому что теперь те правила, которые мы установили для всего landing page, не очень здесь работают. Мы сами о цвете заботимся, мы сами заботимся о размере. Мы сами заботимся о том, какой шрифт и каким он должен быть. Мы сами заботимся о расстоянии междустрочном и междубуквенным. Сами заботимся о прозрачности, полупрозрачности. Можно также его вращать, но мы очень редко это используем, потому что зачем это надо, непонятно. Также тексту можно задать Link, он будет работать как ссылка. И обязательно мы здесь указываем, что это за текст, — это значит, что мы указываем, если это заголовок, это Н1. Это очень важно для SEO.
Тут также есть базовая анимация. Он может сверху, снизу у нас появляться. Может быть Parallax на Scroll, например, или на Mouse. И фиксирование может быть.
Давай посмотрим, как может выглядеть наш текст, если мы делаем его по центру. Мы сейчас не будем создавать никаких форм, нам важно посмотреть, как работает этот инструмент. Формы, если что, есть вот здесь.
Мы расположили «по центру» — «по центру». Этот наш заголовок, давай сделаем его побольше: не 40, а 45. Поменьше Spacing между строчками.
Давай так оставим. Как будто у нас несколько обложек будет, на любой вкус, заказчик выберет.
Вот у нас текст. Предлог давай перенесем на следующую строчку. Сохраним, закроем. Посмотрим, как он выглядит. Вот он.
Добавляем форму. Она у нас по дефолту вот такая страшненькая, но мы ее можем настроить. Ты ее выделяешь, синяя рамочка вокруг нее получилась. Идешь в Input fields — это поля для заполнения.
Когда ты заполняешь эти поля, у тебя должны быть Input placeholder — это то, что написано в самой форме до того, как человек что-то вбил. И здесь тоже Input placeholder, все остальное ты убираешь, потому что все остальное нам не нужно, потому что оно только занимает пространство, а так гораздо легче. Вот смотри, что получилось: «Ваш e-mail», «Ваше имя». Здесь мы сервисы подключаем, куда будет приходить информация с этой формы.
И дальше идем к стилям, потому что это нам не подходит. Здесь ты можешь выбрать стиль, т. е. что за шрифт будет использован. Также форма может быть и вот такой. Здесь выбираем цвет. Наша фуксия любимая. Не то. Цвет вот этой штучки должен быть немного серенький, как будто заглушенная. Input color — нормально. Input border color нам не нужен, вообще border не нужен, потому что это обводочка. Это высота вот этой формы. Это расстояние между формами. Нам нужна кнопочка Button. Можно скопировать ту фуксию, которая у нас была, но я не хочу открывать сейчас. Тут должна быть фуксия та, которая у нас на обложке. И скругление — вот оно. Название — Button title — «Отправить». Здесь можно сделать кнопку, чтобы она была по центру или по левому краю сделано, но это нам не нужно.
Анимация может быть у кнопочки.
Выглядит как-то не ахти. Давай попробуем форму посерединке поставить. Как поставить форму точно посерединке? Выделяешь ее, заходишь в Settings, и вот здесь есть выравнивание. И тогда нам и кнопочку надо по центру поставить. Заходим в настройки кнопки — Button Align — по центру. Save. Close. Посмотрим, как теперь. Гораздо лучше.
С этим играться можно долго. Мне важно показать, как что работает, чтобы ты потом без труда смог это найти. А уже красоты — это дизайнерский вкус, и тебе его надо развивать. Понятно, что вот это не самый лучший вариант, но над этим можно и нужно поработать.
Я сейчас хочу больше обратить внимание на такие вещи, как анимация.
Я бы хотела, чтобы, когда мы опускали вниз, отсюда летели ягодки. Нужно эти ягодки найти. Где мы их находим? Во Freepik. Я иду во Freepik искать ягодки. Вот я во Freepik. Ягодки по-английски будут berry. Вот они, ягодки. Мы же делаем мороженое с ягодами.
Давай вот эту ягодку — клубничку — возьмем. Скачиваем ее. Заходим в место, куда она скачалась. Открываем этот файл в Illustrator, потому что мы скачали вектор и нам нужно подготовить эти ягоды, потому что просто так они летать не будут, они одной картинкой сделаны, нам нужно их пересохранить.
Как мы работаем с такими файлами? Если ты зайдешь в слои вот такой штучкой, стрелочкой вот этой откроешь, ты увидишь, сколько тут всего. Это то, из чего состоит эта картинка. Вот это мы выделяем и удаляем, нам это не надо. Нам нужна вот эта ягодка, вот эта ягодка, удаляем — Delete, оставляем цветочек вот этот, давай вот этот листик оставим. Вот это тоже удаляем. Как удалить тень? Два раза щелкаешь на этой штуке, и у тебя группа, с которой ты работаешь, выделяется. Со всеми остальными, если ты будешь по ним щелкать, ты уже не сможешь работать. У тебя должно наверху быть написано Layer — Group. Ты работаешь сейчас в группе, которую составляет вот эта клубника и вот этот элемент, который тень. Щелкаешь на тень, нажимаешь Delete — тени больше нет, одна простая ягодка. Вот тень. Еще раз: два раза нажимаешь, предмет изолируется, нажимаешь на тень, удаляешь тень. Цветочек: два раза нажимаешь, он изолируется как группа, удаляем тень.
Теперь у нас есть вот такой файл, но мы не знаем, что с этим делать. Это одна картинка, которую нужно разделить на несколько. Мы создаем новый файл. File new — делаем размер 50*50, вот у меня уже есть, потому что я уже тренировалась. Create. И мы сюда переносим те ягодки, которые нам нужны. Один раз щелкаешь — Ctrl+С — Ctrl+V. Огромную клубнику превращаем в маленькую клубничку: с зажатым Shift + Alt тянем за вот эти хвостики, получается вот так красиво. И сохраняем: File — Save as — на Desktop, создаем папку, допустим 9 lesson. И теперь нам нужно сохранить. В каком формате? Мы сохраняем в формате svg. Делаем К1 — рабочее название — клубника 1. Удаляем эту клубнику, она уже у нас сохранена. Следующая: Ctrl+С — Ctrl+V. С Shift + Alt зажимаешь, уменьшаешь. Сохраняешь: Save as — svg. К2 здесь делаем — рабочий файл. Давай следующую: Ctrl+С — Ctrl+V. Shift + Alt: тянем, тянем, подгоняем, в центр. File — Save as — svg — К3 будет. Удаляем. И цветочек остался. Ctrl+С — Ctrl+V. Цветочек почти по размеру. File — Save as — svg — К4 будет. Это все мы сохраняем в одну папку, из которой потом все будем использовать. И листочек: Ctrl+С. Вот это удаляем — Delete. Ctrl+V. Ctrl + Alt зажимаем, перемещаем в центр. File — Save as — svg — К5 будет.
Теперь заходим на наш блок, и нам сюда нужно это как-то разместить. Вот сюда на крестик жмем. Add images — это добавить картинку. Нажимаешь на картинку, чтобы она выделилась синим. Upload file — ищешь на рабочем столе свою папку 9 lesson. И вот они, наши великолепные ягодки. Давай вот эту ягодку разместим. Вот она у нас, из-за того, что это svg, и мы с тобой не задавали фон, она вот такая на прозрачном фоне. С Shift ее можно увеличивать и уменьшать, т. е. регулировать размер. Мы хотим, чтобы, когда человек заходит сюда, эти ягодки вылетали вот сюда, т. е. они изначально должны быть за кадром. Еще добавим вот эту штуку. Листочки, цветочки, все это есть. Как копировать предметы, когда ты в Tilda? Они копируются точно так же: Ctrl+С — Ctrl+V. Это стандартное сочетание клавиш. Ты их с Shift можешь уменьшать. Можешь вращать — это Rotate. Листочек тоже можешь: Ctrl+С — Ctrl+V. Мы его уменьшаем, мы его тоже вращаем. Цветочек, клубничку сюда. Отлично. Вот у нас мини-заготовочка есть. Давай побольше клубник вот таких сделаем. Ctrl+С — Ctrl+V. Размер уменьшим чуть-чуть, повернем, чтобы было интересно. Ctrl+С — Ctrl+V.
Вот столько у нас элементов. Я хочу, чтобы, когда мы скроллили вниз, они вылетали наверх. Как это сделать? У нас такая есть штука, которая называется Parallax. Нажимаешь на предмет, есть такая вещь, как анимация базовая, есть такая вещь, как Parallaxна Scroll, т. е. мы скроллим вниз, а эта штука вылетает. Вот здесь такая вещь есть, которая называется Speed — скорость. Ты тут можешь посмотреть, как она работает. Тут есть такая вещь в анимации, как скорость: если ты прибавляешь скорость, то получается, что когда ты вниз скроллишь, то вот этот элемент на 20% быстрее вылетает, чем ты скроллишь. Т. е. за 100% здесь выбирается скорость скролла, который производишь на данной странице. Вот это можно сделать 120, это можно сделать — Parallax на Scroll — давай сделаем 110, это сделаем — Parallax на Scroll — 130. Вот это — Parallax на Scroll — сделаем тоже 120, вот этот Parallax на Scroll сделаем 140, например. Parallax на Scroll сделаем тоже 110. Я — рандомно, ты можешь потом посмотреть, что летает быстрее, что летает медленнее, и скорректировать по своему вкусу. Parallax на Scroll сделаю 120, здесь сделаю 140, например. Это тоже сделаю 120. Мы с тобой настроили Parallax, т. е. это эффект, когда какой-то предмет летит, или перемещается в пространстве быстрее или медленнее, чем другой. Save. Close.
Опубликуем или предпросмотр. Я опубликую, посмотреть чтобы. Первое мы не будем смотреть. Вот, видишь, клубнички поехали, только надо побыстрее, потому что пока мы до них добираемся, они еще не вылетели. Давай отредактируем скорость. «Редактировать блок». Давай их, во-первых, подвинем поближе к границе, чтобы их сначала не было бы видно. Просто пока они едут снизу, у них уже все не успевает. Давай их поближе к краю сделаем и увеличим скорость каждого на 20. Этот был 120 станет 140. Это было 110 станет 130. Это было 130 станет 150. Этот был 120 делаем 140. На 20 увеличиваем. 160, это пусть будет 130. Посмотрим, как будет. 160, 140, 160, 140. Save. Close. Посмотрим.
Видишь, какая красотища. Очень красиво!
Давай с тобой еще кое-что посмотрим. Этот Parallax может быть на Scroll, который поднимается вверх. А есть еще Parallax, который опускается вниз. Давай возьмем элемента два, на примере я тебе покажу. Ctrl+С — Ctrl+V. Потом, если захочешь, дополнишь побольше. Тоже к краешку подвинем, чтобы сначала не было видно, а потом стало. Ctrl+С — Ctrl+V. На примере двух элементов пока покажу тебе. Сам доделаешь, как ты хочешь. Все это в Settings указывается. Ты просто берешь и делаешь их чуть медленнее, чем человек скроллит. Т. е. человек будет скроллить, а они будут оставаться на месте. Close. «Опубликовать».
Смотрим. Видишь? Т. е. они, как только страница появляется, элементы идут быстро, а у этих скорость заторможена. Сами элементы идут на 100, а они идут на 70. А эти, наоборот, превышают скорость скролла, и вот у тебя такая красота появляется. Эти можно сделать поменьше, посыпку можно сделать, например, какую-нибудь. Как будто посыпает кто-нибудь, а тут — фрукты. В общем, изгаляться можно как угодно.
Вот так выглядеть может наш Zero Block.
Давай еще раз посмотрим.
Вот это мы сделаем не 70, давай сделаем 80, нет 90. А то такая глыба у нас падает — не красиво. Это тоже уменьшим. Пусть тоже у нас остается. Но ты, когда будешь делать, хочешь, сделай побольше элементов. Я сделала 90 — 80. Save, Close. «Опубликовать». Посмотрим еще раз.
В общем, вот такие дела. Оно, конечно, тут мешается. Давай на 90 эту штуку. Вот это не очень мешается. Клубничка и цветочек будет выезжать. Или клубничку поменьше сделать. Давай сделаем ее не на 90, а на 80, а то уж слишком быстро она падает. Save, Сlose.
Вот такие дела. Что касается простой анимации, в которой вообще не обязательно прописывать какие-то шаги, есть такая же анимация — Fade in, Fade in up. Посмотри, как это может быть. Play element может быть вот так, т. е. это появление. Это, например, появление снизу. Точно так же ты можешь анимировать кнопки и формы. Тут есть, если задержка тебе какая-то нужна. Все здесь находится.
В общем, смотри, анимация на Zero Block бывает разной. Я сейчас разобрала с тобой только элементарную анимацию. Сложная анимация — пошаговая анимация. Саму пошаговую анимацию можно изучить самостоятельно, если тебе вдруг понадобится анимировать объект и тебе действительно это понравится.
Я сейчас покажу тебе пример, который сделан на простом Parallax и простой анимации, — это обложка моего собственного личного сайта. Но на ней можно посмотреть, как работает Parallax. Вот она. Загружается. Это и есть Parallax. Здесь, что такое, если посмотреть. Вот это — простая анимация, они просто появляются, въезжают отсюда и отсюда эти буковки. А дальше пошел просто Parallax. Вот этот текст сделан тремя разными блоками, он разъезжается. Здесь четыре разных блока друг под другом положены. И здесь тоже четыре разных блока друг на друга положены. Вот эти штучки сделаны точно так же, как мы с тобой сделали с клубниками. Когда черные штучки идут вниз, а белые идут назад, на самом деле, это просто два блока. Один блок сделан скоростной анимацией — 100 и больше (120) % — она идет наверх. А здесь белый блок с черными, вот такими, элементами с задержкой — тут 70, 80 скорость, поэтому блок идет вверх быстрее, чем эти элементы, и кажется, что фотография рассыпается, но на самом деле это не так. Фотография никуда не девается, просто она отъезжает наверх, а эти элементы создают вот такую иллюзию.
Покажу еще один сайт, сделанный на Tilda. Это сайт школы MMACLumi. Вот он. Это landing page классический. Обрати внимание, тут простая анимация, ты тоже такую можешь сделать. Вот это сделана на Zero Block анимация, они просто там появляются. Вот это простая анимация. Вот это — сложная анимация. А вот это анимация с Parallax. Видишь, она появляется, когда я вниз опускаю, она опускается. Все это делается на Tilda. Вот это простая анимация любого блока. Тоже простая анимация — это вообще прописано в самих блоках Tilda, тебе даже ничего не надо прописывать, они так работают сами собой. Вот это простая анимация, это Zero Block. Простая анимация, стандартная. Этот блок тоже есть в Tilda. Стандартная анимация абсолютно, ничего не меняла. Я преподаю фотографию. Это вот тоже простая анимация на Zero Block, т. е. у нас тут вот эти буковки отсюда прилетели — это просто залет справа, грубо говоря, это залет сверху. Fade in, Fade in up — это все оттуда идет, я ничего не придумывала, ничего специально не прописывала. Это тоже стандартная анимация. Все. Но выглядит в целом очень эффектно, хотя анимация тут очень вся стандартная.
Выключаем. Выключаем. Выключаем. «Закрыть».
Еще какую вещь хотела сказать напоследок? Есть такая штука, которая называется «Мессенджеры», находятся они в «Форма и Кнопка». Мессенджеры очень важны, потому что люди сейчас любят мессенджерами пользоваться очень сильно. И вот тут ты можешь это все сделать. Человек может заказать звонок, человек может написать письмо, либо человек вообще может очень разные виджеты сделать. Смотри, сколько тут всяких разных возможностей у человека может быть. Все штуки заполняются через «Контент». Здесь ты пишешь, например, Telegram какой у человека или Whatsapp — номер человека, туда будут приходить все сообщения. Еще какие-то штуки. Если ты все заполнишь, то у твоего landing page еще будет дополнительная вещь, помимо того что человек может отправить заявку, еще он может написать на Whatsapp или еще куда-то.
Цвета, помним, находятся в «Настройка». Вот они. «Расположение» — «Типографика». Дальше можешь взять Pop Up какой-нибудь. «Кнопка». Тут все это есть. Цвет фона. Заголовки. Цвет иконки давай поменяем на зеленый вот такой, или давай ее оставим белой. Цвет бордюра, обводки. Цвет кружка — вот он.
Ну что? Я поздравляю тебя. Если ты сделал все домашние задания и все сделал правильно и вовремя, то, скорее всего, у тебя все получилось, и ты можешь смело делать landing page. Конечно, этот курс, я бы сказала, начальный, он просто учит пользоваться блоками и минимальным функционалом Tilda, который есть. Но этого урока вполне достаточно, чтобы приступить к работе. И больше тебе скажу, что многие люди, которые пользуются Tilda, большинства этих трюков даже не знают, а ты — знаешь.
Надеюсь, ты будешь учиться и развиваться, потому что это очень важно. В любой точке мира ты можешь работать дизайнером, в независимости от ситуации в стране, людям всегда нужны будут свои сайты. И если сайт достаточно легкий, который ты можешь собрать за день, который не создаст для тебя много проблем и много труда, помимо заработанных денег, ты еще и добро людям будешь делать. Поэтому учись, смотри вебинары, читай и узнавай много нового. Я желаю тебе только успехов!
Пока!
