Семантични секции в страница (page semantic secionts)

Semantic sections позволяват на редактора да маркира части от съдържанието според тяхната роля, без да променя структурата на страницата.

Редакторът продължава да работи в основното HTML съдържание на страницата, но при нужда може да огради важен блок със:

<section class="section section-hero">
    <h1>Основно обещание на страницата</h1>
    <p>Кратко пояснение за кого е страницата и какъв резултат предлага.</p>
</section>

Основно правило

Всеки section има две CSS class стойности:

section section-{име}

Пример:

<section class="section section-solution">
    <h2>Нашето решение</h2>
    <p>Описание на продукта, услугата или подхода.</p>
</section>

• section – казва, че това е семантична секция.
• section-solution – казва каква е ролята на секцията.

Най-често използвани секции

• section-hero – основно обещание / първи екран
• section-intro – въведение
• section-problem – проблем или нужда
• section-solution – решение
• section-benefits – ползи
• section-features – характеристики
• section-proof – доказателства, резултати, доверие
• section-offer – оферта
• section-action – действие / CTA
• section-faq – често задавани въпроси

Примерна страница

<section class="section section-hero">
    <h1>Бърза поддръжка на компютри за малък бизнес</h1>
    <p>Помагаме ви да работите спокойно, без забавяния и технически прекъсвания.</p>
</section>

<section class="section section-problem">
    <h2>Кога имате нужда от сервиз?</h2>
    <ul>
        <li>Компютрите работят бавно.</li>
        <li>Софтуерът често блокира.</li>
        <li>Нямате човек, който да реагира бързо.</li>
    </ul>
</section>

<section class="section section-solution">
    <h2>Как помагаме?</h2>
    <p>Предлагаме диагностика, ремонт, профилактика и абонаментна поддръжка.</p>
</section>

<section class="section section-action">
    <h2>Имате нужда от помощ?</h2>
    <p>Свържете се с нас за бърза консултация.</p>
</section>

Какво може да използва редакторът вътре в section

Вътре в секциите могат да се използват стандартни HTML елементи:

• заглавия: h1, h2, h3
• параграфи: p
• списъци: ul, ol, li
• удебеляване: strong, b
• курсив: em, i
• линкове: a
• снимки: img
• таблици, ако са нужни за структурирани данни

Какво да се избягва

• Да не се използват сложни inline стилове за layout.
• Да не се влагат прекалено много section-и един в друг.
• Да не се използват section-и само за визуален ефект.
• Да не се заменя смисълът на съдържанието с дизайн класове.

Важно

Ако темата поддържа semantic sections, тя може да изведе отделни секции на специални места — например section-hero в hero зона, section-action до форма за контакт или section-faq преди финалния CTA.

Ако темата не ги поддържа, съдържанието пак остава валиден HTML и може да се покаже като обикновен текст на страницата.