Home News

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

06.09.2018

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

Вот лучшие инструменты для монетизации вашего блога

С модулем Portfolio (portefuille) Дива , вы можете показать свою работу в любом месте вашего сайта с любой структурой столбцы , в этом Tutoriel , Я покажу вам, как использовать модуль кошелька на Divi.

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

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

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

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

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

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

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

Используйте визуальный построитель для добавления регулярного раздела с полной шириной (столбец 1) под заголовком страницы. Затем добавьте фильтрующий модуль портфолио в строку.

Обновите настройки кошелька следующим образом:

WPML, лучший плагин для перевода вашего сайта

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

Количество статей: 8

Показать разбивку на страницы: НЕТ

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

Макет: сетка

Значок цвета цвета: #ffffff

Hover Overlay Цвет: rgba (224,153,0,0.58)

Титульный шрифт: по умолчанию, полужирный, заглавный

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

Интервал между заголовками: 1px

Размер шрифта Meta: 12px

Интервал между мета-буквами: 1px

Расширенные параметры (пользовательский CSS)

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

выравнивания текста: центр;

Портфолио метаданных:

выравнивания текста: центр;

Вот так!

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

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

Номер артикула

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

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

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

PEARL: тема WordPress для бизнеса

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

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

Показать категории

Здесь вы можете включить или отключить ссылки категории.

Просмотр разбивки на страницы

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

Цвет фона

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

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

Если установлено, это изображение будет использоваться в качестве фона для этого модуля. Чтобы удалить фоновое изображение, просто удалите 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, разделенные точкой с запятой.

видимость

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

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

Пользователи BlogPasCher рекомендуют следующие категории:

WordPress темы

WordPress плагины

rss