Привет! Ну что, есть готовность продолжать?

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

Поехали!

Заходим в наш Blank page — это ничего страшного, настройки мы потом все настроим.

Вот то, на чем мы остановились. «Предпросмотр». Смотрим, как это все красиво происходит. Возвращаемся к редактированию.

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

Векторные иллюстрации мы можем искать в таком прекрасном месте, как www.freepik.com.

Я набрала на русском, но ничего страшного, Google все переводит. И вот оно — самое первое — www.freepik.com.

Мы с тобой говорим про мороженое, про торты из мороженого. Подумаем, нам нужно проиллюстрировать все то, что тут написано: «Натуральные торты из мороженого для детских праздников». И я думаю, как это можно проиллюстрировать? Можно нарисовать здесь торт, окруженный мороженым. Можно посмотреть вообще бывают ли во Freepik торты из мороженого. Еще раз напоминаю, что, так как это международные сайты, все они только на английском языке работают. Если ты не знаешь английского языка, Google Translate тебе в помощь. Я знаю английский язык, поэтому мы смотрим, какие красивые вещи нам выдает наш Freepik по запросу «торты». Торт по-английски будет cake. Обращаю твое внимание, что здесь есть вот такая менюшечка. Нам с тобой интересны векторные картинки. И так как мы с тобой не собираемся ни за что платить, мы с тобой выставляем галочку Free. И вот все векторные картинки по запросу Free, которые у нас с тобой есть. Осталось выбрать только ту картинку, которая нам больше всего подходит. Я долго думала, какую картинку взять. И нашла вот такие штучки, и они мне очень нравятся. Несмотря на то что тут никого торта нет, мне очень нравятся эти герои.

Но нужно понимать одну такую вещь. Векторный рисунок задает все-таки какой-то настрой. Когда мы скачаем (Free Download делаем) рисунок, эта вещь будет задавать характер всей странице. Нам надо будет подчинять этим цветам всю оставшуюся страницу и примерно в этом стиле все остальное делать. Поэтому очень хорошо, что здесь 4 картинки и мы можем их между собой чередовать.

Когда ты скачаешь архив, у тебя будет несколько файлов. Тебе нужно будет из одного этого файла сделать обложку. Поэтому мы выбираем файл с расширением .ai. Это расширение, которое понимает программа Illustrator. Открываешь в Illustrator любым привычным для тебя способом.

Вот я открыла картинку в Illustrator. Очень миленькая картиночка. Теперь нам нужно ее подогнать под размер нашего окошка. Для этого мы создаем новый файл. File — New, я иду в Web, и тут уже есть наш формат, потому что 1920*1080 — это формат, в котором существует наша обложка. Create.

У нас есть вот такой пустой лист. Теперь нам нужно вот этих коротышей туда перетащить. Я щелкаю на них, это группа. Ctrl+C — Ctrl+V. Теперь коротыши здесь.

Теперь нам нужно, так как этот вектор, он не зависит от размера, растянуть его на весь экран. Растягиваем коротышей. Просто тяну с Shift за краешки, если тянешь с Shift, все пропорции сохраняются. Коротыши такие огромные не нужны, мы их сделаем вот такими, например.

Haррy Birthday и все остальное нам, например, не надо. Как понять, из чего состоит эта картинка и как это все удалить. Вот здесь есть такая штучка, как два листочка. Называется она layers, или «слои» на русском. Щелкаешь один раз, затем — на эту стрелочку, еще раз на эту стрелочку, и ты видишь, из чего состоит этот слой.

Clipping Path — это область реза. Нам она не нужна, поэтому мы ее просто удаляем. Ты ее выделяешь, и тут есть корзинка такая — удаляем.

Вот у тебя коротыши отдельно, фон, Happy Birthday нам не надо. Мы ищем слой Happy Birthday, мы его тоже удаляем. Все. У нас остались только коротыши, остался вот этот прекрасный фон. И видишь, они в разных слоях: коротыши здесь, фон — здесь.

