Данное руководство содержит исчерпывающую информацию о системе стилей для оформления статей на сайте. Использование единых классов обеспечивает consistent-дизайн и удобство восприятия информации посетителями.

Базовая структура статьи

.compressor-article - главный контейнер всей статьи
.article-header - блок для заголовка с тегом h2
.article-content - основной контентный блок
.advantages-list - стилизованные списки характеристик
.contacts-block - блок контактной информации

Примеры таблиц в статьях

1. Стандартная таблица (.article-table)

Используется для представления структурированных данных с современным дизайном:

Модель	Мощность, кВт	Давление, бар	Производительность, л/мин	Цена, руб
CrossAir CA-7.5	7.5	8	1100	245 000
CrossAir CA-11	11	8	1600	298 000
CrossAir CA-15	15	8	2100	356 000
CrossAir CA-22	22	8	3200	425 000

2. Таблица технических характеристик (.tech-specs-table)

Идеально подходит для детальных технических параметров оборудования:

Параметр	CrossAir CA-7.5	CrossAir CA-11	CrossAir CA-15
Тип привода	Прямой	Прямой	Прямой
Винтовой блок	Baosi BS-75	Baosi BS-110	Baosi BS-150
Уровень шума, Дб	68	70	72
Класс защиты	IP54	IP54	IP54
Габариты (Д×Ш×В), мм	1200×800×1100	1300×850×1150	1400×900×1200

3. Таблица с эффектом размытия (.table_blur)

Стильная таблица с эффектом размытия при наведении:

Комплектующие	Модель	Производитель	Срок службы
Винтовой блок	BS-75	Baosi	40 000 часов
Электродвигатель	Y2-132M-4	Wannan	20 000 часов
Контроллер	CompAir C500	CompAir	60 000 часов
Сепаратор	SO-75	Donaldson	8 000 часов

4. Адаптивная таблица с горизонтальной прокруткой .table-scroll

Для таблиц с большим количеством столбцов, которые должны оставаться читаемыми на мобильных устройствах:

Модель	Мощность	Давление	Произв-ть	Ресивер	Уровень шума	Вес	Габариты	Цена	Наличие
CA-7.5	7.5 кВт	8 бар	1100 л/мин	100 л	68 Дб	280 кг	1200×800×1100	245 000 ₽	В наличии
CA-11	11 кВт	8 бар	1600 л/мин	200 л	70 Дб	320 кг	1300×850×1150	298 000 ₽	Под заказ

Код для вставки таблиц

Стандартная таблица:

<div class="table-responsive">
<table class="article-table">
    <thead>
        <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Данные 1</td>
            <td>Данные 2</td>
        </tr>
    </tbody>
</table>
</div>

Таблица технических характеристик:

<table class="tech-specs-table">
    <thead>
        <tr>
            <th>Параметр</th>
            <th>Значение</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Характеристика 1</td>
            <td>Значение 1</td>
        </tr>
    </tbody>
</table>

Таблица с эффектом размытия:

<table class="table_blur">
    <thead>
        <tr>
            <th>Колонка 1</th>
            <th>Колонка 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Данные 1</td>
            <td>Данные 2</td>
        </tr>
    </tbody>
</table>

Адаптивная таблица с прокруткой:

<div class="table-scroll">
<table>
    <thead>
        <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Данные 1</td>
            <td>Данные 2</td>
        </tr>
    </tbody>
</table>
</div>

Пример готовой структуры

<div class="compressor-article">
    <div class="article-header">
        <h2>Заголовок статьи</h2>
    </div>
    
    <div class="article-content">
        <p>Основной текст статьи...</p>
        
        <div class="advantages-list color-scheme-blue">
            <ul>
                <li><i class="fa fa-cog advantage-icon"></i>Характеристика 1</li>
                <li><i class="fa fa-check advantage-icon"></i>Характеристика 2</li>
            </ul>
        </div>
        
        <div class="contacts-block">
            <!-- Контакты -->
        </div>
    </div>
</div>

Классы и их назначение

.compressor-article - Основной контейнер для всей статьи (обязательный)
.article-header - Блок для заголовка статьи (обязательный)
.article-content - Основной блок для содержания статьи (обязательный)
.advantages-list - Стилизованный список характеристик или преимуществ
.contacts-block - Блок с контактной информацией (рекомендуется)
.color-scheme-blue - Синее оформление для контактного блока
.bold-text - Жирный текст для выделения важного текста
.contact-phones - Контейнер для телефонных номеров
.phone-link - Стилизованная ссылка для телефонов

Цветовые схемы для блоков advantages-list

.color-scheme-blue - синяя схема (технические характеристики)

.color-scheme-green - зеленая схема (преимущества)

.color-scheme-red - красная схема (важные предупреждения)

.color-scheme-orange - оранжевая схема (критерии выбора)

.color-scheme-purple - фиолетовая схема (особенности)

Переменные для заполнения шаблона описания товаров

Основные переменные:

{Название товара} - название оборудования
{Сфера применения} - области использования
{Мощность, кВт} - мощность оборудования
{Давление, бар} - рабочее давление
{Производительность, л/мин} - производительность

Специфические переменные:

{Тип привода} - прямой/ременный привод
{Модель винтового блока} - модель блока
{Класс защиты IP} - класс защиты
{Контроллер} - модель контроллера
{Уровень шума, Дб} - уровень шума

Правила оформления текста

Неразрывные пробелы

Используйте   для предотвращения переноса:

<p>Мощность {Мощность, кВт}&nbsp;кВт</p>

Заголовки

H2 - основной заголовок (в .article-header)
H3 - подзаголовки в контенте

Списки

Всегда оборачивайте списки в .advantages-list:

<div class="advantages-list">
    <ul>
        <li><i class="fa fa-check advantage-icon"></i>Пункт 1</li>
        <li><i class="fa fa-check advantage-icon"></i>Пункт 2</li>
    </ul>
</div>

Иконки Font Awesome для преимуществ

Технические характеристики
Преимущества и выгоды
Обслуживание и монтаж
Экономические показатели
Гарантии и надежность
Энергоэффективность
Низкий уровень шума
Комплектующие

Специализированные информационные блоки

.application-list - для сфер применения

Используется для перечисления областей использования оборудования. Имеет голубой фон и синюю акцентную линию.

.catalog-highlight - для выделения важной информации

Предназначен для специальных предложений, акций или ключевых преимуществ. Зеленый фон создает ассоциацию с положительными решениями.

.selection-criteria - для критериев выбора

Используется при описании параметров подбора оборудования. Оранжевый цвет привлекает внимание к важным критериям.

.numbered-list - для пошаговых инструкций

Подходит для нумерованных списков, алгоритмов действий, последовательностей монтажа.

Формат контактного блока

Стандартный формат контактного блока:

Многоканальный телефон:+7 (495) 252-76-64

Бесплатный по РФ:8 800 551-28-60

Электронная почта:info@promcomtech.ru

+7 (495) 252-76-64 - многоканальный 8 800 551-28-60 - звонок по РФ бесплатный

Заказать консультацию

Пример готовой статьи

<div class="compressor-article">
    <div class="article-header">
        <h2>Винтовые компрессоры CrossAir CA-7.5</h2>
    </div>
    
    <div class="article-content">
        <p>Винтовые компрессоры CrossAir CA-7.5&nbsp;китайского производства...</p>

        <h3>CrossAir CA-7.5: технические особенности</h3>
        
        <div class="advantages-list color-scheme-blue">
            <ul>
                <li><i class="fa fa-cog advantage-icon"></i>Прямой&nbsp;привод...</li>
                <li><i class="fa fa-cube advantage-icon"></i>Винтовой блок Baosi BS-75</li>
                <li><i class="fa fa-shield advantage-icon"></i>Класс защиты IP54</li>
            </ul>
        </div>

        <div class="contacts-block color-scheme-blue">
            <p class="bold-text">ООО "ПромКомТех" - официальный дилер...</p>
            
            <div class="contact-phones">
                <a href="tel:+74952527664" class="phone-link"><i class="fa fa-phone"></i> +7 (495) 252-76-64</a>
                <a href="tel:88005512860" class="phone-link"><i class="fa fa-phone"></i> 8 800 551-28-60</a>
            </div>
        </div>
    </div>
</div>

Полное руководство по оформлению статей для контент-менеджеров