С модула Портфолио на Divi можете да покажете работата си навсякъде на сайта си с всякаква структура на колони. В този урок ще ви покажа как да използвате модула на портфейла на Divi.

Как да добавите модул за портфейла на Divi

Преди да можете да добавите модул за портфолио към вашата страница, първо трябва да влезете в Divi Builder. Веднъж Тема на Divi инсталиран на уебсайта ви, ще забележите бутон Използвайте Divi Builder над редактора на публикации, когато създавате нова страница. Щракнете върху този бутон, за да активирате Divi Builder и да получите достъп до всички модули Divi Builder. След това кликнете върху бутона Използвайте Visual Builder за да стартирате генератора във визуален режим. Можете също да щракнете върху бутона Използвайте Visual Builder когато разглеждате уебсайта си на преден план, ако сте свързани с таблото за управление на WordPress.

След като влезете в Visual Builder, можете да щракнете върху сивия бутон плюс, за да добавите нов модул към вашата страница. Нови модули могат да се добавят само в редове. Ако стартирате нова страница, не забравяйте първо да добавите ред към страницата си.

Намерете портфолио модула в списъка с модули и кликнете върху него, за да го добавите към вашата страница. В списъка с модули може да се търси, което означава, че можете също да въведете думата „портфолио“ и след това да натиснете „Enter“, за да намерите автоматично и добавите модула на портфолиото! След като модулът бъде добавен, ще бъдете посрещнати от списъка с опции на модула. Тези опции са разделени на три основни групи: Съдържание , Концепция et напреднал .

Примерен случай на употреба: Добавяне на портфолио модул към страница на портфолио

За този пример ще ви покажа как да представите портфолио на страница с портфолио.

Нека да започнем.

Използвайте визуалния конструктор, за да добавите обикновена секция с ред с пълна ширина (1 колона) под заглавката на страницата. След това добавете модул за портфолио, който може да се филтрира, към реда.

Актуализирайте настройките на портфейла, както следва:

Опции за съдържанието

Брой статии: 8
Показване на страниците: NO

Опции за дизайн

Разпределение: Решетка
Икона на цвят за увеличение: #ffffff
Покритие на цвета на курсора на мишката: rgba (224,153,0,0.58)
Шрифт на заглавието: По подразбиране, удебелен, заглавен
Размер на шрифта: 14px
Заглавие Разстояние между буквите: 1px
Meta размер на шрифта: 12px
Разстояние на метаданни: 1px

Разширени опции (персонализиран CSS)

Име на портфейла:
текст-подравняване: център;

Портфолио за метаданни:
текст-подравняване: център;

Това е всичко!

Опции за съдържание на портфолио

В раздела Съдържание ще намерите всички елементи на съдържанието на модула, като текст, изображения и икони. Всичко, което контролира какво се появява във вашия модул, винаги ще се намира в този раздел.

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

Контролирайте броя на показваните проекти Оставете празно или използвайте 0, за да не ограничавате броя.

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

Изберете категориите, които искате да се показват. Проекти от категории, които не са избрани, няма да се появят в списъка с проекти.

Показване на заглавието

Изберете дали заглавието на всеки проект да се показва, когато задържите мишката върху елемента на проекта.

Показване на категории

Тук можете да активирате или деактивирате връзки към категории.

Преглеждайте страницирането

Тук можете да активирате или деактивирате страници за тази емисия.

Цвят на фона

Определете персонализиран цвят на фона за вашия модул или оставете празно, за да използвате цвета по подразбиране.

Изображение на фона

Ако е зададено, това изображение ще се използва като фон за този модул. За да премахнете фоново изображение, просто премахнете URL адреса от полето за настройки. Фоновите изображения ще се появят върху цветовете на фона, което означава, че цветът на фона няма да се вижда, когато се приложи фоново изображение.

Администраторски етикет

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

Опции за дизайн на модул за портфейл

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

разпореждане

Изберете оформлението, което искате да използвате. “Grid” ще покаже всичките ви елементи в многоредово оформление с много редове. 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 ID

Въведете незадължителен CSS ID, който да използвате за този модул. Идентификаторът може да се използва за създаване на персонализиран 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 » custom_background= »#18b69d » custom_hover_background= »#118d7a » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]ИЗТЕГЛЕТЕ ГО ТЕМА DIVI [/vcex_button][/vc_column][vc_column width= »1/2″][vcex_button url= »https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=уроци » target= » празно » layout= »разширено » align= »center » font_family= »Raleway » font_weight= »700″ style= »flat » custom_background= »#c4226e » custom_hover_background= »#8d184f » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]ИЗТЕГЛЕТЕ ШАБЛОНИ DIVI[/vcex_button][/vc_column][/vc_row]

Други уроци по Диви

• Ресторант 5, който използва темата на Divi
• Как да добавяте текст към продукт Divi WooCommerce
• Как да промените цвета на менюто между страниците на Divi
• Как да персонализирате решетките на блог с Divi
• Как да използвате редактора на роли Divi в WordPress
• Как да създадете плъзгач Divi на цял екран
• Как да промените цвета на менютата между страниците на Divi
• Функции, които вероятно не знаете за Divi
• Как да използвате Divi Builder на WordPress
• Как да използвате модула за превъртане на видео Divi
• Как да използвате модула за обръщане на Divi Builder
• Как да добавите препоръчителен модул на Divi Builder
• Как да използвате текстовия модул Divi
• Как да създадете плъзгач на Divi
• Как да редактирате потребителска роля на Divi
• Как да използвате модула Divi Social Media
• Как да използвате магазинния модул по темата WordPress Divi
• Как да използвате модула Sidebar на Divi
• Как да използвате модула на таблицата с цени за Divi
• Как да използвате заглавния модул на публикациите на Divi
• Как да добавите видео модул на Divi
• Как да използвате навигационния модул на статията
• Как да използвате модула за търсене Divi
• Как да използвате модула на портфейла Divi
• Как да използвате модула за лице на Divi Builder
• Как да използвате портфейла с филтър на Divi
• Как да използвате модула на плъзгача с пълна ширина
• Как да използвате модула за изображения на Builder на Divi
• Как да използвате навигационния модул с пълна ширина на Divi Builder
• Как да използвате модула за галерия на изображения
• Как да използвате модула на карта с пълна ширина Divi Builder
• Как да използвате модула за портфейли с пълна ширина Divi
• Как да използвате заглавния модул Divi с пълна ширина
• Как да използваме Counter модула Divi
• Как да използвате плъзгача за статии в Divi Builder
• Как да използвате модула Divi Email Optin

Блеър Jersyer

Разработчик на WordPress и запален по всичко, свързано с новите технологични тенденции. Автори на добавки, Теми на WordPress и други уеб приложения. Автор в BlogPasCher.com.

Вижте пълната биография