Эффектный сайт из готовых блоков в прямом эфире 2026

Всем привет. Поставьте, пожалуйста, плюсики, если вы меня хорошо видите и слышите. А вы на канале Тильды. Здесь каждую неделю проходят полезные вебинары про маркетинг, предпринимательство, бизнес и, конечно, про дизайн. Подписывайтесь, чтобы не пропустить то, что будет полезно именно вам. А меня зовут Маша Белая. Я дизайнер в Тильде, и сегодня мы поговорим о том, как сделать эффектный сайт из готовых блоков. Я буду очень рада, если вы будете общаться со мной в чате и буду рада с вами познакомиться, узнать вас поближе. И классно будет, если вы сейчас напишите, сколько лет или, может быть, сколько месяцев вы работаете с Тильдой. А, чтобы я знала, а может быть, что, какие ещё фишки вам нужно рассказать. Вот, напишите, пожалуйста, в чате. Можете просто поставить цифру и давайте начинать. Что же вообще такое готовые блоки? А я бы их поделила на Ой, я вижу, что кто-то 3 года занимается стильдо и большеся слайдов сделал. сайтов, простите, сайтов. Слушайте, это очень круто за такой промежуток времени. Так много сайтов. Год, 6 месяцев, месяц. Классно. Спасибо, что пишите. Я очень-очень рада это читать. Так, что же такое готовые

блоки? А, я бы поделила готовые блоки на две большие категории в тильде. А первые блоки - это базовые блоки. А сейчас я вам покажу. Я думаю, вы знаете. Они находятся здесь, где все блоки. Если вы откроете любую из категорий, то здесь, в самом верху, будут базовые блоки. Ими удобно пользоваться и удобно редактировать. Они сразу подстраиваются под любое разрешение, и ими, правда, легко пользоваться. И вторая категория готовых блоков, она появилась у нас не так давно, - это проблоки. Как их найти? Если вы отмотаете в самый низ любой категории, ну, почти любой, то там будет, участ мы её найдём, а вот такая плашка. И здесь можно показать блоки из проколлекции. И если на неё нажать, то здесь откроется целая галерея таких блоков. Можно подумать, что приставка Pro обозначает, что они какие-то сложные, но сегодня я покажу вам, что их не стоит бояться и с ними можно также легко взаимодействовать, как и с базовыми блоками. Так, посмотрю ещё, что вы пишите. Удобно, что появился автоскейл у базовых блоков. Да, я радуюсь так же, как и вы. А для того, чтобы показать вам возможности готовых блоков, я собрала сайт для вымышленного экскурсовода. А вот такой он будет. И это тот сайт, который мы попробуем с вами собрать из готовых блоков. А пока я вам его показываю, напишите, узнали ли вы здесь какой-то блок. Может быть, вам уже всё понятно, как его сделать, а может быть, что-то вам покажется необычным или неочевидным. Вот сегодня всё это разберём. Вот такой у меня получился сайт. И вообще, почему, почему вообще классно использовать готовые блоки? Во-первых, это легко, их удобно редактировать, они хорошо адаптируются, нам не нужно какие-то сложные, а, вещи в дизайне или в коде узнавать, чтобы с ними работать. Готовые блоки - это всегда легко и просто, и это просто не только для человека, который вешает сайт, но и для человека, который будет его потом редактировать. Например, если у вас какой-нибудь блок и вам нужно менять на нём главный экран, то, конечно, легко зайти в готовый блок и просто поменять контент, добавить фотографию, добавить поменять тексты и всё уже будет готово. Вот поэтому готовые блоки - это классно. А, ну что ж, мы увидели макет. Давайте попробуем воспроизвести его с помощью готовых блоков. А что здесь? В самом верху есть меню, но меню я оставлю на самый конец, чтобы мы могли сразу его полностью настроить, добавить все якорные ссылки. А пока пойдём дальше. А

первое - это обложка. И здесь в таких обложков обложек на самом деле много. Есть целая большая категория среди базовых блоков- это CR50. И у неё есть разные вариации. И здесь я выберу CR50А, потому что она больше всего похожа на то, что мне нужно. И что мне нужно? Мне нужно, чтобы слева была фотография полноэкранная, а справа была текстовая часть. И теперь я буду превращать базовый блок в то, что мне нужно. А для этого давайте сначала наполним всё контентом. А я захожу в раздел контент, и у меня здесь есть заголовок описания, изображение и возможность добавить тексты для двух кнопок. Этим я и займусь. А сначала я добавлю тексты. Я себе подготовила файл со всеми текстами. Да, вообще ещё важно сказать, что все весь контент и весь дизайн сайта я подготовила заранее. И здесь мы будем, конечно, просто переносить его в тильду, точнее он уже в тильде, переносить его в готовые блоки. А, конечно, мм, подготовка самого дизайна - это большая часть работы. И здесь она вне кадра. Но если вы хотите подробнее погрузиться во все этапы создания лендинга, у нас на в журнале Тильды есть специальный курс. Он абсолютно бесплатный, его можно почитать. Он очень удобно сделан с множеством примеров. Называется создание лендинга. Вот там всё очень удобно расписано, какие блоки лучше использовать. Так, здесь я тоже отдельно подготовила все фотографии, чтобы мы не тратили на это время. Сейчас буду быстро их загружать. И дальше у меня две кнопки, а, записаться и выбрать экскурсию. Вот смотрите, они вот так выглядят. Давайте их тоже здесь добавим. Что ещё есть у меня на обложке? У кнопок есть иконки. Причём здесь есть иконка, которая видна сразу, и есть иконка, которая появляется при наведении. И у этой кнопки сразу иконки никакой нет, но при наведении появляется. Как это сделать? в панели contentт. А здесь можно добавить иконку. А для первой кнопки я выберу иконку стрелочку. Здесь можно также выбрать её ширину. Я выбираю такую базовую. И здесь можно добавить иконку при навидении. И уже при наведении я выбрала вот такую звёздочку. Вообще здесь можно добавить не только иконку, здесь стрелки, иконки и даже можно загрузить свой файл. Итак, я выберу. Здесь можно тоже выбирать стиль, в котором он будет, но мне нравится вот такой 3D стиль. И я выберу вот эта звёздочка, которая будет появляться при наведении. И у второй кнопки я сразу настрою эмоy при наведении. И это будет палатка. Так вот как выглядит мой блок сейчас, но это всё равно ещё не то, что мне нужно. А для того, чтобы поменять изображение и текстовую часть местами, я нажимаю галочку "Отразить по горизонтали". Теперь мой блок выглядит вот так. Но и это ещё не всё. Я хочу, чтобы вся текстовая часть выравнивалась по левому краю. Для этого я выбираю горизонтальное выравнивание по левому краю. Угу. Да, даже не эта настройка. Горизонатае выравнивание вот это смещает весь блок, а мне нужно выравнивание текста и кнопки по левому краю. Вот теперь как выглядит мой блок. И, конечно, мне нужно добавить, а, добавить цвета. Для этого я захожу в настройки кнопки и добавлю цвет фона для кнопки. Я его себе здесь отдельно сохранила. Сейчас, по-моему, вот это он. Да, вот это он. Но чтобы его не добавлять каждый раз заново, а я добавлю его сюда в сохранённые цвета. Вот я нажимаю на плюс, и здесь этот цвет появляется. И также я добавлю сразу цвет фона при навидении. Он будет у меня чуть темнее. Я его тоже добавлю и сразу добавлю в сохранённый, чтобы мне было удобно с ним работать. И ещё у всего блока будет цвет фона. И вообще у всего сайта у меня есть такой кремовый фон. И я добавлю его вот в эти настройки. Он немного отличается от цвета этого блока. Я его сразу скопирую и тоже сохраню, чтобы мне было удобно им пользоваться. Так, давайте посмотрим, как выглядит мой блок сейчас. Угу, это уже похоже на то, что мне нужно. А давайте теперь пойдём дальше. Сейчас посмотрю, что вы пишите в комментариях. Угу. Самый частый кейс у меня блог эксперты для разных мероприятий и метапов. Базовые не очень заходят клиентам, но при этом эти блоки часто приходится менять. Должность, фотографии и так далее. Угу. Да, спасибо за вопрос. Э думаю, мы это обязательно рассмотрим. Как раз думаю, что проблоки могут вам в этом помочь, и я сегодня постараюсь снять у вас все страхи относительно использования проблоков, если они вдруг у вас есть. [тяжело вздыхает] А, ну что, давайте возвращаться. Дальше у меня вот такой блок. А здесь просто

