Инструкция по оформлению статей

  • OkayCMS - профессиональная платформа для интернет-магазина

Стилизация информационных блоков

Adalah menjadi satu fakta bahawa pembaca akan terganggu oleh text yang boleh difahami apabila melihat susunan mukasurat. Kegunaan Lorem Ipsum adalah kerana ia mempunyai susunan ayat yang kelihatan normal, yang lebih menarik berbeza dengan "Contoh disini, contoh disini".

Блок для цитат

Человек может быть гением или обладать всеми необходимыми навыками, но если он не верит в себя, он не будет выкладываться по полной. Марк Цукерберг
<div class="notice_blockquote">
<div class="inner_text">
Здесь нужно вставить цитату........
<city>Автор цитаты</city>
</div>
</div>

Информационный блок

Когда вы планируете веб-проект, приходится отвечать на тысячи вопросов. Один из них касается выбора «движка» для сайта. Обидно, если вы тратите на решение этой простой проблемы много времени
<div class="notice_info">
<div class="inner_text">
Здесь нужно вставить тект........
</div>
</div>

Блок для предупреждения или запрета

Когда вы планируете веб-проект, приходится отвечать на тысячи вопросов. Один из них касается выбора «движка» для сайта. Обидно, если вы тратите на решение этой простой проблемы много времени
<div class="notice_alert">
<div class="inner_text">
Здесь нужно вставить тект........
</div>
</div>

Блок для достижений или каких либо успешных действий

Когда вы планируете веб-проект, приходится отвечать на тысячи вопросов. Один из них касается выбора «движка» для сайта. Обидно, если вы тратите на решение этой простой проблемы много времени
<div class="notice_success">
<div class="inner_text">
Здесь нужно вставить тект........
</div>
</div>

Вывод видео-ролика с youtube

Когда в статье размещается видео с ютуба, то оно изначально не адаптивное. На мобильных устройствах оно не помещается в контейнер и из-за этого появляется горизонтальный скролл. Для того чтобы сделать его адаптивным, нужно iframe с видео обернуть в div с классом .video_box. Тогда наш iframe будет растягиваться на всю ширину контента и высота будет задаваться с учетом соотношения сторон 16:9

<div class="video_box">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BwNWHvYYL3M></iframe>
</div>

Подпись к изображениям

Чтобы связать фотографию и подпись воедино, необходимо в тег figure вставить картинку и тег figcaption c содержимым внутри текстом подписи к самой картинки.

<figure>
<img src = "путь к картинке">
<figcaption>Подпись к картинке </figcaption>
</figure>

Это подпись к изображению

Галерея изображений ( fancybox )

Для того чтобы по клику на изображение можно было вызвать увеличенную версию изображения во всплывающем окне, нужно изображение обернуть ссылкой. Путь ссылки ставим таакой же как у самого изображения и к самой ссылки добавляем аттрибут data fancybox="images".

<a href="../files/uploads/magazin_bt/web-shop_okay.jpg" data-fancybox="images">
<img src="../files/uploads/magazin_bt/web-shop_okay.jpg" alt="" width="914" height="558">
</a>

В примере который приведен выше, изображения, у которых указано одинаковое значение аттрибута data fancybox="images", будут выводиться в одну галерею. Иногда нужно реализовать галерею из других изображений или отображать только одно изображение. Для этого необходимо указать другое значение. Например data fancybox="Group1".

<a href="../files/uploads/magazin_bt/web-shop_okay.jpg" data-fancybox="Group1">
<img src="../files/uploads/magazin_bt/web-shop_okay.jpg" alt="" width="200 >
</a>
<a href="../files/uploads/magazin_bt/web-shop_okay.jpg" data-fancybox="Group2">
<img src="../files/uploads/magazin_bt/web-shop_okay.jpg" alt="" width="200">
</a>
<a href="../files/uploads/magazin_bt/web-shop_okay.jpg" data-fancybox="Group2">
<img src="../files/uploads/magazin_bt/web-shop_okay.jpg" alt="" width="200">
</a>

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

Оформление маркированного и нумированного списков

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

Оформление нумированного списка по умолчанию

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. In eget velit vulputate, aliquam tellus vel, cursus purus.
  3. Curabitur fermentum justo quis sem lacinia, pharetra bibendum purus congue.
  4. Curabitur tempor enim quis lobortis tristique.
  5. Praesent blandit turpis sed odio accumsan, a scelerisque risus ornare.

Оформление маркированного списка по умолчанию

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • In eget velit vulputate, aliquam tellus vel, cursus purus.
  • Curabitur fermentum justo quis sem lacinia, pharetra bibendum purus congue.
  • Curabitur tempor enim quis lobortis tristique.
  • Praesent blandit turpis sed odio accumsan, a scelerisque risus ornare.

Декоративное оформление нумированного списка

Добавьте к тегу ol класс .style, чтобы оформить его в декоративный стиль.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. In eget velit vulputate, aliquam tellus vel, cursus purus. Curabitur fermentum justo quis sem lacinia, pharetra bibendum purus congue. Curabitur fermentum justo quis sem lacinia, pharetra bibendum purus congue.
  3. Curabitur fermentum justo quis sem lacinia, pharetra bibendum purus congue. Curabitur tempor enim quis lobortis tristique. Curabitur tempor enim quis lobortis tristique.
  4. Curabitur tempor enim quis lobortis tristique. Praesent blandit turpis sed odio accumsan, a scelerisque risus ornare.
  5. Praesent blandit turpis sed odio accumsan, a scelerisque risus ornare. Praesent blandit turpis sed odio accumsan, a scelerisque risus ornare.

Декоративное оформление маркированного списка

Добавьте к тегу ul класс .style, чтобы оформить его в декоративный стиль.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • In eget velit vulputate, aliquam tellus vel, cursus purus.
  • Curabitur fermentum justo quis sem lacinia, pharetra bibendum purus congue.
  • Curabitur tempor enim quis lobortis tristique.
  • Praesent blandit turpis sed odio accumsan, a scelerisque risus ornare.

Примеры возможных стилизаций кнопок

Здесь приведены несколько примеров кнопок. Для их оформления достаточно к ссылкам добавить два класса. Первый это общий класс .button и второй это индивидуальный. Для простоты, вторые названия класса будут указаны в тексте самой кнопки.

Пример конверсионного блока

Самый эффективный движок для быстрого старта вашего бизнеса в интернете.
Более 4000 работающих интернет-магазинов.
Создай свой магазин!

Для вставки рекламного блока, скопируйте код ниже и вставьте его в нужное Вам место

<div class="conversion_block">
    <div class="conversion_block__image"></div>
    <div class="conversion_block__content">
        <div class="conversion_block__title"></div>
        <div class="conversion_block__list">
            <div class="conversion_block__item">
                <div class="conversion_block__text">
                    Самый эффективный движок для быстрого старта вашего бизнеса в интернете.
                </div>
                <div class="conversion_block__link">
                    <a class="conversion__link conversion__link--demo" href="/license/cart" target="_blank">
                        <span>Купить</span>
                    </a>
                </div>
            </div>
            <div class="conversion_block__item">
                <div class="conversion_block__text">
                    Более <b>4000</b> работающих интернет-магазинов.<br> Создай свой магазин!
                </div>
                <div class="conversion_block__link">
                    <a class="conversion__link conversion__link--buy" href="/demo" target="_blank">
                        <span>Бесплатное демо</span>
                    </a>
                </div>
            </div>

        </div>
    </div>
</div>

Комментарии
Ваш отзыв будет первым

Viber

Whatsapp

Telegram

Связаться с нами
Закрыть