Кръглият брояч ви позволява да покажете една статистика по естетически приятен и завладяващ начин. Докато превъртате надолу, числото се отброява надолу и кръговата диаграма постепенно се запълва, за да съответства на процентната стойност. Опитайте да комбинирате няколко модула за кръгови броячи на една страница, за да дадете на посетителите си забавен начин да научат за вашия бизнес или лични умения.
Как да добавите модул с кръгов метър към страницата си
Преди да можете да добавите модул за брояч на кръгове към вашата страница, първо трябва да получите достъп до Divi Builder. Веднъж Тема на Divi инсталиран на уебсайта ви, ще забележите бутон Използвайте Divi Builder над издателя всеки път, когато създавате нова страница.
Като кликнете върху този бутон, ще можете да активирате Divi Builder, който ще ви даде достъп до всички модули Divi Builder. След това кликнете върху бутона Използвайте Visual Builder за стартиране на генератора във визуален режим.
Можете също да кликнете върху бутона Използвайте Visual Builder когато разглеждате уебсайта си, ако сте влезли в таблото за управление на WordPress.
След като влезете в Visual Builder, можете да щракнете върху сивия бутон плюс, за да добавите нов модул към вашата страница. Нови модули могат да се добавят само в редове. Ако започвате нова страница, не забравяйте първо да добавите ред към страницата си.
Намерете модула на кръговия метър в списъка с модули и кликнете върху него, за да го добавите към вашата страница. В списъка с модули може да се търси, което означава, че можете също да въведете думата "брояч на кръгове" и след това щракнете върху enter, за да търсите автоматично и да добавите модула на брояча на кръгове!
След като модулът бъде добавен, ще бъдете посрещнати със списъка с опции на модула. Тези опции са разделени на три основни групи: Съдържание , Концепция et напреднал .
Използвайте казус за показване на целите на проекта в казус
Един от най-добрите начини да използвате модула за броячи на кръгове е да илюстрирате статистика за казуси или елементи от портфолио.
Просто идентифицирайте всеки кръгов метър с конкретна функция или цел на проекта, така че потребителят да знае кои услуги са включени в проекта. В този пример ще използвам модула „брояч на кръгове“, за да покажа три цели на проекта.
Както можете да видите на изображението по-долу, горната част на страницата включва трите цели на проекта с помощта на модула Bar Counter, а долната част на страницата включва резултатите от казуса с помощта на модула Counter Number .
Нека да започнем.
Използвайте визуалния конструктор, за да добавите стандартен раздел с оформление с пълна ширина (1 колона). След това добавете модул брояч на кръгове към реда.
Актуализирайте настройките на брояча на кръга, както следва:
Опции за съдържанието
Заглавие: Анимация
Номер: 80
% Регистрация: Да
Цвят на фона на бара: # e07a5e
Опции за дизайн
Цвят на кръга: #e07a5e
Цвят на текста: Тъмно
Шрифт на заглавието: По подразбиране
Размер на шрифта: 26px
Заглавие Цвят на текста: #405c60
Номер на шрифта: По подразбиране
Размер на шрифта: 46px
Цвят на текста на номера: #405c60
Запазване на настройките
Сега дублирайте модула на брояча на кръг два пъти и плъзнете всяко копие във втората и третата колона на вашия ред.
Тъй като вашите дизайнерски елементи са прехвърлени на дублиращи се модули, трябва само да актуализирате заглавието и номера на кръговия метър.
Това е!
Посетете страницата.
Опции за кръгово съдържание на брояча
В раздела Съдържание ще намерите всички елементи на съдържанието на модула, като текст, изображения и икони. Всичко, което контролира какво се появява във вашия модул винаги ще бъде в този раздел.
Заглавие
Въведете заглавие за брояча на кръговете. Това обикновено е дума, която представлява статистиката, която разглеждате. Той ще се покаже под номера в кръговата диаграма.
име
Задайте число за кръговия брояч. Избирайки число по-малко от 100, кръговата графика ще се запълни до процент, равен на въведеното от вас число. Например, въвеждането на числото 20 ще запълни кръга 20% с вашия цвят на акцента.
Знак процент
Тук можете да изберете дали знакът за процент трябва да се добави след определеното по-горе число.
Цвят на фона на лентата
Това ще промени цвета на запълване на лентата. Количеството цвят на запълване се контролира от избраното по-горе „число“. Ако изберете числото 50 и син цвят, кръгът ви ще запълни 50% със син цвят.
Административен етикет
Това ще промени етикета на модула в генератора за лесно идентифициране. Когато използвате изгледа 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" в зависимост от вашия размер, за да промените типа му.
Разширени опции за кръгов брояч
В раздела Разширени ще намерите опции, които по-опитните уеб дизайнери могат да намерят за полезни, като персонализирани 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 правила, разделени с точка и запетая.
видимост
Тази опция ви позволява да контролирате устройствата, на които се показва вашият модул. Можете да изберете да деактивирате модула си поотделно на таблети, смартфони или настолни компютри. Това е полезно, ако искате да използвате различни модове на различни устройства или ако искате да опростите мобилния дизайн, като премахнете определени елементи от страницата.
Това е всичко за този урок.
