Привет! Добро пожаловать на 6-й урок. Наконец-то мы разобрались с обложками и можем двигаться дальше. В конце пути мы с ними встретимся еще раз, потому что там осталось кое-что, какие-то недочеты. Но основную часть работы мы с тобой по обложкам сделали, и это очень важно. Сейчас мы будем переходить к другим блокам. Для этого тебе понадобится бриф и план landing page. Поехали!
Я открыла план landing page. Мы с тобой обложку сделали, можем переходить ко второй страничке. Ссылки у тебя все есть по кнопке к этому уроку. Открываем вторую страницу, и у нас есть вот такие вещи. «Наш торт — это», «Свежее молоко», «Натуральные орехи, фрукты», «Без искусственных красителей, консервантов и ароматизаторов». Вот это все нам с тобой предстоит оформить.
Открываем наш landing page. Кстати, надо поменять ему название, потому что я до этой штуки не добралась. Вспоминаем, где это можно сделать. Это можно сделать в настройках. У нас не Blank Page, у нас Rusicecream — landing page, давай LP просто оставим, и будет понятно.
Описание — «Торты-мороженое на заказ».
«Сохранить изменения».
Переопубликовать нужно. Закроем, не будем открывать.
Заходим и выключаем, не удаляем, а выключаем. Помнишь, как это делать? Вот здесь кнопочка, которая все это выключает. Все, мы выключили. Осталось только видео. Если сейчас предпросмотр сделать, будет вот так.
Убираемся из предпросмотра. «Вернуться к редактированию» — внизу.
Начинаем оформлять landing page дальше. Помним, что новый элемент добавляется с помощью вот такого крестика. Или вот здесь, есть как это сделать, но я делаю это с помощью крестика.
Смотрим, какие блоки нам могут подойти. Нам нужны, если мы посмотрим по landing, три колоночки. Где нам взять? Заголовок не нужен, текстовый блок не подходит, изображение не подходит, галерея не подходит, прямая речь не подходит. «Преимущества» — вот они. Тебе нужно понять, что ты хочешь. Это нужно понять именно тебе, а не кому-то еще, т. е. как ты собираешься иллюстрировать вот этот блок.
Есть несколько вариантов. Видно? Здесь могут быть какие-то картинки или фотографии, могут быть просто значки, здесь — шесть колонок, здесь — вот так даже это может быть, вот так даже может быть. На телефон не смотри, это просто может быть любая фотография с описанием красивых фраз.
Вот такое может быть. Что мы выберем? Я думаю, самое простое, выбрать вот это. Смотрим план.
«Наш торт — это»: Ctrl+C — Ctrl+V. Убираем лишние новые строки. Редактируем красиво текст.
«Свежее молоко»: Ctrl+A — чтобы выделить текст, Ctrl+C — чтобы скопировать текст, Ctrl+V — чтобы вставить.
Каждый пункт должен начинаться с большой буквы, поэтому все ты это поправляешь сам.
Ctrl+A — Ctrl+C — Ctrl+V.
«Натуральные орехи и фрукты».
Ctrl+A — Ctrl+C — Ctrl+V.
Смотри, тут получается очень все неоднородно. Поэтому, если есть возможность, заказчика нужно попросить сократить текст, хотя бы чтобы он занимал две строки. Вот здесь, например, «Свежее молоко» можно будет перенести на другую строку. Будет вот так красиво.
А тут, например, что-то исправить по тексту, сократить его. Например, красители очень важны. Если заказчик сказал: «Хорошо, без искусственных красителей», то мы оставляем это вот так. Потому что все остальное тут можно в текст поместить.
Ctrl+A — Ctrl+C. Ctrl+A — Ctrl+V. Ctrl+A — Ctrl+C. Выделяем текст здесь. Ctrl+A — Ctrl+V.
Обязательно удаляй пустые строки, которые не нужны. Ctrl+A — Ctrl+C.
И каким еще можно, кроме обычного, которым я пользуюсь, методом сюда вставить текст?
Идешь в «Контент» — «Карточки» — вот оно, «Молоко». Ctrl+A — Ctrl+V. Убираешь здесь пустые строки. «Сохранить и закрыть». Вот он, текст, у нас появился.
Вот здесь, например, ты говоришь заказчику, что можно было бы и подзаголовок придумать. И заказчик соглашается и присылает тебе текст.
«Самое вкусное лакомство на день рождения!».
Вообще не советуют, если длинный текст, делать его по центру. Выключку не советуют делать. Но если мы сделаем ее не по центру, у нас получится дизайн не очень хороший.
Вот здесь очень лаконично все смотрится. А дальше пошло не очень хорошо. Почему? Потому что здесь 4 строки всего, смотрится окей. А здесь уже 6, 5. Поэтому можно попросить своего заказчика сократить текст. И это очень просто сделать. Например, «свежие и замороженные ягоды мы привозим» — «мы привозим» можно убрать. «Из Вологодской области» можно сделать. «В зимнее время голубику и землянику поставляют прямо из Египта». Мы смысл оставили, а несколько слов убрали, и все поместилось.
Вот смыслом мы блок наполнили. Что нам делать с картинками?
Картинки здесь могут быть как иконки, вот здесь они представлены как иконками, так и фотографиями. Но смысловую нагрузку лучше всего передают именно иконки. Иконка больше всего вмещает в себя смысла, это самый смыслоемкий элемент. Поэтому если есть возможность вместо фотографии использовать иконку, мы всегда используем иконку. Если есть возможность вместо фотографии использовать иллюстрацию, то мы используем иллюстрацию. Это для донесения смысла. Если важно в каком-то пункте донести именно смысл, чтобы картинка была смыслоемкой, мы используем иконки, потому что иконки занимают очень мало места и, обычно, иконки подбирают таким образом, чтобы они передавали смысл текста.
Где заменить иконки? Их можно заменить либо так: «Загрузить файл». Либо так: зайди в «Контент» — «Карточки» — и «Загрузить файл» здесь.
Еще раз напоминаю, что у нас есть такая волшебная вещь, как «Искать в библиотеке». Сначала идут фотографии, потом идет Google, и дальше мы видим вот эти два ценных пункта, откуда мы можем брать иконки. Плюс еще Freepik, если помнишь.
«Свежее молоко», давай посмотрим есть ли у них иконки на молоко. Набираем всегда по-английски — milk. Ничего нет. Пошли в Tilda. Ничего нет. Ну, ладно. Куда тогда идем, раз ничего нет? Во Freepik.
Вот мы во Freepik. Есть еще такая штука, о которой я все время говорю, как Flaticon. По поводу иконок. Важно, чтобы иконки на протяжении всего landing page, также как иллюстрации, по стилю и по толщине линий совпадали. Т. е. нельзя взять иконку вот отсюда, потом другую — вот отсюда, и еще одну иконку — вот отсюда. Все иконки должны быть стилистически примерно одинаковые. Для этого ты можешь взять иконки из наборов. Они называются kit — набор по-английски. Ты можешь их взять с любого сайта, с которого ты это скачиваешь. Я давала набор сайтов, откуда можно скачать иконки. Даже на Flaticon существуют наборы этих иконок. Ты смотришь по наборам, тебе подходит или нет. Если тебе не подходит, то ты смотришь другие разные иконки, чтобы они примерно были в одном стиле, и толщина линий должна быть примерно одинаковой.
Но если какая-то иконка немного толще, какая-то иконка немного тоньше, но стиль совпадает, нет такого, что одна черно-белая, другая — цветная, третья — без рамок, если стиль примерно совпадает, то это можно подкорректировать в Illustrator.
Давай найдем иконки.
Вбиваем milk. Нам выпадают вот такие иконки, они разные бывают, но у тебя должно быть четкое представление того, как ты хочешь, чтобы сайт выглядел, плюс-минус, либо это должно быть согласовано с заказчиком.
Мы с тобой бесплатной версией пока будем пользоваться, потому что у нас учебная штука.
Смотри, иконки бывают вот такие, вот такие и такие, и они все разные, и их нельзя между собой смешивать.
Больше всего, легче всего подбирать иконки, когда они вот такие — рисованные. И их чаще всего можно найти, они проще всего отображаются везде, потому что, например, цвета бывают разные. Например, вот такая цветная иконка вот с этой будет сочетаться, а с этой сочетаться не будет, она не будет сочетаться, например, вот с этой иконкой. Понимаешь, есть нюансы, на которые ты должен обращать внимание: 1) это цветность; 2) это обводка — есть ли линия обводки.
Соразмерность, прерывание линий. Потому что вот эти две иконки из двух разных наборов: у этой прерывается линия, тут линия с точкой, это стилизовано — здесь линия не прерывается с точкой. Они друг другу подходить не будут, если ты скачиваешь их одновременно, для того чтобы использовать на одном landing page. Вот здесь, если ты посмотришь, я приблизила, сама линия гораздо толще, чем здесь. В принципе эти иконки можно скачивать, чтобы их использовать на landing page, но тебе придется их редактировать в Illustrator. Т. е., если ты хочешь, чтобы у иконок был вот такой бочок, тебе и здесь его надо повторить, и утолстить вот эту линию. Т. е. тебе придется в Illustrator обрезать вот это, вставлять точку. Если ты хочешь, чтобы вот эта иконка была цельная, то ты уменьшаешь толщину линий, чтобы она совпадала вот с этой, и убираешь точку. Т. е. продолжаешь вот этот краешек, чтобы линия была замкнута.
Мы с тобой пойдем по самому простому пути. Мы с тобой будем выбирать самые простые иконки. Это вот такие. Поэтому давай скачаем ее.
Ты просто нажимаешь на ту иконку, которая тебе нравится. Тебе придется сначала рекламу выключить. Потом ты переходишь вот в такой раздел.
Ты можешь попробовать цветные. Если ты найдешь, чтобы они были одинаково стилизованы, находи, делай, если тебе интересно. Если неинтересно, немного времени, иди по моему пути.
Какую иконку скачивать? Тут есть png, есть svg. Всегда скачивай svg — это векторный формат, который отлично читается всеми браузерами, и при этом картинка не бьется на пиксели.
Заходим на наш landing page, делаем «Загрузить файл». У меня загружается на Download. Вот, пожалуйста, milk.svg. «Сохранить и закрыть».
Если у нас везде вот этот цвет превалирует, мы можем иконки тоже перекрасить. Нужно понимать, что любую иконку можно модифицировать в соответствии со своими задачами: перекрашивать, их можно ресайзить, вокруг них можно создавать какой-то кружочек, например, какой-то фон.
Дальше смотрим. «Натуральные орехи и фрукты». «Орехи» — nuts. Смотрим. Пожалуй, выберем вот это. Щелкаем. Svg – Free download. Скачалось. Отлично. Идем в Tilda. Нажимаем сюда — «Загрузить файл», идем в Download, загружаем. Тут, конечно, немного они по толщине разные. Вот глаз–алмаз должен быть. Мы это тоже отредактируем, давай сначала кончики найдем.
«Без искусственных красителей». Как можно это иллюстрировать? Это может быть какая-то перечеркнутая банка.
Здесь, кстати, можно цветовой фильтр такой брать. Нас интересует Monocolor. Ищем. Вот, кстати, вот это хорошая штучка, типа обзор мороженого. Тебе по смыслу всегда нужно что-то искать цепляющее и передающее смысл. В принципе, я бы еще вот эту иконочку рассматривала, потому что здесь понятно, что это из какой-то банки, вообще не связанной с пищей, но красители для пищи примерно так и выглядят, мне кажется.
Что еще? Вот эта хорошая, та — хорошая. Вот эту можно, потому что она больше похожа на шампунь. Давай дальше посмотрим. Next page. Что нам приготовят тут интересного?
Кстати видишь, что с мороженым все очень сильно связано. Смотри, какой интересный значок.
Давай возьмем вот эту лупу с мороженым. Мне кажется, она хорошо передает смысл. Svg. Free Download. Идем в Tilda. «Загрузить файл».
Вот на лицо проблема. Обрати внимание, что у нас все эти может быть еще ОК, хотя тоже в любом случае вот эта самая тонкая. Нам надо с ней поработать. Открываем Illustrator. Нам нужно импортировать файл. Open — Download — milk. Svg прекрасно понимается Illustrator. Для того чтобы увеличить сам объект, обводку, нужно кликнуть по объекту, найти вот эти значения. Как ты видишь, сам объект состоит не из линий, он уже слитый. Ты выбираешь Stroke, например 1 пиксель. Видишь, вот этот stroke немного прибавился. Если посмотреть, вот это — обводка, а это — сам объект. И сейчас объект обведен. 2, 3 — видишь, обводится.
Как нам понять, хорошо мы обвели или плохо? Нужно просто сюда импортировать тот объект, относительно которого мы пытаемся все это сделать. Я иду в свои загрузки и беру отсюда орехи. Вот они, орехи, открылись. Я их копирую, например 1 орех. Ctrl+C — Ctrl+V. И смотрю. Вот это — его масштаб. Я ничего не увеличиваю и не уменьшаю, потому что это тот масштаб, который используется на сайте. И я сравниваю эти два объекта по толщине. Немного мы переусердствовали. Тебе нужно сравнить насколько. У нас тут 3, давай сделаем 2. Два недостаточно. Мы можешь посмотреть вот тут толщину. Т. е. я подгоняю, это можно, конечно, и на глаз делать, но лучше не надо. Примерно, как будто из одного набора. Удаляем этот боб. File — Save. Выключаем milk. Еще раз загружаем в Tilda. «Загрузить файл», ищем milk. По толщине теперь стало подходить. Т. е. можно уже подумать, что это из одного набора иконки. Точно так же решаются все проблемы с цветом.
File open — milk — Open. И давай выберем цвет. Если вот такая штука происходит, цвета нет, всегда можно его выбрать здесь. Двойной клик, выбираешь. ОК. Он появляется здесь, ты его сохраняешь вот этой штучкой. ОК. Он сохранился, теперь он будет и здесь высвечиваться. Мы с тобой заливку и обводку меняем. Все великолепно. Закрываем. Save. Идем в Tilda. Загрузить файл. Milk. Вот теперь оно синенькое. Потом мы его вернем обратно в черный. Мне важно, чтобы ты поменял цвет и подогнал толщину. Чтобы это было именно вот так.
Посмотрим дальше план landing.
«Закажите сейчас» — это вот такие карточки. Идем в Tilda и смотрим, где можно такие карточки посмотреть. Где они могут быть, как ты думаешь? По первости ты так и будешь это искать, потом все придет в норму, и ты будешь помнить, где что находится, и это нормально. Вот, смотри, очень даже хорошие штуки. План еще раз посмотрим. «Заказать», «Заказать», смотри, здесь должны быть продукты, т. е. торты, которые мы можем продать. Это у нас находится в «Плитка и ссылка», и вот этот чудесный блок нам очень подходит, а еще вот этот чудесный блок нам очень подходит. Поэтому можешь выбрать любой, я выберу вот этот.
Заходим в «Контент», у нас все-таки 4 торта там вроде бы. Нам нужен еще один. Обычно такой контент тут в карточках универсальных указан. Нам нужно дублировать эту карточку, «Сохранить и закрыть» пока. Вот она здесь появилась.
Теперь мы идем в «Настройки», и вот здесь — «Количество блоков в ряду» — делаем 4. Это максимальное значение. «Сохранить и закрыть». Теперь у нас 4 блока.
Сюда мы можем поместить картинки тортов, их описание и кнопочку «Заказать». Картинки у тебя по ссылке, просто зайдешь и возьмешь их.
Как тут поменять картинку? Ты просто на нее щелкаешь, пожалуйста — «Загрузить файл». Я иду к себе в 6-й урок, нахожу вот это, и у меня первая — единорожка. Потом я — иду опять в 6-й урок, нахожу вот это, и тут девочка. Еще захожу, и еще раз захожу. Вот тут у нас якобы картинки тортов, которые можно у нас заказать. Заходишь еще раз в план landing — «Закажите сейчас». Ctrl+-A — Ctrl+V. Убираем ненужные строки, делаем заглавную букву. Просим у заказчика какой-то текст красивый. У нас в брифе что написано, например «Заказ сделаем в течение 2 дней»; «Любой мультгерой»», давай возьмем. «Сделаем из мороженого любого мультгероя».
Описание. Ты можешь здесь два раза щелкнуть. Например, «Единорожка». А можешь в карточку зайти в «Контент», в «Карточка» это можно поменять. Заголовок — «Девочка на торте».
Это будет «Единорог и шарики» и «Бананчик». Тут должно быть описание: название торта, стоимость, кг.
«Клубничное мороженое с ванилью и белым шоколадом. Вес торта: 3,5 кг. Стоимость: 2000 рублей».
Сейчас мы это скопируем, немного будем информацию менять. Ctrl+А — выделяет весь текст. Ctrl+V — вставляет весь текст.
Здесь будет не клубничное, вишневое например. «Вишневое мороженое с ванилью и белым шоколадом. Вес торта: 4 кг. Стоимость: 2500 рублей».
Заходишь в «Контент», потому что здесь еще такие кнопочки и это карточки. И ты смотришь «Заголовок кнопки» — «Заказать». И видишь, вторая кнопка там была, она нам не нужна. В принципе тут может быть по 2 кнопки под каждым тортиком. Ctrl+C делаешь, Ctrl+V — здесь. «Сохранить и закрыть». Смотрим. Хорошо!
Что может не нравится? Мне не нравятся эти кнопки. У нас вот такая кнопка. Она кругленькая, а здесь какие-то черные и квадратные. Для того чтобы понять, какой здесь цвет, мы заходим в «Настройки» — «Кнопки», мы копируем это — Ctrl+C, «Сохранить и закрыть». Идем к нам вот сюда, в наш блок, опять в «Настройки» — «Кнопки», и смотрим. Кнопка вот такая должна быть — Ctrl+V. «Сохранить и закрыть». Видишь, уже изменилась. И радиус скругления нам нужен, мы делаем 50. «Сохранить», «Сохранить и закрыть».
Смотри, какая красота. Кнопка полностью совпадает с этой, и она у нас кругленькая. Отлично!
Давай предпросмотр нажмем. Посмотрим, как это все может выглядеть.
Молоко оставишь мне такое, чтобы я убедилась, что ты разбираешься в цветах. Так, вообще черненькое было бы хорошо. Ну как тебе landing получается?
Нам еще вот эти формы настраивать. Возвращаемся к редактированию. Заходим в «Контент». И вот здесь, как ты видишь, «Ссылка для кнопки или плитки» должна быть. Вспоминаем, как мы настраивали кнопку вот эту. У нас, когда мы ее нажимаем, всплывает pop-up. Где этот pop-up? Вот здесь он. «Кликните здесь». Вот он, вот так выглядит наш pop-up. У нашего pop-up есть имя, вот оно. Мы его выделяем, Ctrl+C, идем сюда, «Контент», открывается. «Название кнопки» — «Заказать», сюда — «Ссылка для кнопки» — Ctrl+V. Одна кнопка готова. Дальше. «Заказать», Ctrl+V. Дальше идем. «Заказать», Ctrl+V. И еще раз. Ctrl+V. «Сохранить и закрыть».
Давай посмотрим. Откроем. Работает!
На этом сегодняшний урок мы с тобой закончим.
Я от тебя жду вот этих двух, хорошо сделанных, пунктов. Просто можешь повторить за мной, я не против. Главное, чтобы у тебя получилось.
Впереди нас ждут великие подвиги. Так что делай домашнее задание — и вперед, на седьмой урок!
