Как создать таблицу Elementor в WordPress
Опубликовано: 2022-06-24Таблицы являются ключевым компонентом большинства веб-сайтов. Вы можете использовать их для обмена любой информацией, от цен до списков функций и ссылок. WordPress позволяет вам настроить базовые таблицы для вашего веб-сайта, но вам, возможно, нужны дополнительные параметры настройки.
С Elementor вы получаете доступ к нескольким табличным виджетам. Кроме того, существует множество плагинов для таблиц Elementor, которые добавляют новые виджеты в популярный конструктор страниц.
В этой статье мы поговорим о том, как работают таблицы WordPress и чем они отличаются от виджетов Elementor. Затем мы покажем вам, как создавать таблицы Elementor вручную, и познакомим вас с некоторыми плагинами, которые добавляют новые виджеты таблиц в редактор. Давайте приступим!
Когда использовать таблицы WordPress
Как только вы начнете их искать, вы заметите, что таблицы повсюду в Интернете. Это потому, что они являются одними из самых универсальных элементов, которые вы можете использовать на веб-сайте.
Возьмем, к примеру, таблицы цен. Трудно найти веб-сайт службы или подписки, который не использует таблицы для сравнения вариантов:

Таблицы позволяют представить большие объемы информации в удобной для восприятия форме. Более того, таблицы упрощают пользователям сравнение нескольких наборов данных друг с другом:

Помимо помощи в обмене информацией, таблицы также могут помочь сломать монотонность длинных абзацев в записи блога или на странице. Как правило, мы рекомендуем вам избегать длинных стен текста, так как в них может быть сложно ориентироваться.
Редактор блоков дает вам возможность легко добавлять таблицы на ваш сайт. Блок Таблица позволяет вам установить необходимое количество строк и столбцов:

Хотя добавлять таблицы в WordPress легко, вы несколько ограничены в возможностях настройки. Вы можете изменить цвет фона, настроить стили кнопок и изменить размер шрифта, но это почти все. Если вы хотите создавать более стильные и сложные таблицы, вам нужно использовать конструктор страниц, такой как Elementor (или даже Divi).
Что может таблица Elementor
Если вы хотите выйти за рамки базовых таблиц WordPress, Elementor предоставляет вам доступ к настраиваемому виджету « Таблица цен ». Это позволяет вам редактировать заголовки таблиц, устанавливать теги заголовков, добавлять списки функций, настраивать призывы к действию (CTA) и многое другое:

Помните, что с Elementor вы можете создать макет любого типа для любой страницы или публикации. Это означает, что вы можете настроить дизайн с несколькими столбцами, чтобы у вас могло быть несколько виджетов « Таблица цен » рядом:

Elementor также поставляется с виджетом Table of Contents . Это значительно упрощает навигацию по длинному контенту для ваших читателей.
Как создать таблицу Elementor (вручную)
Создать таблицу цен с помощью Elementor очень просто. Для начала откройте редактор Elementor. Отсюда вы можете начать с пустой страницы или импортировать шаблон из библиотеки Elementor:

Когда вы будете готовы добавить элемент, вам нужно выбрать количество столбцов, которые вы хотите иметь в таблице. Нажмите на значок плюса Elementor в нижней части редактора и выберите структуру столбцов, которую вы хотите использовать для ценового раздела:

Имейте в виду, что если вы используете несколько столбцов, вам нужно добавить отдельный виджет « Таблица цен » в каждый из них. Хотя каждая таблица будет уникальным элементом, пользователи будут видеть их рядом (или друг под другом на мобильных устройствах) как часть одного раздела:

Мы рекомендуем добавить один модуль « Таблица цен » и сначала настроить его стиль. Затем вы можете продублировать или скопировать этот элемент в оставшиеся столбцы и добавить уникальный текст в каждый из них.
Чтобы настроить таблицу, выберите элемент и перейдите на вкладку « Стиль » в настройках виджета. Elementor предоставляет вам множество вариантов стилей. К ним относятся выбор цвета, настройки типографики и уникальные конфигурации для каждого раздела таблицы:

Когда вы будете довольны стилем таблицы цен, щелкните элемент правой кнопкой мыши и выберите параметр « Дублировать ». Копия таблицы появится под исходным элементом, и вы можете перетащить ее в один из пустых столбцов:

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

