Фишки и ограничения Тильды, о которых вы не знали

БЛОГ MANUFACT

MANUFACT это творческое объединение специалистов в различных областях, связанных с разработкой и поддержкой веб-проектов. В нашем корпоративном блоге мы делимся тем полезным, что знаем сами. Знакомьтесь с нами неторопливо и со вкусом, делитесь впечатлениями и узнавайте новое.

Всем доброго времени суток! Мы решили написать этот материал в связи с ограничением на Тильде, с которым недавно столкнулись, верстая очередной проект в ZeroBlock. Мы с командой неожиданно поняли, что таких «ограничительных» мелочей и фишек у нас накопилось приличное количество, и решили поделиться с вами, чтобы и вы тоже были в курсе.

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

Оглавление

Сколько элементов можно добавить в ZeroBlock на Tilda?

Дата 06.06.2022. Опытным путём, добавив максимальное количество элементов и подсчитав их с помощью функции слоёв, мы выяснили ограничение  не более 600 элементов можно разместить в блоке. 

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

 

Самый простой прелоудер для Тильды

При вёрстке сложных одноблочных, двухблочных сайтов мы постоянно сталкиваемся с дёрганой или долгой загрузкой страницы. Функции lazyload и стандартной анимации появления зачастую не сильно помогают ускорить это дело. В более чем 50 проектах на Тильде мы перепробовали большое количество кода для эффектов загрузки страницы — и выделили для себя самый простой, быстрый и любимый. Ниже прикрепляем код для копирования в блок 123 на Тильде. 

Способ использования:
1. Создаем блок 123 — HTML код — в самом верху вашей страницы. Если хотите создать сквозной прелоудер для всех страниц, создайте сквозной header и добавьте блок 123 туда.
2. Добавляем любой блок, в который можно добавить изображение, под блок с кодом — загружаем туда своё .gif изображение (желательно без фона) и копируем ссылку на изображение. После этого отключаем (скрываем) блок.
3. Копируем прикрепленный ниже код в блок 123 и в коде в строку URL в скобки, добавляем ссылку из предыдущего пункта.
4. Опубликовываем все страницы.

 

				
					<style type="text/css">
    #hellopreloader>p{display:none;}
    #hellopreloader_preload{display: block;
    position: fixed;z-index: 99999;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    min-width: 700px;
    background: #000000 
    url(https://static.tildacdn.com/tild3565-6261-4333-a131-316532656666/S9OU.gif) 
    center center no-repeat;
    background-size:20%;} </style>

<div id="hellopreloader">
<div id="hellopreloader_preload">
</div>
</div>
<script type="text/javascript">
var hellopreloader = document.getElementById("hellopreloader_preload");
function fadeOutnojquery(el){el.style.opacity = 1;var interhellopreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity <=0.05){ clearInterval(interhellopreloader);hellopreloader.style.display = "none";}},16);}window.onload = function(){setTimeout(function(){fadeOutnojquery(hellopreloader);},10);};</script>
				
			

Как из любого ZeroBlock-а сделать фиксированное меню для сайта в мобильной и ПК версиях?

Часто стандартных блоков меню недостаточно, чтобы реализовать тот или иной дизайн. Для этого пригодится следующий представленный ниже код. Для его использования достаточно заверстать собственное меню в zeroblock и прикрепить rec блока в коде, в строке blockMenuID. А сам код добавить в блок 123. 

Помимо этого, с помощью представленного ниже кода, можно также заменить цвет фона меню в строке background-color, и добавить эффект блюра в строке backdrop-filter. 

				
					<style>
.floating {
position: fixed;
    width: 100%;
    top: 0px;
    z-index: 9998;
    transform: translateY(-100%); 
background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    transform: translateY(0%) !important;
}
</style>

<script>
$(document).ready(function () {
var blockMenuID = '#rec466980307';
$ (blockMenuID).addClass('floating');
});
</script>
				
			

Как сделать свою кнопку для любой отправки формы на Тильде, или отправлять данные из нескольких форм в ZeroBlock по клику на одну кнопку

