Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

Якщо на вашому сайті відвідувачам пропонуються різні товари та послуги з більшим діапазоном тарифних пакетів та цін, то порівняти пропозиції в рамках кожного пакету можна, якщо надати всі тарифи в єдиній таблиці. Як правило, такі таблиці краще робити адаптивними, щоб вони однаково коректно відображалися на смартфонах, інтернет-планшетах, настільних ПК або ноутбуках.

Як додати таблицю порівняння цін та послуг з адаптивною версткою на WordPress-сайті

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

У сьогоднішньому посту ми розберемося, як додати таблицю порівняння тарифних планів та цін на вашому WordPress-сайті, щоб вона при цьому ще й відображалася у правильному форматуванні на екранах усіх сучасних гаджетів.

Що таке таблиці порівняння цін

Якщо з якоїсь причини ви взагалі не знаєте, що таке сітка порівняння тарифів і послуг, то зазвичай вона являє собою зведену таблицю, в якій крім цін перераховані характеристики, параметри та можливості різних пакетів послуг або наборів товару, які можна отримати у цій компанії. Користувач може відразу оцінити, за що він платить гроші, і скільки коштує той чи інший набір характеристик, що його цікавлять.

Специфікації та деталі щодо кожного продукту чи тарифу винесені в окремі колонки та осередки, представлені у форматі сітки, на перетині клітин та стовпців з цінами, параметрами та властивостями зазначені значення у цифрах чи кількісному/якісному еквіваленті.

Як додати таблицю порівняння цін та послуг з адаптивною версткою на WordPress-сайті

squarespace.com/pricing

Як правило, такі таблиці використовуються, щоб просувати та продавати продукти чи послуги потенційним клієнтам, оскільки вони привертають увагу та досить помітні та зручні. Часто для створення таких таблиць-порівнянь використовують платні плагіни або власні рішення, але ми зупинимося на плагінах, які допоможуть вам.

Приклади

У міру зростання популярності красиво оформлених тарифних таблиць, а не простих табличок, зростає і частота використання їх на професійних сайтах. Ось вам кілька прикладів із популярних сайтів, де використовується адаптивна верстка тарифних таблиць:

Як додати таблицю порівняння цін та послуг з адаптивною версткою на WordPress-сайті

github.com/plans

 

Як додати таблицю порівняння цін та послуг з адаптивною версткою на WordPress-сайті

shopify.com/pricing

Як додати таблицю порівняння цін у WordPress

У вас є 2 варіанти: або верстати таку таблицю самостійно, або вирішити це завдання за допомогою плагіна. Верстка вимагатиме від вас знань у дизайні, проектуванні, роботі з таблицями стилів. Швидше за все, всіх (або більшої частини) цих навичок у вас немає, як зайвого часу.

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

Найкращі плагіни для додавання таблиць з цінами

Щоб заощадити час і сили, ось вам список найпопулярніших і зручніших у роботі плагінів для створення таких порівняльних таблиць (тут є і платні, і безкоштовні рішення):

1.Таблиця цін

Один з найкращих безкоштовних плагінів для WordPress, щоб створювати порівняльні таблиці цін та пропонованих тарифних пакетів, який легко протестувати на власному сайті, просто налаштувати і не менш просто використовувати:

Як додати таблицю порівняння цін та послуг з адаптивною версткою на WordPress-сайті

Йому може не вистачати додаткових "фішок", які є у його платних побратимів, але з основними завданнями він справляється, і до того ж за нього не треба платити.

2.ціноутворення Таблиця

Ще один безкоштовний плагін для WordPress, досить популярний. У комплекті з ним йде 3 шаблони, з яких можна вибрати, просто перетягнувши і опублікувавши в потрібному розділі сайту (читайте наше докладний посібник з налаштування плагіна Pricing Table).

Як додати таблицю порівняння цін та послуг з адаптивною версткою на WordPress-сайті

Виглядає краще, ніж попередній плагін, але при цьому вимагає трохи більше часу в налаштуванні і трохи більше ресурсів для роботи ваших таблиць.

3.CSS3 Адаптивні веб-таблиці цінових таблиць Сітки