сердечко. Как вы думаете, что это за блок? На самом деле есть много разных способов сделать такой блок. Можно взять просто изображение и добавить туда картинку. Но если вам не нужно, не хочется никуда переходить в другие программы, вы можете просто внутри тильды нарисовать его. Почему бы и нет? Для этого нам нужен блок Вектор. Он находится в разделе изображения. И вот он, вот он векторное изображение. А, смотрите, как он работает. На самом деле ничего сложного нету. Вы проваливаетесь внутри редак внутрь редактора векторного, выделяете всё и удаляете, это вам больше не нужно. И выбираете, например, перо. И здесь я нарисую сердечко. Вот такое оно будет. И дальше выделю его и добавлю ему обводку пожирнее. например, вот такую. И оно у меня появилось здесь, но оно очень крупное, и я могу настроить его ширину с помощью обычных контролов, как у изображения. Ну вот, например, в четыре колонки у мне подойдёт. А и дальше я тоже добавлю у него цвет фона. Вот так теперь он выглядит. А, ой, даже он у меня здесь ещё меньше. Ну, давайте сделаем ещё меньше. Мне кажется, три тоже будет хорошо. И дальше

у меня вот такой блок. Если у вас предположение, что это может быть, это базовый блок из категории услуги. Давайте его тоже найдём. И мобильную версию мы обязательно сегодня посмотрим. Сейчас я соберу несколько блоков и посмотрим, как они выглядят вместе в мобильной версии. Итак, мне нужен блок из категории услуги, и это SV406. А как вообще можно искать блоки? Можно искать их по категориям или можно их искать с помощью поиска? И давайте этот блок я найду с помощью поиска. Я вбиваю свои 40406. И вот появляется этот блок. Вот как он выглядит в своём изначальном виде. И сейчас мы приведём его к тому формату, который нужен нам. А для этого удаляем заголовок и описания, потому что они нам здесь не нужны. И также удаляем отступ сверху. И даже можно ещё вот этого блока отдалить, потому что здесь они приближаются прямо почти к иконке. И дальше, что мы можем настроить здесь ещё? Конечно, цвет. Цвет для карточек. Мы берём их уже из сохранённых цветов. Это очень удобно. Не нужно их заново вбивать. Цвет для карточек. и цвет для всего блока. И теперь для текстов нам тоже нужно задать цвет. У меня он будет чёрный для заголовков, для описания и для разделителя, для вот этой линии. А давайте посмотрим, похож ли теперь блок на то, что у меня в макете. А, да, он действительно похож, но не хватает кнопки. А для этого давайте зайдём в контент. И здесь в карточках, во-первых, сейчас добавим все тексты. И здесь есть название кнопки. А давайте посмотрим здесь узнать подробней. Сейчас я а перенесу всё в макет. Скажите вообще, какой ваш любимый этап в работе над проектом? Нравится ли вам, а, именно собирать сайт в Тильде или, может быть, вам больше нравится работать над идеей и самим дизайном? Для меня вот собирать сайт в Тильде - это такое почти медитативное занятие, прямо можно успокоить М, в общем, творческая часть отдыхает и работает логическая часть. И мне это очень нравится. Вот здесь название кнопки всех будет одинаковое. И остальное тексты я сейчас быстро перенесу. Так, вы пишете, что не знали, что минуя зероблок можно сделать иконку. Да, это прекрасный лёгкий инструмент. И можно сразу даже выгрузить её. Даже можно не заходя в аккаунт Тильда пользоваться векторным редактором. Очень удобно. Так, ну что, вроде бы я перенесла сюда весь контент. И что происходит теперь? Кнопки а выглядят не как кнопки, но это мне и нужно. Давайте посмотрим, почему они выглядят не как кнопки, и поменяем им цвет. Здесь есть настройки кнопок, и можно выбрать вид кнопки. Можно сделать как обычную кнопку, а можно как ссылку со стрелкой. И меня второй вариант вполне устраивает. И здесь можно задать цвет текста. Я его тоже сделаю чёрным. И вот как у меня получилось теперь. И вот как выглядит здесь. Всё похоже, да? А давайте пойдём дальше. Дальше вот такой блок. А пока вы им любуетесь, я попью воды и почитаю ваши комментарии. Нравится создавать анимацию блоков. Кайфую прямо. Да, очень вас понимаю. А мне тоже нравится верстать Тильди. Класс. Я согласна с вами полностью. Любимый этап - это получать деньги. Ну, слушайте, кто же с таким будет спорить, конечно. Так, следующий блок - это блок с

галереей. Причём здесь есть не только фотографии, но и какие-то отдельные иллюстрации на фоне всего сайта. Как же такое сделать? А для этого нужно просто выгрузить иллюстрацию как PNG НГ или СВГ без фона и добавить его точно также в ряд с галереей. И это галерея GL23. Давайте её добавим и настроим. Вот так она выглядит изначально. Можно сразу убрать у неё отступ и пойдём её настраивать. Поставим ширину у неё 100%, потому что здесь она растянута на весь экран. А стили - это то, сколько карточек будет в ряду. У меня здесь пять карточек в ряду. И здесь я тоже её сделаю. Это, кажется, третий стиль. Давайте проверим. Сейчас посмотрим. Угу. Ну, давайте оставим такой вид. И выбираем отступ между колонками. Теперь у нас все карточки находятся вплотную друг к другу. И что здесь ещё можно сделать? А в целом для наших целей тут все настройки уже заданы. Добавим фон для блока, как и для всего сайта. И а ещё знаете какая здесь есть настройка? Здесь есть цвет подложки изображения. Это как раз, если вы выгружаете свG или пнг и у вас нету фона, то здесь вы можете задать отдельно цвет подложки, если хотите, чтобы он отличался от всех остальных, ну, точнее, от фоно всего блока. Вот здесь есть такая возможность, но нам это ну давайте зададим такой же цвет и добавим изображение. Так, давайте удалим те, что нам не нужны, и загрузим сразу несколько. Я прямо выбираю их пачкой и загружаю. Так, ещё почитаю ваши комментарии. Так, будет ли где-то список блоков? Да, список блоков появится в описании к этому видео. Ну и сейчас тоже я, конечно, проговорю каждый блог. А подскажите про новый Vibeблог уже говорили? А я ещё не говорила. Могу с удовольствием вам про него рассказать. Давайте после в конце нашего эфира, когда всё соберём. А как делать кнопку имя, фамилия вверху? А, да, это я обязательно расскажу. А, расскажу чуть позже. В самом конце мы меню будем собирать в конце, чтобы сразу проставить все якорные ссылки, чтобы не делать его дважды. Но соберём в самом конце. Так, вот я добавила фотографии. И вот как это всё выглядит. И здесь я вижу, что фотографии немного не в том порядке, как мне нужно. Мне здесь нравится, что вверху получается такая чёткая линия и дальше всё немножечко рассыпается, будто бы. И мне хочется добиться того же здесь. А и поскольку я загружала фотографии в том порядке, в котором мне нужно, давайте я попробую нажать на кнопку расположить изображение в обратном порядке. Угу. Уже ближе к тому, что мне нужно. И давайте, может быть, немножко их поменяем местами, чтобы смотрелось лучше. А для этого я просто пробую перетаскивать. И чтобы не нажимать сохранить, закрыть и потом открывать настройки. Смотрите, можно нажать на стрелочку, панель сворачивается, и можно посмотреть, что поменялось. Так, мне хочется ещё куда-нибудь перенести. Угу. Так, наверное, буду в другую сторону переносить, чтобы все такие изображения без фона были в основном внизу. Так, но в целом почти то, что мне нужно. Вот такой вариант меня в целом вполне устраивает. Мне только не нравится, что две очень похожие фотографии появились вместе. Нужно их немного разнести. Давайте попробуем вот так. Угу. Отлично. А что ж, такой вариант меня устраивает. И а давайте посмотрим, как это выглядит в мобильном виде. Для того, чтобы посмотреть, как блок будет выглядеть в мобильной версии, вы можете опубликовать и открыть на мобильном устройстве, либо через панель разработчика посмотреть, как пульт выглядеть в мобильном виде. А либо вы можете открыть преспросмотр, можете сделать его прямо здесь. И вот тут наверху, а, вы можете выбрать устройство, с которого будете смотреть. Давайте посмотрим сразу мобильную версию. Здесь всё хорошо, и меня всё устраивает. А здесь получились, а здесь, на самом деле, сейчас я вам подскажу, вот такие динамичные блоки. А вам может показаться, что в мобильной версии они выглядят странно, но на самом деле, если обновить, то вот как они выглядят на самом деле. То есть мобильной версии этой анимации нету. И это нам на руку. Так и должно быть. Пользователь сразу увидит всю информацию. А дальше появляется галерея. Но смотрите, здесь галерея очень длинная. Она мне такой длинной в мобильной версии не нужна. Что можно с этим сделать? А мне очень нравится эта функция у базовых блоков. Я могу выбрать диапазон видимости на устройствах. И вот такую большую галерею я оставлю только на больших разрешениях. Вот выберу от 640 и выше. И эту же галерею я продублирую и уберу из неё часть фотографий. Оставлю здесь только вот самые-самые. Вот, например, вот эту вот часть уберу. И, может быть, из иллюстраций тоже часть уберу, потому что они здесь работают на эмоцию. А в мобильной версии мне важно, чтобы пользователь сразу считывал информацию. И я здесь оставлю только вот такие фотографии. Давайте посмотрим. Здесь их стало меньше. И в мобильной версии можно, кстати, сразу в редакторе, не обязательно спрят просмотр смотреть мобильную версию. Выглядит вот так уже более лаконично. И я возвращаюсь в десктопный вид и настраиваю здесь диапазон видимости на устройствах от нуля до 640. Вот теперь у меня два разных варианта. Теперь, а давайте посмотрим, какой блок идёт дальше. Сейчас вот здесь в моём сайте, а вот