Добавить пользовательский CSS через Elementor намного проще, чем редактировать код WordPress вручную. Точно так же для редактирования CSS в WordPress требуется доступ к файлам темы и оптимизация кода для максимальной производительности. С Elementor вам просто нужно добавить код CSS в соответствующее поле для каждого модуля.
Если добавление CSS вручную звучит пугающе, не беспокойтесь. Изучение CSS не требует от вас быть веб-разработчиком. Тем не менее, это ценный навык, который поможет вам настроить свои веб-сайты WordPress (и, возможно, даже найти карьеру в веб-разработке).
После того, как все ваши таблицы настроены, пришло время отредактировать их текст и добавить столько функций, сколько вам нужно для каждой записи. Вы можете сделать это, выбрав таблицу и перейдя на вкладку « Содержимое » в настройках виджета:

Редактировать содержимое ваших ценовых таблиц очень просто. Вы можете щелкнуть любой элемент в виджете, чтобы начать его редактирование. Как только вы будете довольны результатами, ваши таблицы цен будут готовы к работе.
Лучшие плагины для таблиц Elementor (12 вариантов)
Хотя Elementor содержит множество инструментов, помогающих создавать таблицы, вы всегда можете добавить в список дополнительные виджеты. В этом разделе мы рассмотрим 12 плагинов Elementor, которые вы можете использовать для добавления новых типов таблиц в свои сообщения и страницы. Несмотря на то, что многие из этих дополнений созданы для Elementor, вы можете установить их как обычные плагины.
Как всегда, мы рекомендуем только лучшие в своем классе плагины WordPress, которые обеспечивают отличную производительность и регулярно обновляются. Использование хорошо оптимизированных плагинов поможет вам масштабировать ваш сайт без проблем с производительностью.
1. Дополнения ElementsKit для Elementor

ElementsKit добавляет в Elementor более 85 виджетов. У вас есть варианты для базовых таблиц, ценовых таблиц, поддержка встраивания элементов TablePress и многое другое.
Профессиональная версия ElementsKit также включает виджет расширенных таблиц. Это позволяет добавлять в таблицы функции поиска и фильтрации. Кроме того, вы можете включить нумерацию страниц, чтобы пользователи могли перемещаться по записям без огромных таблиц на вашем веб-сайте.
Ключевая особенность:
- Три типа табличных виджетов
- Поддержка фильтрации таблиц, поиска и разбивки на страницы.
- Интеграция с TablePress для встраивания таблиц
Цена: лицензии ElementsKit начинаются с 39 долларов в год.
2. Конструктор таблиц WP

Если вы являетесь поклонником редакторов с перетаскиванием (что и должно быть, если вы используете Elementor), вам понравится использовать WP Table Builder. Этот плагин позволяет создавать таблицы с использованием предварительно настроенных элементов, таких как кнопки, разделы обзора, рейтинги продуктов и многое другое.
Помимо расширенных элементов, вы получаете доступ к базовым модулям, таким как текст и изображения. Плагин также поставляется с шаблонами таблиц, которые сделают вашу работу еще проще.
Вы можете добавить таблицы WP Table Builder на свой сайт с помощью редактора блоков. Плагин также интегрируется с Elementor, что позволяет легко размещать таблицы в любом месте вашего сайта.
Ключевая особенность:
- Используйте конструктор таблиц с перетаскиванием
- Получите доступ к предварительно созданным элементам, таким как кнопки, разделы обзора и рейтинги продуктов.
- Настройте стиль каждого элемента в ваших таблицах
- Используйте готовые шаблоны страниц
Цена: лицензии WP Table Builder начинаются с 39 долларов в год.
3. Настольный пресс

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

С помощью TablePress вы можете создавать таблицы с функцией поиска. Пользователи могут выбирать, сколько записей отображать и перемещаться со страницы на страницу, если вы показываете массивные наборы данных.
Встраивание таблиц TablePress в Elementor очень просто. Плагин создает уникальные шорткоды для каждого стола. Виджет Elementor Shortcode поможет вам добавить эти коды в любом месте вашего сайта.
Ключевая особенность:
- Импорт и экспорт наборов данных в форматах Excel, CSV, JSON и HTML.
- Добавьте доступные для поиска таблицы в WordPress
- Включить разбиение на страницы для таблиц
Цена: TablePress — бесплатный плагин, но вы можете найти для него премиум-расширения.
4. Основные дополнения для Elementor

