Как построить портфельную сетку с помощью строителя петли Divi 5

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

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

Понимание строителя петли Divi 5

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

Builder Lo

Ключевые преимущества застройщика петли

Благодаря надежным параметрам настройки, Loop Builder идеально подходит для создания портфельных сетей. Вот его выдающиеся функции:

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

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

Создание портфеля с помощью строителя петли

Мы будем использовать встроенные проекты Divi Projects Custom Post Type (CPT), чтобы создать портфель с контурным строителем. Проекты CPT предназначены для демонстрации контента в стиле портфеля, что делает его идеальным выбором для нашего макета. В то время как Divi предлагает модуль портфеля, мы будем использовать строитель петли, потому что он даст нам неограниченные варианты для создания уникального портфеля.

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

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

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

Перейдите на вкладку «Дизайн» , выберите Inter для заголовка шрифта , свет для веса шрифта заголовка , установите размер текста заголовка на 2 EM и назначьте высоту линии заголовка 1,3 EM .

Теперь давайте построим нашу петлю. Перейдите ко второму столбцу нашей строки.

Найдите вкладку петли , разверните ее и включите переключение элемента петли .

Далее выберите тип запроса . Для этого урока мы будем использовать встроенные CPT's Divi, проекты. В разделе «Тип поста» выберите проекты . Мы хотим продемонстрировать все проекты, поэтому мы оставим все как есть.

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

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

Разверните вкладку «Настройки макета» . Найдите настройку обертывания макета и выберите упаковку . Это завершит нашу петлю обратно в 3 столбца.

Стилирование колонки петли

Теперь, когда настройки петли на месте, пришло время стилизовать наши колонны. Настройки стиля, которые мы выбираем здесь, повлияют на оставшиеся столбцы в цикле. В строке 3-колона нажмите на 2-й столбец и нажмите вкладку «Дизайн» . Перейдите к выпадению границы и назначите радиус границы 15PX в колонку. В стилях границы добавьте ширину границы 1PX и используйте #000000 в качестве цвета границы .

Добавить контент в петлю

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

Мы будем использовать динамическое контент Divi 5, чтобы привлечь к себе изображение нашего проекта. Вернись над изображением, чтобы раскрыть значки. Нажмите на значок динамического контента , чтобы продолжить.

Выберите Loop Felected Image , когда появляются параметры.

Наша цикл поместит избранное изображение каждого проекта непосредственно в нашу портфельную цикл.

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

На вкладке «Дизайн» выберите H3 для уровня заголовка , Inter для заголовка шрифта , центр для выравнивания текста заголовка и 20px для заголовка размер текста.

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

Переключитесь на вкладку Design и установите выравнивание в центр .

Разверните настройки выпадения кнопки и включите использование пользовательских стилей для кнопки . Введите следующие настройки дизайна:

• Фон кнопки: #000000
• Радиус границы пуговиц: 15px
• Кнопка ширины границы: 0PX
• Кнопка шрифта: интер
• Кнопка текста: #ffffff
• Размер текста кнопки: 16px
• Маржа: 15px снизу
• Заполнение: 15px top & how, 35px влево и правый

Вот и все! Как видите, создание цикла с Divi 5 - это простой процесс.

Изменение стилей с помощью строителя петли

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

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

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

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

Тестирование и уточнение портфеля петли

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

Убедитесь, что заголовок каждого проекта, изображение , выдержка и цикл Link правильно вытягивают из проектов CPT. Убедитесь, что ни один из заполнителей не появляется сломанные элементы.

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

Перейдите по каждой точке перерыва , проверьте макет и при необходимости внесите коррективы.

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

Лучшие практики и советы

Чтобы убедиться, что вы получаете максимальную отдачу от Divi 5 и Loop Builder, вот несколько лучших практик, за которыми следует следовать при создании вашего портфеля.

1. Обеспечить конструкцию конструкции с переменными дизайна

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

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

2. Рассмотрим доступность

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

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

3. Шаблоны сохранения и повторного использования

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

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

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

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

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

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

СКАЧАТЬ

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

Попробуйте строитель петли в Divi 5 сегодня

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

Готовы ли вы воплотить в жизнь свое портфолио? Погрузитесь в новейший публичный выпуск Alpha Divi 5 и экспериментируйте с макетом портфеля. Независимо от того, являетесь ли вы фрилансером, демонстрирующим проекты или бизнес, выделяющий клиентскую работу, Loop Builder позволяет легко создавать профессиональный динамический дисплей.