Надеюсь, что у тебя все подготовлено ко второму уроку.

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

Ну что, готовы? Поехали!

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

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

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

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

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

Вот этими стрелочками можно шаблоны переключать. Двигаться вперед и смотреть, нравится тебе это или нет, хочешь ты больше кнопок, не хочешь ты больше кнопок, как тебе вообще. Если тебе это понравилось, выбираем это.

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

Я выберу вот этот. Я с ним уже знакома.

Если тебе понравился шаблон, выбираем «Создать страницу». Создаем страницу. И весь контент этого шаблона, включая заголовки, стили, перенесся на твою страницу. Но кое-что изменилось — это вид заголовков и текста.

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

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

Шаблон у нас загружен. Что же дальше делать?

Так как у меня, например, не предусмотрено никакого меню, я бы хотела его удалить.

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

Судьба блока, его жизнь зависит от набора вот этих иконок. Они могут дублировать блок. Обрати внимание, он продублировался точно таким, каким был. Удалить блок — вот здесь корзиночка. Мы можем блок выключить — это значит, что блок не будет видно, но он до сих пор будет там. Это важно, если ты создал, например, несколько вариантов обложек и хочешь показать их все, но с промежутком, или акции какие-то меняются, или вот сейчас этот блок не нужен, потому что товара в наличии нет, а потом он может понадобиться. Здесь с легкостью можно включать и выключать все это, т. е. спрятать блок.

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

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

У каждого блока эти кнопочки идентичны. Смотри: и у меню такие, и у обложки такие.

Правый блок разобрали, осталось перейти и разобрать левый.

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

Дальше идут настройки и контент.

Внимание! Если тебе нравится, как блок выглядит, это значит, тебе нравятся цвета, которые в нем употреблены; тебе нравится, как выглядит шрифт; тебе нравится, что стрелочка, например, моргает.

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

Вид этого блока можно изменить в кнопочке «Настройки». Здесь можно менять цвета, шрифт, размер и все остальное. Т. е. если бы нас устраивал контент, но не устраивало бы как выглядит этот блок, то мы бы пошли в «Настройки».

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

Как можно поменять? Текст меняется очень просто. Ты два раза на него нажал и можешь поменять. Картинку в заголовке, возможно, поменять немного сложнее. Но все и всегда можно поменять по кнопке «Контент». Здесь, например, надзаголовок. У нас он отсутствует, поэтому мы его не видим, но мы здесь можем написать Rusicecream.

Заголовок. Пойдем в наш документ. Заголовок «Натуральное мороженое по старинным рецептам!». Ctrl+C – Ctrl+V. Мы просто вставляем и удаляем ненужные новые строки.

«Невозможно устоять». Ctrl+C – Ctrl+V.

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

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

Когда тебя все устроило, делаешь «Сохранить и закрыть».

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

По центру все-таки лучше оставить. Вертикальное выравнивание: по верху, по центру, по низу. По верху, например. По центру лучше. Но мы сейчас это не используем, потому что нам это не нужно. Меня не устраивает темнота картинки.

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

Как не сплошной, тут же все серое? Но если ты посмотришь вот сюда, у нас есть цвет в начале, т. е. то, что сверху, и цвет в конце, т. е. то, что снизу. Фильтр вертикальный. И непрозрачность этого фильтра. Что значит непрозрачность? Ты же видишь, что здесь проглядывает немножко картинка. Этот фильтр полупрозрачный. Не 100%. Если было бы 100%, то был бы фон черным.

Обрати внимание вот на это — это то, где ты можешь выбирать цвет. Если цвет у тебя не задан никакими гайдлайнами, никаким брендбуком, ты выбираешь цвет по настроению. У меня никаких гайдлайнов нет, я выбираю цвет по настроению. У меня настроение сегодня вот такое. И полупрозрачность, я все-таки хочу, чтобы картинку было больше видно, выбираю, например, 50%. «Сохранить». Смотри, как поменялось.

Что делать, если у тебя есть брендбук и компания, которая заказала тебе лэндинг, сказала, что хочет придерживаться именно этого брендбука, и у них есть фирменные цвета? Что делать в этой ситуации?

Посмотри внимательно, здесь есть обозначения цвета с хештегом. Хештег – это система обозначения цвета Hex. Она так и называется — Hex Color. Обычно в брендбуках не всегда указан Hex. Это нормально. Обычно указан RGB и CMYK. Что делать, если у тебя есть брендбук, в котором указан специфический RGB или CMYK, а тебе нужен Hex, потому что Tilda понимает только Hex? Что делать в этом случае? Тебе нужно открыть Photoshop.

Итак, мы в Photoshop. Как же здесь узнать наш Hex? У нас есть только RGB или только CMYK. Что же делать? Как же быть? Нам нужно идти в палитру. Тебе даже не нужно никакого документа создавать. Ты просто щелкаешь на этот квадратик один раз, и открывается палитра. Здесь есть RGB, здесь есть CMYK и здесь есть Hex, который сейчас выделен синим.

Если у тебя есть код RGB, например 250-250-10. Вот такой у них фирменный цвет, например. Ты вбиваешь RGB, и у тебя автоматически появляется CMYK-кодировка, и автоматически появляется Hex-кодировка. Тебе остается только скопировать код — Ctrl+C, пройти в Tilda и сделать это здесь — Ctrl+V. «Сохранить». Вот у тебя появился тот самый цвет, который нужно было взять из гайдлайна.

Оставим этот желтый, он мне, в принципе, нравится. А внизу, ну что это такое, черный — некрасиво. Давай сделаем перевод его тоже в розовый какой-нибудь. Мы же о мороженом говорим, о фруктовом в том числе. Посмотрим. Неплохо. В принципе, текст читается, но если уж совсем хочется, можно 100% сделать, получше будет читаться текст.

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

Дальше будем все по порядку разбирать. А сейчас нам и этого хватит. Нажимаем «Сохранить и закрыть». И вот у нас готова обложка.

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

Дальше — «О компании». Кстати, смотри, как красиво. У нас есть текст. Заходи в текст. У нас не о компании, а о мороженом.

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

Блок «Почему стоит выбирать нас?».

У нас тоже самое — «Почему стоит выбирать нас?».

«Вы не сможете устоять».

Поговорим об иконках. Любая иконка — это картинка. Она бывает растровой и векторной.

Что значит растр? Растр — это изображение, состоящее из пикселей.

Вектор — это изображение, которое не зависит от пикселей, оно программное, т. е. это код, который содержит информацию о форме и цвете объекта, который нарисован. Это код — важно это понимать.

Растр — это физическая картинка, которая состоит из пикселей, имеет определенный размер.

Я покажу, что я имею в виду.

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

Растровая картинка. Смотри внимательно. Мы начинаем ее приближать, вроде нормально выглядит. Но если мы приблизим вот так, то это просто пиксели. Видишь? Даже контур этой малины пиксельный. Если еще приблизить, то вообще непонятно, что это. Вот эта картинка пиксельная, т. е. растровая. Растровый формат — это любой формат, у которого есть расширение после точки: jpg, png и gif. Это все растровые форматы, они все состоят из пикселей.

И другое дело — это формат svg. Сейчас мы будем приближать эту иконку, и ты поймешь, в чем разница. Она не бьется на пиксели, как бы ты ее не приближал, ты не увидишь ни одного пикселя вообще никогда. Почему? Потому что это программный код, т. е. это математически нарисованная вещь.

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

Поэтому, если вы берете какую-то иллюстрацию, которая сделана в векторе, например в иллюстраторе, вы откройте ее в иллюстраторе и переведите ее в svg. В иллюстраторе можно это сделать через Files, Save As и т. д., мы это тоже будем проходить. Чем меньше растровых картинок на сайте, тем быстрее он будет грузиться. К растру относятся все картинки с расширениями jpg, png, gif, tif и т. д., но эти просто часто используемые в интернете.

Для всех иконок всегда должен быть формат svg. Не переводите иконку svg в растровый формат.

Все иконки, которые я предоставила в папочке, которая прилагалась ко второму уроку, сохранены в формате svg. Поэтому мы заходим и просто их сюда перетаскиваем. Как это сделать? Один раз кликаем, «Загрузить файл», и вот они. Svg. Вот мы загрузили иконки.

Дальше нам нужно поменять текст, потому что он у нас есть. «Сливочное масло» вместо «10 лет работы». Ctrl+C — Ctrl+V.

Если сделал какую-то ошибку: внезапно стер текст и не знаешь, как его сюда добавить. Вспоминаем, где у нас находится контент? Вот в этой кнопочке. Заходим. Находим карточки. Масло заполнено, соки заполнены, а вот это не заполнено. «Свежее молоко» вместо «Непрерывного роста».

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

Еще раз повторяю. На некоторых блоках такое сработает, на некоторых – нет. Если нужно заменить картинку, ты можешь по ней просто щелкнуть и загрузить нужные файлы. Либо дважды щелкнуть на текст и начать менять текст. Помимо того что сам текст можно изменить, можно изменить его вид. Но я не рекомендую это делать, потому что в настройках сайта мы уже прописали, как должен выглядеть наш текст. Будем держаться этой концепции.

Дальше — якорную ссылку удаляем. Мы ее не проходим.

«Наши сервисы». У нас в файле — другой текст — «Процесс изготовления». Ctrl+C — Ctrl+V. Удаляем ненужные пустые строки.

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

Мы пока загрузим картинку. Один раз щелкаешь на нее. «Загрузить файл». И выбираешь файл: рожок, ягодки, парнишка с мороженкой.

