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

Представленный в Beaver Themer 1.5 и Beaver Builder 2.9, модуль Loop представляет собой мощный инструмент, который позволяет вам разрабатывать повторяющиеся макеты с использованием стандартных модулей Beaver Buiroder. Независимо от того, создаете ли вы блог, портфолио, список событий или магазин Woocommerce, этот модуль дает вам полный контроль дизайна с динамическим контентом в своей основе.

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

Что такое модуль петли?

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

Модуль Loop не ограничивается сообщениями в блоге или пользовательскими типами публикаций - он может обрабатывать широкий спектр динамического контента. Вот несколько мощных способов использовать его для создания пользовательских макетов и улучшения своего сайта:

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

Каждый элемент в цикле использует ваш пользовательский дизайн и получает динамические данные, такие как заголовок POST, изображение, выдержка и многое другое.

Ключевые функции модуля петли

Модуль петли заполнен возможностями, которые делают его идеальным для создания гибких, богатых контентом страниц:

• Запрос динамический контент из любого типа поста (стандартный или пользовательский)
• Используйте любой модуль бобров
• Динамически подключить поля (например, заголовок, изображение, пост -мета)
• Выберите из нескольких типов макетов , таких как сетка, список или карусель
• Добавьте фильтры и страниц, чтобы улучшить пользовательский опыт

Эта комбинация настройки и автоматизации позволяет создавать расширенные макеты без написания HTML, PHP или CSS.

Как построить пользовательскую петлю

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

Модуль петли

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

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

Строить с нуля с пустой макет

Предпочитаете создавать что -то совершенно пользовательское? Выберите опцию пустого макета и следуйте этим шагам:

1. Добавьте модуль петли на свою страницу или публикуйте в редакторе Beaver Builder.
   
2. Выберите пустой макет , чтобы начать с пустого контейнера.
   
3. Настройте настройки цикла , чтобы определить, какой контент вы хотите отобразить, такие как сообщения в блоге, продукты WooCommerce, поля Repeater ACF или пользовательские типы публикаций.
   
4. Перетащите модули в контейнер для петли, чтобы построить макет с нуля. Добавьте любые модули Beaver Builder, которые вам нужны, такие как заголовки, фотографии, значки, кнопки и многое другое.
   
5. Используйте полевые подключения , чтобы привлечь динамический контент, такие как заголовки, изображения, цены или пользовательские поля для каждого элемента цикла.
   
6. Расположите и уложите свои модули, используя инструменты Beaver Builder's Drag-and Drop.

Эта настройка отлично подходит для продвинутых пользователей или дизайнеров, которые хотят полного контроля.
Используйте его для создания пользовательских макетов блога, сетей продуктов или командных каталогов - не требуется кода.

Используйте модуль коробки для управления макетом

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

• Оберните модуль петли в модуль коробки, чтобы управлять шириной, заполнением, заполнением и фоновым стилем внешнего контейнера. Это дает вам полный контроль над тем, как ваш петлевой контент находится в общем макете страницы.
• Свидец модуля коробки внутри петли, чтобы сгруппировать внутреннее содержание каждого элемента петли. Эта настройка позволяет использовать преимущества передовых методов макета, таких как CSS GRID или Flexbox . Например, вы можете создать двухколонный макет в каждом элементе цикла. Поместите изображение слева и текст справа - с полным контролем над расстоянием и выравниванием.

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

Настройки запроса: какой контент будет отображаться?

Вкладка содержимого в модуле цикла позволяет управлять тем, как содержание цикла запрашивается и отображается, например:

• Выберите тип сообщения (сообщения, страницы, CPT, продукты и т. Д.)
• Фильтр по таксономии, категории, тегам или автору
• Отображать контент на основе статуса или даты поста
• Настройка смещений, сортировку и ограничения публикации

Это включает в себя источник запроса, количество элементов для показа, заказы и расширенных параметров фильтра.

Страница

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

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

Эти варианты помогают адаптировать доставку контента к вашему макету и целям взаимодействия с пользователем.

Динамические данные с полевыми подключениями

Внутри расположения цикла вы можете использовать подключения поля для динамического привлечения данных, таких как:

• Название сообщения
• Показанное изображение
• Выдержка или полное содержание
• Пользовательские поля
• Автор, дата, категория, теги

Любой модуль, который поддерживает динамическое содержание (например, заголовок, фото, кнопка, HTML и т. Д.), Может быть подключен к данным POST.

Продвинутый стиль и условная логика

Хотите по -разному стилизовать различные типы постов или отображать/скрыть элементы на основе условий? Модуль цикла поддерживает условную логику и пользовательские классы CSS .

Например, вы можете:

• Скрыть кнопки, если пользовательское поле пусто
• Добавить значки для представленных постов
• Применяйте разные цвета или стили на основе категории Post

Это позволяет вам точно настроить пользовательский опыт и поддерживать последовательный брендинг в вашем контенте.

Реальные варианты использования модулей петли

Модуль петли в Beaver Builder невероятно универсален, что позволяет отображать динамический контент в макетах, которые соответствуют вашим потребностям в дизайне. Вот несколько мощных способов его использовать:

• Архив блога: Создайте визуально привлекательную сетку или список ваших последних сообщений в блоге с избранными изображениями и выдержками.
• Продукты WooCommerce: Продукты WooCommerce в настраиваемой сетке с динамическим ценой, изображениями и кнопками с добавлением.
• Портфолио демонстрация: выделите свои проекты или тематические исследования с гибкими макетами, которые отражают стиль вашего бренда.
• Отзывы: отображать отзывы клиента из пользовательского типа поста и стиль их в соответствии с дизайном вашего веб -сайта.
• Списки событий: в хронологическом отношении перечислите предстоящие события или вебинары с датами, местоположениями и описаниями событий.
• Члены команды: представьте свою команду с фотографиями, именами, названиями и BIOS - подключите каждый элемент на подробную страницу профиля.
• Списки недвижимости: настоящие списки недвижимости с изображениями недвижимости, ценами и деталями ключей с использованием пользовательского типа поста.
• Каталог курса: отображать каталог онлайн -курсов или семинаров, в комплекте с названиями, описаниями и ссылками на зачисление.
• Списки вакансий: Создайте индивидуальную доску вакансий с динамическими списками, которые включают в себя названия, местоположения и краткие роли.
• Индекс рецептов: включайте коллекцию рецептов с изображениями, названиями и описаниями - из -за блоггеров с едой.

Эти варианты использования демонстрируют универсальность модуля петли в Beaver Builder. Его можно использовать в различных отраслях и веб -сайтах, помогая вам создавать динамические, привлекательные и индивидуальные макеты контента.

Последние мысли: Зачем использовать модуль петли?

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

Если вы серьезно относитесь к созданию современных, пользовательских сайтов WordPress с Beaver Builder, модуль Loop является обязательным для вашего инструментария. Исследуйте документацию по модулю полной цикла здесь.