Привет! Это седьмой урок. Сегодня нас ждут великие дела, поэтому не будем долго рассиживаться. Поехали!
Мы заходим в наш известный landing page, кликаем. Давай с тобой исправим вот эту синюю иконку, раз уж было доказано, что ты умеешь обращаться с цветом в Illustrator, давай ее поменяем на черный. Я нахожу ее в той папке, где мы ее оставляли, открываю, выделяю, меняю цвет на черный. Обрати внимание, CMYK 0-0-0-100, потому что С — это Cyan, он у нас получается вот такой примерно, М — это Magenta и Y — это Yellow (желтый). Никакого цвета не присутствует, зато К — база, черный на 100%. Вот он. А RGB получается 0-0-0, отсутствие цвета вообще. Точно мы попали в черный. ОК. И тот же самый черный мы вот тут запоминаем. ОК.
Идем в обводку, выбираем. Великолепно. У нас все получилось. Сохраняем.
Загружаем наш landing page. Где он тут — в Download — milk.svg.
Все, теперь моя душа спокойна, что у нас нет синего молока.
Вот это сделали. А вот это? А украшения?
«В форме супергероев», «С фото на бумаге», «Классическое украшение». Я думаю, здесь подойдет не иконка, а фотография, потому что здесь нужно прямо показывать, что за супергероя мы лепим, что за фото на съедобной бумаге и что такое классическое украшение, потому что здесь не очень ясно. Это тот самый случай, когда иконка нам с тобой не поможет.
Для этого блока можно использовать что-то из раздела «Преимущества», с картинками. По-моему, неплохо. Смотрим, «А украшения?». Лучше, наверное, просто «Украшение наших тортов». Подзаголовок нужен — «Каждый торт неповторим!».
Смотрим. Как нам загрузить? У тебя где находится файл? У меня — в седьмом уроке. Такой тортик, такой тортик. А где еще? Идем в «Контент» — «Карточки» — «Дублировать» — «Сохранить». «Настройки» — мне очень не нравится, что у нас торты обрезаются, можно здесь задать высоту побольше, например давай сделаем 400. Видишь, тортики стали гораздо лучше, но все равно не помещаются, давай сделаем 500. Теперь другое дело. Нам осталось это только заполнить. Заполняем мы из плана. «Классическое украшение»: Ctrl+A — Ctrl+C — Ctrl+A — Ctrl+V. Убираем лишние строки. «Классическое украшение»…
Просто заполняй, а я пока перемотаю.
Вот такое решение. Естественно, кнопочки либо мы убираем, либо мы делаем «Заказать». Либо, смотри, для такого же контента можно придумать другое решение. Например, если ты зайдешь в «Колонки». Колонки бывают здесь разные, это не обязательно 3-4 колонок, они бывают вот такие. И среди них есть вот такая штучка интересная, и вот такая штучка интересная.
Вот такая интересная штучка, давай попробуем ее заполнить. «Контент» — «Загрузить файл». Идем, где у нас наши торты. Один такой — «Загрузить файл». Другой — такой. И дублируем. Другой — вот такой. «Сохранить и закрыть».
Теперь нажимаешь на кнопочки, все у нас получается отлично.
«Контент» — все у нас только карточки, а заголовка нет. Чтобы был новый заголовок, ты точно также можешь на крестик нажать, и тут есть «Заголовки». Давай выберем вот такой. И из предыдущего — «Украшение наших тортов»: Ctrl+A — Ctrl+C — Ctrl+A — Ctrl+V. Подзаголовок — «Каждый торт неповторим!»: Ctrl+A — Ctrl+C — Ctrl+A — Ctrl+V.
Здесь, конечно, побольше текста. Но мы тренируемся, нам и так хорошо.
Кстати, тут тоже могут быть кнопки. «Заказать» давай сделаем. Отлично. Еще раз «Контент».
Просто заполняй, а я пока промотаю.
Вот оно! Можно организовать это вот так, можно организовать это вот так. Там, где нужны фотографии и текст, лучше, конечно, давать простор фотографии.
Мне вот это не хочется. Мне хочется вот то. Выключаем.
Настраиваем кнопочки. Как настроить кнопочки? Идем в «Настройки» — «Кнопки». Ctrl+C. Идем в «Настройки», идем в «Кнопки» — Ctrl+V. Цвет текста белый, потому что вишневый (фуксия) фон. Бордюр нам не нужен, поэтому здесь делаем ноль. Радиус скругления — 50. «Сохранить и закрыть».
Наша кнопочка.
Давай посмотрим, как это выглядит. «Предпросмотр». Вот здесь большое расстояние. Откуда оно появилось? Давай вернемся, я расскажу, откуда оно появилось.
Если ты видишь, каждый блок окружен каким-то пространством: сверху, снизу есть пространство. Но когда снизу у одного блока есть пространство и сверху у другого блока есть пространство, возникают такие прогалины, которые нам не нужны. Как их убрать? Мы идем в «Настройки», мы идем в «Отступы». Они есть вот у этого пункта и есть вот у этого пункта. Отступ сверху, отступ снизу. Если я отступ сверху, например, уберу, то получится вот такая история. Давай посмотрим. Видишь? Конечно, теперь заголовки спорят, но эту проблему тоже можно решить. Но в общем и целом понятно, как это работает. Возвращаемся обратно.
Давай все-таки оставим — отступ сверху отменим. «Сохранить и закрыть».
И вспомним, как мы настраиваем какую-то анимацию? Давай анимируем этот заголовок. В «Настройки» идем, и «Анимация», «Заголовок» идет сверху, а «Подзаголовок. Описание» пусть идет снизу. «Сохранить и закрыть». «Предпросмотр». Видишь, все работает.
Посмотрим дальше, что у нас.
Для иллюстрации вот этой истории, чтобы нам могло подойти? Сделаем крестик, зайдем в «Преимущества» и найдем, что нам надо. Вот это ничего так. Смотри, у нас вот это цветное. Вот это — белое, вот это — серенькое. Это тоже должно быть каким-нибудь светлым цветом. Давай тоже сереньким сделаем таким же. Где найти цвет фона? В «Настройках» — «Фон». 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. «Всего 1 день!»
«Почему мы?» — «Выбирайте лучшее!».
И тут нам нужно еще кнопочку настроить. Как настроим кнопочку? У нас все они вот такие кнопочки. Идем в «Настройки», ищем у кнопки вот такую штучку — Ctrl+C. Здесь тоже «Настройки» — «Стиль кнопки» — Ctrl+V. «Сохранить», «Закрыть». Вместо Learn more надо другое что-то написать. Где кнопка? «Заказать». «Сохранить и закрыть».
Кстати, мы вот эти кнопки не настраивали. Давай настроим. Пойдем в «Контент», смотрим, Ctrl+C, и вот здесь то же самое вставляем — Ctrl+V. Здесь тоже Ctrl+V и здесь тоже Ctrl+V. Везде форма одна. «Сохранить и закрыть».
«Контент» — «Кнопка» – Ctrl+V. «Сохранить и закрыть».
Давай посмотрим.
Над этими двумя блоками, конечно, можно поработать. Сделать их красивее, как-то продумать, но мне сейчас важно, чтобы ты понимал, как работают блоки и как легко на Tilda все собирать. Выключаем. Закрываем. Идем дальше.
Как происходит заказ? Это процесс, т. е. тут написано «звонок, заявка», поэтому тебе нужен «Процесс». В Tilda есть такая штука, которая называется «Этапы». Они могут быть как вертикальные, так и горизонтальные. Нам подходит что-то по типу этого. Как происходит заказ? Ctrl+A — Ctrl+C — Ctrl+A — Ctrl+V. Убираем лишнее. Следим за буквами. Ctrl+A — Ctrl+C — Ctrl+A — Ctrl+V. Давай напишем тут: «Мы перезваниваем в течение 5 минут. Не выключайте свой телефон».
Что еще тут? Ctrl+A — Ctrl+C — Ctrl+A — Ctrl+V. «Перезваниваем, уточняем заказ и сумму, дату заказа и прочие детали». «Уточняем детали!». Дальше. Ctrl+A — Ctrl+C — Ctrl+A — Ctrl+V. «Переводите предоплату минимум до 13:00 предыдущего дня» — «Предоплата до 13:00». Ctrl+A — Ctrl+C — Ctrl+A — Ctrl+V. «Доставка до двери».
Вот мы проиллюстрировали, как происходит заказ. Только вот тут нужны иконочки. Я сейчас тебе подскажу, какие иконки тут могут быть, твое дело — найти иконки, поместить их сюда, чтобы иконочки у тебя были, как будто из одного набора. Мы на прошлом уроке проходили, как подгонять иконки, тебе нужно этим воспользоваться, если нужно.
«Звонок или заявка» — здесь может быть телефон или компьютер с мышкой.
«Уточняем детали» — здесь какой-то портрет менеджера. Обычно это человек, который звонит, в общем, тот, кто как будто связывается с клиентом.
«Предоплата до 13:00» — тут денежки могут быть.
«Доставка до двери» — тут машинка или человек, который доставляет какой-то товар.
Твое дело найти все эти иконки, они есть на Flaticon, на Freepik, на icon8 есть, можешь попробовать тильдовские иконки, если есть. В общем, сюда твоя задача вставить их.
Твое домашнее задание. Помимо того, что повторить те блоки, которые я сделала, нужно будет найти и подогнать, и загрузить иконочки самостоятельно. Мы скоро пододвигаемся к самому интересному. Но сначала нам нужно немножечко поработать и доделать ещё несколько блоков. У нас по плану лендинга ещё несколько блоков есть. А потом мы с тобой перейдем к Zero Block.