При вёрстке сложных форм часто необходимо разместить колонки полей для ввода, исходя из дизайн-макетов — Тильда такой возможности по умолчанию не даёт. Для таких задач мы используем простой код, который позволяет объединить формы одной кнопкой отправки. 

Сделать это достаточно просто, держите шаги:

1. Создайте в ZeroBlock необходимую форму для ввода и добавьте отдельно любым удобным способом кнопку — на кнопку закрепите ссылку #sendmyform.

2. Далее в блок 123 добавьте код расположенный в статье ниже.

3. Замените в коде #rec397693186 на свой rec блока.

4. Опубликуйте страницу.

				
					<script>
    $(document).ready(function() {
    //При клике на нашу кнопку
    $('a[href="#sendmyform"]').click(function(e) {e.preventDefault();
    $("#rec397693186 .t-submit").click();});});
</script>
				
			

Ниже пример реализации с тремя формами в ZeroBlock и одной кнопкой «Let’s Go!», которая отправляет сразу три формы.

Сколько товаров в каталоге Тильды можно разместить, и как обойти это ограничение?

В каталоге товаров Тильды можно разместить не больше 5000 позиций. Однако в товарном каталоге есть функция вариаций товаров, за счёт этого вы можете значительно сэкономить место. 

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

Примеры на скриншотах:

Сколько блоков можно разместить на одной странице сайта на Тильде?

Опять же, мы постарались выяснить это опытным путём, так как на просторах интернета ответа на этот вопрос не нашли. Поступили самым простым образом:

1. Создали пустую страницу 
2. Добавили на неё десять разных блоков, выделили их и продублировали
3. Выяснили что в буфер обмена не помещается больше 30 блоков — т. е. копировать больше тридцати блоков на Тильде одновременно нельзя.
4. Добавили таким образом 330 блоков на одну страницу и…
5. Сдались — так как редактор уже подглючивал, и страница долго публиковалась.

Итого выходит не больше 30 блоков в буфере обмена и желательно не более 300 блоков на одной странице.

Может быть у вас остались вопросы?

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

Авторы

  • Общий опыт Ильи в веб-разработке и SEO продвижении составляет 10 лет. Работает с WordPress, Tilda, Bitrix. Знает CSS, JavaScript, HTML 5. Любит учиться новому и когда всё, а особенно сайты, работает, как часы. Убеждён, что люди изобрели одежду без пуговиц и замков не для того, чтобы мы утруждались. Любит пить чай и кофе из литровой кружки и писать статьи в блог MANUFACT.

  • Редактор блога MANUFACT и автор статей о разработке и продвижении в интернете с семи годами опыта за плечами. Легенда гласит, что она знает всё. Сама же Лизавета убеждена, что никто всего не знает, а знающего человека от незнающего отличает только умение задавать правильные вопросы и находить на них ответы.

Спасибо за внимание. 

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

Поделиться в telegram
Поделиться в vk
Поделиться в facebook
Поделиться в twitter
Поделиться в pinterest
Поделиться в linkedin
Поделиться в whatsapp

Ответить

Вам будет интересно
ведение соцсетей инстаграм иллюстрация
Интернет-маркетинг
Частые ошибки в ведении Инстаграм-аккаунта

Пока мы проводим бесплатные аудиты профилей в Инстаграм, заметили, что некоторые ошибки повторяются в 4 из 5 случаев. Подготовили для вас полезную подборку самых частых ошибок в ведении аккаунта и рекомендации, как их исправить.

Читать »
разработка планирование иллюстрация
Кейсы
Как мы сделали онлайн-курсы на Tilda

Мы попробовали сделать онлайн-курс с лекциями в видео-формате, проверочными тестами и личным кабинетом на Tilda. Рассказываем, получилось ли удовлетворить все эти потребности.

Читать »
Ой... закончились опубликованные статьи. Это значит, что мы готовим что-то интересное для вас. Подписывайтесь на блог, чтобы быть в курсе новых публикаций.
Зачитались?

Оставьте email адрес и получайте актуальный и интересный материал от команды MANUFACT.

Зачитались?

Оставьте нам свой e-mail адрес и получайте актуальный материал от команды MANUFACT