Как сделать таблицу с ценами и характеристиками на сайт wordpress

WordPress

Всем привет! сегодня я буду рассказывать о плагине, который позволит вам создавать таблицы цен и характеристик. То есть, вы сами сможете создавать таблицы с ценами и характеристиками и добавлять их на свой сайт с помощью простого шорткода или php кода. В плагине имеется 7 бесплатных тем таблиц, которые вы сможете настроить под себя, заменить слова, изменить стиль шрифта, размер текста, вставить ссылку и т.д. Так же в плагине имеется 19 платных pro тем таблиц. Плагин хоть и на Английском языке, но в нём не сложно разобраться, тем более я помогу вам в этом.

 

07-01-2016 17-36-04_mini

 

Я взял одну таблицу и перевёл в ней текст, данная таблица динамическая, то есть при наведении курсора мыши на один из тарифов в таблице, он выделяется на фоне остальных.

 

07-01-2016 17-26-49_mini

 

Плагин – Pricing Table by Supsystic вы сможете установить прямо из админ-панели wordpress. Перейдите по вкладке: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

07-01-2016 17-29-08_mini

 

Чтобы создать и настроить ценовую таблицу, перейдите по вкладке: Pricing Table by SupsysticAdd New Table.

 

07-01-2016 18-04-00_mini

 

На следующей странице, выберите таблицу, нажав по ней, укажите имя таблицы в поле Table Name и нажмите на кнопку – Save. Бесплатные таблицы обозначаются надписью – Select.

 

07-01-2016 18-07-53_mini

 

Далее, у вас откроется страница для настройки таблицы, которую вы выбрали. Сначала я разберу настройки по умолчанию, которые отображаются над таблицей. Начнём по порядку, слева направо.

 

– Columns: Add Column, здесь указано количество колонок в таблице, можно добавить колонку в таблицу, нажав на кнопку: Add Column.

– Rows: Add Row, показано количество строк в таблице, можно добавить строку в таблицу, нажав на кнопку: Add Row.

– Table Width, можно задать ширину таблицы, в пикселях или процентах.

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

– Description Text Color, можно выбрать цвет для текста описания тарифов в самом верху таблицы.

– Header Text Color, цвет текста заголовков, где указаны цены.

– Background Color, цвет фона таблицы.

– Column Width, можно задать ширину колонок.

– Enable Description Column, если уберёте здесь галочку, то из таблицы исчезнет колонка с названием характеристик.

– Enable Footer Row, если уберёте здесь галочку, то из таблицы исчезнет футер, низ таблицы, где находятся кнопки.

– Enable Hover Animation, если уберёте здесь галочку, то отключится всплывающая анимация.

– Rows Text Color, можно выбрать цвет для текста в основной таблице.

– Enable Head Row, можно убрать самый верх таблицы, где указаны названия тарифов.

– Enable Description Row, можно убрать раздел, где указаны цены.

– Text Align, можно выбрать расположение текста.

– Enable Responsivity, если стоит галочка, значит таблица адаптивная.

 

07-01-2016 18-14-27_mini

 

Смотрите, заменить текст в таблице очень просто, для этого, просто нажмите на текст, выделите его и вставьте свой текст. Так же, после выделения текста, у вас появится меню с редактором, где можно изменить размер текста, сделать его жирным или курсивом, вставить ссылку, вставить в таблицу изображение или да же видео. Можно менять местами элементы в таблице с помощью стрелок и т.д. В общем здесь всё просто, надо лишь разобраться, понажимайте по кнопкам и всё поймёте, не надо бояться, смело действуйте.

 

07-01-2016 18-43-59_mini

 

После того как вы настроите таблицу, сохраните таблицу, нажав на кнопку – Save, в верху страницы. Чтобы добавить таблицу на сайт, скопируйте шорткод, так же можно воспользоваться php кодом, для вставки в файл php.

 

07-01-2016 18-52-27

 

Шорткод, который вы скопируете, вставьте на страницу создания записи или страницы. После публикации страницы, таблица отобразится на вашем сайте.

 

07-01-2016 17-28-25

 

На этом у меня всё, жду ваших комментариев, до новых встреч!

 

info-effect.ru
Добавить комментарий для Илья Журавлёв Отменить ответ

Имя и Email указывать не обязательно. Чтобы получить ответ на свою электронную почту, укажите свой Email.

  1. Ernest

    А как настроить размер таблицы во всю ширину страницы?

    Ответить
    1. Admin автор

      Смотрите настройки внимательно, там есть параметр “Table Width” – можно указать размер ширины в пикселях или процентах. Чтобы таблица была адаптивная (на всю ширину), нужно указать – 100%

      Ответить
  2. Александр

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

    Ответить
    1. Admin автор

      У вас отлично получилось!

      Ответить
  3. Санёк

    Перепробовал кучу таблиц, это лучший.

    Ответить
  4. Лиса

    Как оставить одну таблицу, а не 4? Спасибо

    Ответить
    1. Admin автор

      В настройках. Цитирую: “Columns: Add Column, здесь указано количество колонок в таблице, можно добавить колонку в таблицу, нажав на кнопку: Add Column”.

      Ответить
  5. Женёк

    Большое спасибо за подробный обзор плагина, очень помогло.

    Ответить
  6. Алексей

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

    Ответить
  7. Екатерина

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

    Ответить
    1. Admin автор

      Не знаю, разбираться надо, много причин может быть. Несовместимость плагина и темы, либо конфликт с другим плагином. WordPress обновляете?

      Ответить