Пагинация в тильде что это

Как сделать пагинацию для блога

Перейдите в категорию «Кнопка» и добавьте блок BF703. В контенте блока необходимо указать ID блоков, которые нужно скрывать/показывать при нажатии на кнопку. Номера указываются через запятую и без пробела. ID блока можно посмотреть в настройках каждого блока, в самом низу. Пример: 82765389,84565389,62765389

Разбить контент на несколько страниц и добавить навигацию между ними

Если скролл страницы становится слишком длинным, перенесите часть контента на новую страницу, и добавьте навигацию: предыдущие / следующие. Как это удобно сделать:
1) Скопируйте текущую страницу. Настройки страницы > Действия > Дублировать страницу.
2) На текущей странице удалите все устаревшие посты. Определить актуальность постов можно с помощью Яндекс.Метрики. На карте скроллинга будет видно как далеко пролистывают посетители вашу страницу. Там, где начинается синий (очень мало посетителей), можно делать переход на другую страницу.

3) На скопированной странице удалите верхние посты и оставьте только ваш «архив». В настройках страницы пропишите адрес страницы, опубликуйте.
4) На обеих страницах добавьте блок ТЕ300 (категория «Плитка и ссылка») и укажите перекрестные ссылки. Также можно добавить две кнопки, блок BF102 (категория «Кнопка»).

Настраиваем пагинацию в каталоге товаров на Тильде

Для того, чтобы настроить пагинацию, нам потребуется подключить каталог товаров, делается это в настройках сайта — пункт «ЕЩЕ» — каталог товаров.

Создаем каталог товаров и наполняем его несколькими товарами, мы для примера задублировали несколько позиций.

Далее нам нужно создать страничку в Tilda и добавить на нее блок из категории «Магазин» любой на выбор: ST300, ST305N.

В настройках блока переходим в раздел «Карточки» и включаем галочку «Показывать пагинацию». Можно в разделе выше указать число товаров, которое будет отображаться на каждой странице.

ВАЖНО!

В разделе «контент» важно подключить отображение товаров из каталога, без этого кнопка «показывать пагинацию» не будет отображаться.

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

1) Мы идем в настройки в раздел «кнопки» и убираем цвета заливки, цвет текста.

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

2) Второй способ более подходящий. С помощью CSS мы скроем кнопку «ЗАГРУЗИТЬ ЕЩЕ» в tilda, для этого идем в раздел «Другое», берем блок T123 и добавляем в него следующий код:

#rec377191157 .t-store__load-more-btn-wrap

display: none;

Где #rec377191157 — это ID блока, у вас он будет свой. Меняем его в коде, и кнопка скрывается.

Пагинация в виде страниц работает на данный момент только в десктоп версии. На мобильном устройстве присутствует только кнопка «ЗАГРУЗИТЬ ЕЩЕ».

Как сделать пагинацию на Тильде

Представим ситуацию, у вас есть интернет-магазин, на нем есть раздел, например, стиральные машины. Как правило, товаров много и если их разместить на одной странице, то она будет большая, тяжелая по весу, долго грузиться, ну и посетителям будет неудобно смотреть такой большой объем информации. Для этого придумали страницу 2, 3, . 10 и тд. То есть, на одной странице размещено, например, 30 штук товаров. Если посетитель захотел посмотреть еще товары, то переходит на вторую страницу и тд.

Как выглядит пагинация

Способы создания пагинации в Tilda

Как я уже написал выше, встроенного функционала пагинации в Тильде нет, хотя возможность создания интернет-магазина есть.
Но в конструкторе есть прекрасная возможность, задать канонический адрес для страницы. Это и будем использовать 🙂
Но для этого я расскажу…

Что такое канонический адрес страницы?

Канонический адрес — это основной адрес страницы. То есть, мы говорим поисковику, что эта страница очень похожа/дублируется по контенту с основной и просим его (поиск) не учитывать ее в поиске с помощью канонической ссылки. Например, есть первая страница раздела со стиралками в интернет-магазине, а есть вторая и тд. и они все очень похожи на первую. Чтобы поиск не подумал, что это дубли, мы говорим ему:
— «вторую, третью и тд страницы этого раздела, не учитывай в поиске, а учитывай только вот эту (первую)»

Пагинация в коде

Приступаем к реализации

Будем считать, что раздел с товарами у вас создан и наполнен.
Если нет, то создайте страницу с товарами из шаблона Тильды, для тренировки. Если хотите сразу создать реальный интернет-магазин, то читайте эту статью

Можете читать и сразу выполнять шаги на вашем сайте

1. Под товарами создаем Zero-блок, с шириной около +-70 px
2. Создаем кнопки. именно кнопки, а не текст с ссылками. И вообще, старайтесь при создании сайта, для ссылок создавать кнопки, а не различные махинации типа, текст, а над ним шейп или кнопка, но без текста; Да, некоторые скажут, — «но, ведь, красиво, с анимацией, просто кнопкой не реализовать в зеро», Да, лучше в угоду дизайну сделать обычную кнопку и не путать поисковые машины (где тут ссылка, где текст, где слой скрыт или невидим), они этого не любят
3. Кол-во кнопок, каждый создает для свой ситуации. Вы должны определиться, сколько товаров у вас будет отображаться на одной странице. Для этого смотрим конкурентов в нише, подробнее об этом я рассказываю на своем обучении по Tilda для SEO (ссылка)
4. То есть, если у вас в разделе 100 товаров и вы решили сделать их на странице по 30 шт, то создаем 4 кнопки с текстом 1, 2, 3, 4. Можно создать дополнительно кнопки «предыдущая» и «следующая» до и после кнопок с цифрами, как на скрине
5. Оформляем кнопки в стиль сайта и задаем анимацию при наведении, если нужно. Подробнее об этом я говорю в видео ниже.
6. Придумываем адрес страницам пагинации. Я рекомендую такие /page-2 /page-3 и тд. То есть если у нас есть раздел с пиццей, то у меня адрес пагинации (второй страницы) будет такой https://suzdalpizza.ru/catalog/pizza/page-2
7. Копируем нашу страницу 3 раза, для второй, третьей и четвертой страницы.
8. Переходим в «товары»
9. Создаем разделы в «Товарах» Тильды для 2,3, 4 страницы.

• Добавляем новый раздел в товарах (Название раздела сайта_Пагинация 1), называем, например, Пицца Пагинация 1, Пицца Пагинация 2, Пицца Пагинация 3, Пицца Пагинация 4
• Выбираем наши товары для одной страницы
• Выбираем действие «Добавить в раздел»
• Выбираем раздел
• Применить

1. Переходим в первую страницу пагинации, переходим в блок с товарами, нажимаем «Контент»
2. Выбираем «Выводить товары из каталога» и выбираем наш раздел Пагинация 1
3. Нажимаем «Сохранить»
4. Тоже самое проделываем для остальных страниц пагинации, выбирая выводить товары из других разделов (Пагинация 2, 3, 4)

Читать:

Как создать гугл аккаунт с впн