С модулем портфолио Divi вы можете показывать свои работы в любом месте вашего сайта с любой структурой столбцов. В этом уроке я покажу вам, как использовать модуль кошелька в Divi.
Как добавить модуль Divi Wallet
Прежде чем вы сможете добавить модуль портфолио на свою страницу, вы должны сначала перейти в Divi Builder. Однажды Диви тема установлен на вашем Веб-сайт, вы заметите кнопку Использовать Divi Builder над редактором сообщений всякий раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите на кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать кнопку Использовать Visual Builder когда вы просматриваете свой Веб-сайт на переднем плане, если вы вошли в панель управления WordPress.
После входа в Visual Builder вы можете нажать серую кнопку «плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы начинаете новую страницу, не забудьте сначала добавить строку на свою страницу.
Найдите модуль портфолио в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «портфолио», а затем нажать «Enter», чтобы автоматически найти и добавить модуль портфолио! После добавления модуля вы увидите список опций модуля. Эти параметры разделены на три основные группы: Содержание , Дизайн et Передовой .
Пример использования: добавление модуля портфолио на страницу портфолио
В этом примере я покажу вам, как представить портфолио на странице портфолио.
Давайте начнем.
Используйте визуальный конструктор, чтобы добавить обычный раздел со строкой в полную ширину (1 столбец) под заголовком страницы. Затем добавьте в строку фильтруемый модуль портфолио.
Обновите настройки кошелька следующим образом:
Параметры содержимого
Количество статей: 8
Показать разбивку на страницы: НЕТ
Варианты дизайна
Макет: сетка
Цвет значка увеличения: #ffffff
Hover Overlay Цвет: rgba (224,153,0,0.58)
Название шрифта: по умолчанию, жирный, прописные
Размер шрифта заголовка: 14px
Интервал между заголовками: 1px
Размер шрифта Meta: 12px
Интервал между мета-буквами: 1px
Расширенные настройки (пользовательский CSS)
Название портфолио:
выравнивания текста: центр;
Портфолио метаданных:
выравнивания текста: центр;
Вот и все!
Параметры содержимого портфолио
На вкладке «Содержимое» вы найдете все элементы содержимого модуля, такие как текст, изображения и значки. Все, что контролирует какие появляется в вашем модуле, всегда будет найден в этой вкладке.
Номер предмета
Управление количеством отображаемых проектов. Оставьте поле пустым или используйте 0, чтобы не ограничивать количество.
Включить категории
Выберите категории, которые хотите отобразить. Проекты из невыбранных категорий не будут отображаться в списке проектов.
Показать название
Выберите, будет ли отображаться заголовок каждого проекта при наведении курсора мыши на элемент проекта.
Показать категории
Здесь вы можете включить или отключить ссылки на категории.
Просмотр разбивки на страницы
Здесь вы можете включить или отключить пейджинг для этого канала.
Цвет фона
Определите собственный цвет фона для вашего модуля или оставьте поле пустым, чтобы использовать цвет по умолчанию.
Фоновое изображение
Если установлено, это изображение будет использоваться в качестве фона для этого модуля. Чтобы удалить фоновое изображение, просто удалите URL-адрес из поля настроек. Фоновые изображения будут отображаться поверх цветов фона, что означает, что цвет фона не будет виден при применении фонового изображения.
Значок администратора
Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.
Варианты дизайна модуля портфолио
На вкладке «Дизайн» вы найдете все параметры стиля модуля, такие как шрифты, цвета, размер и интервал. Это вкладка, которую вы будете использовать для изменения внешнего вида вашего модуля. Каждый модуль Divi имеет длинный список настроек дизайна, которые вы можете использовать, чтобы изменить что угодно.
Предоставление
Выберите макет, который хотите использовать. «Сетка» отобразит все ваши элементы в виде нескольких столбцов и нескольких строк. В режиме Fullwidth каждый проект отображается в отдельной строке с использованием больших, неразрезанных изображений большой ширины.
Цвет значка масштабирования
Когда вы наводите курсор на элемент в модуле портфолио, появляется значок наложения. Вы можете настроить цвет, используемый для этого значка, с помощью палитры цветов в этой настройке.
Цвет слоя на эстакаде
При наведении указателя мыши на элемент в модуле портфолио вверху изображения и под текстом и значком заголовка портфолио появляется цвет наложения. По умолчанию используется полупрозрачный белый цвет. Если вы хотите использовать другой цвет, вы можете настроить цвет с помощью палитры цветов в этой настройке.
Значок выбора при наведении
Здесь вы можете выбрать собственный значок, который будет отображаться, когда посетитель наводит курсор на элементы портфолио в модуле.
Цвет текста
Здесь вы можете выбрать, будет ли ваш текст светлым или темным.
Название шрифта
Вы можете изменить шрифт текста заголовка, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками отличных шрифтов на базе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль текста, используя полужирный шрифт, курсив, заглавные буквы и параметры подчеркивания.
Размер шрифта заголовка
Здесь вы можете настроить размер текста заголовка. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или напрямую введите желаемое значение размера текста в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.
Цвет текста заголовка
По умолчанию все цвета текста в Divi отображаются в белом или темно-сером цвете. Если вы хотите изменить цвет текста заголовка, выберите нужный цвет в палитре цветов с помощью этой опции.
Интервал заглавных букв
Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить расстояние между каждой буквой в тексте заголовка, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы.
Высота строки заголовка
Высота строки влияет на расстояние между каждой строкой текста заголовка. Если вы хотите увеличить расстояние между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода расположен справа от курсора. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.
Шрифт Metas
Вы можете изменить шрифт вашего метатекста, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками отличных шрифтов на базе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль текста, используя полужирный шрифт, курсив, заглавные буквы и параметры подчеркивания.
Размер шрифта Metas
Здесь вы можете настроить размер вашего метатекста. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или напрямую ввести желаемое значение размера текста в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.
Цвет метатекста
По умолчанию все цвета текста в Divi отображаются в белом или темно-сером цвете. Если вы хотите изменить цвет вашего метатекста, выберите нужный цвет в палитре цветов, используя эту опцию.
Интервал метаданных
Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить расстояние между каждой буквой в метатексте, используйте ползунок диапазона, чтобы отрегулировать интервал, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы.
Высота ссылок в мета области
Высота строки влияет на расстояние между каждой строкой вашего метатекста. Если вы хотите увеличить расстояние между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода расположен справа от курсора. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.
Использовать границу
Включение этой опции поместит рамку вокруг вашего модуля. Эту границу можно настроить с помощью следующих условных параметров.
Цвет границы
Этот параметр влияет на цвет вашей границы. Выберите собственный цвет в палитре цветов, чтобы применить его к границе.
Ширина границы
По умолчанию ширина границ составляет 1 пиксель. Вы можете увеличить это значение, перетащив ползунок диапазона или введя произвольное значение в поле ввода справа от ползунка. Поддерживаются пользовательские единицы измерения, что означает, что вы можете изменить единицу измерения по умолчанию с «px» на что-то другое, например em, vh, vw и т. Д.
Стиль границ
Границы поддерживают восемь различных стилей: сплошной, точечный, точечный, двойной, бороздка, гребень, наложение и начало. Выберите желаемый стиль из раскрывающегося меню, чтобы применить его к границе.
Расширенные возможности портфолио
На вкладке «Дополнительно» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю пользовательские классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.
CSS-идентификатор
Введите необязательный идентификатор CSS, который будет использоваться для этого модуля. Идентификатор можно использовать для создания собственного стиля CSS или для ссылки на определенные разделы вашей страницы.
Класс CSS
Введите дополнительные классы CSS, которые будут использоваться для этого модуля. Класс CSS можно использовать для создания собственного стиля CSS. Вы можете добавить несколько классов, разделенных пробелом. Эти классы можно использовать в дочерней теме Divi или в пользовательской таблице стилей CSS, которую вы добавляете на свою страницу или веб-сайт. Веб-сайт используя параметры темы Divi или настройки страницы Divi Builder.
Пользовательский CSS
Пользовательский CSS также может быть применен к модулю и к любому внутреннему устройству модуля. В разделе «Пользовательский CSS» вы найдете текстовое поле, в котором вы можете добавить пользовательские таблицы стилей CSS непосредственно к каждому элементу. Записи CSS в этих настройках уже заключены в теги стилей. Так что просто введите правила CSS через точку с запятой.
видимость
Эта опция позволяет вам контролировать устройства, на которых появляется ваш модуль. Вы можете по отдельности деактивировать свой модуль на планшетах, смартфонах или настольных компьютерах. Это полезно, если вы хотите использовать разные моды на разных устройствах или если вы хотите упростить мобильный дизайн, удалив определенные элементы со страницы.
[vc_row center_row="yes"][vc_column width="1/2"][vcex_button target="blank" layout="expanded" align="center" font_family="Raleway" font_weight="700" style="flat" 18 /69″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=118&url=7&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”2″ style=”flat” custom_background=”#c23065e” custom_hover_background=”#40632d1f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”] СКАЧАТЬ ШАБЛОНЫ DIVI[/vcex_button][/vc_column][/vc_row]
Другие учебные пособия Divi
- сайты 5 для использования ресторана Divi темы
- Как добавить текст в продукт Divi WooCommerce
- Как изменить цвет меню между страницами Divi
- Как персонализировать сетки блога с Divi
- Как использовать роль DiVi редактор на WordPress
- Как создать полноэкранный слайдер Divi
- Как изменить цвет меню между страницами Divi
- Особенности, которые вы, вероятно, не знаете о Divi
- Как использовать Divi Builder в WordPress
- Как использовать модуль прокрутки видео Divi
- Как использовать модуль Flip Builder Flip
- Как добавить отзыв модуль на Divi Builder
- Как использовать текстовый модуль Divi
- Как создать слайдер на Divi
- Как редактировать роль пользователя Divi
- Как использовать модуль Divi Social Media
- Как пользоваться магазинным модулем на тему WordPress Divi
- Как использовать боковую панель Divi
- Как использовать модуль таблицы цен Divi
- Как использовать титульный модуль изданий Divi
- Как добавить видео модуль Divi
- Как использовать навигационный модуль статьи
- Как использовать модуль поиска Divi
- Как использовать модуль кошелька Divi
- Как использовать модуль пользователя в Divi Builder
- Как использовать модуль кошелька с фильтром Divi
- Как использовать ползунок полной ширины
- Как использовать модуль изображения Divi Builder
- Как использовать полноразмерный навигационный модуль Divi Builder
- Как использовать модуль галереи изображений
- Как использовать модуль карты полной ширины Divi Builder
- Как использовать модуль Divi Full Width Portfolio
- Как использовать полноразмерный заголовочный модуль Divi
- Как использовать Divi Counter Module
- Как использовать слайдер статей в Divi Builder
- Как использовать модуль Divi Email Optin
Чао, возможно ли иметь портфолио на 3 столбца за scorrimento? Siccome ho molti elements da visualizzare, vorrei far sì che venissero visualizzati as delle slide che scorrono verso sx… Нет, так что такая идея… Grazie!
Здравствуйте, я хотел бы знать, можно ли представить презентацию в виде сетки с тремя столбцами, а не с четырьмя. По умолчанию мои проекты выстраиваются на четыре по горизонтали, и, поскольку я хотел поставить шесть, мне бы хотелось, чтобы презентация состояла из трех столбцов и двух строк. Я искал варианты, но ничего не нашел ...
Спасибо заранее за вашу помощь.
Здравствуйте, не могли бы вы объяснить мне, почему между каждой колонкой моего портфолио под элементами очень большое пространство. Не слева и справа, а под рядами. Огромное спасибо.
Здравствуйте, если у нас есть обзор, мы можем лучше проконсультировать вас.
Товары.
Скриншот 2019-09-21 на 14.49.53 copie.jpg
Здравствуйте, в вашем посте нет ссылки на скриншот. Вы можете использовать этот инструмент для этого: https://screenshot.net/fr/
Здравствуйте,
Знаете ли вы, можно ли добавить экстракт, видимый для портфолио под заголовком?
Merci d'Avance
Добрый вечер Салли,
Не проверено, пока извините.