Essential Addons for Elementor добавляет более 80 новых виджетов в конструктор страниц. У вас есть варианты для таблиц цен, таблиц данных, оглавлений и многого другого.
Essential Addons for Elementor поставляется в двух версиях. Бесплатный плагин добавляет улучшенную версию виджета таблицы цен, с которым поставляется Elementor. Если вам нужен доступ к таблицам данных (включая фильтрацию, поиск и несколько стилей), вам нужно будет заплатить за премиум-лицензию.
Ключевая особенность:
- Добавьте виджеты с ценами, данными и таблицами содержимого.
- Включить поиск и фильтрацию в таблицах
Цена: есть бесплатная версия Essential Addons для Elementor, а премиум-лицензия начинается от 39,97 долларов в год.
5. PowerPack для Elementor

PowerPack для Elementor добавляет в конструктор страниц более 70 виджетов. Плагин также включает в себя большое количество новых шаблонов, которые можно использовать для более быстрого создания веб-сайтов.
Что касается таблиц, PowerPack позволяет вам создавать таблицы данных с возможностью сортировки и поиска. Вы можете импортировать данные в таблицы с помощью файлов CSV. Плагин также включает несколько вариантов шаблонов таблиц.
Помимо таблиц данных, PowerPack предлагает виджеты с информацией и таблицами цен. Информационные таблицы идеально подходят, если вы хотите предоставить посетителям информацию о предлагаемых вами услугах.
Ключевая особенность:
- Создавайте сортируемые и доступные для поиска таблицы данных
- Импорт таблиц данных в формате CSV
- Добавьте виджеты с ценами и информационными таблицами
Цена: лицензии PowerPack начинаются с 44 долларов в год.
6. Эксклюзивные дополнения для Elementor

Эксклюзивные дополнения для Elementor доступны как в бесплатной, так и в премиальной версиях. Бесплатный плагин добавляет в Elementor 39 новых виджетов, тогда как премиум-лицензия даст вам более 69 новых элементов.
Что касается таблиц, в бесплатную версию добавлен новый модуль таблицы цен. В премиум-версии вы получаете доступ к таблицам сравнения и данных. Таблицы сравнения работают так же, как элементы ценообразования, но вы можете использовать новые макеты и стили.
Ключевая особенность:
- Добавить новый модуль таблицы цен
- Получите доступ к таблицам сравнения и данных
- Доступ к нескольким макетам для табличных виджетов
Цена: есть бесплатная версия Exclusive Addons для Elementor. Премиум-лицензии начинаются с 29 долларов в год.
7. ДжетЭлементс

JetElements добавляет в Elementor 45 новых виджетов. Большинство из них ориентированы на сайты электронной коммерции и подписки. Тем не менее, JetElements также включает в свой список несколько интересных табличных виджетов.
Среди этих виджетов у вас есть ценовые и адаптивные таблицы. По сравнению с базовыми таблицами цен в Elementor, версия JetElements предоставляет множество новых возможностей настройки. Например, вы можете играть с множеством визуальных эффектов, таких как параллакс и микроанимация для элементов таблицы.
Ключевая особенность:
- Добавьте цены и адаптивные таблицы в Elementor
- Настраивайте таблицы с помощью новых визуальных эффектов, таких как параллакс.
Цена: лицензии JetElements «все включено» начинаются от 130 долларов в год. Вы также можете создавать собственные наборы виджетов, выбирая только те параметры, которые хотите использовать.
8. Премиум-аддоны для Elementor

Премиум-аддоны для Elementor выпускаются как в бесплатной, так и в премиальной версиях. Однако только премиальный плагин добавляет в Elementor новые табличные виджеты.
Если вы заплатите за премиум-лицензию, вы получите доступ к новым данным и виджетам таблицы цен. Вы можете сопровождать таблицы данных виджетами диаграмм и графиков, если хотите отобразить больше информации для своих посетителей.
Ключевая особенность:
- Добавьте виджеты данных и таблицы цен в Elementor
- Сопровождение таблиц виджетами диаграмм и графиков
Цена: лицензии на премиум-аддоны для Elementor начинаются с 39 долларов в год.
9. DataMentor

DataMentor — это плагин, который добавляет в Elementor один виджет таблицы. Однако этот виджет содержит гораздо больше функций, чем большинство надстроек, которые мы видели до сих пор.
Таблицы DataMentor невероятно универсальны. Вы можете добавлять изображения, кнопки, списки и значки в каждый элемент. Виджет позволяет создавать таблицы с индивидуальными стилями для каждого столбца или строки. Вы также получаете доступ к нескольким шаблонам таблиц, если хотите начать процесс проектирования.
Ключевая особенность:
- Добавьте новый виджет таблицы в Elementor
- Получите доступ к нескольким шаблонам таблиц
- Добавляйте изображения, текст, кнопки, списки и значки в таблицы
Цена: DataMentor — бесплатный плагин.
10. Счастливые аддоны для Elementor

Happy Addons for Elementor — один из самых полных плагинов для конструктора страниц. Этот инструмент добавляет в Elementor более 99 виджетов и обширную коллекцию новых шаблонов в свою библиотеку.
Что касается таблиц, Happy Addons включает в себя как базовые, так и расширенные виджеты таблиц. Расширенная версия поддерживает импорт данных в нескольких форматах, а также поиск, фильтрацию и разбиение на страницы. Кроме того, вы получаете доступ к нескольким предварительно разработанным макетам таблиц. Помимо этих опций, Happy Addons также включает элементы таблицы цен и сравнения.
Ключевая особенность:
- Доступ к базовым и расширенным табличным виджетам
- Импорт данных для расширенных возможностей
- Используйте заранее разработанные макеты таблиц
- Добавьте таблицы цен и сравнения
Цена: есть бесплатная версия Happy Addons. Премиум-лицензии начинаются с 39 долларов в год.
11. Аддоны Royal Elementor

Аддоны Royal Elementor добавляют более 40 новых виджетов в Elementor. Все они бесплатны, но плагин также поставляется в премиум-версии, которая открывает дополнительные параметры настройки для каждого виджета.
С дополнениями Royal Elementor вы получаете новую таблицу цен для использования в Elementor. Этот виджет включает в себя несколько новых параметров стиля. Кроме того, он поставляется с опцией переключения, которую посетители могут использовать для переключения между месячными и годовыми ценами (или другими вариантами).
Ключевая особенность:
- Добавьте новый виджет таблицы цен в Elementor
- Настройте таблицы цен с помощью новых параметров стиля
- Добавьте ценовой переключатель к своим столам
Цена: Аддоны Royal Elementor бесплатны. Премиум-лицензии стоят 29 долларов за сайт (это единоразовая плата).
12. Дополнительные элементы Elementor

Elementor Addon Elements — это бесплатный плагин, который добавляет в Elementor более 24 новых виджетов. Среди них у вас есть варианты цен, сравнения и таблиц данных.
Таблицы цен включают множество дополнительных параметров настройки, которых нет в виджете Elementor по умолчанию. Когда дело доходит до таблиц данных, вы можете выбирать между созданием элементов с возможностью поиска или фильтрацией. Кроме того, таблицы поддерживают анимацию, что делает их визуально более привлекательными.
Ключевая особенность:
- Добавьте таблицы цен, сравнения и данных в Elementor
- Выбирайте между таблицами данных с фильтрацией и поиском
- Добавить анимацию в таблицы данных
Цена: Elementor Addon Elements бесплатен.
Резюме
Elementor предоставляет вам широкий спектр инструментов для создания стильных и сложных таблиц WordPress. Многие плагины для таблиц WordPress также совместимы с Elementor, что означает, что конструктор страниц позволяет вам добавлять практически любой тип таблицы, который вы хотите, на свой веб-сайт.
Конструктор страниц Elementor поставляется с интуитивно понятным виджетом таблицы цен . Если вы хотите добавить другие типы таблиц, мы рекомендуем использовать плагины для таблиц Elementor, такие как ElementsKit или WP Table Builder.
Kinsta CDN — это высокопроизводительная CDN, доступная для всех клиентов Kinsta без дополнительных затрат. Он основан на нашей бесплатной интеграции с Cloudflare и автоматически обслуживает ваш контент из более чем 200 точек присутствия по всему миру. Если у вас есть какие-либо вопросы о Kinsta CDN, не стесняйтесь обращаться к нашей круглосуточной службе поддержки для получения дополнительной помощи!