такой блок. А я люблю такие блоки делать в зеролок. Как-то вот ты на автомате, может быть, видишь какую-то композицию такую сложную и идёшь, может быть, открывать зеру. Не знаю, есть ли у вас такая привычка. Вот у меня иногда срабатывает. Но на самом деле этот блок это просто базовый блок из категории колонки. Давайте его добавим. И это CL05. Так, сейчас ещё посмотрю ваши комментарии. Так, и вернусь. И давайте зададим ему тоже цвет фона. Так, да, кстати, смотрите, цвет фона можно задавать из вот этого виджета фона. Я забыла совсем про него рассказать. В углу базовых блоков у большинства блоков находится маленький кружочек, и там можно сразу назначить цвет фона или можно сделать это в настройках. Вот здесь то всё то же самое, просто для удобства и быстроты можно добавить его там внизу. Так. И здесь у меня текст располагается не так. Здесь большое расстояние, здесь по первой колонки и здесь находится дальше. Давайте сделаем так, чтобы по дизайну всё совпадало. Для этого я открываю настройки и открываю панель ширины блоков. И здесь можно перетаскивать отдельно каждый фрагмент. И, по-моему, у меня было настроено вот так. Сейчас мы добавим сюда текст и посмотрим, что будет. Так, так ли всё выглядит? Вот бы так. Вот здесь можно ещё сейчас. Ага. Ну, с отступами здесь всё и так хорошо. А давайте переходить дальше. Дальше вот такой блок. А есть ли у вас

варианты? Что это за блок? Базовый это блок или это проблок? На самом деле это базовый блок. Это вообще, наверное, один из моих любимых базовых блоков. Это TE900. И давайте его найдём. У него, э, он очень универсальный. Если вы наберёте его номер, то вы увидите, сколько у него здесь вариаций. И с ним можно сделать, ну, совершенно разный дизайн. И для того, чтобы сделать то, как у нас, а, я возьму наиболее близкий к тому, что нам нужно. Это 900C. Вот как он выглядит. Здесь есть модный сейчас эффект стекла. Напишите мне, пожалуйста, как вы относитесь к этому эффекту. Я встречаю среди дизайнеров очень разные мнения на этот счёт. Интересно, что думаете вы? И вот здесь вот он эффект стекла. Мы его отсюда возьмём, а, и сделаем его вот в таком виде. Для этого мы в настройках Давайте, а, нет, давайте пойдём в контент и сразу развернём все карточки и удалим все изображения. Они нам здесь не нужны. И а сразу перенесу контент. В вы контент можете переносить и внутри карточек, и сразу в визуальном виде блока. Но я здесь делаю это вот внутри панели контента. А будто бы с карточками, которые ещё сдвигаются, так удобней. Так, а вы напишите пока, что вы думаете про этот эффект стекла. Мне правда очень интересно. Так, сейчас я всё переношу. нормально, если не переусердствовать в самом дизайне, да? Аэ, ну, на самом деле это наверное любой приём, если переусердствовать, то может получиться м может получиться либо какой-то специальный м как бы это назвать, специальный гратеск. А либо, ну, либо это будет выглядеть неуместно. Вообще, наверное, уместность моё любимое слово в дизайне. Так, сейчас переношу весь остальной контент. Здесь получилось много карточек. И это на м таком сайте горизонтальный ск скролл. во-первых, перебивает ритм, что вы сначала идёте так, а потом поворачиваете. А, и во-вторых, его он, можно сказать, даже экономит длину страницы, потому что будет скролить те, кому действительно интересно посмотреть, какие же там есть маршруты. Так, и у всех них одинаковая кнопка. По-моему, там было подробнее, да? Сейчас всё это перенесём, и этот блок будет почти готов. А, и интересно, есть ли у вас мысли, как сделать фон у этого блока? Фон с небом. Так, давайте посмотрим, всё ли правильно я перенесла. Ага, смотрите, тут появилась какая-то лестница. А, фона нету. И всё выглядит не совсем так, как мы представляли. А давайте с этим что-нибудь сделаем. А, во-первых, мы заходим в карточки и делаем соотношение сторон карточек 16 на9. Тогда у нас пропадает здесь гигантский отступ. А, и у карточек здесь есть внутренний отступ, потому что когда мы добавили, там была вот эта фотография, и внутри фотографии была карточка с отступом. Нам, у нас фотографии нету, поэтому внутренние отступы можем смело удалять. Так. И ещё здесь есть настройка, а, вертикальное выравнивание. И мы выбираем вертикальное выравнивание по верху, чтобы здесь у нас не было вот такой волны. Вот как это всё выглядит теперь. Давайте посмотрим. Похоже, но не хватает фона. И что нам с этим сделать? Так, пишите, что стекло обожаете использовать на проектах и любите. Угу. Классно, классно. Спасибо вам за тёплые слова. А так, давайте сделаем здесь, во-первых, кнопки, они все по низу выровнены. Давайте найдём эту настройку здесь. Скорее всего, она либо в кнопках, либо в карточках. Сейчас посмотрим. Я, если честно, сама забыла, где эта настройка, но настройки тильда собраны по категориям. Я думаю, здесь будет несложно разобраться. Ага, ещё забыла сказать про скругление. А я придумала, что здесь, в моём макете, всё скругление будет пять пикселей. И поэтому сейчас я здесь это тоже сделаю. Вообще, если вы замечаете, что я про что-то забыла вдруг макете, не стесняйтесь, пишите мне, будем вместе искать и исправлять. А ещё здесь можно добавить стиль подсказки в, а, в мобильной версии при горизонтальном скроле. Здесь есть рука. И в целом я бы её и оставила. Так, давайте, чтобы было лучше видно, сразу добавим фон. А здесь здесь фон вот такой. И он сделан специальным блоком, модификатором. Цель тема хороша, что всё изучить невозможно. Постоянное обучение при сборке сайта. Да, не могу не согласиться. А так давайте добавим. А модификатор он находится сейчас. Давайте лучше найдём его по поиску. И это я тут себе выписала, какие блоки нам нужно обязательно использовать. М, это Т674. Давайте его здесь и наберём. И вот он модификатор добавления фонового изображения. А, как вы заметили, у меня это изображение используется в нескольких блоков, и я его добавлю через этот модификатор, и сразу нам станет более понятно, что происходит в нашем блоке. Заходим, загружаем файл. Вот он у меня специально подготовлен. И вот как наш блок выглядит теперь. И нам нужно поменять цвету кнопок. А, смотрите, как вообще редактировать кнопки. Мы можем редактировать их через вкладку Content, но ещё можно их редактировать с помощью видеото кнопок и так часто намного быстрее. И я сейчас так и сделаю. Здесь добавлю подробнее и добавлю стиль для кнопки. А цвет фона я возьму из уже сохранённых цветов. И в дополнительных настройках цвет фона при наведении тоже добавлю из сохранённых. И здесь можете сохранить. И вот он применился для всех кнопок. А вот здесь только я забыла поменять текст. Так, отвлекусь на ваши комментарии, попью воды. А возможно ли через модификатор только фон сменить на одном блоке стандартном? Да, это возможно. Я сейчас добавила модификатор, и он поменялся только на одном блоке, потому что на всех остальных блоках задан цвет фона. Смотрите, вот у каждого блока есть настройка цвет фона для всего блока. Если вы его добавляете, то модификатор под ним не виден. Если вы удаляете, то он виден. Поэтому, да, вы можете его использовать для любых базовых блоков. Так, и нам нужно поменять цвет стрелочек. А для этого переходим в стиль слайдера. Здесь, поскольку я вверху в обложке использовала вот такую стрелку, я тоже возьму такую такой стиль стрелки. И дальше и поменяю цвет фона. Вот так всё выглядит теперь. И сейчас я хочу здесь ещё скругление. Я поставила. Так, подскажите, как вы как выровнять кнопки и как ещ и где искать модификатор. Угу. Так, сейчас всё покажу. Так, где искать модификатор? Это блок из категории, точнее, это блок Т674. Он находится в категории другой, если я правильно помню. Да, вот здесь находится и ваб блок, про который я расскажу чуть позже. И вообще много интересных блоков. А здесь есть подсказка для ссылки. Например, цвет модификаторы стиля ссылок на всей странице. А, много полезных блоков. Прямо заходите, посмотрите. Вот он. модификатор добавления фонного изображения для всей страницы. Так. И что же, знаете, я вот должна признаться, я не могу сейчас сходу найти, где нам выровнять кнопки везде по низу. Поэтому, что я делаю? Я, а, пойду в аналогичный блок. Помните, я вам сказала, что TE900 имеет много, а, много вариаций. А давайте откроем блок, где есть уже эта настройка, и посмотрим. Может быть, там она, мы сразу поймём, где она находится. или если вы уже знаете, где это, напишите мне в чате. Так, а найдём. Он находится в категории плитка и ссылка. Вообще я обожаю эту категорию. Здесь есть очень много интересных блоков. Ну и сейчас найду. А наш Е900. Вот он. Так. И что мы видим? Давайте найдём, где здесь, может быть, вот здесь будут карточки. Кнопки выровнены. Сейчас мы это проверим. Ага, здесь не переместилось. А что, если они будут выровнены на Сейчас, секунду, всё проверю. Угу. Здесь тоже не выровнено. Ну что ж, знаете, давайте я пойду дальше, но если я пойму, как это сделать, я вам оставлю комментарий на а на по тем ссылкам, где вы сейчас смотрите этот вебинар. А давайте так идём дальше. А я обязательно к этому

вернусь. А что здесь? Здесь вот такой блок. И это, на самом деле, тоже базовый блок из категории преимущества. И давайте его найдём. Сможем ли мы узнать его в его изначальном виде? На самом деле, я думаю, это будет он похож на то, как он выглядит изначально. И это вот этот блок FR308. А вот как он выглядит. И нам нужно превратить его вот в такой блок. Первое, что мы делаем, мы избавляемся от фона. Избавляемся от модификатора фона, добавляя фон. Вот мы его применили. Блок выглядит уже более привычно. И что мы делаем дальше? Давайте сразу добавим иллюстрацию. Вот я её загружаю. И теперь мне нужно отразить контент. Находим галочку "Отразить по горизонтали" и поменяем ширину блоков. А здесь у меня изображение занимает мало места и много места занимает текстовая часть. И вот что я с этим сделаю. Вот так уже намного более похоже. А дальше у меня здесь галочки находятся слева от текста, а в оригинальном макете сверху. Для этого тоже есть специальная настройка. Расположение иконки в карточке. Перемещаем сверху и также добавим все цвета, которые нам нужны. Так, где находятся цвета? У нас есть цвету кнопки, но нужна ли нам тут кнопка? А тут кнопки не нужно. Вообще я сторонник того, чтобы кнопки добавлять очень, очень точечно в лендинг, чтобы они были прямо к месту, там, где пользователь готов уже совершить целевое действие. А поэтому здесь кнопку из контента я удаляю. Ну и давайте сразу, раз уж я зашла в контент, перенесём туда всю нашу текстовую часть. Здесь есть заголовок и описание. Так, и две карточки. Да, обратите внимание, я меняю здесь, и у меня сразу меняется контент в блоке. Так, и последняя карточка. Так, контент мы поменяли, и нам нужно сделать цвет у галочек. И вот здесь я добавляю цвет. Он будет зелёным, как у кнопки. И смотрите, что классно. Здесь есть галочка применить ко всем карточкам. Нам не нужно идти к другой галочке. Мы сразу применяем её и туда тоже. Вот теперь как выглядит наш блок. И это то, что нам нужно. А переходим дальше. Вот такой блок. И это тоже блок из категории преимущества. Так, сейчас отвлекусь на ваши комментарии. Подскажите, я когда вставила модификатор, он у меня разделился по девять картинок. а не как один фон. А, смотрите, здесь в модификаторе есть настройки. Сейчас откроем их. Можно разместить изображение как паттерн. Скорее всего, если у вас какое-то маленькое изображение, оно пойдёт действительно как паттерн из нескольких картинок. А можно не размещать его как паттерн. Попробуйте, просто уберите эту галочку. Возможно, это ваш случай, и вам всё поможет. А и ещё здесь можно не фиксировать изображение при скроле. То есть сейчас давайте сохраним. То есть вот здесь фон будет статичен. Вот видите, если мы фиксируем, фон остаётся как бы на заднем плане и весь сайт двигается поверх него. А если не фиксируем, он остаётся статичным. Вот мы эту галочку снимаем, нам здесь это не нужно. И ещё здесь есть переход изображения в цвет фона. То есть мы можем настроить, что к низу блока будет, например, резкий переход в какой-то цвет, ну или нерезкий. Здесь можно выбрать, как это будет использовано. Вообще интересный блок. А, посмотрите, можно применять разные эффекты к вашей странице. Так, надеюсь, ответила на ваш вопрос. Очень много интересных идей. По ходу забираю идеи, применяю. Спасибо вам большое. Я очень рада. Это была моя цель. А так, идём дальше. Это блок из

категории преимущества. И это блок, я вам сейчас я его записала себе в шпаргалку, чтобы точно не перепутать. Это FR310. Вот он здесь рядом находится. А что здесь можно сделать? Здесь, во-первых, тоже можно сделать текстовую часть поменьше, а карточки побольше. И здесь нужно обязательно сделать количество карточек в ряду. Вот оно у меня две карточки в ряду. И тогда блок уже становится визуально таким, как здесь. Но у меня здесь нет никаких иконок, поэтому я захожу в контент, открываю карточки и смело удаляю все иконки. Они мне здесь не нужны. Вот. И нужна ли мне там кнопка? Да, кнопка мне нужна. И я переношу сюда весь текст. Здесь у меня блок преимущество. И вообще должна сказать, что если какой-то блок находится в категории преимущества, это не значит, что использовать его можно, например, только для преимуществ. Вы можете использовать его, а с вообще как вы захотите. И категории - это такой навигатор, а где, ну, точнее, вы думаете, как можно вообще сделать, например, отзывы, открываете и смотрите, какой есть выбор. Но этот же самый блок с отзывами вы можете использовать и для команды, для преимуществ, вообще, а для чего захотите. Здесь вы абсолютно не ограничены. Давайте сейчас перенесу их не через контент всё, а прямо здесь. Так, контент перенесён, но карточки не того цвета и кнопка тоже не того цвета. Кнопку я сразу через виджет кнопки сделаю. Так что у меня здесь текст забронировать экскурсию. Ну я его сразу и напишу. И здесь тоже добавлю ему сразу цвет. Цвет из сохранённых цветов и цвет при навидении. Вообще очень классно использовать какую-то микро анимацию. Так, почему-то а классно использовать микроанимацию для кнопок. Тогда пользователь видит, что сайт живой, сайт отзывается на ваши действия. А, ну, конечно, я написала заголовок в ссылку. Да, вот что значит волнение во время прямого эфира. Что ж, теперь всё выглядит почти так, как мне нужно. И мне нужно только добавить скругление у кнопки. Вот теперь всё выглядит так. Но не всё. Мне ещё нужно добавить цвет для карточек. Для этого я захожу в раздел с карточками и ищу цвет фона карточки и добавляю тот, который мне нужен. Но закругление у карточек мне тоже нужно. Поэтому я возвращаюсь в эту настройку и добавляю скругление у карточек. Практически у всех блоков, где есть карточки или где есть обложки, можно добавить скругление. И это очень классная настройка. Она помогает делать сайт таким по тональности и интонации, какое вам нужно. Так что ж, с этим блоком всё хорошо и пора переходить дальше. Вот такой вот блок. Есть ли у вас мысли, как его сделать? Я пока почитаю комментарий. Фиксация суперской прискроле на Зеру часто использую. Да. Как убрать фоновое изображение с небом на всей странице? Оставить только для одного блока. А для этого вы для у всех остальных блоков задаёте цвет фона. Это можно сделать вот здесь вот, где модификатор, либо в настройках. Давайте ещё раз покажу. Вы открываете, здесь есть цвет фона для всего блока. Как только вы его добавляете, фоновое изображение пропадает. Так, ещё почитаем. Так, спасибо большое за поддержку. Да, я мне это очень помогает, правда. Так, а давайте идти дальше. У нас здесь

очень сложный блок. И здесь мы переходим к категории проблоков. И сейчас я покажу вам, что это на самом деле классно и легко. Ага. Так, есть вариант: обыкновенный блок и бегущая строка повернуть почти. Да, только не обыкновенный блок, а проблок и бегущая строка повернуть. Да. Пожалуйста, поставьте, напишите что-нибудь, если вы не знали, что бегущую строку можно повернуть. Вот. А я пока буду делать этот блок. Итак, это блок из категории проблоков. И это, сейчас я его найду. Это блок из категории этапы. Вот категория этапы. Очень красивая категория. И здесь внизу есть проблоки. Проблоки обозначены вот такой молнией в начале. И вот этот блок HW501. Вот как он выглядит в изначальном виде. И нам осталось его немного отредактировать. Для того, чтобы отредактировать текст в проблоков, вы вам не обязательно нажимать редактировать блок и проваливаться в Zeroблок. Вы можете отредактировать его прямо так. И что мы сейчас и сделаем, здесь наверху напишем процесс работы. И эти блоки свёртаны дизайнерами на автолей-аутах, поэтому в моменте редактирования весь контент будет подстраиваться как в базовых блоках. У вас здесь не произойдёт ситуации, что какой-то текст будет заезжать на другой текст, несмотря на то, что это zer блок. Здесь всё благодаря автолей-аутам сделано так, что его можно редактировать и не бояться сломать. Переносим дальше. Здесь смотрите, текст удлинился и линия тоже удлинилась. Так, здесь также всё удлинилось и всё отлично выглядит. И последний, четвёртый шаг. Так, весь контент перенесён. И здесь у нас есть бегущая строка. Давайте попробуем её добавить и повернуть и посмотреть, что будет. Бегущая строка находится в категории разделитель. Здесь, на самом деле, тоже есть интересные блоки. Например, а знали ли вы, что вот эти три иконки, можно сделать их не три, а 10, и там выбрать что это будет за иконка? Но его мы сейчас использовать не будем, а возьмём бегущую строку. Вот так она выглядит изначально. И посмотрим, что здесь есть. Здесь есть карточки, то есть вы можете добавить несколько разных текстов, и между ними будет разделитель. Здесь сейчас эта точка, у меня в макете это картинка. И здесь у меня использованы три карточки с тремя разными текстами. Давайте их сюда добавим. Вот три карточки. И добавим текст. Первый текст. Второй текст. и третий текст. И дальше мы можем выбрать иконку или загрузить файл. Я выбираю загрузить файл. И для этого я специально нарисовала цветочек. Давайте посмотрим, как это всё будет выглядеть. Вот так. Цветочек появился между каждым словом, но всё ещё выглядит не так, как нам нужно. А что нам нужно? Нам нужно убрать фон. Ну или сделать такой же, как здесь. Давайте его здесь просто уберём. Нам нужно сделать не давайте точно, если убрать, у нас же будет так. Поэтому давайте попробуем вот так. А нам нужно высоту строки давайте сделаем поменьше, 60 пикселей. А дальше разделитель. Здесь есть ширина разделителя. Давайте сделаем его побольше. Ну, это, наверное, слишком. Ну, допустим, 30. Вот. И текст мы меняем на зелёный. Да, всё верно, да? У меня тут зелёный. А что нам нужно сделать ещё? А поскольку здесь на сайте движение идёт из левого верхнего угла в правый нижний, то и текст будет тоже двигаться в эту сторону, чтобы у нас не было здесь противовеса в движении чтения и в движении чтения блока и движение чтения бегущей строки. А поэтому мы меняем движение на движение слева направо. А и дальше у нас есть угол поворота. И это 15° для того, чтобы всё смотрелось так, как мне нужно. Но смотрите, если мы просто повернём строку, она станет ниже блока. А мне здесь нужно, чтобы строка прямо заходила на сам блок. И для этого здесь есть специальная настройка смещение сверху. Это смещение видно только на опубликованной странице или на предпросмотре. А, и мы здесь его зададим. Я специально его рассчитала. Нам нужно сделать -400, чтобы строчка поднялась вверх на 400 пикселей. Давайте посмотрим. Вот вы можете открыть предпросмотр в новой вкладке, и здесь он будет у вас отображаться в реальном времени. Если есть какие-то изменения, вы можете нажать, а, переопубликовать. И здесь будут видны все изменения. Давайте посмотрим, как выглядит сейчас наша страница. Здесь есть проблемы с отступами, и мы до них ещё доберёмся. И вот как выглядит а наш блок с шагами. И он выглядит в целом так же, как мне нужно, только здесь у нас меньшая скорость. И скорость тоже можно настраивать. Так, но что же у нас происходит на мобильной версии? Давайте вернёмся и посмотрим на неё. А здесь есть подсказка, которой мы можем листать карточки влево. Здесь всё хорошо. Здесь тоже всё хорошо. И вот наш блок с шагами. И тут, а, полоска наша проходит прямо по контенту. Что нам нужно сделать? Нам нужно убрать эту полоску, скрыть её видимость на а десктопе, а, точнее, оставить только на десктопе. Для этого мы переходим в диапазон видимости на устройствах и меняем её вот оставляем её только для больших разрешений. Так. И, но для того, чтобы на мобильной версии она оставалась, мы дублируем её и поменяем. Мы уберём угол поворота и уберём смещение. Это станет просто обычная бегущая строка. И оставим её только на остальных разрешениях. Тогда здесь она будет как такой действительно как разделитель такой эмоциональный разделитель с эмоциональным окрасом. Вот будет её функциональная роль. Так, посмотрю, что вы пишете в комментариях. Так, а вопрос про блоки в данном случае с бегущей строкой. Сильно ли утяжелит сайт? Нет, это базовый блок, если вы имеете в виду по скорости загрузки. Нет, здесь никакого утяжеления нету. Если вы имеете по вду по визуалу, здесь надо смотреть, а какие блоки находятся рядом. Может быть, в каком-то дизайне это будет действительно уже перегруз, но где-то как акцент, как какая-то одна яркая эмоциональная деталь, почему бы и нет. Так, у меня нет блока. Шв 501. Это из-за тарифа. У меня personal. На тариф personal должен быть этот блок. Давайте посмотрим. Он находится в категории этапы. Может быть, вы не раскрыли, там должна быть панель показать про блоки. Это из проблоков. Попробуйте открыть эту вкладку. Я показывала её в начале. Она появляется один раз. Если вы ещё не открывали проблоки, попробуйте открыть. Он там должен появиться. Так, а что ж, давайте, давайте посмотрим, как теперь выглядит всё в мобильной версии. Видите, тут написано, что данные предпросмотра устарели. Давайте запомним, что каждый раз нам будут они обновляться. Откроем мобильную версию. И здесь теперь вот как выглядит наш блок. И это та тот вид, который я и хотела увидеть. А, поэтому мы возвращаемся и идём дальше. А какой блок дальше? Дальше вот такой

блок. И я думаю, на самом деле, что он многим из вас хорошо знаком. И давайте воспроизведём. Здесь у меня, видите, диагональ в одну сторону, а потом диагональ спускается в другую сторону. Это блок из категории изображения. И вот он. Это IM06. Вот этот блок. А, но как же его сделать в том виде, который мне нужен? Для начала давайте добавим изображение. [откашливается] Вот эта фотография. Угу. И здесь он такой довольно длинный. И в конце появляется текст, но мне он не нужен такой длинный, а я его делаю. Здесь высота задана в VH. VH - это высота области просмотра в процентах, то есть это проценты от высоты вашего экрана. И здесь 170 этих процентов а мне так много не нужно. Я задам а 500 пикселей. И вот блок стал короче. А, но для того, чтобы переместить текст в правую часть, [откашливается] я открываю ширину блока и переношу. Вот так это будет выглядеть. И забираю отсюда текст. Вот. Для того, чтобы у нас изображение продолжалось дальше и постепенно всплывали несколько текстов, мы просто дублируем тот же самый блок, переносим в нём текст. Вот теперь он будет по центру. И здесь он будет слева. Вот. Вот у нас сделан такой блок. Довольно быстро, просто. Ну и давайте перенесём остальные тексты. Но как это всё будет выглядеть в мобильной версии, спросите меня вы. А я скажу, что для мобильной версии это немного слишком. Поэтому для мобильной версии я оставлю только одну фразу. И это будет последняя фраза. Для этого, для остальных блоков я сделаю диапазон видимости на устройствах. Ну, например, вот такой. Тогда в мобильной версии мы будем видеть только последний блок. вот этот блок. И эта одна фраза меня вполне устроит в мобильной версии. Так, давайте двигаться дальше. А дальше

вот такой блок. И это абсолютно базовый блок, суперпростой, но очень удобный. Это блок из категории услуги. И мне кажется, это, ну, довольно часто используемый блок. Я очень люблю его использовать в своих проектах. Это услуги, где с одной стороны заголовок, а с другой стороны раскрывающийся список. Вот SW503. И давайте перенесём туда весь контент. У меня есть только заголовок. Описание я удаляю, оно мне не нужно. Так. И давайте перенесу вот отсюда. Прямо можно редактировать здесь. Можно редактировать через контент. Я сделаю через контент. Так, убираем булеты. Так, ещё две карточки. Сейчас всё сделаю. Так, вот как выглядит наш блок. Но что здесь нужно ещё поменять? У нас у вопросов большое расстояние, у заголовка маленькое. Давайте это исправим, точнее, перенесём в наш макет. Вот так. И теперь добавим цвет фона для всего блока, чтобы там не было фонового изображения. И нам нужны ещё ещё стили разделителей. Сейчас мы их тоже найдём. Так, а вот они цвет обводки. Вот. Отлично. Что ж, всё, теперь всё выглядит так, как мне нужно, и мы переходим дальше. А дальше такой

сложно-сосоставной по смыслу, я бы сказала, блок, потому что на самом деле всё это отзывы. Здесь текстовые отзывы, а здесь видеоотзыв. Здесь рассказ о том, что можно посмотреть видео про поход. И это всё объединено по смыслу в одну секцию. Это обратная связь. По смыслу здесь эти блоки объединяет фон. Вот фон неба как единый фон блока объединяет их по смыслу. Но по структуре это два разных блока. Это базовый блок и вот это проблок. Обратите внимание, что проблоки собраны так, что они собраны по такой же сетке, как и базовые блоки. И поэтому вот здесь они все на одной оси и вообще отлично сочетаются друг с другом. Так сделано специально, чтобы вы могли легко их комбинировать. Переходим и базовый блок отзывов. А сейчас мы их его найдём. Вот здесь уже пошли проблоки. Значит, базовые блоки находятся выше. И это вот он ТС105. У нас здесь сразу цвет, а, сразу появляется небо на фоне. А, но смотрите, этот блок выглядит совсем не так, вообще-то. А как же нам привести его в вид, который нам нужен? Для этого в настройках здесь есть карточки, и у карточек есть стиль. Это может быть карточка с уменьшенным изображением или карточка с крупным изображением. и тогда уже всё выглядит бли ближе к тому, что нам нужно. А мы добавляем скругление пять пикселей. Так, вот оно применилось. А мы ещё добавляем цвет фона для, ну, не для всего блока, а цвет фона для карточек. Вот он наш светлый цвет. И что нам ещё нужно? Нам нужен цвет стрелок. И нам нужно поменять стрелки. Это стиль галереи. Опять меняем стиль стрелки и меняем цвет фона. Цвет фона на зелёный, а цвет стрелки на белый. Вот так всё выглядит. И давайте сейчас перенесём контент. Так, контент мы перенесём вот отсюда. У нас есть заголовок, можно добавить описание, но здесь, я думаю, что оно в целом лишнее. И дальше у каждый человек что-то рассказывает. Поэтому мы добавляем текст отзыва, добавляем текст для имени и добавляем текст для описания, в чём участвовал этот человек. Это участник группового или индивидуального похода. И дальше давайте сразу добавим фотографии. Так, в каком они у меня порядке? Вот первая фотография, вторая и третья. Так, фотографии загружены. А давайте посмотрим, что ещё, чем ещё отличаются эти карточки немного пошире. И чтобы текст было легче читать, да? Потому что когда два слова в строке, это может быть трудно для чтения, если это не заголовок, конечно. То здесь мы делаем стиль. Сейчас нам нужно сделать стиль карточек. Вот ширина карточек побольше. Вот я думаю, семь колонок будет оптимально. А дальше переходим в контент и добавляем текст для следующей карточки. Для следующей карточки у нас довольно длинный отзыв. И добавим имя и описание. И последняя, третья карточка. Сам отзыв, имя и описание. Вот как выглядят наши карточки теперь. Но что же делать? У нас получилось, что две карточки, в них мало текста, а в одной карточке текста много. А для этого в любом блоке тильды есть возможность скрыть часть текста подкат. А для этого выбираете текст, который хотите скрыть. И здесь нажимаете на три точки и нажимаете на скрыть текст. Вы нажимаете, и тут можно добавить кнопку раскрытие и кнопку скрытия. Ну давайте здесь напишем скрыть. И можно также добавить цвет для этого текста, чтобы он отличался от цвета остального отзыва. И вот я так сделаю. И вот что у нас получилось. Можно читать далее. Тогда текст карточки раскроется. Так. И сейчас выглядит всё, как здесь. Давайте пойдём дальше. Вот этот блок из категории, на самом деле, о проекте. Это то, о чём я говорила, что мы можем использовать блоки из категории не только по тому, как они расположены, но и как захотим. И здесь, в самом низу, начинается коллекция про блоков. И здесь вот такой блок А17. Вот мы его открываем. И здесь как мы можем добавить текст изображения? Текст точно так же, как уже добавляли в других проблоках. Добавляем сюда текст. И обратите внимание, что ширина, высота, точнее, всего блока тоже меняется в зависимости от текста. Здесь мы пишем вот такой текст. И внизу будет кнопка смотреть видео по хода. Ну, точнее, даже не кнопка, а ссылка. Пока мы переносим только текстовую часть. Для того, чтобы загрузить это изображение, мы нажимаем на него, открывается а визут загрузки, и мы добавляем изображение человека. А дальше как же нам загрузить изображение? Вот здесь, а, по клику у нас ничего не происходит, потому что это изображение, а, находится внутри других элементов. И давайте откроем zerблок и посмотрим, как нам его поменять. Когда мы открываем Zerobлок, впервые появляется, точнее, проблок, впервые появляется вот такое окно. Нам нужно здесь выбрать тип вёрстки, в которой будет существовать этот блок. Первое - это free layout. Это привычная вёрстка, когда все элементы, вот вы здесь видите, можно перетаскивать. Нет, вот можно перетаскивать, и они никак не будут видоизменяться относительно друг друга. Но нам нужен автоout, это продвинутая вёрстка. А здесь, видите, весь контент подстраивается под элементы, и его легко редактировать. Вы, пожалуйста, не пугайте слово продвинутая вёрстка. Сейчас я вам покажу, что здесь всё легко. Мы нажимаем "Применить". И что мы здесь видим? Нам нужно найти то, где находится это изображение. Для этого есть слева панель слои. Если у вас её нету, вы можете нажать на три точки и вот здесь открыть эту панель. И здесь в слоях а вам нужно найти, где же находится изображение. Вот, например, я выбираю весь блок. Он, видите, выделен, выделена прямо область этого изображения. И вот здесь есть файл, кстати. лайфхак. Если вы вам нужно понять, тот ли этот файл, вы просто нажимаете на ссылку, и он открывается рядом. Вы такие: "Ну, действительно, это тот файл, значит, именно сюда нам нужно загрузить а наше изображение". Так, какое у меня тут изображение? У меня тут, кажется, вот это, да, и изображение загрузилось. И в целом мы могли бы отсюда выйти, но я хочу ещё попробовать добавить сюда ссылку. Для этого мы проваливаемся прямо до этого текста. Можно его выделить и вот здесь задать ссылку. Это будет ссылка для видео. И можно точно так же, как и в других ссылках, добавить цвет для текста. Но цвет я оставлю чёрным, но добавлю ещё линию для подчёркивания. Вот у меня будет такая линия. Применяю, сохраняю, выхожу и мой блок готов. Но у меня здесь не появилось фон неба. Почему? Потому что в самом дероблоке задан цвет фона. Его здесь тоже можно легко удалить. Удаляем, сохраняем. И вот как всё выглядит теперь. Убираем большой отступ. И давайте посмотрим, как всё выглядит в разных версиях. Давайте посмотрим сначала на десктопе. Так, здесь надо будет ещё поправить отступ. Это мы пройдёмся в конце. Угу. Здесь появилась а вот такая полоска неба. Я знаю, как её убрать. А корректны ли такие проблоки с автоскейлом дружат? А если вы делаете проблок, потом разбиваете его, то есть не используете автолейауты, то да, там можно добавить автоale и всё будет нормально. А, но сейчас, если у вас на автолейаутах автоale сейчас недоступен, так, сейчас мы уберём эту линию. Давайте сразу прямо пойдём и уберём её. Для этого мы вот здесь добавим настройки цвета фона для всего блока. Всё, тогда эта линия у нас исчезнет. Давайте проверим. Всё, добавили. Линия сразу исчезла. Вот этот блок. А дальше отзывы. И вот он наш блок с отзывами. Как видите, ничего сложного в проблоках нету. Он выглядит хорошо. Давайте посмотрим, что происходит на мобильном устройстве. На обильном здесь всё хорошо, но а что мы видим вот здесь? А фотография немножко обрезалась. А и сейчас я вас научу такой хитрости, как делать так, чтобы не идти там исправлять эту фотографию, а как сделать так, чтобы она, а, сразу выглядела, точнее, чтобы та часть, которая вам важна, всегда была на виду. Для этого мы заходим в редактирование блока, находим эту фотографию, и здесь есть расположение. И мы можем выбрать, поскольку у нас лицо находится сверху по центру, мы выбираем по центру сверху. И тогда на всех устройствах по центру сверху лицо будет видно. Сохраняем и закрываем. Да. А здесь всё хорошо. А так, давайте двигаться дальше. Какой дальше блок? А вот такой блок. И это