Теперь нам нужно только вот с этой розовой штучкой работать. Когда ты щелкаешь один раз по этой штуке, у тебя выделяется все. Щелкни два раза на розовой плашке. Она выделится отдельно. Все эти беленькие точки означают, что ты работаешь только с розовой плашкой. И теперь ты можешь ее растягивать. Берешь и тянешь. Когда стрелочка преобразуется из одной стрелочки в две, ты можешь растягивать краешки. Что находится за пределами этой черной рамки, видно не будет, т. е. эти волнушечки видно не будет, коротыши будут обрезаны.

Мы с тобой подготовили первый экран. Поздравляю!

Сохраняем первый экран. File — Save as — я сохраняю на «Рабочий стол», и сохраняем мы, внимание, в формате svg. Наименование — picture — любое, по которому ты найдешь этот файл на рабочем столе. Save. Ок.

Сохранился. Заходим обратно в нашу Tilda.

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

Заходим в «Контент», потому что мы собираемся картинку менять. Заходим в «Обложку» — «Загрузить файл» — на «Рабочем столе» ищем picture.svg, два раза щелкаем, она загружается. «Сохранить и закрыть».

Вот они — наши коротыши.

Так ты можешь работать с любым файлом.

Еще маленькие хитрости скажу. Например, мне не очень нравится этот фон, потому что ничего тут не присутствует. Это тоже можно украсить. Например, тут могут быть какие-то мороженки. У тебя этот файл есть в Illustrator с пустым фоном. Ты можешь зайти опять во Freepik, набрать cake. Я нашла вот такой файл, пусть он будет дополнением, потому что у нас с тобой вот эти малявки будут цветные, а то, что я нашла, будет беленьким.

Мы с тобой делаем Free download. Он загружается в папку «Загрузки». Ты открываешь этот файл. Мы выбираем с тобой .ai — это значит Illustrator. Открываем это в Illustrator. Файл открывается отдельно. Видишь, у нас коротыши здесь, это откуда мы их забрали, а это файл, который я присмотрела для себя.

Нам вот эти штучки надо забрать. Как это сделать? Вот смотри. Это то, из чего состоит этот файл. Но обычно они все сгруппированы. Но могут быть и не сгруппированы. Поэтому ты просто мышку зажимаешь и выделяешь ту штучку, которая тебе больше всего нравится. Вот ты выделил, видишь, она выделилась. Делаешь Ctrl+C и Ctrl+V, и вот она здесь — маленькая такая штучка. С Shift ее до нужного размера приводишь. Обрати внимание, вот здесь есть два таких окошечка. Одно окошечко говорит о том, какого цвета у нас заливка этого объекта. Заливка у нас черная. А второе окошечко отвечает на вопрос: какая обводка у этого элемента? Обводка у этого элемента никакая, а заливка — черная. Я хочу, чтобы она была беленькая. Видишь. Поменялся цвет. Я один раз нечаянно щелкнула на розовом, у нас выделился фон. Чтобы фон никак не влиял на наши с тобой манипуляции, мы его заблочим. Как заблочим? Идем в layers, вот здесь ставим замочек. Все, ты что хочешь делай, с фоном ничего не будет, точно так же как и с нашими улыбашками, потому что они под замочком, ничего с ними не происходит. А вот с этим предметом происходит, он выделяется, ты можешь с ним манипуляции разные делать. Когда ты на нем зажимаешь мышку, куда-то ведешь, он с тобой переходит. Если ты нажимаешь один раз, вокруг него получается 8 таких кнопочек, которые могут позволять тебе менять его. Ты можешь перемещать его либо вращать. Если на уголок подведешь мышку, она становится вот такой, т. е. это две стрелочки, которые еще изогнуты. Это значит, что объект может вращаться. Ты зажимаешь мышку в этом положении и ведешь так, как ты хочешь, чтобы этот объект вращался. Я хочу, чтобы в уголке был такой торт кверху ногами.

Пойдем за следующим тортом. Вот такая штучка. Один раз на ней кликаешь. Ctrl+C. Идешь в этот файл. Ctrl+V. Вот он у тебя сюда приземлился. Черного цвета. Нам не нужен черный. Куда идем менять? Вот сюда идем менять. Поменяли. Повернули. На уголок ставишь мышку и вращаешь до того момента, пока тебе не понравится.

Следующее — вот этот мне маффин нравится. Ctrl+C — Ctrl+V. Он приземляется он у нас черным. Черный нам не нужен. Выделяешь его, чтобы переместить. И перекрашиваем его опять в беленький. Пока вращать не будем, мне и так нравится. Мы просто заполняем фон, делаем красиво.

Вот еще один маффин. Ctrl+C — Ctrl+V. Делаем его белым. Уже привычная манипуляция. Зажимаем, тащим, куда нам хочется. Вот он здесь.

Следующее, что мы здесь не брали, кусок торта. Ctrl+C — Ctrl+V. Тащим, повернем, а то он слишком официальный. Меняем на белый. Вот у нас летящий торт.

Дальше — вот этого куска не было. Ctrl+C — Ctrl+V.

Смотри, размер тоже можешь менять. Ты можешь вот таким его сделать, можешь сделать его поменьше. С Shift, когда его зажимаешь, не меняются пропорции. Если ты будешь без Shift это делать, то можешь растягивать, как угодно. Но это не хорошо. Если вдруг получилось такая растяжка, а не понятно, что с ней делать, надо обратно вернуть пропорции, просто нажимаешь Ctrl+Z — и она возвращается в обычные пропорции. Давай мы ее перекрасим в беленький, немножко сделаем побольше с Shift, немножко ее повернем и вот сюда поместим. Все, отлично.

Что мы еще не брали. Большие торты не хочу брать. Вот эти цветочки.

Если ты хочешь выделить несколько объектов, ты можешь зажать Shift, на одном объекте щелкнуть, на втором объекте щелкнуть, на третьем, на четвертом, завитушку, еще цветочек. Видишь, они начинают все выделяться. На чем щелкнул, то и выделилось. Ctrl+C — Ctrl+V. Они все сюда эмигрировали. Перекрашиваем их в белый, вращаем. Стрелочка приобрела вот такую штучку, мы это повернули, вот сюда отнесли, подвинули вот этот маффин, и у нас вот так получается очень интересный фон.

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

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

Вставляем. Белое. Вращаем. Повернули. Создали красоту, которая нас устраивает.

Давай еще чуть-чуть нам красоты нужно. Выделили с Shift, Ctrl-C — Ctrl-V. Перекрасили в беленький. Верхушки у нас не хватает. Перетащили. Зажимаешь кнопочку, ведешь. Все.

У нас вот такая красивая штучка получилась. Мы это еще раз сохраняем. File — Save as. Где мы это с тобой сохраняли? На «Рабочий стол». Picture.svg. Save. У нас такое название есть уже. Он ругается: «Ты действительно хочешь сохранить этот Picture.svg?». Ты говоришь: «Конечно, да». Replace — это «заменить». Заменяем.

У нас новая получается обложечка.

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

Видишь, какое чудо. И очень весело, очень красиво.

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

Итак, у нас с тобой две обложки. Давай их опубликуем и посмотрим, как они смотрятся.

У нас две обложки: одна вот такая, а другая — вот такая, мультяшная. На вкус и цвет, т. е. на выбор.

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

Итак, мы просто этот слой выключаем. Мы его не стираем, он никуда не девается, мы его просто выключаем.

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

Выключаем чудиков, публикуем страницу. Обложка есть, а чудиков нет.

На прошлом уроке мы с тобой не решали проблем с формами. Пришло время их решить.

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

У тебя будет твоя почта.

Заходим в «Контент». Формы у нас в «Контенте». И вот оно — «Сообщение об успешной отправки данных» — «Спасибо за ваш заказ». «Адрес страницы в случае успеха» пока оставим. «Текст под кнопкой» тоже пока оставим. Все, отлично. «Сохранить и закрыть».

А теперь нам нужно пройти в «Настройки» сайта, а не страницы. Мы идем вот сюда — rucicecream. Заходим в настройки сайта и находим пункт, который называется «Формы». Посмотри, какое обилие вариантов, куда могут наши данные поступить, у нас есть. Но мы с тобой будем настраивать e-mail. Ты щелкаешь на e-mail и указываешь здесь e-mail. Я укажу свой e-mail. Делаю «Сохранить». «Активируйте подключение» — это значит, что нужно перейти в почту. Я перешла в свою почту и первое письмо о том, что нужно активировать, — «Для активации сервиса… кликните на ссылку ниже». Кликаем. E-mail подтвержден. Тут все хорошо. Даже палец вверх.

