Поздравляем, теперь ты можешь сделать почти все!
Осталось несколько деталей.
Сейчас мы будем говорить с тобой про адаптацию сайта под мобильные устройства. Дополнительный урок такой.
Я уже упоминала об этом вскользь, но мне кажется, что я упоминала об этом недостаточно подробно и недостаточно ясно. Количество людей, которые пользуются интернетом с мобильных устройств и, соответственно, что-то ищут в интернете, будут заходить на наш сайт с мобильных устройств, на данный момент среднестатистически превышает 50%, т. е. больше половины пользователей, так или иначе, будут заходить с мобильных устройств на сайт, который ты создашь. Поэтому очень важно, чтобы он корректно работал на мобильных устройствах.
Под мобильными устройствами я понимаю планшеты и сотовые телефоны. Стандартные блоки, которые вот так отображаются, т. е. они уже под какой-то стандарт заточены, они уже имеют свое наименование, т. е., я имею в виду не Zero Block, они уже автоматически сами адаптируются под мобильные устройства, это прописано в самой Tilda.
Но если мы говорим откровенно, не все блоки достаточно хорошо отображаются на мобильных устройствах. Например, галерея во весь экран, если мы сейчас возьмем какую-то галерею во весь экран, она будет не очень хорошо отображаться на мобильном устройстве, особенно на сотовом телефоне.
Можно понять, что мы сейчас имеем такую штуку, как ландшафт, т. е. у нас горизонтальное положение картинки, а если ты это смотришь с вертикального девайса, т. е. с мобильного телефона, и экран у тебя вертикальный, ты не хочешь его поворачивать, то эта история будет выглядеть плохо.
Я сейчас поэкспериментирую.
Опубликуем.
«Открыть страницу», и мы ее немного свернем, как будто это мобильное приложение.
Видишь, отображается не очень хорошо, потому что у нас горизонтальная картинка, она в оригинале не такая мелкая. Нужно понимать, что этот процесс немного нехорошо настроен.
Видеообложки.
Нужно понимать, что в основном пользователи мобильных устройств пользуются либо WI-FI — это хорошо, если он хорошо ловится, то это отлично вообще. Но есть такая вещь, которая называется мобильный интернет, а он не везде ловится хорошо, поэтому сайт для мобильных устройств должен быть максимально облегченным. Именно поэтому вот эта история с видео не подойдет.
И если мы на обычном сайте используем вот такую видеообложку, и она ОК для компьютера, то для сотового телефона, для мобильных устройств, для планшета лучше сделать картинку статичную, и чем легче картинка статичная, тем лучше.
Это не может быть та же самая картинка, которую мы используем, например, для компьютера. И еще такая вещь есть, которая называется Zero Block, которая вообще должна быть настроена вручную под мобильные устройства.
Вот, например, есть у нас вот такая штука — клубнички анимированные, давайте свернем и посмотрим, что происходит, когда мы сворачиваем экран до размера мобильного телефона.
Обрати внимание, у нас все поехало, никакие клубнички, они, конечно, работают, но не понятно, как этим пользоваться.
Почему это происходит?
Потому что Zero Block для мобильных устройств нужно оптимизировать вручную. Найди вот этот блок, который мы с тобой уже собирали, если помнишь, тут клубнички должны выплывать, когда блок опубликован.
Тебе нужно зайти в «Редактирование блока» и ты увидишь наверху вот такие варианты экрана, на котором может располагаться этот Zero Block.
Какой экран у нас горит, тот экран сейчас действует, т. е. мы сейчас работаем для «Экран персонального компьютера». Вот для этих 4 разрешений нам нужно правильно подогнать контент данного блока. Для того чтобы подогнать контент, ты переключаешь на нужное тебе окно и видишь, как тут будет выглядеть твой контент.
Вот так будет выглядеть твой контент. Поэтому ты просто берешь и подвигаешь туда, куда тебе нужно. Чтобы на глазок это все не вычислять, нужно зайти в settings, выделить вот этот элемент и выравнивание применить к нему. Все, он точно по центру у тебя стоит. То же самое с этим: выделяешь, делаешь выравнивание, можно даже поближе. Он точно по центру у тебя получается.
Вот эти элементы — анимация не будет работать на планшете, т. е. они не будут толком отображаться, их можно вообще не трогать. Для того чтобы это было красиво, с Shift выделяем это и с Shift немного пониже опустим, еще раз выровняем, проверим, все ли у нас в порядке. Вот так будет выглядеть у нас экран для планшетов горизонтальной проекции.
Теперь мы идем в вертикальную, смотрим. Нас не очень это устраивает, поэтому опять идем в Settings, выравниваем, вот это тоже выравниваем, не смущайся, что оно вот так все. Выровняли, а теперь можно здесь исправлять размер шрифта. Нельзя добавлять какие-то элементы. Если ты добавишь здесь пробел, то он появится во всех версиях этого заголовка, т. е. и на компьютерной версии, и на горизонтальной версии.
Но здесь можно манипулировать шрифтом.
Вот здесь шрифт, немного поменьше его сделай так, чтобы он помещался. Также рамочкой этой можно манипулировать.
Все, отлично. Посередине. Вот это тоже нас устраивает. Отлично.
Дальше смотрим.
Это горизонталь, т. е. у тебя телефон лежит горизонтально, вот так, тебе нужно под него контент подогнать. Ты можешь это делать рамочкой, главное — ничего не добавлять. Новое что-то добавишь, оно появится на всех экранах.
Тут можешь убавить шрифт. Вот у тебя уже пошел нормальный шрифт. Опять выравнивание применяешь, рамочку можно сделать поменьше.
Все.
На сотовом телефоне это будет выглядеть вот так, если телефон лежит горизонтально.
А это, если телефон у нас вертикально. Соответственно, ты выделяешь, идешь и уменьшаешь шрифт. Когда ты уменьшаешь шрифт здесь, он на других экранах не уменьшается, так же как и размер.
Вот, обрати внимание, не уменьшилось, зато у тебя адаптировался блок под нужды. Заодно здесь можно укорачивать блок, нам такой длинный не нужен. Например, у телефона, когда смотришь, вот здесь экран заканчивается. Зачем нам на эти ножки смотреть? Соответственно, ты укорачиваешь экран. Как укоротить экран? Ты щелкаешь, чтобы у тебя ничего выделено не было, этот блок работает только для экрана, и у нас здесь есть Grid Container Height, т. е. высота контейнера. Нам не нужно 1000, нам нужно 600. Все, вот тебе контейнер, даже немного поменьше можно, давай 500 сделай. Сейчас сделаем, чтобы красиво распределилось.
Еще раз выравнивание проверим.
Вот это наш экран смартфона и на нем будет вот так выглядеть наша картинка.
Здесь то же самое, нам такой длинный контейнер не нужен. Щелкаешь так, чтобы у тебя не было ничего выделено, и здесь прописываешь свою высоту.
То же самое делаем с планшетом. Вот такая высота планшета нам не нужна, это слишком много. Выравнивание проверяем. Save — Close.
А теперь проверим, как это будет выглядеть у нас на мобильных устройствах. Для этого достаточно сузить окно браузера.
Мы опубликовываем контент. «Открыть страницу» и сужаем окно браузера. Вот у нас имитация контента. Понятно, что с визуалом можно поиграть, т. е. ты можешь его сделать побольше, другой шрифт выбрать, например, но суть ясна.
Сейчас начнешь побольше, и она у тебя станет побольше, потому что breakpoint настал. Еще, еще, еще, бац и станет побольше, потому что подгонял под эти размеры. При этом, обрати внимание, что остальные блоки, которые автоматические, тоже имеют свои правила поведения, но они прописаны и от нас не зависят. Они работают, как работают.
Все. Отлично. Возвращаемся к редактированию. Закрываем это.
Есть еще такая вещь, например, нам вот это нужно, чтобы было на экране компьютера, но при этом видео не должно быть показано на мобильных устройствах, потому что оно забирает слишком много интернета и долго грузится, если интернет плохой. Поэтому нам нужно, чтобы вот эта обложка показывалась на компьютере, но на мобильном экране была бы абсолютно другая обложка без видео.
Как это сделать?
Ты заходишь в «Настройки» и вот здесь опускаешься вниз, и тут есть шкала, на которой будет отображаться любой блок. У любого блока есть такая шкала. Ты берешь и подвигаешь, теперь у нас вот этот блок будет показываться только на экране размером от 980 пикселей и дальше по ширине экрана, только на этой ширине экрана он будет показан.
Также можешь, если на большие экраны у тебя какие-то вещи рассчитаны, больше 1200 пикселей, ты можешь вообще даже делить экраны в зависимости от того, какой компьютер или какие мониторы, под каждый breakpoint можешь создавать свои какие-то картинки, иллюстрации.
Но мы оставим вот так. Это диапазон означает, что данная обложка будет показана на компьютере, но не будет показана на мобильных устройствах. «Сохранить и закрыть».
И например, вот эта обложка будет показана людям, которые приходят и смотрят наш landing page на компьютере, а вот эта обложка, т. к. она автоматически подгоняется под размер экрана, будет показана, когда люди приходят с мобильных устройств.
Заходим в «Настройки», идем сюда, в самый конец, и отодвигаем вот эту галочку. Теперь у нас экран меньше 980. Вот в этом диапазоне будет показан данная обложка, т. е. в диапазоне мобильных устройств. «Сохранить и закрыть». Опубликовываем.
А теперь смотри, какое волшебство происходит. Мы открываем страничку для персональных компьютеров — мы видим вот это. Сворачиваем, мы уже это не видим, мы видим вот эту обложку.
Понятно, как работает? То же самое происходит с меню.
Если обратишь внимание, т. к. мы его не настраивали для мобильных устройств, но в свойствах все равно забито, что оно адаптируется для мобильных устройств. Когда мы сворачиваем окно, меню превращается в мобильное.
Точно так же ты можешь выключать какие-то блоки для мобильных устройств. Например, если с мобильных устройств ты знаешь, что очень трудно человеку будет делать заказ, или, например, человеку не нужно видеть на мобильных устройствах данный пункт, потому что он долго грузится или это нецелесообразно, ты хочешь, чтобы landing page для мобильных устройств был гораздо короче, чем для компьютера, экономишь трафик.
Тогда ты заходишь в любой из блоков, который ты хочешь скрыть, например мы этот блок хотим скрыть, заходишь в «Настройки» и вот тут настраиваешь: он будет показан только вот в этом интервале, а в мобильной версии не будет показано ничего, т. е. этого пункта не будет вообще.
Это вся информация, которую я хотела сказать про подгонку твоих блоков для мобильных устройств.
Информации не так много, но она очень важная.
Надеюсь, теперь ты сможешь построить landing page для любого устройства, и все твои landing page и сайты будут одинаково хорошо грузиться и одинаково хорошо работать на всех устройствах.
