Таблица цен на wordpress без плагина

Здравствуйте, сегодня создадим таблицу цен на сайте с помощью кода (без плагина).

Скачать исходники для статьи можно ниже

1. Заходим в админку wordpress, в Редакторе записи/страницы переходим во вкладку “Текст”:

и вставляем следующий код:

<div class="pricing-table">
<div class="one-third first">
<ul>
<li class="header">Базовый</li>
<li class="grey-blue">999 р. / год</li>
<li>Пункт №1</li>
<li>Пункт №2</li>
<li>Пункт №3</li>
<li>Пункт №4</li>
<li>Пункт №5</li>
<li><a class="pricing-button" href="#">Подключиться!</a></li>
</ul>
</div>
<div class="middle one-third">
<ul>
<li class="header-blue">Про</li>
<li class="light-blue">1999 р. / год</li>
<li>Пункт №1</li>
<li>Пункт №2</li>
<li>Пункт №3</li>
<li>Пункт №4</li>
<li>Пункт №5</li>
<li><a class="pricing-button" href="#">Подключиться!</a></li>
</ul>
</div>
<div class="one-third">
<ul>
<li class="header">Бизнес</li>
<li class="grey-blue"> 2999 р. / год</li>
<li>Пункт №1</li>
<li>Пункт №2</li>
<li>Пункт №3</li>
<li>Пункт №4</li>
<li>Пункт №5</li>
<li><a class="pricing-button" href="#">Подключиться!</a></li>
</ul>
</div>
</div>

2. Далее прописываем CSS стили, для этого, в админке wordpress заходим в пункт “Внешний вид”, подпункт “Редактор” – по умолчанию откроется файл стилей wordpress:

И в самый низ вставляем следующий код:

/* ## Стили таблицы цен */ 
.five-sixths, 
.four-sixths, 
.one-fourth, 
.one-half, 
.one-sixth, 
.one-third, 
.three-fourths, 
.three-sixths, 
.two-fourths, 
.two-sixths, 
.two-thirds { 
float: left; 
margin-left: 2.564102564102564%; 
} 
.one-half, 
.three-sixths, 
.two-fourths {
width: 48.717948717948715%; 
}  
.one-third,
.two-sixths {
width: 31.623931623931625%; 
}
.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}
.one-fourth {
width: 23.076923076923077%;
}
.three-fourths {
width: 74.35897435897436%;
} 
.one-sixth {
width: 14.52991452991453%;
} 
.five-sixths {
width: 82.90598290598291%;
} 
.first {
clear: both; margin-left: 0;
}

В итоге у нас получиться следующее:

3. Теперь добавим ещё немного CSS стилей, придадим цвет,

/* ## Таблица цен стили */
.pricing-table {
line-height: 1;
}
li.header {
background-color: #2f79a9;
color: #fff !important;
font-size: 25px;
border-bottom: 1px solid #2f79a9 !important;
margin-bottom: 0 !important;
}
li.grey-blue {
background-color: #569dcc;
color: #fff !important;
font-size: 20px;
}
li.header-blue {
background-color: #00b9eb;
color: #fff !important;
border-bottom: 1px solid #00b9eb !important;
font-size: 25px;
margin-bottom: 0 !important;
}
li.light-blue {
background-color: #72dffd;
color: #fff !important;
font-size: 20px;
}
.middle {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.pricing-table .one-third {
background-color: #fff;
margin: 20px 5px;
padding: 20px;
width: 25.33%;
}
.pricing-table .one-third:nth-child(3n+1),
.pricing-table .one-third:nth-child(3n+2),
.pricing-table .one-third:nth-child(3n) {
border: 1px solid #ddd;
}
.pricing-table .one-third ul {
margin: 0;
}
.pricing-table ul li {
border-bottom: 1px solid #ddd;
color: #333;
margin-bottom: 10px;
padding: 10px;
text-align: center;
list-style-type: none;
}
.pricing-table a.pricing-button {
background-color: #00b9eb;
border: 3px solid #00b9eb;
color: #fff;
display: block;
text-align: center;
padding: 16px 24px;
}
.pricing-table a.pricing-button:hover {
background-color: #000;
border: 3px solid #000;
color: #fff;
}

/* Таблица цен для мобильных устройств */

@media only screen and (max-width: 1140px) {
.pricing-table .one-third {
width: 25%;
}
}

@media only screen and (max-width: 800px) {
.pricing-table .one-third {
width: 100%;
}
}

@media only screen and (max-width: 568px) {
.pricing-table .one-third {
width: 100%;
}
}

@media only screen and (max-width: 480px) {
.pricing-table .one-third {
width: 100%;
}
}

@media only screen and (max-width: 420px) {
.pricing-table .one-third {
width: 100%; margin: 20px 0; 
}
}

В результате получим:

Конечно, не идеально и некоторые стили можно поправить.

Для размещения Таблицы цен можно выбрать Страницу с шаблоном без боковой колонки: