Divi ви позволява да поставяте плъзгачи в секции с пълна ширина, което прави вашите плъзгачи да обхващат цялата ширина на браузъра. Плъзгачите Divi (Плъзгачи) поддържат паралаксни фонове, както и видео фонове!

Как да добавите модул Diapo с пълна ширина от Divi

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

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

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

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

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

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

Използвайки Visual Builder, добавете раздел Fullwidth в горната част на вашата уеб страница. След това поставете модула Плъзгач с пълна ширина в новия си раздел. В раздела Съдържание на настройките на слайда с пълна ширина щракнете + Добавяне на нов елемент за да създадете първия си слайд.

В настройките на слайда на първия си слайд актуализирайте следните опции:

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

En-Tete : [въведете заглавието на слайда]
Бутон текст : [въведете текста на бутона]
Съдържание : [въведете текстовото съдържание на слайда]
Бутонен URL адрес : [въведете целевия URL адрес на бутона Slide]
Фоново изображение : [въведете изображението, което ще служи като фон за слайда]

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

Използвайте фоновото наслагване : ДА
Цвят на фона : rgba (0,0,0,0.2) това наслагване леко затъмнява фоновото изображение, за да направи текста по-четлив.

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

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

Това е всичко. За този пример включвам само два слайда, но резултатът е ефективен пълноширочен плъзгач с множество подканващи фрази, които ангажират потребителя да кликне върху бутона за повече информация. Тъй като това е основният ви призив за действие за вашия уебсайт, предлагам да проведете A/B тестове на вашия слайдер с пълна ширина, използвайки Divi Leads, и да видите кой от тях конвертира най-добре.

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

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

стрели

Изберете дали искате да показвате лявата и дясната навигационна стрелка или не.

контроли

Изберете дали да се показват или не бутоните за кръгове / слайд-индикатори в долната част на курсора.

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

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

Опции за дизайн на слайд модул

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

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

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

Паралакс ефект

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

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

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

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

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

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

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

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

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

Задръжте цвета на текста на бутона

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

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

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

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

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

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

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

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

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

Разширени опции слайд модул с пълна ширина

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

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

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

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

видимост

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

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

Заглавие

Задайте текста на заглавието на курсора си тук.

Бутон текст

Ако искате да покажете бутон под съдържанието на слайда, въведете текста на бутона тук. Оставете това поле празно, ако не искате да се показва бутон.

Съдържание

Тук въведете основното съдържание на курсора. Имайте предвид, че количеството текст, което въведете тук, ще определи височината на вашите слайдове.

Бутонен URL адрес

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

Плъзнете изображението

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

Имайте предвид, че височината на слайд с изображение на слайд може да се определи чрез по-висок слайд в плъзгача. Уверете се, че изображението на слайда е достатъчно голямо, за да се побере, ако искате изображението да е подравнено в долната част. От съображения за четливост изображенията на слайдовете се показват само в плъзгачи за ширина на колона, колона или 1 колона. По същия начин слайд изображенията няма да се показват на ширина на браузъра по-малка от 768 пиксела. Ширините на слайдовете са определени по-долу. Препоръчваме вашите слайд изображения да са поне толкова широки.

Видео слайд

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

Пауза на видеоклипа

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

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

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

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

Ширината на курсора ви се определя от ширината на браузъра. Въз основа на стандартните размери на екрана, препоръчваме вашите изображения да бъдат поне 1280px на 768px.

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

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

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

По подразбиране фоновите изображения ще бъдат пропорционално увеличени, за да се гарантира, че те запълват целия слайд. Можете обаче да използвате тази опция, за да промените поведението по подразбиране. "Покритие" е поведението по подразбиране, което мащабира изображението, за да покрие цялата област на слайда. “Fit” също ще принуди изображението да покрие цялата област, но ще принуди височината и ширината на изображението да съответстват на височината и ширината на курсора. Това може да доведе до изкривено изображение, но ще предотврати изрязването на изображението. „Действителен размер“ не мащабира изображението и го показва в естествения му размер.

Цвят на фона

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

MP4 фоново видео

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

WEBM фоново видео

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

Ширина на фоновото видео

За да има правилен размер на видеоклиповете, трябва да въведете точната ширина (в пиксели) на вашето видео тук.

Фон за височина на видеото

За да има правилен размер на видеоклиповете, трябва да въведете точната височина (в пиксели) на вашето видео тук.

Опции за дизайн на елементи с плъзгащи елементи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ако фонът на слайда ви е тъмен, цветът на текста трябва да бъде зададен на „Light“. Visa versa, ако фонът на слайда е светъл, цветът на текста трябва да бъде зададен на "Dark".

Функционален шрифт

Можете да промените шрифта на заглавния си текст, като изберете желания шрифт от падащото меню. 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 бутони имат граница 2px по подразбиране. Тази граница може да бъде увеличена или намалена с помощта на тази настройка. Границите могат да бъдат премахнати чрез въвеждане на стойност 0.

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

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

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

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

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

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

Бутон на шрифта

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

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

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

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

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

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

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

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

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

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

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

Задръжте цвета на текста на бутона

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

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

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

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

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

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

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

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

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

Разширени опции на курсора Пълна ширина

Персонализиран 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