Петлевая карусель - это динамическая карусель Elementor Pro. Вместо того, чтобы добавлять слайды вручную, вы собираете один слайд в качестве шаблона и направляете виджет на запрос (сообщения, продукты или любой пользовательский тип сообщения), и он заполняет себя. добавьте сообщение, карусель обновляется. редактирование не требуется.
Он прибыл в Элементор 3.11 и это Виджет карусели Элементор большинство людей на самом деле ищут, когда они ищут пост-карусель или слайдер продукта, Это также Pro-only, без свободного эквивалента в ядре Elementor, поэтому вторая половина этого поста охватывает бесплатные карусельные виджеты это приблизит вас, если у вас нет прав.
Что охватывает это руководство
- Петлевая карусель против петлевой сетки: какую использовать
- Что нужно, прежде чем начать
- Как создать петлевую карусель в Элементоре
- Настройки, которые сбивают людей с толку
- Петлевая карусель для продуктов WooCommerce
- Нет Элементора Про? Свободный путь
- Когда петлевая карусель - неправильный выбор
- Часто задаваемые вопросы
Петлевая карусель против петлевой сетки: какая
Тот же двигатель, тот же шаблон Loop Item, разное представление. сетка стекирует ряды вертикально. карусель помещает те же самые предметы на горизонтальной дорожке.
Выберите карусель, когда элементы не являются обязательными: “вы также можете понравиться полоса”, связанные сообщения, избранные продукты. Никто не должен видеть седьмой пункт, чтобы страница имела смысл.
Выберите сетку, когда элементы являются страницей Архив, категория магазина, индекс блога. спрятать две трети списка категорий за стрелкой стоит вам конверсий, потому что покупатель, которому приходится нажимать, чтобы увидеть больше товаров, обычно этого не делает.
Правило я бы дал клиенту: если в разделе есть заголовок, как “Еще из блога,” карусель. если заголовок - заголовок страницы, сетка.
Что нужно, прежде чем начать
- Элементор Про. Петля Карусель нет в бесплатном плагине и частичной версии его нет.
- Шаблон элемента цикла. Это дизайн единого слайда: избранное изображение, заголовок, отрывок, кнопка. Создан один раз в Theme Builder, повторно используется повсюду.
- Содержимое запроса. Сообщения, продукты или зарегистрированный индивидуальный тип сообщения.
На старых установках вам также может потребоваться включить его под Elementor → Настройки → Функции. Он доставлялся за флагом эксперимента и оставался там в течение нескольких выпусков, прежде чем стать стабильным.
Как создать петлевую карусель в Элементоре
Сначала постройте слайд, затем карусель. сделать это наоборот - значит спроектировать внутри тесного предварительного просмотра.
- Создайте шаблон Элемент цикла. Шаблоны → Theme Builder → Loop Item → Добавить новое. выберите тип сообщения, которое оно отобразит. Вы разрабатываете одну карту, а не список, и Elementor показывает один элемент и повторяет его позже.
- Постройте карту с помощью динамических тегов. Добавьте виджет изображения и установите его источник в динамическое → избранное изображение. Виджет заголовка → Динамический → Название публикации. Текстовый редактор → Отрывок из сообщения. Кнопка → Динамическая → URL-адрес публикации. Здесь ничего не закодировано жестко; каждое поле извлекается из того поста, который попадает в этот слот.
- Опубликовать шаблон и пропустить подсказку условия отображения. элементы цикла не нуждаются в условиях, потому что они вызываются виджетом, а не назначаются местоположению.
- Опустите виджет "Карусель с петлей" на свою страницу выберите шаблон, который вы только что создали в разделе "Выберите шаблон".
- Установите запрос. Источник (Посты, Продукты или ваш CPT), затем сузите его: включите по таксономии, исключите текущий пост, установите сообщения на страницу. Включите “Избегайте дубликатов”, если на той же странице есть еще один цикл, иначе ваша полоса связанных сообщений повторит то, что уже на боковой панели.
- Настроить карусель. Слайды на вид, слайды для прокрутки, автопроигрывание, бесконечный цикл, скорость, пауза на ховере Установите слайды на просмотр отдельно для рабочего стола, планшета и мобильного телефона, используя значки устройств в верхней части панели.
- Стиль навигации. Стрелки, точки или дробь. Размер, цвет, положение и состояние наведения - все это находится на вкладке "Стиль".
Настройки, которые сбивают людей с толку
Бесконечный цикл требует достаточного количества элементов. Элементор клонирует слайды, чтобы имитировать обертку, и для этого нужно как минимум вдвое больше слайдов на просмотр, чтобы делать это невидимо. Четыре поста на просмотре по три будут заметно подпрыгивать, когда он завершается. Либо поднимайте посты на страницу, либо выключайте цикл.
Сообщения на странице - это ограничение запроса, а не ограничение отображения. Установите его на 6, и карусель вмещает шесть предметов в общей сложности, однако многие видны. Люди устанавливают его на 3, чтобы соответствовать слайдам на просмотр, а затем задаются вопросом, почему не к чему прокручивать.
Зазор между краями меняет подсказку. Карусель, которая заканчивается заподлицо на краю контейнера выглядит законченной Добавьте небольшой краевой зазор, чтобы следующий слайд выглянул внутрь и люди знали, чтобы провести пальцем Это несколько пикселей, и это измеримо изменяет скорость взаимодействия.
Автоигра плюс ссылки - плохая пара. Если ваши слайды кликабельны и карусель движется на таймере, кто-то потянется за картой и щелкнет ту, что ее заменила Пауза на зависании исправляет корпус рабочего стола На связи нет зависания, так что для кликабельные карты Отключил бы автоигра целиком.
Петлевая карусель для продуктов WooCommerce
Тот же процесс, одно отличие: установите источник в Продукты и вы получите WooCommerce-специфичные элементы управления запросами Фильтруйте по категориям, тегам или атрибутам, сортируйте по цене, популярности или дате и исключайте неакционерные товары.
Шаблон Loop Item для продуктов должен иметь цену и кнопку добавления в корзину как динамические элементы, а не статический текст. Пропустите это, и каждая карта в карусели покажет одинаковую цену, что является именно тем видом ошибки, который доживает до производства, потому что он выглядит хорошо в предварительном просмотре редактора.
Сопутствующие товары, недавно просмотренные, и “flete the look” полоски все тот же виджет с другим запросом, И если вам нужен только один продукт, вызванный, а не полоска, то Избранный виджет продукта делает это вообще без запроса. это виджет Pro, и это единственный поставляемый виджет продукта WooCommerce Master Addons.
Нет Элементор Про? вот свободный путь
Петля Карусель - это Pro. если вы на бесплатном Elementor, вы его не получаете, и никакой бесплатный аддон не переосмысливает систему шаблонов Loop Item.
Что можно получить бесплатно, так это результат: динамическая карусель, которая тянет посты или продукты и обновляется. Мастер Аддоны' Виджет блога имеет карусельный режим в бесплатном плагине Запрос по типу сообщения, категории, тегу или автору, выбор макета, переключение дисплея на карусель, и настройка тех же стрелок, точек, автозапуска и управления по точкам останова.
Компромисс честный: вы не проектируете карту Виджет Блог дает вам настройки макета и вкладку Стиль, а не пустой холст Loop Item. Если вам нужен пиксельный контроль над слайдом, подход Elementor Pro лучше. Если вам нужны “последние шесть постов в слайдере, который выглядит прилично,” бесплатный виджет добирается туда быстрее.
Товары тоньше, и стоит сказать прямо: бесплатного виджета карусели продукта нет Скользящая, самообновляющаяся товарная полоса нуждается в Loop-карусели Elementor Pro, или в ручной компоновке, подобной приведенной ниже руководство по карусели продукта работает через оба. и если ваши слайды являются фиксированными изображениями, а не запросом, бесплатно Изображение Виджет Карусель маршрут короче, хотя в этот момент строишь ползунок, а не петлю.
Стоит знать и о третьем бесплатном варианте.Master Addons ships 20 названных конструкций каруселей и ползунков как импортный Виджет Строитель файлы, и 8 из них импортируют бесплатно Они не управляются запросами, поэтому вы заполняете элементы вручную, но два сидят близко к тому, что производит Петля Карусель. Квадрантный страничный каталог страницы - сетка из девяти блоков элементов по три одновременно, каждый с изображением, категорией, заголовком и копией, что является ближайшей бесплатной вещью к пейджинговому циклу продукта. Слайдер индекса леджера помещает кликабельный указатель записей рядом с табличкой дисплея, созданный для архивов и списков работ. Все 20 собраны на карусельный виджеты хаб.
Когда петлевая карусель - неправильный выбор
Три случая, и я наблюдал, как все три идут не так на клиентских сайтах.
Ваша страница архива. Разнесение категории в карусели означает, что гугловский сканер видит шесть продуктов, где у вас шестьдесят, Остальные находятся в DOM, но сигнал пользователю, да и любому, кто судит о глубине страницы, - что эта категория тонкая.
Над складкой на мобильном телефоне. Динамическая карусель - это запрос, шаблонный рендер и a инициализация слайдера прежде чем что-либо покрасит. Положите это вверху страницы телефона, и ваша самая большая довольная краска - это прядильщик.
Менее пяти предметов. Карусель с тремя слайдами - это сетка, которая заставляет людей работать Просто покажите все три.
Часто задаваемые вопросы
Карусель Elementor Loop бесплатна?
Для карусели с петлей № требуется Elementor Pro, а уменьшенной бесплатной версии нет Бесплатная альтернатива - карусельный виджет с приводом от запроса от аддона, а виджет Blog Master Addons имеет на свободном ярусе режим карусели, который динамически тянет посты Для ручных макетов 8 из 20 импортных карусельных конструкций Master Addons также бесплатны.
Чем отличается Loop Grid от Loop Carousel?
Они имеют один и тот же шаблон Loop Item и элементы управления запросами.The Loop Grid упорядочивает результаты в строках и столбцах; Loop Carousel помещает их на горизонтальную скользящую дорожку со стрелками и точками. используйте сетку для архивов и списков, карусель для дополнительных полос “related” или “featured”.
Как добавить петлевую карусель в Elementor?
Сначала создайте шаблон элемента цикла в сборщике тем, используя динамические теги для изображения, заголовка и отрывка. Опубликуйте его, затем перетащите виджет "Карусель цикла" на свою страницу, выберите этот шаблон, установите источник запроса и фильтры, а также настройте слайды для просмотра и автовоспроизведения в настройках "Карусель".
Почему моя "Карусель с петлей" не показывает посты?
Обычно запрос. проверьте, что тип сообщения шаблона Loop Item соответствует источнику запроса виджета, потому что шаблон, созданный для Постов, не будет отображать Продукты. второй по распространенности причиной является таксономический фильтр без соответствующего содержимого. в-третьих, набор постов на страницу ниже, чем вы думаете.
Может ли карусель Loop отображать пользовательские типы сообщений?
Да. Любой зарегистрированный тип публичного сообщения появляется в раскрывающемся списке "Источник запроса", а его пользовательские поля доступны в виде динамических тегов, если вы используете ACF, мета-бокс или блоки. Создайте шаблон "Петля цикла" на основе этого типа сообщения, а карусель обработает все остальное.
Как сделать петлевую карусель отзывчивой?
Устанавливайте слайды для просмотра отдельно на каждой точке останова, используя значки устройств в верхней части настройки. Три на рабочем столе, два на планшете, один на мобильном - безопасный по умолчанию. Также проверьте размер стрелки на мобильном телефоне, потому что по умолчанию рабочий стол часто слишком мал, чтобы быть удобной целью для касания.
Куда отсюда идти
Если у вас есть Pro, сначала создайте шаблон Loop Item и рассматривайте его как дизайнерский актив, который вы будете повторно использовать в сетках и каруселях для остальной части сайта. Это часть, которая окупается.
Если вы предпочитаете создавать карту как многоразовый виджет, а не шаблон, вот что авторство собственного виджета это для, и страница ценообразования покрывает ярус, в котором он находится.
Если вы этого не сделаете, начните с бесплатных виджетов, управляемых запросами, и посмотрите, достаточно ли приближают вас предустановки макета. Оба пути охвачены на Виджеты карусели Элементор пейдж, вместе с остальными вариантами карусели. все еще решаете формат? Карусель против ползунка определяет, какая форма действительно нужна вашему разделу, и обзор плагина слайдера охватывает плагины, которые его создают.