тоже проблок из категории контакты. Давайте его найдём. Уходим в самый низ, потому что это проблок. Вот он цент 501. Вот как он выглядит. И вот что нам нужно из него сделать. Что ж, давайте заменим фотографию в первую очередь. Фотография может быть даже не скруглёнными углами. Она здесь станет со скруглёнными, потому что это настройка внутри самого блока. А давайте заменим контент. Здесь у нас имя, здесь описание и вот здесь текст про то, что стоит связаться. Здесь меняем на телефон и добавляем почту. Так. А здесь, поскольку сделано это кнопкой, нам придётся провалиться внутрь и добавить опять здесь продвинутую вёстку. Выбираем, проваливаемся к самому тексту на кнопке. И вот здесь кнопка, текст. Меняем на то, что нам нужно. И смотрите, нам здесь больше ничего не нужно. Нам не нужна вот эта колонка. И мы её просто выделяем всю вот эту, и удаляем. И ничего у нас не ломается, и всё остаётся хорошо. А дальше нам здесь ссылка тоже не нужна. Мы тоже её находим и удаляем. И вот как выглядит наш блок сейчас. Давайте посмотрим, что нам нужно. Нам нужно поменять цвет фона. Да, у нас же везде он чуть-чуть темнее. Опять возвращаемся в редактирование и меняем цвет фона. Здесь тоже есть сохранённые цвета. А вот как блок выглядит теперь. Тоже быстро, так же быстро, как и базовый блок. Мы его отредактировали.

И дальше вот такой красивый блок. А что же это за блок? А давайте, [откашливается] на самом деле, если вы увидели похожий блок, то можно просто предположить, где он может находиться. И это категория формы. И в формах внизу тоже есть проблоки. И вот он такой с эффектом стекла. Мы здесь сейчас, где он находится? М, вот он. Мы, видите, не перебарщиваем, стараемся не перебарщивать с эффектом стекла вот в этом сайте. И вот он здесь находится. А что нам нужно сделать? Нам нужно, а, поменять настройки формы, потому что здесь у нас прибавляется ещё одно поле. А, добавить галочку про согласие на политику конфиденциальности, а, поменять цвет, поменять изображение. Давайте это всё сделаем. Открываем редактирование блока. Опять выбираем продвинутую вёрстку. И, а, для начала давайте заменим фоновое изображение. Оно здесь вот сразу его прекрасно видно. Фоновое изображение. Загрузить файл. Мы его загружаем. И вот оно появляется на фоне. А дальше мы выбираем форму и открываем поля для ввода. Здесь точно такая же механика, как и в базовой форме. А какие у нас есть поля? почта, имя, телефон и, а, возможность что-то написать. А давайте, у нас всё это есть, мы только здесь давайте поменяем на почта, ваше имя. Так, телефон там в целом и так понятно, что это телефон, потому что появляются цифры. Я здесь не буду ничего писать. И дальше мы добавляем поле, которое будет называться поле для ввода в одну строку. И в подсказке значения пишем, а какое путешествие вы хотите отправиться. Закрываем. И вот что у нас в форме. Но мы забыли очень важную галочку про согласие на обработку персональных данных. А для этого мы опять открываем поля для ввода и добавляем ещё одно поле. — [откашливается] — Это поле галочка и тут мы можем прямо сразу скопировать. Оно вот здесь и написано. И мы делаем её обязательной для заполнения. Сохраняем. И вот как теперь выглядит наша форма. для того, чтобы поменять текст на кнопке. А здесь ниже есть текст кнопки, и у нас здесь кнопка записаться. Цвет фона также меняем, но здесь, именно для этого блока, мне хочется сам цвет кнопки выделить ярче. Поэтому здесь я делаю наоборот. Я беру более тёмный фон для кнопки изначально, и при наведении я сделаю его более светлым. И теперь мне осталось только поменять текст для заголовка описания. Давайте его добавим. Сохраняем. И вот все блоки, почти все блоки, кроме меню, добавлены на страницу. Теперь нам очень важно посмотреть мобильную версию

и проверить все отступы. Для отступов я уже помню, что у нас была проблема у этого блока, поэтому здесь я вижу, что у нас нулевые отступы и в десктопной версии тоже нулевые. Поэтому будем работать с отступами у этого блока. Здесь сделаем сверху ноль. И для того, чтобы все отступы выглядели аккуратно, а я приведу их к единому значению. Например, это будет четыре, а, четыре линии или 120 пикселей у всех блоков, ну, кроме блока обложки, можно прямо пройтись и поставить, чтобы здесь всё было одинаково. Давайте проверим. А, да, какдавать отступы? При наведении, видите, у края блока появляется вот такая стрелка, и вы можете сразу подвинуть на нужное вам количество пикселей. Или вы можете зайти в настройки блока, и здесь будет отступ сверху и снизу. Так тоже можно. Сделаем везде четыре. Кроме таких блоков, да, в которых у нас особенная вёрстка. Так, теперь всё смотрится намного аккуратнее и чище. А, и теперь, а, давайте перейдём к блоку меню.

