В этой статье вы узнаете секреты сервиса Tilda, которые непременно сделают ваш сайт лучше!
Если вы дизайнер, то, возможно, вы откроете для себя новую планету и скажете: «А что, можно было так?»
Если же вы заказчик сайта на Tilda, то после прочтения статьи ваш подрядчик не сможет вас обмануть и сказать: «В тильде так сделать нельзя, это невозможно
Также у нас есть другая классная ознакомительная статья про Tilda — изучите её по этой ссылке.
А теперь к сути:
1. 404 страница
Начнём с того, что не все дизайнеры знают о том, что 404 страница в принципе нужна, а о том, как её сделать в Tilda, знают единицы. А ведь она имеет очень важное значение для SEO-оптимизации.
Конечно, большинство сайтов на Tilda не заточены и не разрабатываются для продвижения в поиске. Тем не менее, даже если сайт предназначен для рекламы или в каких-либо других целях, 404 страница никогда не будет лишней, а её создание не займёт много времени (впрочем при желании можно заморочится и сделать «WOW-дизайн»).
Как сделать:
1) Создайте новую страницу сайта, назовите её «404» или другим именем на ваше усмотрение:
Обратите внимание, что URL (ссылка) 404 страницы не должна содержать число 404. Об этом вам сообщит сервис. Назовите страницу по-другому: «oshibka», «empty_page», «error»
и т. д.
2) Создайте дизайн страницы:
Важно! Большинство дизайнеров и маркетологов делают 404 страницу с обычной надписью по типу: «Такой страницы не существует». Посетитель такой страницы с большой вероятностью покинет её. Чтобы этого не произошло, разместите на 404 странице кнопку (кнопки) на другую страницу (страницы) сайта и призыв нажать на них. Так хотя бы часть трафика вы «задержите» на вашем сайте.
3) Обозначьте созданную страницу как 404 в настройках сайта.
Перейдите на вкладку «Ещё» и найдите пункт «Страница: 404 ошибка» (он находится вверху списка, найти его не составит проблемы). Далее выберите из выпадающего списка созданную страницу.
Готово! осталось только сохранить изменения:
2. Метка «Made on Tilda» внизу страницы
Многих данная метка не смущает. Но, если вы не хотите лишний раз рекламировать сервис или вы, например, продвигаетесь в регионе, где не приветствуются российские сервисы, то метку можно убрать:
Как сделать:
Перейдите в настройки сайта в раздел «Ещё», вверху списка настроек найдите пункт «Platform Label», в выпадающем списке выберите «Не выводить»:
3. Наложение блоков
Вы могли видеть на на модных сайтах на Tilda приём, когда элементы одного блока налазят на элементы другого блока. Таким образом создаётся эффект многослойности:
Как сделать:
1. Создайте Zero-блок с выходящими за его холст (рамки) элементами:
2. Перейдите в настройки всего блока (кликните на свободное пространство или на фон холста), проскрольте до раздела настроек «Position and Overflow». В пункте «Overflow» выберите «Visible» из выпадающего списка:
Теперь блок будет выше других:
Если будет установлен параметр «Hidden» или «Auto», то блок будет выглядеть так:
4. Единые шапка и подвал (хеадер и футер) для всех страниц
Часто новички создают много страниц, у которых одинаковые шапка и футер.
Как вариант, можно сделать правки в блоке (блоках) на одной странице, а дальше просто скопировать и вставить его (их) на остальные страницы.
Но этой лишней траты времени можно избежать!
Как сделать:
1. Создайте отдельные страницы с шапкой и с футером
2. Зайдите в настройки сайта в раздел «Шапка и подвал», выберите созданные страницы в качестве шапки и футера:
Не забудьте потом убрать блоки с шапкой и футером внутри страниц, чтобы они не дублировались.
Обратите внимание, что единые шапка и подвал отображаются отдельно в конце списка страниц сайта:
5. Блоки для мобайла и десктопа
Иногда бывает так, что получившийся блок хорошо выглядит на десктопе, но плохо отображается на мобайле. Обычно такая проблема возникает со стандартными готовыми блоками — например с шапками.
Решается данная проблема легко: нужно ограничить отображения блока.
Как сделать:
1. Создайте блок, настройте его дизайн для десктопа.
Например, с помощью стандартного готового блока можно создать такую шапку:
Шапка на десктопе выглядит хорошо, но её отображение на мобайле оставляет желать лучшего ввиду небольшого размера логотипа:
2. Ограничьте отображение шапки, чтобы она была видна только на экранах с разрешением от 980px.
Перейдите в настройки блока и проскролльте до пункта «Диапозон видимости на устройствах», воспользуйтесь ползунками:
3. Скопируйте блок, подкорректируйте дизайн под мобильную версию и поправьте диапазон видимости для мобильных устройств (в примере до 980px):
6. Конвертация в Zero-блок
Если в Tilda уже есть готовый блок, который вам нравится, но который нужно немного изменить (а стандартные настройки это не позволяют), то его можно сконвертировать в Zero и внести необходимые правки.
Но есть нюансы:
- Конвертировать можно не все блоки. Большинство интерактивных блоков (поп-апы, галереи карточек
и т. д. ) нельзя превратить в Zero. Проверяйте такую возможность у каждого конкретного блока! - Если вы наполнили готовый блок контентом и внесли настройки дизайна, то при конвертации в Zero, он вернётся в свой первоначальный вид и загруженный контент «слетит».
Как сделать:
Выберите готовый блок, перейдите в его настройки, проскрольте до кнопки «Конвертировать в Zero Block» и нажмите на неё:
На этом на сегодня всё. Используйте перечисленные фишки, чтобы оптимизировать и ускорить разработку сайта на Tilda.
Не переживайте, если вы чего-то раньше не знали. По нашим наблюдениям даже самые опытные разработчики сайтов на Tilda не всегда знают все её возможности и делают ошибки при создании сайта.
Надеемся, что статья оказалась для вас полезной. А, если вам нужна помощь в разработке сайта на Tilda, то мы будем рады помочь. Оставьте ваши контакты — и мы свяжемся с вами :)
