Мобильная версия сайта на Тильде

Начну с краткого экскурса.
Для чего нужна мобильная адаптация?

В первую очередь для того, чтобы посетителю с мобильных устройств было удобно просматривать ваш сайт. Ведь если он зайдет с мобильного, а ему покажется обычная версия сайта (под десктопы), то с огромной вероятностью, посетитель уйдет искать более удобный сайт. А в 2021 году, процент посетителей с телефонов и планшетов сильно обгоняет компьютерный трафик.

Я ярый приверженец конструктора Tilda Publishing. Потому что, ребята очень активно развиваются, сама платформа не глючная (я знаю, о чем говорю, у меня за спиной работа не в одном десятке конструкторов). Широчайшие возможности. Даже если что-то не удается реализовать в стандартном функционале, то есть энтузиасты, которые помогают пользователям с реализацией кода.

Из коробки в Тильде идет интеграция со множествами сервисами (оплаты, рекламы и аналитики от Яндекс и Google, CRM, email-рассылок и тд.)

Особенно хорошо продвигаются сайты на Тильде в поиске. Есть чек-лист проверки сайта под SEO, настройка переадресации и редиректов.

Есть прекрасный функционал мультилендинга, что значительно увеличивает конверсию с платного трафика.

Что-то я отвлекся. На самом деле, конструктор Tilda я могу расхваливать часами)))
Перейдем к адаптации.

На Тильде легко настраивается диапазон видимости каждого отдельного блока. Причем там их целых 6 разрешений:

• От 1200 px и более;
• От 980 до 1200 px;
• От 640 до 980;
• От 480 до 640;
• От 320 до 480;
• И от 0 до 320 пикселей.

Можно легко отключить или включить для определенного разрешения экрана.
Например, первый экран стандартного блока, выглядит хорошо на ноутбуке, а на айфоновых экранах - вся информация не помещается и ее посетителю придется скроллить, что может сильно сказаться на конверсии. Для этого мы ставим видимость блока от 980 и выше. А для мобильных экранов, создаем новый и ставим ему видимость от 0 до 980.
Мы даже можем отдельно создать блок для планшетов, если этого требует дизайн.

Мало кто знает, но у стандартных блоков Тильды, можно настраивать отдельно отступ для мобильной адаптации. Сверху и снизу. Ну это логично)))

Но для этого надо нажать на иконку ноутбука, где настраиваются отступы.
Вообще, Tilda мне нравится еще и тем, что они лаконично и удобно вписывают настройки в интерфейс. То, что может навредить в дизайне сайтов молодому дизайнеру, они прячут.
А вообще, функционал стандартных блоков конструктора крайне ограничен и сложные проекты разработчику на них сложно создать. Для этого на помощь приходит Zero!

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

Кстати, возможно, кто-то не знает, но в Тильде можно конвертировать стандартный блок в Зеро. Не все, но многие.

Только главное правило, сначала конвертируй, потом уже в нем создавай страницу или блок. Потому что можно подумать, что сначала я сделаю, то что мне нужно, а потом я сконвертирую в Zero и будет мне счастье, но нет. При конвертации, все ваше редактирование, слетит и блок превратится в базовую версию стандартного.

Вообще, для быстрой работы с Zero и настройки адаптации, нужен опыт. Я вспоминаю себя, начинающим пользователем Tilda, для меня адаптация превращалась в ад, я тратил на нее уйму времени, делая ее самостоятельно, без расширений и помощников в виде обычного shape. Я с калькулятором и направляющими считал отступы и в редакторе двигал элементы.
Я даже не думал о том, что отступы можно было измерить шэйпом и этот же шэйп использовать как измеритель расстояния других элементов.

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

Сейчас же, появилось прекрасное расширение Annexx (платное) от сторонних разработчиков с мощным функционалом, но его цена ничтожна мала по сравнению с экономией времени.

Разработчики дали возможность сами выбрать, сколько оплатить. Цена в месяц. Минимальная стоимость около 250 руб.

С этим расширением легко массово настраивать выравнивание и сетку (Grid Window контейнер). Для текстовых элементов, есть возможность (как в Фигме) одной кнопкой сделать все буквы с большой или маленькой буквы.

