Как работать с наполнением сайта в системе OKsoft часть 1

Ваш сайт Oksoft подключен к системе, которая позволяет без специального обучения делать описания, новости и статьи красивыми, стильными и продающими!

Хотите легко и быстро сделать описание к товару или новость на вашем сайте? Просто приготовьте ваш текст и начнем!

Задача - сделать описание на сайте в виде такой карточки:

...
Omega-3/Омега-3 1000 мг желатиновые капсулы массой 1382 мг 200 шт

Активное вещество: Концентрат рыбьего жира

Состав: Концентрат рыбьего жира, альфа-токоферол, оболочка капсулы (говяжий желатин, глицерин, вода) Показания: В качестве биологически активной добавки к пище – дополнительного источника полиненасыщенных жирных кислот (ПНЖК), семейства омега-3 (эйкозапентаеновой и докозагексаеновая кислот) Противопоказания: Индивидуальная непереносимость компонентов продукта, беременность, кормление грудью. Перед применением рекомендуется проконсультироваться с врачом.
Способ применения и дозы: Взрослым по 2 капсулы в день во время еды. Продолжительность приема - 1 месяц. При необходимости прием можно повторить

Приготовим текст:

Omega-3/Омега-3 1000 мг желатиновые капсулы массой 1382 мг 200 шт

Активное вещество: Концентрат рыбьего жира

Состав: Концентрат рыбьего жира, альфа-токоферол, оболочка капсулы (говяжий желатин, глицерин, вода)

Показания: В качестве биологически активной добавки к пище – дополнительного источника полиненасыщенных жирных кислот (ПНЖК), семейства омега-3 (эйкозапентаеновой и докозагексаеновая кислот) Противопоказания Индивидуальная непереносимость компонентов продукта, беременность, кормление грудью. Перед применением рекомендуется проконсультироваться с врачом.

Способ применения и дозы: Взрослым по 2 капсулы в день во время еды. Продолжительность приема - 1 месяц. При необходимости прием можно повторить

1. Как покрасить заголовок:

Для того чтобы выделить заголовок в тексте, нужно указать вот такой код: <h5 class="text-danger"> ... </h5>. Для вашего сайта уже заложены цветовые настройки (классы) для определения цветовой гаммы. Рекомендуется использовать именно их, тогда цвета будут одинаковыми на всех страницах.

<h5 class="text-danger"> Omega-3/Омега-3 1000 мг желатиновые капсулы массой 1382 мг 200 шт </h5>

Вот такие классы можно использовать для ваших цветовых настроек:

text-primary - Красит текст в основной фирменный цвет вашего сайта

text-secondary - Красит текст в дополнительный фирменный цвет вашего сайта

text-success - Для сообщений об успехе

text-danger - Для текстов, на которые нужно обратить особое внимание

text-warning - Для предупреждающих текстов

text-muted - Делает цвет текста приглушенным

text-info - Для информационных сообщений

text-bg-dark - Делает светлый текст на темном фоне

Получилось:

Omega-3/Омега-3 1000 мг желатиновые капсулы массой 1382 мг 200 шт
Тут можно посмотреть полную статью про цвета в системе

2. Как сделать шрифт жирным:

Чтобы текст стал жирным, нужно указать в коде class="..." этого текста fw-bold, например class="fw-bold", текст станет жирным. Можем еще добавить класс курсива fst-italic, получится class="fst-italic" Вот так:

<p class="fw-bold"> Активное вещество: Концентрат рыбьего жира </p>
<p class="fst-italic "> Активное вещество: Концентрат рыбьего жира </p>
<p class="fst-italic fw-bold"> Активное вещество: Концентрат рыбьего жира </p>

Получаем:

Активное вещество: Концентрат рыбьего жира

Активное вещество: Концентрат рыбьего жира

Активное вещество: Концентрат рыбьего жира

3. Размер текста Можем указать размер шрифта для отдельной строчки или текстового блока, а также слова. В системе уже настроены 5 размеров, можно указать в class="..." от fs-1 до fs-5, где fs-1 - самый крупный, а fs-5 самый маленький

fs-5 Активное вещество: Концентрат рыбьего жира

fs-4 Активное вещество: Концентрат рыбьего жира

fs-3 Активное вещество: Концентрат рыбьего жира

fs-2 Активное вещество: Концентрат рыбьего жира

fs-1 Активное вещество: Концентрат рыбьего жира

Тут можно посмотреть полную статью про шрифт - размеры, толщину и курсив

4. Иконки. Отличный способ сделать ваш текст легко читаемым и отметить важные места в нем. В нашей системе иконки используются ну очень просто. Заходим на страничку с иконками и выбираем понравившуюся. Кликаем на иконку и копируем код. Такие иконки ведут себя совершенно так же как буквы! то есть их можно красить, менять размер и добавлять жирность, используя те же коды что и для текста. Класс вставляем совершенно так же как и для текста, внутри кавычек class="..." , например <i class="bi bi-alarm ...">

