Построение таблицы данных в WordPress обычно означает борьбу с HTML или вставку короткого кода, который вы не можете стилизовать. Бесплатно Виджет динамической таблицы в Мастер-аддоны для Elementor позволяет построить один визуально: добавить столбцы заголовка, заполнить строки и стилизовать каждую часть с панели Элементор. нет разметки таблицы, нет блокировки плагина.
Он подходит для всего, что принадлежит сетке, например, каталогов сотрудников, спецификаций, расписаний или прайс-листов. Вы можете объединять ячейки, добавлять значки в заголовки, полоскировать строки и включать адаптивный режим для телефонов. Ниже приведен пробег по каждой настройке, от ячеек заголовка до вкладок стиля.
Что делает виджет "Динамическая таблица" #
Виджет строит стандартную таблицу HTML из двух ретрансляторов: один для строки заголовка и один для клеток тела. каждая ячейка - это свой собственный элемент, поэтому вы управляете текстом, выравниванием и даже диапазонами столбцов или строк, не записывая никакого кода.
Он имеет три вкладки: Содержимое для заголовка, тела и настроек, Стиль для цветов и интервалов и Расширенный для обычных параметров Элементора. В результате получается чистая, отзывчивая таблица, соответствующая вашей теме.
Прежде чем начать #
- вордпресс с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Данные, которые вы хотите показать, набросаны в виде столбцов и строк.
Как добавить виджет "Динамическая таблица" #
В редакторе Elementor откройте Элементы панель и поиск Динамическая таблица, или прокрутить в раздел Главные дополнения. перетащите его на свою страницу. он загружается с таблицей образцов, чтобы вы редактировали из рабочего макета вместо пустой сетки.
Настройка заголовка таблицы #
Открыть Содержание вкладка. Столовая Голова раздел содержит строку заголовка. The Столовая Голова переключить показывает или скрывает заголовок, и Ячейка заголовка таблицы ретранслятор содержит один элемент на столбец.
Каждая ячейка заголовка имеет свои собственные подвкладки Содержимое и Параметры. В Содержание ты поставил Имя столбца и может добавить Икона или ан Изображение рядом с ним (Тип: Нет, Значок или Изображение).Использовать Добавить элемент чтобы добавить столбцы, значок копирования должен дублировать один, а X - удалить его.
Заполните корпус стола #
выше Тело стола раздел содержит ячейки. Каждый элемент представляет собой одну ячейку и a Новый ряд? переключить метки, где начинается новая строка, чтобы добавить ячейки по порядку и пометить начало каждой строки.
Каждая ячейка тела также имеет подвкладки "Содержимое" и "Параметры":
- Текст тела: содержимое ячейки, которое также принимает динамические теги. каждый тег заполняет одну ячейку.
- Пролет колонны и пролет ряда: объедините ячейку в столбцы или строки.
- Пользовательская ширина: установите фиксированную ширину для этого столбца.
- Выравнивание: слева, в центре, справа или обосновывайте внутри клетки.
- Украшение: подчеркните, перечеркните или перечеркните текст ячейки.
Чтобы вырастить таблицу, нажмите Добавить элементвведите текст ячейки и включите Новый ряд? на первой ячейке каждой новой строки Здесь добавляется пятая строка сотрудника.
Сделайте стол отзывчивым #
выше Настройки раздел имеет Адаптивный стол? переключить. с включенным, стол перекачивается на маленьких экранах вместо переполнения, поэтому каждая строка стекает в читаемую карту на устройствах шириной до 768px, с именем столбца, показанным в виде метки. это настройка, которую люди забывают, и именно поэтому таблица выглядит разбитой на мобильном телефоне.
Стиль стола #
выше Стиль вкладка разделена на Глобальный стиль, Стиль заголовка таблицыи Тело стола, плюс Шаблоны (опция Pro). The Глобальный стиль раздел устанавливает общий вид стола.
- Полосатый стол: включите полоску зебры и выберите цвет полосатого ряда.
- Цвет фона: основной цвет за клетками.
- Внутренняя подкладка для клеток: пространство внутри каждой ячейки.
- Тип границы и радиус границы: линии между ячейками и закругленными углами.
Стиль заголовка и кузова #
выше Стиль заголовка таблицы раздел устанавливает фон заголовка, цвет текста, типографику и заполнение так, чтобы верхний ряд стоял отдельно. The Тело стола раздел делает то же самое для ячеек данных.
- Цвет фона и цвет текста: цвета клеток тела.
- Размер значка, цвет значка и подкладка значка: стайлинг для любых значков ячеек.
- Выравнивание и типографика: как текст тела сидит и выглядит.
Результат на странице #
Публикуйте или просматривайте, и таблица отображается с установленными столбцами, строками и полосками, что соответствует требованиям мобильных устройств, если вы это включите.
Обычные случаи использования #
- Каталоги сотрудников или команд с именами, ролями и контактными данными.
- Спецификационные листы сравнение характеристик и ценностей продукта.
- Расписания и расписания для занятий, мероприятий или рабочего времени.
- Прайс-листы это не требует полной суммы таблица ценообразования.
- Сводки данных вытащили из электронной таблицы в стилизованную сетку.
Советы по работе с виджетом Dynamic Table #
- Сначала спланируйте столбцы. Установите каждую ячейку заголовка перед заполнением тела так, чтобы строки совпадали.
- Марк Нью Роу только в первой ячейке. Пометите начало каждой строки, а не каждой ячейки, или макет сломается.
- Включите адаптивный стол для телефонов. Широкие таблицы переполнены на мобильном телефоне, если только это не включено.
- Используйте полосы для длинных столов. Строки зебр значительно упрощают сканирование высокой таблицы данных.
- Сохраняйте текст ячейки коротким. Длинные струны растягивают столбец, поэтому используйте пользовательскую ширину, чтобы сохранить ровность.
Часто задаваемые вопросы #
Что такое виджет Dynamic Table в Master Addons?
Это виджет Elementor, который визуально строит таблицу данных HTML. вы добавляете столбцы заголовков и клетки тела через ретрансляторы, затем стилизуете цвета, заполнение, границы и полосы с панели. HTML или шорткод не задействованы, и таблица может быть сделана отзывчивой.
Могу ли я объединить ячейки в Динамической таблице?
Да. каждая ячейка тела имеет параметры "Пробел столбцов" и "Пробел строк" в своей подтаблице "Параметры". Установите интервал для объединения этой ячейки в несколько столбцов или строк, что полезно для сгруппированных заголовков или сводных строк внутри таблицы.
Адаптивна ли динамическая таблица на мобильных устройствах?
Да. в разделе "Настройки" есть переключатель "Отзывчивая таблица". При включении таблица переключается на небольших экранах, поэтому каждая строка стекается в читаемый блок вместо переполнения страницы, что позволяет использовать широкие таблицы на телефонах.
Можно добавить в таблицу полосатые строки?
Да. на вкладке Стиль в разделе Глобальный стиль есть переключатель Полосатый стол и Полосатый цвет фона Включите его, чтобы добавить полоску зебры, которая чередует цвет строки и делает длинные таблицы намного легче для чтения.
Могу ли я добавить значки в заголовки таблиц?
Да. каждая ячейка заголовка имеет опцию Тип с Нет, Значок или Изображение. Выберите Значок, чтобы выбрать один из библиотеки значков, или Изображение, чтобы загрузить изображение. значок отображается рядом с именем столбца, что помогает пометить столбцы, такие как электронная почта, телефон или местоположение с первого взгляда.
Могу ли я сортировать, искать или импортировать CSV в динамическую таблицу?
Нет. виджет не имеет сортировки, поиска, нумерации страниц или импорта CSV. Для них используйте плагин таблицы данных, такой как TablePress, и поместите его короткий код на страницу.
Завершая #
выше Виджет динамической таблицы превращает строки и столбцы данных в чистую таблицу в стиле, не касаясь HTML. Установите заголовки, добавьте клетки тела, отметьте каждую новую строку, а затем создайте стиль цветов, полос и границ, чтобы они соответствовали вашей странице. соответствующие макеты данных см Виджет таблицы сравнения (Про) и Виджет таблицы цен, просмотр всего Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
