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

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


Весь абзац будет жирным:
<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>


А еще есть кнопки:

Старая кнопа

Фотопроекты

Фотопроекты альтернатива

Фотопроекты альтернатива

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