Два попередні плагіни були безкоштовними і містили лише базові можливості, але якщо ви налаштовані серйозно, то краще звернути увагу на преміум-рішення: у ньому є більше опцій для налаштування додаткових "фішок", які допоможуть вам з конверсією та зростанням кількості кліків.

Один із таких преміум-плагінів – це CSS3 Адаптивні веб-таблиці цінових таблиць Сітки. У нього багато корисних параметрів:

Як додати таблицю порівняння цін та послуг з адаптивною версткою на WordPress-сайті

Ціна: $ 15

Він генерує таблиці із застосуванням лише CSS та HTML, а отриманий дизайн повністю адаптивний і коректно відображається на будь-яких роздільних здатностях та діагоналях екрану. У поставці є ще іконки та опції, щоб ваші таблиці візуально виглядали максимально привабливо. Рекомендуємо звернути на нього увагу.

4.Upricing

Ще один популярний платний плагін для створення порівняльних таблиць з адаптивною версткою для WordPress. У нього трохи менше опцій вибору кольору та зовнішнього вигляду в порівнянні з попередником.

Як додати таблицю порівняння цін та послуг з адаптивною версткою на WordPress-сайті

Ціна: $ 15

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

5.CSS3 Таблиці вертикальних веб-цін

За допомогою цього платного плагіна ви зможете згорнути таблицю, засновану на рядках, а не колонках. Є до 10 опцій для кольорової гами, досить просто зробити вибір на користь одного з варіантів:

Як додати таблицю порівняння цін та послуг з адаптивною версткою на WordPress-сайті

Ціна: $ 13

Є також анімовані підказки при наведенні курсору на комірку. У пакет включені PSD-вихідники для тих, хто хоче все редагувати на власний смак щодо елементів сторінки та зовнішнього вигляду.

6.Go – Responsive Pricing & Compare Tables for WP

І останній платний плагін у нашій добірці дозволяє включати до складу порівняльної таблиці не лише звичайний текст, а й картинки та навіть відео-ролики:

Як додати таблицю порівняння цін та послуг з адаптивною версткою на WordPress-сайті

Ціна: $ 17

При цьому адаптивна не тільки верстка самої таблиці, а й додана картинка в осередках все змінюється в залежності від роздільної здатності і діагоналі екрану. Тим, кому крос-платформна сумісність не така цікава, можна взагалі відключити підтримку адаптивної верстки в налаштуваннях плагіна.

У поставці є 90 стартових шаблонів оформлення порівняльних таблиць, щоб було з чого вибрати.

Висновок

Додавання на ваш сайт порівняльних таблиць за допомогою одного з плагінів, про які ми вам сьогодні розповіли, зробить ваш сайт не тільки зручнішим для користувача, але й красивішим. Для тих, хто користується лише базовими та можливостями, цілком вистачить безкоштовних плагінів. Решті ж рекомендуємо звернути увагу на платні рішення. І звичайно, не забудьте поділитися враженнями від використання плагінів у коментарях до цієї посади.

Джерело: WPLift.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 4

Aterr:

Здравствуйте.
Натрапив на вашу статтю. Плагіни хороші, але
є багато нюансів з приводу використання плагінів на сайті,
принцип. Половина функціонала, написаного на js дуже часто не
використовується на сайті. Я хочу запропонувати вашим читачам, на мою думку,
корисний спосіб адаптації таблиць за допомогою html css та jQuery.
Приклад реалізації ви можете переглянути перейшовши за вказаним посиланням

Сподіваюся, читачам вашого сайту це чимось допоможе, а ви, у свою чергу, не порахуєте моє повідомлення за спам.

Ірина:

Доброго дня!
Підкажіть, будь ласка, новачкові — чи підтримується в go pricing кирилиця?
Намагаюся налаштовувати пакети - суцільна абракадабра ((( а латиницею все ок ...
Може є десь налаштування?
Заздалегідь вдячна

WPcafe.org:

Напевно, у плагіні використовується вбудований шрифт, в якому немає підтримки кирилиці. Оптимальний вихід із ситуації — замінити вбудований шрифт із плагіна будь-яким іншим безкоштовним шрифтом із кирилицею, наприклад із набору Google Fonts.

vdi1950:

Добрий день. Дякуємо за огляд.
Підкажіть будь ласка, як у плагіні замінити вбудований шрифт на кирилицю.

Додати коментар або відгук