Как создать индивидуальную петлю в блоге с конструкцией Livi 5

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

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

Что такое строитель петли Divi 5

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

Подписаться на наш канал на YouTube

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

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

Как работает строитель петли

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

С этого момента Divi автоматически повторяет элемент для каждого поста, который соответствует вашим настройкам.

Вот где появляется реальный контроль. В настройках цикла вы можете:

• Тип запроса: выберите между базовым запросом пост или метадальным запросом, фильтрацией по категориям, тегам, пользовательским полям или другим метаданным.
• Тип публикации: Выберите тип контента для отображения, от сообщений в блоге до продуктов до любого пользовательского типа поста.
• Включите только сообщения с конкретными терминами: покажите только сообщения, которые соответствуют определенным категориям, тегам или другим терминам таксономии.
• Исключите сообщения с конкретными терминами: Удалить сообщения, которые соответствуют выбранным категориям, тегам или терминам.
• Только включайте конкретные сообщения: выберите отдельные сообщения, чтобы включить.
• Исключите конкретные сообщения: скрыть отдельные сообщения, которые вам не нужны в цикле.
• Мета -запрос: добавьте пользовательские условия полевых условий, чтобы контролировать то, что появляется.
• Заказ за: Выберите, если результаты отсортированы по дате, заголовкам, заказу меню или пользовательским значением поля.
• Заказ: показать результаты в восходящем или нисходящем порядке.
• Сообщения на страницу: Решите, сколько сообщений отображается перед страницей.
• Смещение публикации: пропустите определенное количество сообщений с самого начала, удобно для того, чтобы избежать дубликатов с представленными разделами.
• Игнорируйте липкие сообщения: выберите, получают ли липкие сообщения приоритетными или обращаются как как обычные посты.

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

Узнайте все о Builder Divi 5 Loop

Создание пользовательской петли в блоге с Divi 5

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

Мы рассмотрим это шаг за шагом, начиная с макета карты, а затем настройка цикла.

Прежде чем начать

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

1. Добавить страницу блога

С вашей панели WordPress, перейдите на страницы> Добавить новый , назвать его «блог» и опубликовать его.

Эта страница станет основным центром ваших сообщений.

2. Установите страницу своего блога в настройках WordPress

В настройках> Чтение выберите статическую страницу . Назначьте свою домашнюю страницу до дома и страницу новой блога на страницу сообщений.

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

3. Создайте шаблон строителя темы

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

В Divi> Builder , нажмите «Добавить новый шаблон»> «Построить новый шаблон».

Назначьте его на странице своего блога и нажмите «Создать шаблон».

Чтобы спроектировать страницу списка сообщений в блоге, нажмите «Добавить пользовательский корпус»> «Создайте пользовательский корпус».

Теперь вы войдете в Divi Builder, где мы начнем строить макет петли.

1. Импорт макета

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

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

2. Design One Blog Post Card

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

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

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

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

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

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

3. Включить обертывание ряда

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

Перейти к макету. Убедитесь, что стиль макета настроен на гибкость.

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

4. Включите петлю

Теперь идет шаг, который делает все это автоматическим. Выберите столбец карты.

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

Для этого макета я установил:

• Тип сообщения: сообщения
• Сообщения за страницу: 10
• Заказ по: дата
• Заказ: спуск (первый первый)
• Офтет публикации: 0 (покажите все, что начинается с последних)
• Игнорировать липкие посты: да

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

5. Добавить динамический контент

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

• Свяжите модуль изображения с изображением пост.
• Свяжите модуль заголовка с заголовком Post.
• Свяжите текстовый модуль с выдержкой Post.
• Подключите кнопку «Читать больше к URL -адресу».

При цитировании Divi заменит содержание заполнителей на правильные данные для каждого поста в цикле.

Чтобы установить представленное изображение, откройте модуль изображения, проведите вариант изображения и нажмите значок динамического контента . Выберите Loop Felected Image , и все соответствующие изображения будут заполняться мгновенно.

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

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

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

6. Сохраните свой шаблон и предварительный просмотр

Как только все выглядит правильно, внесите какие -либо последние настройки и сохраните изменения как в Divi Builder, так и на создателете.

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

У модуля блога были ограничения, строитель Loop не

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

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

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

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

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

Настройте карту списка блога.

Вы также можете изменить вертикальный зазор вашей группы модулей в правом столбце в Design> Layout> Параметр вертикального зазора .

Далее мы включим опцию петли . Выберите первый столбец из родительской строки.

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

Это ваш блог в стиле списка. Теперь, если вы хотите преобразовать это в сетку, просто измените ширину столбца. Поскольку у нас есть гибкая упаковка в ряду, карты будут завершены самостоятельно, когда мы изменим их размер.

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

И точно так же ваша сетка также готова.

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

Используйте модуль страниц

Если вы ограничиваете сообщения на страницу в своем запросе цикла, вам, вероятно, захотите, чтобы читатели увидели все остальное. Добавьте модуль странификации под вашей сеткой и установите его целевой цикл в элемент, где вы включили цикл. Для полного прохождения, посмотрите, как использовать модуль Loop Builder и Pagination для Divi 5 вместе: прочитайте учебник.

Скачать шаблоны блога

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

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

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

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

СКАЧАТЬ

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

Создайте свой индивидуальный цикл в блоге в Divi 5 сегодня

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

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