6 крутых фишек Tilda, о которых никто не знает!

г. Минск, ул. Старовиленская, 100, 4 этаж, пом. 1

В этой статье вы узнаете секреты сервиса Tilda, которые непременно сделают ваш сайт лучше!

Если вы дизайнер, то, возможно, вы откроете для себя новую планету и скажете: «А что, можно было так?»

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

Также у нас есть другая классная ознакомительная статья про Tilda — изучите её по этой ссылке.

А теперь к сути:

1. 404 страница

Начнём с того, что не все дизайнеры знают о том, что 404 страница в принципе нужна, а о том, как её сделать в Tilda, знают единицы. А ведь она имеет очень важное значение для SEO-оптимизации.

Конечно, большинство сайтов на Tilda не заточены и не разрабатываются для продвижения в поиске. Тем не менее, даже если сайт предназначен для рекламы или в каких-либо других целях, 404 страница никогда не будет лишней, а её создание не займёт много времени (впрочем при желании можно заморочится и сделать «WOW-дизайн»).

Как сделать:

1) Создайте новую страницу сайта, назовите её «404» или другим именем на ваше усмотрение:

404 страница в списке страниц сайта
404 страница в списке страниц сайта

Обратите внимание, что URL (ссылка) 404 страницы не должна содержать число 404. Об этом вам сообщит сервис. Назовите страницу по-другому: «oshibka», «empty_page», «error» и т. д.

2) Создайте дизайн страницы:

Пример дизайна 404 страницы
Пример дизайна 404 страницы

Важно! Большинство дизайнеров и маркетологов делают 404 страницу с обычной надписью по типу: «Такой страницы не существует». Посетитель такой страницы с большой вероятностью покинет её. Чтобы этого не произошло, разместите на 404 странице кнопку (кнопки) на другую страницу (страницы) сайта и призыв нажать на них. Так хотя бы часть трафика вы «задержите» на вашем сайте.

3) Обозначьте созданную страницу как 404 в настройках сайта.

Перейдите на вкладку «Ещё» и найдите пункт «Страница: 404 ошибка» (он находится вверху списка, найти его не составит проблемы). Далее выберите из выпадающего списка созданную страницу.

Готово! осталось только сохранить изменения:

Настройки сайта на Tilda
Настройки сайта

2. Метка «Made on Tilda» внизу страницы

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

Метка «Made on Tilda»
Метка «Made on Tilda»

Как сделать:

Перейдите в настройки сайта в раздел «Ещё», вверху списка настроек найдите пункт «Platform Label», в выпадающем списке выберите «Не выводить»:

Настройки сайта на Tilda
Настройки сайта

3. Наложение блоков

Вы могли видеть на на модных сайтах на Tilda приём, когда элементы одного блока налазят на элементы другого блока. Таким образом создаётся эффект многослойности:

Декоративный элемент (кривая линия) из первого блока наложен поверх второго блока
Декоративный элемент (кривая линия) из первого блока наложен поверх второго блока

Как сделать:

1. Создайте Zero-блок с выходящими за его холст (рамки) элементами:

Zero-блок в Tilda
Zero-блок в Tilda

2. Перейдите в настройки всего блока (кликните на свободное пространство или на фон холста), проскрольте до раздела настроек «Position and Overflow». В пункте «Overflow» выберите «Visible» из выпадающего списка:

Настройки Zero-блока в Tilda
Настройки Zero-блока в Tilda

Теперь блок будет выше других:

Блок с параметром «Visible»
Блок с параметром «Visible»

Если будет установлен параметр «Hidden» или «Auto», то блок будет выглядеть так:

Блок с параметром «Hidden»
Блок с параметром «Hidden» («Auto»)

4. Единые шапка и подвал (хеадер и футер) для всех страниц

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

Как вариант, можно сделать правки в блоке (блоках) на одной странице, а дальше просто скопировать и вставить его (их) на остальные страницы.

Но этой лишней траты времени можно избежать!

Как сделать:

1. Создайте отдельные страницы с шапкой и с футером

Пример страницы с футером (на странице только футер)
Пример страницы с футером (на странице только футер)

2. Зайдите в настройки сайта в раздел «Шапка и подвал», выберите созданные страницы в качестве шапки и футера:

Настройки сайта
Настройки сайта

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

Обратите внимание, что единые шапка и подвал отображаются отдельно в конце списка страниц сайта:

Футер в списке страниц сайта
Футер в списке страниц сайта

5. Блоки для мобайла и десктопа

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

Решается данная проблема легко: нужно ограничить отображения блока.

Как сделать:

1. Создайте блок, настройте его дизайн для десктопа.

Например, с помощью стандартного готового блока можно создать такую шапку:

Шапка, созданная с помощью стандартного блока
Шапка, созданная с помощью стандартного блока

Шапка на десктопе выглядит хорошо, но её отображение на мобайле оставляет желать лучшего ввиду небольшого размера логотипа:

Шапка, созданная с помощью стандартного блока на экране шириной 640px
Шапка, созданная с помощью стандартного блока, на экране шириной 640px

2. Ограничьте отображение шапки, чтобы она была видна только на экранах с разрешением от 980px.

Перейдите в настройки блока и проскролльте до пункта «Диапозон видимости на устройствах», воспользуйтесь ползунками:

Настройки блока в Tilda
Настройки блока

3. Скопируйте блок, подкорректируйте дизайн под мобильную версию и поправьте диапазон видимости для мобильных устройств (в примере до 980px):

Две шапки: 1 — для десктопа, 2 — для мобайла
Две шапки: 1 — для десктопа, 2 — для мобайла

6. Конвертация в Zero-блок

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

Но есть нюансы:

  • Конвертировать можно не все блоки. Большинство интерактивных блоков (поп-апы, галереи карточек и т. д.) нельзя превратить в Zero. Проверяйте такую возможность у каждого конкретного блока!
  • Если вы наполнили готовый блок контентом и внесли настройки дизайна, то при конвертации в Zero, он вернётся в свой первоначальный вид и загруженный контент «слетит».

Как сделать:

Выберите готовый блок, перейдите в его настройки, проскрольте до кнопки «Конвертировать в Zero Block» и нажмите на неё:

Настройки блока
Настройки блока

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

Не переживайте, если вы чего-то раньше не знали. По нашим наблюдениям даже самые опытные разработчики сайтов на Tilda не всегда знают все её возможности и делают ошибки при создании сайта.

Надеемся, что статья оказалась для вас полезной. А, если вам нужна помощь в разработке сайта на Tilda, то мы будем рады помочь. Оставьте ваши контакты — и мы свяжемся с вами :)

Узнать стоимость и условия

* — поля, обязательные для заполнения
г. Минск, ул. Старовиленская, 100, 4 этаж, пом. 1