Как использовать модуль петли Divi 5 и модуль страниц

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

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

Познакомьтесь

Строитель петли является одним из крупнейших обновлений Divi 5. Это дает вам свободу, что старый модуль блога никогда не мог. Любой элемент может стать «петлевым» контейнером. Это означает, что Divi автоматически повторяет его для каждого поста, продукта или пользовательского типа поста, который соответствует вашему запросу.

Вместо того, чтобы застрять в предварительно разработанном списке сообщений, вы проектируете один элемент «шаблона» в качестве цикла. Divi использует это для каждого результата, заменяя динамическое содержание из запроса петли. Это может быть:

• Названия, полученные из данных POST
• Избранные изображения
• Пользовательские поля
• Ссылки на полные сообщения или продукты

Вы можете использовать любой модуль для отображения этих данных, а не просто специфичного для блога. Хотите модуль причудливой рекламы, показывающий ваши последние списки курсов? Сделанный. Нужна специальная макет карт продукта для предметов Woocommerce? Также сделано.

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

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

Познакомьтесь с модулем страниц

Парень - это причудливый способ сказать «разделить результаты на страницы». Вместо того, чтобы сбрасывать все элементы на одну страницу, вы разбиваете их на меньшие наборы. Это помогает с:

• Страница времени загрузки
• Читаемость
• Сканируемость

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

Он работает, добавляя два навигационных элемента - предсказанные и следующие ссылки - которые можно настроить. Если после текущего набора существуют старые элементы, «старый» (или выбранное вами текст) будет активным. Если есть новые предметы, «новые» будут активными.

Создание петли + пластин

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

Обратите внимание, что карта установлена ​​на ширину ~ 50% и гибкое выращивание, поэтому, когда петлевая карта сама по себе находится в контейнере, она станет полной шириной.

Шаг 1: Создайте контейнер петли

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

С выбранным вашим контейнером откройте его настройки и включите опцию петли .

Выберите источник данных. Это «запрос», который будет работать.

Во -первых, выберите тип запроса. В зависимости от конфигурации вашего сайта, вы можете увидеть эти варианты:

• Тип публикации (например, сообщения в блоге или пользовательские типы публикаций, такие как «Проекты»)
• Условия (категории и таксономии)
• Пользователи (возвращайте список пользователей сайта, таких как авторы)
• Поле повторителя (пользовательское поле, созданное плагином для создания петли в цикле)

Далее, в зависимости от того, какой тип запроса вы выбрали выше, вы получите шанс быть более конкретным. Выбор «Тип поста» может позволить вам использовать такие типы сообщений, как:

• Сообщения в блоге
• Проекты
• Продукция
• Какой бы CPT вы не построили для себя

Оттуда вы можете стать еще более конкретным с тем, что должно появиться в вашем цикле. Ты можешь:

• Включите элементы с определенной категорией или тегом
• Исключить элементы с определенной категорией или тегом
• Включите конкретные элементы (по идентификатору почты)
• Исключить конкретные элементы (по идентификатору почты)
• Создайте свой собственный запрос на мета (полезно для создания включений/исключений на основе пользовательских полевых данных)
• Установите порядок соответствующих запросов (например, алфавитный и нисходящий)
• Элементы на страницу контролирует, сколько отображается в цикле
• Поместите смещение, если вы захотите начать свою петлю позже в цикле
• Игнорировать липкие посты

Так выглядит наш пример на этот момент. Мы создали петлю и назначили его на наш тип сообщения в блоге. Я установил предел дисплея на 3.

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

Шаг 2: Добавить динамический контент в цикл

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

• В текстовом модуле выберите «Название публикации» из динамического выбора контента
• В модуле изображения вы можете выбрать «Избранное изображение»
• В модуле кнопки установите ссылку на «post url»
• На весь цикл контейнера также установите ссылку на «post url»

Это говорит Divi, чтобы вытащить правильный контент для каждого петлевого элемента.

Помните - что -нибудь внутри петли повторяется для каждого результата. Держите не-петлей (например, заголовки, реклама или CTA) вне его. Если у вас есть часть контента в цикле, который не связан с динамическими данными, каждый элемент в цикле будет отображать, что есть (например, текст «Читать →» в правом нижнем углу примерной карты).

Шаг 3: Добавьте модуль страниц

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

Настройте этикетки для «предыдущего» и «следующего». Вы можете использовать «Старые сообщения / новые сообщения», «назад / вперед» или даже «← / →» для минимального стиля.

Ключ заключается в том, что модуль странификации должен сидеть за пределами цикла, которым он управляет. Это и убедиться, что он назначен правильной цели (если у вас есть несколько петель на одной странице/шаблоне).

Шаг 4: Проверьте взаимодействие

Сохраните свою страницу и просмотрите ее. Нажмите «Старше», чтобы перейти к следующему набору элементов петли.

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

Получите этот макет петли

Хотите рассказать об этом макете и посмотреть, как все построено для себя? Загрузите его здесь!

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

Загрузите файлы

Скачать бесплатно

Присоединяйтесь к информационному бюллетеню Divi, и мы отправим вам копию «Копия Ultimate Divi Landing Layout Page», а также множество других удивительных и бесплатных ресурсов Divi, советов и хитростей. Следуйте, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Скачать», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить свою подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Наслаждайтесь более динамичным дивизоном

Модуль Loop Builder и Pagination от Divi 5 - большой скачок вперед в гибкости. Строитель петли освобождает вас от жестких конструкций более старых модулей, позволяя создавать свои повторные макеты с динамическим содержанием. Модуль страниц сохраняет эти макеты быстро и управляемы, разбивая их на удобные для пользователя куски.

Модуль петли и модуль страниц, в сочетании с другими новыми функциями Divi 5 (Flexbox, взаимодействие, управление цветом HSL), так же мощно, как и всегда. Вы можете сделать несколько невероятных дизайнов страниц со всем этим.

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