Топ-100

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

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


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


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


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


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

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

код картинки выше — обычный формат Word­Press: описание 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% ширины контента слева, и текст пойдет справа 

sdfs­dfs­dfsfd

sdfs­dfs­dfsfd

sdfs­dfs­dfsfd


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

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

sdfs­dfs­dfsfd

sdfs­dfs­dfsfd

sdfs­dfs­dfsfd


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

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

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

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

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

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

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


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

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

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


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

Старая кнопа

Фотопроекты

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

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

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