Учебник Divi: как использовать числовой счетчик

Модуль счетчика номеров на WordPress тема Divi — отличный способ отображать числа в веселой и увлекательной форме. Этот модуль обычно используется для отображения статистика о вас или вашем бизнесе. Например, отображение количества ваших клиентов или подписчиков на Facebook — отличный способ продемонстрировать социальное доказательство.

Как добавить модуль Номер счетчика Divi

Прежде чем вы сможете добавить модуль счетчика на свою страницу, вы должны сначала перейти в Divi Builder. Однажды Диви тема установлен на вашем сайте, вы увидите кнопку Использовать Divi Builder над редактором сообщений всякий раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите на кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать кнопку Использовать Visual Builder когда вы просматриваете свой веб-сайт на переднем плане, если вы подключены к своей панели управления WordPress.

После входа в Visual Builder вы можете щелкнуть серую кнопку «плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы начинаете новую страницу, не забудьте сначала добавить строку на свою страницу.

Найдите модуль счетчика номеров в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «счетчик номеров» и затем нажать «Ввод», чтобы автоматически найти и добавить модуль счетчика номеров! После добавления модуля вы увидите список опций модуля. Эти параметры разделены на три основные группы: Содержание , Дизайн et Передовой .

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

Отличный способ использовать модуль счетчика чисел — проиллюстрировать статистика для тематических исследований. Просто пометьте каждый счетчик номером, чтобы пользователь мог легко увидеть успех проекта. В этом примере я использую модуль цифрового счетчика для отображения четырех результатов проекта.

Как видите, верхняя часть страницы включает три цели проекта, использующего модуль " Барная стойка А внизу страницы представлены результаты тематического исследования с использованием модулей цифровых счетчиков.

Раздел страницы, который показывает результаты тематического исследования с использованием цифровых модулей, требует использования специализированного раздела. Используя Visual Builder, добавьте на страницу специальный раздел и выберите следующий макет:

Выберите макет в 1 столбец для правой части раздела и введите заголовок и текст, необходимые для результатов тематического исследования.

Вставьте макет столбцов 2 непосредственно под макет столбца 1 в правой части раздела.

Теперь добавьте свой первый модуль счетчика чисел в левый столбец.

Обновите параметры счетчиков чисел следующим образом:

Параметры содержимого

Название: Новые посетители
Номер: 54210
Знак: OFF

Варианты дизайна

Цвет текста: Темный
Шрифт названия: default
Размер шрифта заголовка: 20px
Цвет текста заголовка: # 405c60
Высота строки заголовка: 1em
Количество символов: по умолчанию, полужирный
Количество символов: 60px
Номер Цвет текста: # e07a5e
Высота строки номера: 72px

Сохранить настройки

Дублируйте модуль «Счетчики номеров» и перетащите его в соседний правый столбец и обновите параметры «Название» и «Число».

Дублируйте строку, содержащую два модуля счетчиков чисел, чтобы ниже отображались еще два счетчика чисел.

Затем обновите для них параметры «Заголовок» и «Номер». Теперь у вас есть все четыре полных счетчика.

Не забудьте добавить изображение 667 x 320 в левую колонку / сторону специализированного раздела.

Готово! Комбинация счетчиков номеров и барных стоек на этой странице тематического исследования действительно делает контент интересным.

Опции содержимого цифрового счетчика

На вкладке «Содержимое» вы найдете все элементы содержимого модуля, такие как текст, изображения и значки. Все, что контролирует какие появляется в вашем модуле, всегда будет найден в этой вкладке.

Название

Введите название счетчика. Это будет отображаться под номером более мелким шрифтом.

Имя

Это число, которое будет считать счетчик. Когда вы прокручиваете страницу вниз и дойдете до счетчика, число будет быстро отсчитываться от 0 до числа, которое вы здесь установили. Здесь можно размещать только числовые значения.

Знак процента

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

Цвет фона

Определите собственный цвет фона для вашего модуля или оставьте поле пустым, чтобы использовать цвет по умолчанию.

Фоновое изображение

Если установлено, это изображение будет использоваться в качестве фона для этого модуля. Чтобы удалить фоновое изображение, просто удалите URL-адрес из поля настроек. Фоновые изображения будут отображаться поверх цветов фона, что означает, что цвет фона не будет виден при применении фонового изображения.

Значок администратора

Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление 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» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.

Использовать границу

Включение этой опции поместит рамку вокруг вашего модуля. Эту границу можно настроить с помощью следующих условных параметров.

Цвет границы

Этот параметр влияет на цвет вашей границы. Выберите собственный цвет в палитре цветов, чтобы применить его к границе.

Ширина границы

По умолчанию ширина границ составляет 1 пиксель. Вы можете увеличить это значение, перетащив ползунок диапазона или введя произвольное значение в поле ввода справа от ползунка. Поддерживаются пользовательские единицы измерения, что означает, что вы можете изменить единицу измерения по умолчанию с «px» на что-то другое, например em, vh, vw и т. Д.

Стиль границ

Границы поддерживают восемь различных стилей: сплошной, точечный, точечный, двойной, бороздка, гребень, наложение и начало. Выберите желаемый стиль из раскрывающегося меню, чтобы применить его к границе.

Таможенная обивка

Заполнение - это пространство, добавленное внутри вашего модуля, между краем модуля и его внутренними элементами. Вы можете добавить собственные значения заполнения к любой из четырех сторон модуля. Чтобы удалить настраиваемое поле, удалите добавленное значение из поля ввода. По умолчанию эти значения измеряются в пикселях, но вы можете ввести собственные единицы измерения в поля ввода.

Расширенные возможности счетчика номеров

На вкладке «Дополнительно» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю пользовательские классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

CSS-идентификатор

Введите необязательный идентификатор CSS, который будет использоваться для этого модуля. Идентификатор можно использовать для создания собственного стиля 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 =" extended "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"] СКАЧАТЬ ТЕМУ РАЗДЕЛА [/ vcex_button] [/ width_column] [»vc_column] [» vc_column »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" extended "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]