Учебник Divi: как использовать фильтруемый модуль портфолио
06.09.2018
Divi: самая простая тема WordPress для использования
Вот лучшие инструменты для монетизации вашего блога
Модуль Fullwidth Портфолио темы Дива , работает так же, как и обычный модуль Portfolio, за исключением того, что он отображает ваш проект в красивом режиме Fullwdth. Он также поставляется с некоторыми новыми уникальными функциями: сеткой и карусели. Модуль работает, отображая список ваших последних проектов и может быть использован дизайнерами и художниками, которые хотят отобразить галерею своих последних работ.
Как добавить модуль Fullwidth на портфолио
Прежде чем вы сможете добавить полный портфолио на свою страницу, сначала нужно перейти в Divi Builder. После того, как тема Divi установлена на вашем веб-сайте, вы заметите кнопку Использовать Divi Builder над издателем каждый раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать на кнопку Использовать Visual Builder когда вы просматриваете свой сайт на переднем плане, если вы подключены к панели инструментов WordPress.
После того, как вы вошли в Visual Builder, вы можете нажать кнопку «серый плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы запустите новую страницу, не забудьте сначала добавить строку на свою страницу. У нас отличные учебные пособия об использовании линейных элементов и разделов Divi.
Найдите фильтрующий модуль портфеля в списке модулей и нажмите на него, чтобы добавить его на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «фильтруемый портфолио», а затем нажать «Ввод» для автоматического поиска и добавления фильтруемого модуля портфолио. После добавления модуля вы будете приветствоваться списком параметров модуля. Эти параметры разделены на три основные группы: Содержание ,Дизайн и Передовой ,
Пример использования примера: добавление фильтруемого модуля портфеля на страницу портфолио
В этом примере я покажу вам, как представить портфолио на странице портфолио, которая охватывает всю ширину страницы.
Давайте начнем.
Используйте визуальный конструктор, чтобы добавить раздел Fullwidth под заголовком страницы. Затем добавьте фильтруемый модуль портфолио.
WPML, лучший плагин для перевода вашего сайта
Обновите параметры фильтруемого портфолио следующим образом:
Параметры содержимого
Номер сообщения: 8 Show Pagination: NOВарианты дизайна
Макет страницы: Значок цвета масштабирования сетки: # 000000 Overlay Color Hover: #ffffff Название шрифта: по умолчанию Bold, название заголовка заголовка Размер шрифта: 14px Расстояние между буквами: 1px Meta Font Size: 12px Meta Spacing буквы: 1px
Вот так!
Опция содержимого модуля портфолио
На вкладке «Содержание» вы найдете все элементы содержимого модуля, такие как текст, изображения и значки. Все, что контролируеткакиев вашем модуле всегда будет отображаться на этой вкладке.
Titre du portefeuille
Entrez un titre affiché au-dessus du portfolio, ou laissez-le vide pour ne pas utiliser un titre.
Включить категории
Выберите категории, которые вы хотите отобразить. Проекты из категорий, которые не выбраны, не будут отображаться в списке проектов.
Количество сообщений
Contrôler le nombre de projets affichés Laissez vide ou utilisez 0 pour ne pas limiter le montant.
Показать название
Выберите, отображается ли название каждого проекта или нет, когда вы наводите курсор на элемент проекта.
Показать дату
Choisissez si la date de publication de chaque projet est affichée ou non lorsque vous passez la souris sur l’élément de projet.
PEARL: тема WordPress для бизнеса
Цвет фона
Установите собственный цвет фона для вашего модуля или оставьте пустым, чтобы использовать цвет по умолчанию.
Фоновое изображение
Если установлено, это изображение будет использоваться в качестве фона для этого модуля. Чтобы удалить фоновое изображение, просто удалите URL-адрес из поля настроек. Фоновые изображения будут отображаться над цветами фона, а это означает, что фоновый цвет не будет отображаться при использовании фонового изображения.
Étiquette Admin
Это облегчит идентификацию модуля в конструкторе. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в блоке модуля интерфейса Divi Builder.
Options de conception de portefeuille pleine largeur
На вкладке «Дизайн» вы найдете все параметры стиля модуля, такие как шрифты, цвета, размер и интервал. Это вкладка, которую вы будете использовать для изменения внешнего вида вашего модуля. Каждый модуль Divi имеет длинный список параметров дизайна, которые вы можете использовать для изменения чего-либо.
Предоставление
Choisissez la disposition que vous souhaitez utiliser. « Grille » affichera tous vos éléments dans une disposition multi- столбцы et multi-lignes. Le carrousel affiche vos éléments dans une seule rangée d’images en mosaïque qui glissent pour révéler des éléments supplémentaires dans la liste.
Zoom Icône Couleur
Lorsque vous survolez un élément du module de portefeuille, une icône de superposition apparaît. Vous pouvez ajuster la couleur utilisée à partir de cette icône à l’aide du sélecteur de couleur dans ce paramètre.
Hover Overlay Couleur
Когда вы наводите курсор на элемент в модуле портфолио, в верхней части изображения появляется надлежащий цвет, а под значком текста и названия портфолио. По умолчанию используется полупрозрачный белый цвет. Если вы хотите использовать другой цвет, вы можете настроить цвет с помощью набора цветов в этой настройке
Hover Icon Sélecteur
Здесь вы можете выбрать пользовательский значок, отображаемый при посещении посетителем элементов портфеля в модуле.
Цвет текста
Здесь вы можете выбрать, должен ли ваш текст быть светлым или темным.
Название шрифта
Вы можете изменить шрифт текста заголовка, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками больших шрифтов на основе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете олицетворять стиль вашего текста, используя жирный, курсив, прописные и подчеркнутые параметры.
Taille de la police du titre
Здесь вы можете настроить размер текста заголовка. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста или ввести значение требуемого размера текста непосредственно в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, а это означает, что вы можете ввести «px» или «em» в зависимости от значения вашего размера, чтобы изменить его тип устройства.
Цвет текста заголовка
По умолчанию все цвета текста Divi отображаются белым или темно-серым цветом. Если вы хотите изменить цвет текста заголовка, выберите нужный цвет в панели выбора цветов, используя эту опцию.
Интервал заглавных букв
Интервал букв влияет на пространство между каждой буквой. Если вы хотите увеличить пространство между каждой буквой в тексте заголовка, используйте ползунок диапазона, чтобы отрегулировать пространство или введите желаемый размер расстояния в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, а это означает, что вы можете ввести «px» или «em» в зависимости от значения вашего размера, чтобы изменить его тип устройства.
Высота строки заголовка
Высота строки влияет на пространство между каждой строкой текста заголовка. Если вы хотите увеличить пространство между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать пространство или введите желаемый размер расстояния в поле ввода расположенной справа от курсора. Поля ввода поддерживают разные единицы измерения, а это означает, что вы можете ввести «px» или «em» в зависимости от значения вашего размера, чтобы изменить его тип устройства.
Meta Font
Вы можете изменить шрифт вашего метатекста, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками больших шрифтов на основе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль своего текста, используя выделенные жирным шрифтом, курсивом, прописными и подчеркнутыми параметрами.
Размер шрифта Metas
Здесь вы можете настроить размер вашего метатекста. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста или ввести значение требуемого размера текста непосредственно в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, а это означает, что вы можете ввести «px» или «em» в зависимости от значения вашего размера, чтобы изменить его тип устройства.
Цвет метатекста
По умолчанию все цвета текста Divi отображаются белым или темно-серым цветом. Если вы хотите изменить цвет своего метатекста, выберите нужный цвет в наборе цветов, используя эту опцию.
Интервал метаданных
Интервал букв влияет на пространство между каждой буквой. Если вы хотите увеличить пространство между каждой буквой вашего метатекста, используйте ползунок диапазона, чтобы отрегулировать пробел или введите желаемый размер расстояния в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, а это означает, что вы можете ввести «px» или «em» в зависимости от значения вашего размера, чтобы изменить его тип устройства.
Meta Line Hauteur
Высота строки влияет на пространство между каждой линией вашего метатекста. Если вы хотите увеличить пространство между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать пространство или ввести желаемый размер расстояния в поле ввода расположенной справа от курсора. Поля ввода поддерживают разные единицы измерения, а это означает, что вы можете ввести «px» или «em» в зависимости от значения вашего размера, чтобы изменить его тип устройства.
Использовать границу
Включение этой опции будет размещать рамку вокруг вашего модуля. Эта граница может быть настроена с использованием следующих условных параметров.
Цвет границы
Этот параметр влияет на цвет вашей границы. Выберите собственный цвет в подборщике цветов, чтобы применить его к границе.
Ширина границы
По умолчанию границы имеют ширину 1-пикселя. Вы можете увеличить это значение, перетащив ползунок диапазона или введя пользовательское значение в поле ввода справа от ползунка. Пользовательские единицы измерения поддерживаются, что означает, что вы можете изменить блок по умолчанию «px» на что-то еще, например em, vh, vw и т. Д.
Стиль обрамления
Границы поддерживают восемь разных стилей: сплошной, пунктирный, пунктирный, двойной, паз, гребень, инкрустация и начало. Выберите нужный стиль в раскрывающемся меню, чтобы применить его к границе.
Options avancées du portefeuille Fullwidth
На вкладке «Дополнительно» вы найдете варианты, которые могут быть полезны более опытным веб-дизайнерам, например атрибутам CSS и пользовательский HTML. Здесь вы можете применить собственный CSS к одному из многих элементов модуля. Вы также можете применить к модулю пользовательские классы и идентификаторы CSS, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.
CSS-идентификатор
Введите необязательный идентификатор CSS, который будет использоваться для этого модуля. Идентификатор может использоваться для создания пользовательского стиля CSS или для создания ссылок на определенные разделы вашей страницы.
Класс CSS
Введите дополнительные классы CSS, которые будут использоваться для этого модуля. Класс CSS можно использовать для создания пользовательского стиля CSS. Вы можете добавить несколько классов, разделенных пробелом. Эти классы могут использоваться в вашей дочерней теме Divi или в специальной таблице стилей CSS, которую вы добавляете на свою страницу или на веб-сайт, с помощью параметров темы Divi или настроек страницы Divi Builder.
пользовательских CSS
Пользовательский CSS также может применяться к модулю и к одному из внутренних элементов модуля. В разделе «Пользовательский CSS» вы найдете текстовое поле, в котором вы можете добавлять собственные таблицы стилей CSS непосредственно к каждому элементу. Элементы CSS в этих параметрах уже завернуты в теги стиля. Поэтому просто введите правила CSS, разделенные точкой с запятой.
Carrousel automatique
Si l’option de disposition du carrousel est choisie et que vous souhaitez que le carrousel glisse automatiquement sans que le visiteur doive cliquer sur le bouton suivant, activez cette option et ajustez la vitesse de rotation ci-dessous si vous le souhaitez.
Vitesse automatique du carrousel
Vous pouvez indiquer ici la vitesse de rotation du carrousel, si l’option « Rotation automatique du carrousel » est activée ci-dessus. Plus le nombre est élevé, plus la pause entre chaque rotation est longue. (Ex. 1000 = 1 sec)
видимость
Эта опция позволяет вам управлять устройствами, на которых отображается ваш модуль. Вы можете отключить свой модуль на планшетах, смартфонах или настольных компьютерах по отдельности. Это полезно, если вы хотите использовать разные модули на разных устройствах, или если вы хотите упростить мобильный дизайн, исключив некоторые элементы страницы.
Вы ищете лучшие темы и плагины WordPress?
Пользователи BlogPasCher рекомендуют следующие категории: