блог диджитал агентства - что такое тильда иллюстрация - статья блога MANUFACT PRO

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

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

агентство по разработке сайтов - настройка формы заполнения Тильда, форма обратной связи, скриншот - статья блога MANUFACT PRO

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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Другие интересные материалы в нашем блоге
Для чего нужен личный кабинет в интернет-магазине
Бизнес
Личный кабинет в интернет-магазине: как увеличить продажи и удержать клиентов

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

Читать »
Контент маркетинг и контекстная реклама - мегафон и листы с ручкой - иллюстрация статьи - блог диджитал агентства MANUFACT PRO
Все статьи
Зачем нужен контент-маркетинг, если есть контекстная реклама

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

Читать »
агентство по дизайну - обложка статьи про NFT - статья блога MANUFACT PRO
NFT
NFT — не для всех?

Дизайнеры, создавшие NFT-коллекции, делятся тем, что нужно знать о рынке NFT, чтобы зарабатывать. Подводные камни и мифы об NFT, которые вы …

Читать »
блог дизайн-агентства - цветовая палитра иллюстрация - статья блога MANUFACT PRO
Дизайн
Как сочетать великое множество цветов

Про цвет с самого фундамента. Цветовой круг, схемы сочетаемости в современном веб-дизайне с примерами применения на реальных сайтах, а также полезные инструменты для подбора цветов.

Читать »
Стоит ли делать интернет-магазин на Shopify
Бизнес
Стоит ли разрабатывать интернет-магазин на Shopify

Shopify — одна из самых популярных платформ для интернет-магазинов, предлагающая готовые решения без необходимости разбираться в коде. Но действительно ли она подходит всем? В этой статье мы разберём плюсы и минусы Шопифай.

Читать »
MANUFACT это Digital Agency состоящее из специалистов в различных областях, связанных с разработкой и поддержкой веб-проектов. В нашем корпоративном блоге мы делимся тем полезным, что знаем сами. Знакомьтесь с нами неторопливо и со вкусом, делитесь впечатлениями и узнавайте новое.
Выжимки из наших статей и уникальные материалы мы публикуем в нашем Телгерам-канале. Подписывайтесь, чтобы ничего не пропустить.
Зачитались?

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

НУЖЕН САЙТ ИЛИ РЕКЛАМА?
При заказе сайта в нашей студии, бесплатно настроим эффективную рекламу в Google

Зачитались?

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