Top.Mail.Ru

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

Данное руководство содержит исчерпывающую информацию о системе стилей для оформления статей на сайте. Использование единых классов обеспечивает 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. Оранжевая тема (.article-table.orange-theme)

Яркая таблица с оранжевым градиентом для акцентирования внимания:

Акция Модель Скидка Цена со скидкой Экономия
Горячее предложение CrossAir CA-7.5 15% 208 250 ₽ 36 750 ₽
Спецпредложение CrossAir CA-11 10% 268 200 ₽ 29 800 ₽
Особые условия CrossAir CA-15 12% 313 280 ₽ 42 720 ₽

4. Терракотовая тема (.article-table.terracotta-theme)

Сдержанный терракотовый стиль для важных технических данных:

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

5. Комбинированная градиентная тема (.article-table.gradient-theme)

Эффектный градиент от терракотового к оранжевому для премиум-презентации:

Класс оборудования Модельный ряд Мощность, кВт Производительность, л/мин Ценовая категория
Эконом Серия E 7.5-15 1100-2100 Бюджетная
Стандарт Серия S 15-30 2100-4200 Средняя
Премиум Серия P 30-75 4200-10500 Высокая

6. Таблица с акцентными полосами (.article-table.striped-theme)

Чередование строк с мягкими тонами для улучшения читаемости:

Услуга Стандарт Премиум VIP
Монтаж и пусконаладка Включено Включено Включено
Гарантийное обслуживание 12 месяцев 24 месяца 36 месяцев
Выезд инженера 3 дня 1 день 4 часа

7. Таблица с бейджами и индикаторами

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

Наименование Наличие Срок поставки Приоритет
Воздушный фильтр Ограниченно 3-5 дней Средний
Маслоотделитель Под заказ 14-20 дней Низкий
Предочиститель В наличии 1-2 дня Высокий

8. Таблица с фиксированной первой колонкой (.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 ₽ Под заказ

Новые возможности таблиц с цветами #c85d4b и #ff9800

  • .orange-theme - оранжевая тема для акций и специальных предложений
  • .terracotta-theme - терракотовая тема для важных технических данных
  • .gradient-theme - комбинированный градиент для премиум-контента
  • .striped-theme - чередование строк с мягкими цветами
  • .border-hover - подсветка строки при наведении
  • .badge-warning / .badge-danger - цветные индикаторы статусов

Примеры вставки изображений с галереей

1. Одиночное изображение с подписью

Используется для демонстрации сертификатов, схем, документации:
Сертификат официального дилера DALI

2. Большое изображение с обтеканием текста
Схема подключения компрессора

Изображения с обтеканием текста позволяют эффективно использовать пространство страницы. Как показано на примере слева, схема подключения компрессора занимает оптимальное место, в то время как текст плавно обтекает изображение.

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

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

Блок с предупреждением (.warning-block)

ВАЖНОЕ ПРЕДУПРЕЖДЕНИЕ

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

Блок с выделением (.highlight-block)

Специальное предложение: при покупке винтового компрессора до конца месяца - бесплатный монтаж и пуско-наладка!

Призыв к действию (.cta-block)

Готовы подобрать оптимальное оборудование для вашего производства?

Получить бесплатную консультацию

Вступительный блок (.intro-block)

Винтовые компрессоры CrossAir

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

Сетки и карточки

Сетка применений (.applications-grid)

Металлообработка

Пневмоинструмент для сверления, шлифовки, полировки металлических поверхностей

Химическая промышленность

Перекачка химических веществ, аэрация реакторов, пневмотранспорт

Пищевая промышленность

Упаковка продуктов, чистый воздух для производственных линий

Сетка характеристик (.characteristics-grid)

Мощность

7.5 - 22 кВт

Давление

8 - 13 бар

Производительность

1100 - 3200 л/мин

Уровень шума

68 - 72 Дб

Код для вставки новых стилизованных таблиц

Оранжевая таблица (акции/спецпредложения):

<table class="article-table orange-theme">
    <thead>
        
            <th>Акция</th>
            <th>Модель</th>
            <th>Скидка</th>
        
    </thead>
    <tbody>
        
            Текст 1
            Текст 2
            Текст 3
        
    </tbody>
</table>

Терракотовая таблица (технические данные):

<table class="article-table terracotta-theme">
    <thead>
        
            <th>Параметр</th>
            <th>Значение</th>
        
    </thead>
    <tbody>
        
            Характеристика 1
            Значение 1
        
    </tbody>
</table>

Градиентная таблица (премиум-контент):

<table class="article-table gradient-theme border-hover">
    <thead>
        
            <th>Категория</th>
            <th>Описание</th>
        
    </thead>
    <tbody>
        
            Текст 1
            Текст 2
        
    </tbody>
</table>

Таблица с бейджами:

<table class="article-table terracotta-theme">
    <thead>
        <th>Товар</th><th>Статус</th></tr>
    </thead>
    <tbody>
        
            Название
            <span class="badge badge-warning">В работе</span>
        
    </tbody>
</table>

Стилизованные нумерованные списки (.numbered-list)

  • .numbered-list - базовый контейнер для нумерованных списков
  • .numbered-list.detailed - развернутый вариант с описаниями
  • .numbered-list.compact - компактный вариант для кратких списков
  • .numbered-list.simple - простой стиль без иконок
  • .color-scheme-blue/red/purple - цветовые схемы

1. Развернутый список с иконками (.detailed)

Идеально подходит для пошаговых инструкций и подробных описаний процессов:

5 шагов для правильного выбора винтового компрессора

  1. 1
    Определите требуемую производительность

    Рассчитайте суммарный расход воздуха всеми пневмоинструментами с запасом 20-30% на будущее расширение

  2. 2
    Выберите рабочее давление

    Большинство промышленного оборудования работает при 8-13 бар. Убедитесь, что компрессор обеспечивает нужное давление с запасом

  3. 3
    Определите тип привода

    Прямой привод - для стабильной работы, ременной - для переменных нагрузок. Учитывайте КПД и стоимость обслуживания

2. Компактный список (.compact)

Для кратких перечислений и списков действий:

Процесс монтажа компрессора

  1. Подготовка помещения и фундамента
  2. Установка и выравнивание оборудования
  3. Подключение электричества и заземления
  4. Монтаж воздуховодов и фильтров
  5. Пуско-наладочные работы и тестирование

3. Простой стиль (.simple)

Минималистичный вариант для второстепенных списков:

Требования к помещению

  1. 1 Температура воздуха от +5°C до +40°C
  2. 2 Относительная влажность не более 80%
  3. 3 Хорошая вентиляция и циркуляция воздуха
  4. 4 Отсутствие агрессивных химических испарений

4. Цветовые схемы

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

Синяя схема - технические процессы

  1. 1
    Техническое обслуживание

    Регулярная замена масла и фильтров

  2. 2
    Диагностика оборудования

    Проверка давления и температуры

Красная схема - важные предупреждения

  1. 1
    Безопасность при работе

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

  2. 2
    Аварийные ситуации

    Знайте расположение аварийных выключателей

HTML-структура для разных вариантов

Развернутый список (.detailed):

<div class="numbered-list detailed">
    <h3>Заголовок списка</h3>
    <ol>
        <li>
            <div class="step-content">
                <span class="step-number">1</span>
                <div class="step-text">
                    <strong>Заголовок пункта</strong>
                    <p>Описание пункта</p>
                </div>
                <div class="step-icon">
                    <i class="fas fa-cog"></i>
                </div>
            </div>
        </li>
    </ol>
</div>

Компактный список (.compact):

<div class="numbered-list compact">
    <h4>Заголовок списка</h4>
    <ol>
        <li>
            <div class="step-icon">
                <i class="fas fa-check"></i>
            </div>
            <span class="step-text">Текст пункта</span>
        </li>
    </ol>
</div>

Простой список (.simple):

<div class="numbered-list simple">
    <h4>Заголовок списка</h4>
    <ol>
        <li>
            <span class="step-number">1</span>
            <span class="step-text">Текст пункта</span>
        </li>
    </ol>
</div>

Рекомендации по использованию .numbered-list

Когда использовать каждый вариант

  1. .detailed - для пошаговых инструкций, обучающих материалов, подробных процессов
  2. .compact - для перечней оборудования, кратких чек-листов, списков требований
  3. .simple - для второстепенной информации, дополнительных списков, примечаний
  4. Цветовые схемы - для визуального разделения различных типов контента

Советы по использованию таблиц с новыми цветами

  • Используйте .orange-theme для акционных предложений и распродаж
  • Применяйте .terracotta-theme для серьезных технических данных и спецификаций
  • Комбинируйте .gradient-theme с .border-hover для премиум-контента
  • Добавляйте бейджи .badge-warning и .badge-danger для статусов
  • Не забывайте оборачивать таблицы в .table-responsive для мобильных устройств

Популярные иконки Font Awesome для numbered-list

  • fa-cog - настройки, технические процессы
  • fa-tools - монтаж, установка, ремонт
  • fa-bolt - электричество, энергия
  • fa-check-circle - завершение, успех
  • fa-exclamation-triangle - предупреждения
  • fa-search - диагностика, проверка
  • fa-oil-can - обслуживание, смазка
  • fa-hard-hat - безопасность, защита

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

<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 - Стилизованная ссылка для телефонов
  • .orange-theme - Оранжевая тема таблицы (акции)
  • .terracotta-theme - Терракотовая тема таблицы (технические данные)
  • .gradient-theme - Градиентная тема таблицы (премиум)

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

  • .color-scheme-blue - синяя схема (технические характеристики)
  • .color-scheme-green - зеленая схема (преимущества)
  • .color-scheme-red - красная схема (важные предупреждения)
  • .color-scheme-orange - оранжевая схема (критерии выбора)
  • .color-scheme-purple - фиолетовая схема (особенности)

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

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

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

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

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

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

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

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

<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>

Важные заметки

  • Не изменяйте структуру классов - это нарушит единый стиль сайта
  • Сохраняйте порядок блоков - заголовок → контент → контакты
  • Используйте переменные для легкого обновления контента
  • Проверяйте телефоны и email перед публикацией
  • Удаляйте лишние пустые параграфы из исходного текста

По вопросам использования стилей обращайтесь:

Техническая поддержка: admin@it-simvol.ru
Поддержка: +7 (926) 255-19-80

Мы поможем разобраться со сложными случаями оформления и ответим на все вопросы!

Ваш заказ готов к оформлению
Личный кабинет
Вам будет доступна история заказов, управление рассылками, свои цены и скидки для постоянных клиентов и прочее.
Ваш логин
Ваш пароль
Забыли пароль?
Создать личный кабинет

+7 (495) 252-76-64

Заказать звонок

8 (800) 551-28-60

г. Москва, ул. Подольских Курсантов, вл. 22с5, офис 208. Работаем для вас с 8:00 до 18:00
Посмотреть на карте