Есть возможность предпросмотра штрифтов из Google Fonts. Именно предпросмотра. Для этого вы в Зеро в Тильде включаете определенный штрифт, расширение его подтягивает из Гугл шрифтов, для предпросмотра, а при выходе, он сбрасывается. Это сделано для того, чтобы вы могли быстро перебирать штрифты и выбирать понравившиеся. А потом, подключать в Тильде.

Лично я этой функцией не пользуюсь, потому что я все сайты сначала делаю в Фигме, а потом переношу в Тильду.

Также, можно массово включать и копировать sbs-анимацию.

Более подробно обо всех функциях можете прочитать на сайте разработчика.

В Zero, лучше делать все по порядку.

Например, у вас есть карточки товаров или что-то подобное, что сильно меняет расположение и размер в зависимости от разрешения экрана (как у меня на скрине).
Не делайте все сразу элементы, в одном разрешении!!!

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

Не уделяйте много времени всем разрешениям, которые настраиваются в Тильде!

Уделяйте много времени только трем разрешениям:
— от 0 до 320 px,
— от 320 до 480 px,
— от 1200 до ∞

Почему так? Потому что это самые популярные разрешения, с которых заходят пользователи на сайты.
Нет смысла прорабатывать планшеты и разрешения маленьких старых мониторов, просто потому, что максимум 5% людей зайдут именно с них.
То есть, прорабатываем мобилки и компы (ноуты). Остальное, просто должно все вмещаться в видимую зону.

Однажды, я потратил несколько дней на настройку сложной анимации в Тильде для всех разрешений. Просто анимацию - 2 дня!!! Хотя можно было забить на промежуточные разрешения и сделать только на мобильных и десктопных за полдня.

Для тех пользователей, которые верстают текстовые блоки в редакторе зеро в Тильде.

Многие замечали, наверное, что если мы чередуем стандартный блок и зеро, где есть текст или заголовок, то у них разные отступы на телефонах.
Частое сочетание, когда стандартный блок заголовка, а текст сверстанный в зеро. У стандартных блоков стоит отступ 20 пикселей от края экрана (Window), а в зеро, стандартно на мобильной версии 10 px по Grid.

Чтобы это исправить, нужно просто в Zero задать отступ 20 px и поставить Window контейнер.
Так как разрешения мобильных экранов, пестрят разнообразностью, то текст нужно выровнить аккуратно по всей ширине экрана телефона. Для этого надо в настройках ширины текстового контейнера, переключить с пикселей на %. (На скрине ниже показано) и отрегулировать чтобы текст занимал всю ширину экрана, но и были отступы примерно по 20 px от левого и правого края экрана.

Есть минусы этого способа верстки, но они не значительные, поэтому об этом не будем (Если кому интересно, пишите в комментах, отвечу). Ну и в любом случае, другого способа выравнивания контента в Zero относительно стандартных блоков в Тильде я не нашел.

Подходим к одному из самых интересных моментов в статье про адаптацию на Тильде — это мобильное меню.

Как правило в мобильной версии используется меню бургер. На мой взгляд, самое универсальное это ME403.
В него можно добавить все популярные элементы для лендингов, интернет-магазинов, сайтов услуг и создания любых страниц:

• логотип
• разделы
• два текстовых блока, куда можно добавить, например, адрес, город, текстовые ссылки, номер телефона, почту
• две кнопки

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

Как правило, меню у меня разделено на три функциональных элемента:

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

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

И всю эту информацию, надо уместить потом в мобильной версии.

Логотип, телефон, почта и кнопка меню, прекрасно умещаются на телефоне, а вот остальное нужно «упаковать» в моб меню и его надо выбирать из возможностей и данного проекта, над которым работаете.

Кнопку бургера можно использовать стандартную из блока, можно нарисовать свою уникальную с помощью шэйпов в Тильде, а потом сгруппировать эти слои (кстати, совсем недавнее обновление в конструкторе Tilda) и поставить ей ссылку на меню.

Рассмотрим преимущества использования блока ME403.

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

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

Если вы новичок в Тильде, то рекомендую на начальном этапе пользоваться стандартными блоками при создании меню, самые лучшие, на мой взгляд:

• ME301
• ME302
• ME303A
• ME403
• ME405

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

Если есть вопросы по Тильде, задавайте в конце этой страницы, после видео.