Всем доброго времени суток! Мы решили написать этот материал в связи с ограничением на Тильде, с которым недавно столкнулись, верстая очередной проект в 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 блоков на одной странице.
Может быть у вас остались вопросы?
Мы будем рады сделать эту рубрику постоянной, для этого нам нужно набрать от вас как можно больше вопросов для создания подобного материала. Напишите нам об этом в комментариях! Мы постоянно следим за ними и оперативно отвечаем на все вопросы.
