Модулът „Плъзгач за статии“ или Плъзгач за публикации на WordPress тема Divi ви позволява да показвате по отличителен начин статии по ваш избор на началната страница. В много блогове този тип модул обикновено се използва за показване на избрани статии. Но можете да го използвате по различен начин и например да показвате предложения за статии.

Как да добавите модула на плъзгача на статии в Divi Builder

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

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

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

Пример за употреба: Публикувайте плъзгачи (статии), за да покажете последните

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

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

Под Настройки на курсора актуализирайте следните опции:

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

Номер на съобщенията: 3

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

Шрифт на заглавката: Roboto (главни букви) Размер на шрифта на заглавката: 50px Цвят на текста на заглавката: # edef5d Разстояние между буквите на заглавката: 1px Размер на шрифта на тялото: 16 Основно писмо-интервал: 1px Височина на линията на тялото: 1.4em Курсив, горен регистър Размер на шрифта: 18px Цвят на метатекст: #cccccc Височина на металинията: 2em Използвайте персонализирани стилове за бутона: ДА Размер на текста: 26px Бутон Цвят на текста: # edef5d Ширина на бутона: 0px Икона на бутон:> Показване само на иконата

Запазване на настройките

Това е!

Модул на плъзгача на статията за съдържание

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

Брой елементи (брой публикации)

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

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

Изберете категориите, които искате да включите в плъзгача.

Подредете по

Тук можете да регулирате реда, в който се показват статиите.

Бутон текст

Определете текста, който ще се показва на бутона „Прочетете повече“. оставете празно по подразбиране (Прочетете повече)

Показване на съдържанието

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

Използвайте извадка от статия, ако е дефинирана

Деактивирайте тази опция, ако искате да пропуснете ръчно дефинираните фрагменти и все пак автоматично да ги генерирате.

Дължина на автоматично извличане

Определете дължината на автоматично генерираните извлечения. Оставете празно по подразбиране (270)

Показване на стрелки

Тази настройка ще активира и деактивира стрелките за навигация.

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

Тази настройка ще активира и деактивира бутоните с кръг в долната част на курсора.

Покажете бутона "Прочетете повече"

Тази настройка ще активира и деактивира бутона Прочетете повече.

Показване на съобщението Meta

Тази настройка ще активира и деактивира мета секцията.

Показване на представено изображение

Тази настройка включва и изключва изображението, избрано в плъзгача.

Изображение на разположението

Изберете как искате да показвате избраното изображение в слайдовете

Цвят на фона

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

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

Качете желаното изображение или въведете URL адреса на изображението, което искате да използвате като фон за плъзгача.

Позиция на фоновото изображение

Изберете CSS позиционирането на фоновото изображение за всеки слайд.

Размер на фоновото изображение

Изберете размера на CSS фоновото изображение, използван за всеки слайд.

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

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

Опции за дизайн на плъзгащия модул

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

Премахнете вътрешната сянка

Това ще премахне вътрешната сянка на CSS, приложена към всички слайдове по подразбиране.

Използвайте фоновото наслагване

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

Цвят за запълване на фона

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

Използвайте наслагване на текст

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

Радиус на границата на текстовото наслагване

Радиусът на границата влияе върху заоблеността на ъглите на областта за наслагване на текст. По подразбиране ъглите имат леко заоблен ръб от 3 пиксела. Можете да намалите тази стойност до 0, за да създадете правоъгълна кутия или да увеличите стойността, за да направите ъглите още по-заоблени.

Използвайте ефекта Паралакс

Активирането на тази опция ще даде на вашите фонови изображения фиксирана позиция, докато превъртате.

Метод Паралакс

Тук можете да зададете метода, използван за ефекта на паралакс - CSS или True Parallax.

Персонализирани цветни стрелки

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

Dot Nav Персонализиран цвят

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

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

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

Шрифт на заглавката

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

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

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

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

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

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

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

Височина на заглавния ред

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

Шрифт на тялото

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

Размер на шрифта

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

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

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

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

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

Височина на линията на тялото

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

Мета полиция

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

Размер на металния шрифт

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

Мета текст цвят

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

Разстояние между метаданните

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

Височина на металната линия

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

Горна подплата

Този параметър контролира вътрешното пространство между горната част на модула и текстовото съдържание в модула. Ако искате да увеличите или намалите това пространство, въведете желаната от вас стойност тук. Например, за да намалите пространството и общия размер на курсора, можете да въведете стойност от 100px. Можете също така да въведете процентна стойност, например 10%, за да направите височината по-динамична.

Подложка отдолу

Този параметър контролира вътрешното пространство между дъното на модула и текстовото съдържание в модула. Ако искате да увеличите или намалите това пространство, въведете желаната от вас стойност тук. Например, за да намалите пространството и общия размер на курсора, можете да въведете стойност от 100px. Можете също така да въведете процентна стойност, например 10%, за да направите височината по-динамична.

Използвайте персонализирани стилове за бутона

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

Размер на текста на бутоните

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

Цвят на текста на бутоните

По подразбиране бутоните приемат цвета на акцента на вашата тема, както е дефиниран в Персонализатора на темите. Тази опция ви позволява да зададете персонализиран цвят на текста на бутона на този модул. Изберете вашия персонализиран цвят с помощта на инструмента за избор на цвят, за да промените цвета на бутона.

Цвят на фона на бутоните

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

Ширина на границата на бутоните

Всички Divi бутони имат граница 2px по подразбиране. Тази граница може да бъде увеличена или намалена с помощта на тази настройка. Границите могат да бъдат премахнати чрез въвеждане на стойност 0.

Бутон граница цвят

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

Радиус на рамката на бутоните

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

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

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

Бутон на полицията

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

Добавете икона на бутон

Деактивирана, тази настройка ще премахне иконите от вашия бутон. По подразбиране всички бутони Divi показват икона със стрелка върху курсора на мишката.

Икона на бутона

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

Бутон за цветна икона

Регулирането на тази настройка ще промени цвета на иконата, която се появява на вашия бутон. По подразбиране цветът на иконата е същият като цвета на текста на вашия бутон, но тази настройка ви позволява да регулирате цвета независимо.

Бутон за поставяне на икона

Можете да изберете да покажете иконата на вашия бутон отляво или отдясно на бутона.

Показване на иконата само при задържане на курсора на мишката върху бутона

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

Бутон Цвят на текста на курсора на мишката

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

Цвят на фона на бутона на мишката

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

Бутон за преместване на цветовете

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

Задръжте бутон за мигащ радиус

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

Бутон за отместване на бележките

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

Разширени опции на Post Slider

В раздела за напреднали ще намерите опции, които по-опитните уеб дизайнери биха могли да намерят за полезни, като персонализирани 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, разделени с точка и запетая.

Автоматична анимация

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

Автоматична скорост на анимация (в ms)

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

Продължете Автоматичен плъзгач на Подвиж

Включването на тази функция ще позволи автоматичното плъзгане да продължи върху движението на мишката.

Скриване на съдържание на мобилни устройства

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

Скриване на CTA на мобилни устройства

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

Преглед на изображение / видео на мобилно устройство

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

деактивирате

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

[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