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

Как да добавите модул с пълна ширина на портфейл към страницата си

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

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

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

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

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

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

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

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

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

Номер на съобщенията: 8 Показване на страницата: НЕ

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

Оформление: Цвят на иконата за мащабиране на мащаба Цвят: # 000000 Цвят на наслагване при задържане на курсора: #ffffff Шрифт на заглавието: По подразбиране, Удебелен, Голям регистър Размер на шрифта на заглавието: 14px Разстояние между буквите на заглавието: 1px Размер на мета шрифта: 12px Мета интервал букви: 1px

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

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

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

Име на портфейла

Въведете заглавие, показано над портфолиото, или го оставете празно, за да не използвате заглавие.

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

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

Брой съобщения

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

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

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

Показване на датата

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

Цвят на фона

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

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

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

Админ етикет

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

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

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

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

Изберете оформлението, което искате да използвате. “Grid” ще покаже всичките ви елементи в многоредово, многоредово оформление. Въртележката показва вашите елементи в един ред изображения с плочки, които се плъзгат, за да разкрият допълнителни елементи в списъка.

Цвят на мащаба икона

Когато задържите курсора на мишката върху елемент в модула на портфолиото, се появява икона за наслагване. Можете да регулирате цвета, използван от тази икона, като използвате инструмента за избор на цвят в тази настройка.

Наслагване на цветовете

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

Задръжте курсора за избор на икона

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

Цвят на текста

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

Шрифт на заглавието

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

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

Тук можете да регулирате размера на текста на заглавието си. Можете да плъзнете плъзгача за диапазон, за да увеличите или намалите размера на текста си, или директно да въведете стойността на желания размер на текста в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от стойността на вашия размер, за да промените типа му.

Цвят на текста на заглавието

По подразбиране всички цветове на текста в Divi се показват в бяло или тъмно сиво. Ако искате да промените цвета на текста на заглавието си, изберете желания цвят от инструмента за избор на цвят, използвайки тази опция.

Разстояние между главните букви

Разстоянието между буквите засяга пространството между всяка буква. Ако искате да увеличите интервала между всяка буква в текста на заглавието, използвайте плъзгача за диапазон, за да регулирате интервала или въведете желания размер на разстоянието в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от стойността на вашия размер, за да промените типа му.

Височина на заглавието

Височината на реда влияе върху интервала между всеки ред от текста на заглавието ви. Ако искате да увеличите интервала между всеки ред, използвайте плъзгача за диапазон, за да коригирате интервала или въведете желания размер на разстоянието в полето за въвеждане разположен вдясно от курсора. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от стойността на вашия размер, за да промените типа му.

Мета шрифт

Можете да промените шрифта на метатекста си, като изберете желания шрифт от падащото меню. 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, разделени с точка и запетая.

Автоматичен въртележка

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

Автоматична скорост на въртене

Тук можете да посочите скоростта на въртене на въртележката, ако по-горе е активирана опцията "Автоматично въртене на въртележка". Колкото по-голямо е числото, толкова по-дълга е паузата между всяко завъртане. (Напр. 1000 = 1 сек)

видимост

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

[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.

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