Как сделать таблицу с ценами и характеристиками на сайт 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

 

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

 

Как сделать таблицу с ценами и характеристиками на сайт wordpress ! обновлено: Январь 7, 2016 автором: Илья Журавлёв
 
 

Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


5 + 6 =



super-infa-top
Стрелка вверх