меню. А что у нас с блоком меню? Это меню тоже с эффектом стекла. Мне кажется, здесь оно выглядит прямо классно. Это меню, в котором есть фотография и имя, пункты меню и дополнительные пункты меню появляются, если мы открываем бургер. Давайте попробуем такое меню создать. А на самом деле в Тильде есть очень много пунктов, блоков меню. А это базовые блоки, у них очень много настроек. Можно их превратить вообще, мм, можно неузнаваемыми сделать в одном и том же блоке два разных меню. А, но для нашей ситуации нам больше всего подойдёт сейчас найду, какое меню. Так, сейчас это сейчас найду. [фыркает] Вот нам нужна одна из вариаций меню ME400. Здесь есть у неё есть особенность, что тут есть бургерменю, и оно может по-разному раскрываться. И сейчас я найду то, которое подойдёт нам. Вот я думаю, что нам подойдёт ME400Е. А давайте посмотрим. Вот оно сразу так выглядит. А, во-первых, расположим весь контент. Список пунктов меню. Сейчас я его добавлю. У нас будут пункты меню, которые будут видны сразу, и показаны только в бургере. Почему это удобно? Когда пунктов меню очень много и они постоянно будут перед глазами, это может быть визуально сложно. Во-первых, визуально может быть восприниматься как нагромождение, а во-вторых, чем меньше выбор, тем проще его сделать для пользователя. Поэтому хорошо выносить самые главные пункты меню, а остальные либо делать как меню второго уровня, либо как сейчас делаю я, унесу часть в бургер. Так, здесь ещё будут контакты и дальше будут пункты мего рода. Это будут индивидуальные экскурсии, групповые экскурсии и кнопка оставить заявку. И как мы помним, а где я делала блог про индивидуальные групповые экскурсии, там была кнопка подробнее. Это будет находиться на другой предполагаемой странице, поэтому здесь они будут отдельно. Так. И дальше, дальше. Что у меня ещё из контакт из меню? У меня есть кнопка оставить заявку. Вот я перехожу в кнопки. Вторая кнопка мне не нужна, а вот первая нужна здесь оставить заявку. И в целом м дальше мне нужно только логотип. Давайте разберёмся с логотипом. В логотип, как вы, может быть, уже догадались, мы будем добавлять имя человека и его фотографию. Давайте сделаем В этом случае хорошо иметь фотографию сразу с закруглёнными углами, потому что какую мы добавим, так она и отобразится. Так, давайте посмотрим, как выглядит наше меню. Оно выглядит вот так. Как нам привести его теперь в тот вид, который нам нужен? А теперь мы открываем панель настройки. И давайте посмотрим, вспомним, что у нас тут происходит. А первое, что нам нужно, давайте пройдёмся по всем настройкам. А основные настройки, поведение, позиционирования, оно будет здесь в целом можно оставить по умолчанию или сделать, чтобы она фиксировалось при скроле. То есть, когда мы скролим, меню следовало бы за нами и нам это нужно. А дальше высота меню 60 пикселей, размер контейнера. А тут я делаю 100%. Но почему 100%? Потому что именно от ширины экрана у меня будет вот этот отступ боковой и верхний, кстати, тоже. А дальше фон меню. Цвет фона давайте возьмём тот, который у нас есть. Размытие фона давайте сделаем прямо большим. Вот 20 пикселей, мне кажется, нам подойдёт. Непрозрачность 10%. Отлично. И, а, добавляем отступы. Внешний отступ меню сверху. Ну, 10 пикселей, мне кажется, нормально. И в мобильной версии пять пикселей тоже отлично. В мобильной версии мы стараемся ужимать всё, особенно главный экран, чтобы вся главная информация была видна сразу. А внешний отступ меню по бокам а давайте сделаем 20 пикселей, а в мобильной версии пять пикселей. Радиус скругления давайте тоже сделаем пять. Так, отступ [откашливается] здесь в целом нас всё устраивает. И тень нам не нужна. Тень мы уберём. И горизонтальной линии у нас здесь тоже не будет. А дальше давайте сразу перейдём к логотипу. А для того, чтобы задать ему, а, ширину. Здесь, я думаю, что 40 пикселей будет нам достаточно. Давайте посмотрим. Вот так это выглядит. А в целом всё отлично. А дальше что ещё нам нужно? Иконка меню. Вот тот самый гамбургер. Мы переместим его справа. Вот он сразу появился справа. И он у нас тут есть. И дальше у нас есть у настроек, почти у всех настроек, например, у пунктов меню есть настройка видимость в шапке меню. Мы можем не отображать меню в шапке, можем отображать только на десктопной версии, только на мобильной или везде. Я выбираю отображать только на десктопной версии. И вот здесь очень классная настройка отображать какое-то количество пунктов в основном меню, то есть вот здесь, а остальные пункты прятать внутрь. И я этой настройкой воспользуюсь и добавлю сюда цифру четыре, потому что четыре у меня основных пункта меню. Вот они. Остальное будет спрятано в бургер. А дальше я то же самое сделаю с кнопкой. А ещё очень важно, мне нужно, чтобы эти пункты меню располагались справа. Сейчас они уехали слева. Вот я поменяла их на правую часть, и они сделались большими. Давайте уменьшим им. Но они, конечно, сделались большими, потому что здесь стоит значение размера шрифта. Давайте сделаем его вообще поменьше и уберём капитальное написание. Вот, например, ну, 16, мне кажется, будет отлично. Дальше кнопки. И у кнопок мы делаем видимость в шапке меню. Ну, давайте, давайте только на десктопе. И сразу здесь можно сделать так, цвет фона, тот, который нам нужен. Ага, это у нас градиент. Выберем сплошной цвет. Вот он у нас. И в дополнительных настройках подставим цвет а фона при наведении. Если у вас есть дополнительный, а, дополнительный лайфхак, как вы любите пользоваться меню, напишите, пожалуйста. Так, а вот как у нас выглядит сейчас. Давайте посмотрим, как это выглядит в предпросмотре. Здесь четыре пункта меню. И когда мы раскрываем Ага, смотрите, когда мы раскрываем, мы можем выбрать, как будет выглядеть меню, которое мы раскроем. И вот здесь давайте вернёмся и поставим другое ему поведение. Выпадающее меню. Есть четыре, а, четыре вида. Мне нравится боковая панель. Итак, давайте посмотрим, как теперь выглядит наш сайт. В целом, он выглядит так, как нам нужно. И что нам осталось сделать? Нам нужно

задать якорные ссылки, чтобы меню работало. Давайте вернёмся к редактированию и добавим якорные ссылки. Добавлять якорные ссылки можно двумя способами. Способ первый: а, добавить через контекстное меню. Вот здесь есть пункт якорная ссылка. Можно на него нажать и прямо написать. А этот способ удобен, когда ваш сайт вряд ли будет меняться. То есть вряд ли какой-то блок вы удалите и забудете, что у вас на нём стоит якорная ссылка. А когда вот он у вас есть и это, например, какая-нибудь конференция, она прошла, и вы вряд ли будете там что-то менять, потому что этот лендинг, он имеет какой-то срок действия. А вот если ваш сайт вот такой, то я люблю больше второй способ - это отдельный блок якорная ссылка. Находится он в категории другое. И вот он Т17 173. Здесь можно сразу написать имя, а имя этой якорной ссылки. Давайте вернёмся и посмотрим, какие у нас вообще пункты: маршруты, отзывы обо мне и контакты. А давайте эту прямо скопируем эту ссылку и поместим туда, где нам нужно. А так нам нужны отзывы. Отзывы находятся вот здесь. И перед этим блоком мы ставим якорную ссылку. Прямо вставляем. И можно написать, можно какое-то текстовое значение, можно значение, а числь, не знаю. В общем, можно любое значение. Давайте, чтобы сейчас не тратить время на придумывание, я напишу здесь просто цифру. Вот я запоминаю, что здесь цифра три. Перехожу в контент, открываю список пунктов меню. И здесь в отзывах я оставлю решётку и три. Это значит, что это будет якорная ссылка внутри той же самой страницы. И давайте также сделаем с контактами. Контакты у меня такие состоят из двух блоков. Я поставлю вот здесь. То есть мы берём предыдущий блок, вставляем якорную ссылку и, например, контакты будут четыре. И здесь также переходим и ставим ссылку на четыре. А я не буду так делать со всеми пунктами меню, чтобы не задерживать вас. Я думаю, что основной принцип вы поняли. И давайте сейчас отвечу на вопросы, если они у вас есть

или, может быть, какие-то появились. А, так, сейчас почитаю. Так, как сделать кнопку имя, фамилии вверху слева? Можно ли туда поставить ссылку? Так, как сделать? Я показала ссылку можно туда поставить. Давайте найдём. Сейчас вот здесь в пункте логотип можно поставить ссылку. Да, это может быть ссылка либо на главную страницу вашего сайта, либо куда-то, куда вы захотите. А так про Vibблог, давайте кратко расскажу. Про viblog - это блок в Тильде, где вы можете сгенерировать блок по вашему описанию. Находится он вот здесь или в категории другой в самом верху. Вы добавляете его, пишите здесь промт, нажимаете и блок сгенерируется. по вашему описанию. А вы также можете посмотреть примеры, вот здесь они есть, какие блоки можно сгенерировать. На самом деле это только конечно, это не все возможности, это только примеры, что в целом может здесь, а быть. Вот, попробуйте и пишите, если вы уже попробовали. Это очень интересно. Так, давайте посмотрим, есть ли ещё какие-то комментарии. Спасибо за тёплые слова. Так, если на что-то не ответила, продублируйте, пожалуйста, ещё. А если у вас есть идеи, как, какие вебинары вы ещё хотели бы услышать на нашем канале, тоже пишите. Спасибо за эфир. Не представляю, как вы верстаете, когда кто-то смотрит. А даже не знаю, что сказать. Ну, я мне радостно с вами пообщаться. Вот. Спасибо. Но я прекрасно понимаю, да, мне кажется, это два типа людей, которым нужно а окружение или тишина. узнала много интересного. Спасибо. Спасибо вам. Спасибо вам, что были сегодня со мной. Я очень надеюсь, что этот эфир был для вас полезным. Если есть какие-то вопросы, пишите в комментариях. Даже если я не отвечу сейчас, то вернусь к вам с ответом позже. Спасибо большое и до новых встреч здесь на канале Тильды. Всем пока.