Готовые HTML-вставки
© ннннн
Этот документ не повторяет стандартные блоки редактора. Здесь собраны только готовые вставки для блока «HTML-фрагмент»: когда нужен свой кусок оформления, а штатного блока уже мало.
У каждого примера два окна подряд:
- Первый блок
htmlпоказывает, как вставка выглядит на странице. - Второй обычный блок кода содержит тот же код для копирования.
Все примеры ниже собраны так, чтобы выглядеть нормально и в светлой, и в темной теме.
Полезные вставки
Полоса с главным действием
Зачем: короткий призыв с заметной кнопкой в конце страницы или раздела.
<section style="margin:1.5rem 0;padding:28px 24px;border:1px solid rgba(127, 127, 127, 0.24);background:rgba(127, 127, 127, 0.10);text-align:center;">
<strong style="display:block;font-size:1.25rem;margin-bottom:10px;">Нужна консультация по вашему случаю?</strong>
<p style="margin:0 auto 18px;max-width:40rem;opacity:.9;">Коротко опишите задачу и оставьте контакт. Мы ответим в рабочее время и предложим следующий шаг без лишней переписки.</p>
<a href="/pages/contact" class="theme-btn-primary" style="display:inline-block;padding:12px 22px;text-decoration:none;font-weight:600;background-color:var(--main-color, #000);color:var(--main-on-color, #fff);">Написать нам</a>
</section>Полоса с двумя действиями
Зачем: когда нужно дать человеку выбор: написать, посмотреть цены, открыть контакты.
<section style="margin:1.5rem 0;padding:26px 24px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.09);text-align:center;">
<strong style="display:block;font-size:1.2rem;margin-bottom:8px;">Уже готовы обсудить задачу?</strong>
<p style="margin:0 auto 18px;max-width:38rem;opacity:.9;">Можно сразу написать нам или сначала посмотреть, как устроен процесс работы.</p>
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
<a href="/pages/contact" class="theme-btn-primary" style="display:inline-block;padding:12px 22px;text-decoration:none;font-weight:600;background-color:var(--main-color, #000);color:var(--main-on-color, #fff);">Связаться</a>
<a href="/pages/faq" style="display:inline-block;padding:12px 22px;border:1px solid color-mix(in srgb, var(--main-color, #000) 45%, transparent);text-decoration:none;font-weight:600;color:inherit;">Как это работает</a>
</div>
</section>Полезный совет и предупреждение
Зачем: быстро выделить хорошую практику и типичную ошибку.
<p style="margin:1rem 0;padding:14px 16px;border-left:4px solid #15803d;background:rgba(34, 197, 94, 0.14);"><strong>Совет.</strong> На первом экране лучше писать одну ясную мысль: кто вы, чем полезны и что делать дальше.</p>
<p style="margin:1rem 0;padding:14px 16px;border-left:4px solid #b91c1c;background:rgba(239, 68, 68, 0.14);"><strong>Внимание.</strong> Не оставляйте на опубликованном сайте шаблонные тексты, тестовые телефоны и служебные ссылки.</p>Шаги процесса
Зачем: показать путь клиента или этапы работы в 3-4 шагах.
<ol style="margin:1rem 0;padding:0;list-style:none;">
<li style="margin-bottom:14px;padding-left:2.6rem;position:relative;">
<span style="position:absolute;left:0;top:0;width:1.8rem;height:1.8rem;border-radius:999px;background:var(--main-color, #111);color:var(--main-on-color, #fff);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;">1</span>
Оставьте заявку или напишите удобным способом.
</li>
<li style="margin-bottom:14px;padding-left:2.6rem;position:relative;">
<span style="position:absolute;left:0;top:0;width:1.8rem;height:1.8rem;border-radius:999px;background:var(--main-color, #111);color:var(--main-on-color, #fff);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;">2</span>
Уточним детали, сроки и формат работы.
</li>
<li style="padding-left:2.6rem;position:relative;">
<span style="position:absolute;left:0;top:0;width:1.8rem;height:1.8rem;border-radius:999px;background:var(--main-color, #111);color:var(--main-on-color, #fff);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;">3</span>
Вернемся с понятным ответом и следующим шагом.
</li>
</ol>Три колонки преимуществ
Зачем: показать 3 ключевые опоры услуги или продукта.
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:1.25rem 0;">
<div style="padding:16px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.09);">
<strong style="display:block;margin-bottom:6px;">Сроки</strong>
<span style="opacity:.88;">Понятные этапы, статус работ и без пропаданий.</span>
</div>
<div style="padding:16px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.09);">
<strong style="display:block;margin-bottom:6px;">Прозрачность</strong>
<span style="opacity:.88;">Сначала обсуждаем задачу и только потом договариваемся о работе.</span>
</div>
<div style="padding:16px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.09);">
<strong style="display:block;margin-bottom:6px;">Поддержка</strong>
<span style="opacity:.88;">Остаемся на связи и после основного этапа.</span>
</div>
</div>Контакты в две колонки
Зачем: вставить на страницу компактный контактный блок без отдельной сложной секции.
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1.25rem 0;">
<div style="padding:18px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.09);">
<strong style="display:block;margin-bottom:8px;">Как связаться</strong>
<p style="margin:0 0 8px;">Телефон: <a href="tel:+79990000000">+7 (999) 000-00-00</a></p>
<p style="margin:0;">Почта: <a href="mailto:hello@example.com">hello@example.com</a></p>
</div>
<div style="padding:18px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.09);">
<strong style="display:block;margin-bottom:8px;">Когда отвечаем</strong>
<p style="margin:0 0 8px;">Пн-Пт: 10:00-18:00</p>
<p style="margin:0;">Срочные сообщения лучше дублировать в мессенджер.</p>
</div>
</div>Блок с цифрами
Зачем: показать опыт, объем работ, количество клиентов или другие факты без тяжелого дизайна.
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:1.25rem 0;">
<div style="padding:18px;border:1px solid color-mix(in srgb, var(--main-color, #111) 14%, transparent);text-align:center;">
<strong style="display:block;font-size:1.8rem;line-height:1;margin-bottom:6px;">10+</strong>
<span style="opacity:.85;">лет опыта</span>
</div>
<div style="padding:18px;border:1px solid color-mix(in srgb, var(--main-color, #111) 14%, transparent);text-align:center;">
<strong style="display:block;font-size:1.8rem;line-height:1;margin-bottom:6px;">250+</strong>
<span style="opacity:.85;">проектов</span>
</div>
<div style="padding:18px;border:1px solid color-mix(in srgb, var(--main-color, #111) 14%, transparent);text-align:center;">
<strong style="display:block;font-size:1.8rem;line-height:1;margin-bottom:6px;">3 дня</strong>
<span style="opacity:.85;">на старт работы</span>
</div>
</div>Карточки тарифов
Зачем: показать 2-3 формата работы не таблицей, а отдельными карточками.
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1.25rem 0;">
<div style="padding:20px;border:1px solid rgba(160, 160, 160, 0.38);">
<strong style="display:block;margin-bottom:8px;font-size:1.1rem;">Базовый</strong>
<p style="margin:0 0 10px;opacity:.88;">Разовая консультация и список следующих шагов.</p>
<strong style="display:block;margin-bottom:14px;">от 10 000 ₽</strong>
<a href="/pages/contact" style="color:inherit;font-weight:600;">Уточнить детали</a>
</div>
<div style="padding:20px;border:1px solid rgba(127, 127, 127, 0.28);background:rgba(127, 127, 127, 0.11);">
<strong style="display:block;margin-bottom:8px;font-size:1.1rem;">Оптимальный</strong>
<p style="margin:0 0 10px;opacity:.88;">Разбор, план работ и сопровождение по ходу задачи.</p>
<strong style="display:block;margin-bottom:14px;">по договоренности</strong>
<a href="/pages/contact" class="theme-btn-primary" style="display:inline-block;padding:10px 18px;text-decoration:none;font-weight:600;background-color:var(--main-color, #000);color:var(--main-on-color, #fff);">Оставить заявку</a>
</div>
</div>Кому подойдет / кому не подойдет
Зачем: быстро отсеять нецелевые обращения и объяснить, в каких случаях услуга уместна.
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1.25rem 0;">
<div style="padding:18px;border:1px solid rgba(34, 197, 94, 0.38);background:rgba(34, 197, 94, 0.13);">
<strong style="display:block;margin-bottom:10px;">Подойдет</strong>
<ul style="margin:0;padding-left:1.2rem;">
<li>если нужна понятная структура сайта</li>
<li>если есть реальная услуга и контакты</li>
<li>если важен аккуратный запуск без перегруза</li>
</ul>
</div>
<div style="padding:18px;border:1px solid rgba(239, 68, 68, 0.38);background:rgba(239, 68, 68, 0.13);">
<strong style="display:block;margin-bottom:10px;">Не подойдет</strong>
<ul style="margin:0;padding-left:1.2rem;">
<li>если пока нет понятного предложения</li>
<li>если сайт нужен «просто чтобы был»</li>
<li>если не готовы заменить шаблонные тексты</li>
</ul>
</div>
</div>Короткий кейс
Зачем: показать маленькую историю с задачей и результатом, не уходя в длинную статью.
<div style="margin:1.25rem 0;padding:20px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.08);">
<strong style="display:block;margin-bottom:8px;font-size:1.1rem;">Кейс: обновили структуру сайта услуг</strong>
<p style="margin:0 0 10px;"><strong>Задача:</strong> убрать перегруженность с главной и сделать понятный маршрут для новых посетителей.</p>
<p style="margin:0 0 10px;"><strong>Что сделали:</strong> сократили первый экран, пересобрали меню, добавили явные призывы к действию.</p>
<p style="margin:0;"><strong>Результат:</strong> сайт стал легче читать, а обращения начали приходить с более понятными запросами.</p>
</div>Что входит в услугу
Зачем: убрать неопределенность и показать состав работы без длинного текста.
<div style="margin:1.25rem 0;padding:18px 20px;border:1px solid color-mix(in srgb, var(--main-color, #111) 14%, transparent);">
<strong style="display:block;margin-bottom:10px;">Состав работы</strong>
<p style="margin:0 0 8px;"><strong>1.</strong> Разбираем задачу и уточняем вводные.</p>
<p style="margin:0 0 8px;"><strong>2.</strong> Согласовываем объем, формат и срок.</p>
<p style="margin:0 0 8px;"><strong>3.</strong> Выполняем основную часть работы.</p>
<p style="margin:0;"><strong>4.</strong> Передаем результат и собираем обратную связь.</p>
</div>Для каких задач подходит
Зачем: быстро показать ситуации, в которых услуга особенно уместна.
<div style="margin:1.25rem 0;padding:18px 20px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.07);">
<strong style="display:block;margin-bottom:10px;">Этот формат обычно выбирают, когда нужно:</strong>
<ul style="margin:0;padding-left:1.2rem;columns:2;column-gap:2rem;">
<li>быстро запустить страницу</li>
<li>обновить старый сайт</li>
<li>упростить структуру услуг</li>
<li>сделать понятный первый экран</li>
<li>добавить блоки доверия</li>
<li>подготовить страницу к рекламе</li>
</ul>
</div>Что влияет на стоимость
Зачем: снять вопрос «почему цена именно такая» еще до переписки.
<div style="margin:1.25rem 0;padding:18px 20px;border-left:3px solid var(--main-color, #111);background:rgba(127, 127, 127, 0.07);">
<strong style="display:block;margin-bottom:8px;">На стоимость обычно влияют:</strong>
<span style="opacity:.9;">объем работы, срочность, количество страниц или блоков, подготовленность материалов и количество нестандартных задач.</span>
</div>Отзывы карточками
Зачем: показать сразу несколько коротких отзывов без отдельного блока цитаты.
<div style="margin:1.25rem 0;border-left:3px solid var(--main-color, #111);padding-left:16px;">
<p style="margin:0 0 14px;">«Стало гораздо понятнее, куда вести посетителя и как собирать заявки».<br><strong>Анна, услуги для бизнеса</strong></p>
<p style="margin:0 0 14px;">«После переработки страницы клиенты начали писать с более конкретными вопросами».<br><strong>Игорь, частная практика</strong></p>
<p style="margin:0;">«Появилась нормальная структура, а не просто набор случайных блоков».<br><strong>Мария, сервисная компания</strong></p>
</div>Финальный блок перед заявкой
Зачем: собрать в одном месте короткое резюме и последний следующий шаг.
<section style="margin:1.5rem 0;padding:24px;border:1px solid rgba(127, 127, 127, 0.24);background:rgba(127, 127, 127, 0.09);">
<strong style="display:block;font-size:1.15rem;margin-bottom:8px;">Если задача уже понятна, можно перейти к следующему шагу прямо сейчас</strong>
<p style="margin:0 0 16px;max-width:42rem;opacity:.9;">Напишите, что нужно сделать, в каком формате и в какие сроки. Если данных пока мало, начнем с короткого разбора.</p>
<a href="/pages/contact" class="theme-btn-primary" style="display:inline-block;padding:12px 22px;text-decoration:none;font-weight:600;background-color:var(--main-color, #000);color:var(--main-on-color, #fff);">Оставить заявку</a>
</section>Что дальше
Такие вставки можно искать и адаптировать под себя по запросам вроде html cta, feature grid html, contact card html, pricing cards html, stats section html, pricing table html. Смысл этого каталога не в том, чтобы собрать все подряд, а в том, чтобы дать нормальный стартовый набор, который легко переделать под свой сайт.