Выключаем. Переходим в нашу Tilda. Обновляем страничку. Видишь, «Активирована», и все у нас отлично. «Сохранить изменения». «Закрыть».

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

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

«Открыть страницу». А теперь проверяем форму. Всегда проверяй форму, потому что форма должна работать.

Пишем свое имя, свой телефон. И делаем «Заказать». Вот то, что мы писали, — «Спасибо за ваш заказ». Тут можно дописать «Мы скоро свяжемся с вами». А теперь заходим в почту и смотрим. Наша заявочка — вот она. Открываем, вот так будет заявки получать твой заказчик: имя и телефон. У нас на сайте что? Имя и телефон просит. Соответственно, эти поля тебе и приходят. Эта форма работает.

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

Кнопка сама по себе, вот если сюда прийти, может вести на какую-то ссылку либо может вести на какой-то блок — это может быть страница либо блок. Форму никакую она не может открыть сама по себе, если кнопка ни к чему не привязана. Нам нужно создать блок с формой. И в Tilda есть такая функция.

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

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

Кстати, кликнете здесь — «Это pop-up блок с формой», — чтобы посмотреть, как он выглядит. Кликаем. Вот так выглядит наша форма. Настраиваем ее. Заходим в «Контент» — «Изображение». Изображение вот такое, но мы можем его поменять. Поменяем на чудиков. Тебе нужно просто указать здесь ссылку на picture.svg. Как видишь, picture.svg очень мало весит — всего 0,1 МБ. Почему? Потому что это вектор.

«Заголовок и описание» — «Закажи торт сейчас».

«Описание» — «Заказ сделаем в течение 2 дней».

«Поля для ввода». Что там у нас было? Телефон и имя. E-mail нам не нужен, мы его удаляем. «Имя», только подсказка значения должна быть не Name, а «Имя», потому что мы живем в России. И это должно быть обязательное поле, потому что мы должны знать, как обращаться к человеку, который оставил нам контакты.

«Тип» – телефон, меняем phone на телефон.

«Заголовок» — ничего не делаем.

«Маска» — это то, что будет отражаться вот здесь, только в другой форме. «Автоматическая маска с кодом страны». «Россия (+7)» — по умолчанию. И ставим галочку «Обязательно для заполнения».

«Подключенные сервисы» в форме обязательно должны быть подключены. Это наш e-mail. Сейчас это мой, но должен быть твой.

Текст кнопки — «Заказать».

«Адрес страницы в случае успешной отправки данных» — не указываем.

Тут то же самое — «Спасибо за ваш заказ!».

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

Потом мы с этой штучкой поработаем.

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

И вот здесь — «Кликните здесь, чтобы посмотреть, как он выглядит». Кликаем. Выглядит вот так. По-моему, великолепно выглядит. Только вот эта кнопка черная мне не нравится. Где нам вид изменить? Вид мы меняем в настройках. У нас тут есть кнопка, мы ее не видим, но мы знаем, что она есть. Меняем цвет. Я не буду лезть и смотреть, какие там хексы, но в идеальном мире тебе нужно пойти скачать хекс тот же самый, чтобы у тебя кнопки все были одинаковые. «Сохранить и закрыть».

Внимание. «Форма подключена успешно. Текущие настройки». Видишь, она подключена к этому e-mail. «Обязательно публикуйте страницу».

Отлично, форма у нас работает, а кнопка к этой форме не подвязана. Ведь мы ее никак не подвязывали. И как это сделать?

Мы смотрим вот сюда. У нас есть ссылка для открытия блока — #popup:myform. Ты вот это копируешь, выделяешь, Ctrl+C. А потом идешь в «Контент», в «Кнопку» и вот здесь — «Ссылка для кнопки» — Ctrl+V. «Сохранить и закрыть».

«Опубликовать». «Открыть страницу». Жмем на кнопку — всплывает форма. Все работает.

А сейчас мы напишем здесь имя и телефон. «Заказать». «Спасибо за ваш заказ».

Мне пришло новое письмо. Вот оно. Все работает! Отлично!

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

Пока!