За текстом идем. «Хрустящий вафельный рожок». Копируем. Ctrl+C — Ctrl+V.

Если что-то случилось: удалил текст и не знаешь, как теперь сюда подступиться, — «Контент» — «Карточки» — «Описание» — «Сохранить».

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

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

Якорная ссылка не нужна. Удаляем. «Контакты» — подумаем, что это наши, оставляем. Вот эти два пункта.

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

Мы учимся, поэтому нам это не надо. Мы это удаляем.

У нас с тобой сайт готов. Да, так быстро.

Если ты хочешь, например, отменить последнее действие, ты можешь это сделать вот этой кнопкой. Причем она запоминает много последних действий. И если ты «Отменить» нажмешь, то увидишь, что все, что я удалила, — возвращается. Удаляем снова.

Предпросмотр — это то, как будет выглядеть наш landing page до того момента, пока мы его опубликовали. Смотрим. Он выглядит вот так.

Я анимацию не прописывала. Это было прописано в шаблоне. Мы тоже будем проходить простейшую анимацию и, надеюсь, не простейшую тоже.

Вот так выглядит наш landing page всего, без болтовни, за 10 минут.

Возвращаемся обратно.

После того как мы этот landing page сделали, нам нужно его настроить, потому что мы настраивали сайт, но мы не настраивали страницу. У страниц тоже есть свои настройки.

Как видишь, мы использовали шаблон консалтингового агентства, и теперь в заголовке у нас написано «Консалтинговое агентство». Зачем нам это надо? Нам это не нужно. Поэтому мы здесь пишем «Мороженое». Хотя можем написать Rusicecream. Описание — «Самое вкусное мороженое». И адрес страницы — Rusicecream. Все.

У нас есть адрес самого сайта и есть адрес страницы. Если бы у нас было очень много страниц, каждая рассказывала бы о чем-то своем, т. е. одна про продукцию, другая — про вакансии. Если бы у нас была вакансия, можно было бы написать work, если о компании — about. У каждой страницы будет свой адрес на домене.

Помимо первой этой настройки, надо настроить бейдж.

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

Сейчас он начал отображаться, после того как мы опубликовали.

Это картинка, которая будет отображаться при указании на наш сайт, например, в социальных сетях. Ее можно поменять. Если эта картинка не устраивает, и хочется, чтобы здесь был, например, логотип, или другая, более осмысленная, а не такая декоративная картинка, то ее можно сюда прикрепить. Для чего? Для того чтобы это выглядело не вот так, а какой-то другой картинкой. В SЕО-выдаче это будет выглядеть вот так. Сразу показывает как.

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

«Экспорт», если сайт нужно заархивировать и разархивировать на другом домене.

«Действия»: передать страницу на другой аккаунт, дублировать, перевести страницу, удалить страницу (т. е. ее можно совсем убрать, если она тебе чем-то не угодила).

«Дополнительно» — мы это не используем. Даже я это не использую.

Очень часто я пользуюсь таким действием, как «Дублировать страницу». Например, мы создали страницу про мороженое, но наша компания производит еще сорбеты, они делаются без молока на ягодах. Но принцип такой же, т. е. те же самые продукты свежие, тот же самый landing page по структуре. Чтобы не переделывать все с самого начала, не придумывать велосипед, в Tilda есть такая штука, как «Дублировать страницу». На нее нажимаешь и у тебя написано «Копия страницы успешно создана! Перейти к новой странице» или «Вернуться к исходной». Переходим к новой странице. Вот здесь наша новая страница. Давай поменяем здесь еще раз контент. Мне нужно поменять заголовок. Только этим ограничимся. Загрузим файл, например вот с этой ягодкой, потому что мы про сорбет. Rusicecream. «Натуральное мороженое» — «Натуральные сорбеты» напишем. «Свежие ягоды» будет. «Сохранить и закрыть».

У нас поменялась эта штучка.

Давай поменяем еще и градиент. Мне не нравится, что с желтого стартует. Это в настройках. Меняем на голубой, у нас же голубика. Остальное менять ничего не будем. Пусть это будет так. Нужно сначала опубликовать это. Здесь, например, sorbet.

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

Настройки. Видишь, здесь написано Copy of. Но нам не нужно Copy of, тут будет sorbet.

Описание — «самые вкусные сорбеты». «Сохранить изменения».

Посмотрим еще в настройках бейджа — устраивает. Будет вот так — устраивает. Опубликовать.

Для того чтобы перейти на страницу нашего сайта, посмотреть, сколько страниц уже создано, можно перейти вот сюда. Видишь: Rusicecream написано. Щелкаешь — переходишь.

«Пожалуйста, переопубликуйте страницу». Вот есть — публиковать, не выходя.

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

Тут же можно проверить настройки, можно поделиться ссылкой или удалить страницу.

Второй урок завершен.

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

Все. До встречи на третьем!