<p><i class="bi bi-alarm"> </i>Будильник, обычный текст </p>
<p><i class="bi bi-apple text-success"> </i> Активное вещество: Концентрат рыбьего жира Яблоко, цвет text-success </p>
<p><i class="bi bi-balloon-heart text-warning fs-3"> </i> Активное вещество: Концентрат рыбьего жира Яблоко, цвет text-success </p>

<p><i class="bi bi-check-circle-fill text-info"> </i> Показания: В качестве биологически активной добавки к пище – дополнительного источника полиненасыщенных жирных кислот (ПНЖК), семейства омега-3 (эйкозапентаеновой и докозагексаеновая кислот) </p>


Будильник, обычный текст

Яблоко, цвет text-success

Шарик-сердечко, цвет text-warning размер fs-3

Показания: В качестве биологически активной добавки к пище – дополнительного источника полиненасыщенных жирных кислот (ПНЖК), семейства омега-3 (эйкозапентаеновой и докозагексаеновая кислот)

5. Упаковываем в рамочку (карточку) Рамочки вокруг текста делают его аккуратнее, а если текстовый блок небольшой, разместить его в виде карточки - самое идеальное. Для этого вокруг нашего текста добавляем card :

<div class="card">
<div class="card-header">
Шапка (header) карточки
</div>
<div class="card-body">
Тело карточки
</div>
<div class="card-footer">
Подвал (footer) карточки
</div>
</div>

Дадим для карточки большую тень, добавив class="card shadow-lg" и покрасим последнюю строчку текста фоновым цветом bg-info-subtle

<div class="card shadow-lg">
<div class="card-header">
<h5> Omega-3/Омега-3 1000 мг желатиновые капсулы массой 1382 мг 200 шт </h5>
</div>
<div class="card-body">
<p>Активное вещество: Концентрат рыбьего жира</p>
<p> ><i class="bi bi-check-circle-fill text-info"> </i> Состав: Концентрат рыбьего жира, альфа-токоферол, оболочка капсулы (говяжий желатин, глицерин, вода)</p>
<p> ><i class="bi bi-check-circle-fill text-info"> </i> Показания: В качестве биологически активной добавки к пище – дополнительного источника полиненасыщенных жирных кислот (ПНЖК), семейства омега-3 (эйкозапентаеновой и докозагексаеновая кислот) Противопоказания Индивидуальная непереносимость компонентов продукта, беременность, кормление грудью. Перед применением рекомендуется проконсультироваться с врачом. </p>
<p class="bg-info-subtle">><i class="bi bi-check-circle-fill text-info"> </i> Способ применения и дозы: Взрослым по 2 капсулы в день во время еды. Продолжительность приема - 1 месяц. При необходимости прием можно повторить </p>
</div>
<div class="card-footer">
<p><i class="bi bi-file-text me-2"> </i> Сертификаты</p>
<p><i class="bi bi-chat-right-heart me-2"> </i> Посмотреть отзывы</p>
</div>
</div>

Вот что вышло:

Omega-3/Омега-3 1000 мг желатиновые капсулы массой 1382 мг 200 шт

Активное вещество: Концентрат рыбьего жира

Состав: Концентрат рыбьего жира, альфа-токоферол, оболочка капсулы (говяжий желатин, глицерин, вода) Показания: В качестве биологически активной добавки к пище – дополнительного источника полиненасыщенных жирных кислот (ПНЖК), семейства омега-3 (эйкозапентаеновой и докозагексаеновая кислот) Противопоказания: Индивидуальная непереносимость компонентов продукта, беременность, кормление грудью. Перед применением рекомендуется проконсультироваться с врачом.

Способ применения и дозы: Взрослым по 2 капсулы в день во время еды. Продолжительность приема - 1 месяц. При необходимости прием можно повторить

Можно использовать разные размеры тени :

shadow-sm - тень маленького размера
shadow - обычная тень
shadow-lg - большая тень

Можно использовать такие фоны :

bg-primary
bg-primary-subtle
bg-secondary
bg-secondary-subtle
bg-success
bg-success-subtle
bg-danger
bg-danger-subtle
bg-warning
bg-warning-subtle
bg-info
bg-info-subtle
bg-light
bg-light-subtle
bg-dark
bg-dark-subtle
bg-body-secondary
bg-body-tertiary
bg-body
bg-black
bg-white
bg-transparent

Ваша работа в редакторе OKoft CMS выглядит даже проще чем представлено в данной статье. Все блоки подкрашиваются в разные цвета, редактор автоматически сделает закрывающий тег или подсветит красным там где вы забыли это сделать.
Месторасположение сохраняется и очень легко видно в структуре страницы:

как сверстать красивые страницы сайта с помощью системы управления OKsoft CMS

Другие части: Часть 2 Часть 3

Поделиться:

Скопировать ссылку