Расскажи друзьям

Не поеду!
Я уже поехал!
Подпишись на еженедельную рассылку БигПикчи и получи
400 рублей
на первую поездку с такси Gett
Нет!
Я уже подписан!
Подпишись на еженедельную рассылку БигПикчи и получи
400 рублей
на первую поездку с такси Gett

Возможности верстки

Возможные форматы оформления:


Весь абзац будет жирным:
<p class=”bold”> XXX </p>


Текст цитаты:
<p class=”quote”> XXX </p>


Выделение абзаца цветом:
<p class=”select”> XXX </p>


Картинка на всю ширину контента: по умолчанию все картинки растягиваются

Подпись картинки

код картинки выше – обычный формат WordPress: описание IMG, “обернутое” в DIV c подписью картинки в P:
<div class=”wp-caption”> <img src=”" class=”size-full wp-image-0″ title=”XXX”><p class=”wp-caption-text”>Подпись картинки</p></div>


Далее идет картинка с выравниванием ВЛЕВО и обтеканием текстом СПРАВА:

код картинки содержит название класса side-left в описании картинки: <img src=”" class=”side-left” title=”XXX”>
при этом нужно учитывать, что картинка займет 40% ширины контента слева, и текст пойдет справа

sdfsdfsdfsfd

sdfsdfsdfsfd

sdfsdfsdfsfd


Далее идет картинка с выравниванием ВПРАВО и обтеканием текстом СЛЕВА:

код картинки содержит название класса side-left в описании картинки: <img src=”" class=”side-right” title=”XXX”>
при этом нужно учитывать, что картинка займет 40% ширины контента справа, и текст пойдет слева

sdfsdfsdfsfd

sdfsdfsdfsfd

sdfsdfsdfsfd


Теперь пример простого центрирования картинки

Текст будет сверху

и снизу, а картинка будет посередине между абзацами.
код картинки содержит название класса side-center в описании: <img src=”" class=”side-center” title=”XXX”>

При обычной загрузке картинок в пост, описание их будет выглядеть <img … class=”size-full wp-image-XXXX”>. Для центрирования в этой строке надо заменить size-full на side-center, не трогая других параметров.


И последний пример – просто вывод картинки без стиля

Это значит, что картинка будут выводиться с выравниванием влево, того размера, какой у нее есть

код картинки содержит название класса side-clear в описании: <img src=”" class=”side-clear” title=”XXX”>


Эмбеды, инстаграмы, iframe. По умолчанию, они занимают 100% ширины контента.

Чтобы изменить масштабирование таких блоков, например, до 70% от ширины контента, в конце поста нужно вставить следующую строку:

<style>iframe {width:70% !important; max-width:70% !important;} .instagram-media{margin: 15px auto !important;}</style>


Вот и все новые возможности по управлению контентом.
Удачи в работе!

Система Orphus