Пропустить

Учебник Divi: как использовать модуль кошелька с фильтром

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

модуль расширения широты ширины divi.png

Как добавить модуль Portfolio Fullwidth на свою страницу

Прежде чем вы сможете добавить полный модуль портфолио на свою страницу, вы должны сначала перейти в Divi Builder. Как только тема Divi будет установлена ​​на вашем веб-сайте, вы увидите кнопку Использовать Divi Builder над редактором сообщений всякий раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите на кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать кнопку Использовать Visual Builder когда вы просматриваете свой веб-сайт на переднем плане, если вы подключены к своей панели управления WordPress.

divi builder

После входа в Visual Builder вы можете нажать серую кнопку «плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы начинаете новую страницу, не забудьте сначала добавить строку на свою страницу. У нас есть отличные руководства по использованию элементов строки и раздела Divi.

filterable port.png

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

Пример использования: добавление фильтруемого модуля портфолио на страницу портфолио

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

портфолио на всей странице divi.jpg

Давайте начнем.

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

добавить фильтруемый портфель divi.jpg

Обновите параметры фильтруемого портфеля следующим образом:

Параметры содержимого

Количество сообщений: 8 Отображение страниц: НЕТ

Варианты дизайна

Макет: Сетка Масштаб Цвет значка: # 000000 Цвет наложения при наложении: #ffffff Шрифт заголовка: по умолчанию, полужирный, верхний регистр Размер шрифта заголовка: 14 пикселей Интервал между буквами заголовка: 1 пикселей Размер мета-шрифта: 12 пикселей мета-интервал буквы: 1px

фильтруемый портфельный модуль divi.png

Вот и все!

Опция содержимого модуля портфолио

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

фильтруемый контент-модуль divi content.png

Название портфолио

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Включить категории

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

Количество сообщений

Управление количеством отображаемых проектов. Оставьте поле пустым или используйте 0, чтобы не ограничивать количество.

Показать название

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

Показать дату

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

Цвет фона

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

Фоновое изображение

Если установлено, это изображение будет использоваться в качестве фона для этого модуля. Чтобы удалить фоновое изображение, просто удалите URL-адрес из поля настроек. Фоновые изображения будут отображаться поверх цветов фона, что означает, что цвет фона не будет виден при применении фонового изображения.

Ярлык администратора

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

Варианты дизайна кошелька полной ширины

На вкладке «Дизайн» вы найдете все параметры стиля модуля, такие как шрифты, цвета, размер и интервал. Это вкладка, которую вы будете использовать для изменения внешнего вида вашего модуля. Каждый модуль Divi имеет длинный список настроек дизайна, которые вы можете использовать, чтобы изменить что угодно.

дизайн-модуль divi.png

Предоставление

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

Цветной значок увеличения

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

Наложение цвета наложения

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

Hover Icon Selector

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

Цвет текста

Здесь вы можете выбрать, будет ли ваш текст светлым или темным.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

вариант дизайн фильтруемый портфельный модуль divi.png

Название шрифта

Вы можете изменить шрифт текста заголовка, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками отличных шрифтов на базе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль текста, используя полужирный шрифт, курсив, заглавные буквы и параметры подчеркивания.

Размер шрифта заголовка

Здесь вы можете настроить размер текста заголовка. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или напрямую введите желаемое значение размера текста в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.

Цвет текста заголовка

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

Интервал заглавных букв

Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить расстояние между каждой буквой в тексте заголовка, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы.

Высота строки заголовка

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

фильтруемая часть модуля divi раздела metadonnee.png

Мета-шрифт

Вы можете изменить шрифт вашего метатекста, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками отличных шрифтов на базе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль текста, используя полужирный шрифт, курсив, заглавные буквы и параметры подчеркивания.

Размер шрифта Metas

Здесь вы можете настроить размер вашего метатекста. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или напрямую ввести желаемое значение размера текста в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.

Цвет метатекста

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

Интервал метаданных

Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить расстояние между каждой буквой в метатексте, используйте ползунок диапазона, чтобы отрегулировать интервал, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы.

Высота линии Meta

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

Использовать границу

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

Цвет границы

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

Ширина границы

По умолчанию ширина границ составляет 1 пиксель. Вы можете увеличить это значение, перетащив ползунок диапазона или введя произвольное значение в поле ввода справа от ползунка. Поддерживаются пользовательские единицы измерения, что означает, что вы можете изменить единицу измерения по умолчанию с «px» на что-то другое, например em, vh, vw и т. Д.

Стиль обрамления

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

Расширенные параметры портфолио Полная ширина

На вкладке «Дополнительно» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю пользовательские классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

divi фильтруемый модуль портфеля forward.png раздел

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

CSS-идентификатор

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

Класс CSS

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

Пользовательский CSS

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

Автоматическая карусель

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

Автоматическая скорость карусели

Здесь вы можете указать скорость вращения карусели, если выше активирована опция «Автоматическое вращение карусели». Чем выше число, тем длиннее пауза между каждым поворотом. (Например, 1000 = 1 секунда)

видимость

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

Другие учебные пособия Divi

Эта статья содержит комментарии 7

  1. Привет,
    У меня есть кошелек с фильтром или кошелек на всю ширину, но его нельзя фильтровать.
    Я хотел бы иметь возможность добавлять название проекта к моим фильтруемым изображениям портфолио, как в случае с «классическими» портфолио. Ты знаешь как это делать?

  2. Здравствуйте!

    Я только что зашел в Divi и наткнулся на способ создать страницу «Объявления», на которой мои новые объявления будут появляться в виде небольших эскизов / миниатюр рядом друг с другом, как на сайтах агентств недвижимости. Для информации я уже создал свою страницу РЕКЛАМА и несколько статей (одна статья для рекламы), которые я связываю с категорией РЕКЛАМА…. но они появляются в большом формате. Я надеюсь, что хорошо объяснил свою проблему! Пока жду ваших предложений, заранее благодарю вас за пояснения и советы! Спокойной ночи !! С уважением - Жером

    1. Здравствуйте, если вы используете модуль блога, вам нужно будет добавить определенный CSS, который применяется к этому модулю. К сожалению, эта форма не предлагает много вариантов настройки.

  3. Привет,

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

    спасибо

    1. Привет Дельфина,

      Я никогда не тестировал, но вернусь к вам, если у меня будет ответ.

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

    Спасибо!

    1. Привет Валери,

      Вы пробовали отключить все плагины, чтобы посмотреть, улучшится ли отображение?

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
15 акции
доля2
чирикать2
Регистрация11