графические элементы, разделяющие сплошной текст

ЗАГОЛОВОК

<h2>Заголовок</h2>

ССЫЛКИ

Внутренняя

Вот пример ссылки на внутреннюю страницу, например Контакты.

<a target="_blank" href="/kontakty">Контакты</a>.

Внешняя

Вот пример ссылки на внешнюю страницу, например Яндекс.

<a target="_blank" rel="nofollow" href="https://ya.ru">Яндекс</a>

Вот пример ссылки на внешнюю страницу невидимой поисковыми системами
<span class="hidden-link" data-link=""></span>
 
Где в data-link"" необходимо вставить внешнюю ссылку.

Примечание. Для правильной работы необходимо добавить в файл header и footer соответствующий код

Создание якоря

Создать метку в ссылке, например: <a href="{URL страницы}#1">Первый раздел</a>, <br>
где 1 - метка раздела

Поставить ссылку напротив раздела <a name="1"></a>Первый раздел

СПИСКИ

Маркированный

Первый элемент списка
Второй элемент списка
Третий элемент списка
Четвертый элемент списка
Пятый элемент списка

<ul>
  <li>Первый элемент списка</li>
  <li>Второй элемент списка</li>
  <li>Третий элемент списка</li>
  <li>Четвертый элемент списка</li>
  <li>Пятый элемент списка</li>
</ul>

Нумерованный

Первый элемент списка
Второй элемент списка
Третий элемент списка
Четвертый элемент списка
Пятый элемент списка

<ol>
  <li>Первый элемент списка</li>
  <li>Второй элемент списка</li>
  <li>Третий элемент списка</li>
  <li>Четвертый элемент списка</li>
  <li>Пятый элемент списка</li>
</ol>

СНОСКИ

Обычная

<blockquote>Вася Пупкин</blockquote> или нажатие клавиш (Alt+Shift+Q)

Вася Пупкин

Просто рамка без фона по центру



[dropshadowbox align="center" effect="perspective-left" width="auto" height="" background_color="#ffffff" border_width="2" border_color="#20ed52" ]Вася Пупкин[/dropshadowbox]

Рамка с серым фоном (положение не выбрано)



[dropshadowbox align="none" effect="lifted-both" width="auto" height="" background_color="#ffffff" border_width="1" border_color="#dddddd" ]Вася Пупкин[/dropshadowbox]

Яркая



[dropshadowbox align="center" effect="perspective-left" width="auto" height="" background_color="#00BFFF" border_width="2" border_color="#20ed52" ]Вася Пупкин[/dropshadowbox]

При желании также можно изменять параметры рамки в форме вручную, например, цвет фона, цвет границ рамки, их толщину и т.д.

Примечание. Рамки начинают работать только при установке и активации плагина Drop Shadow Boxes.

ИЗОБРАЖЕНИЯ

Обычная вставка изображения (с увеличением):




<a href="https://{ваш сайт}">
<img class="aligncenter" title="" srcset="https://{ваш сайт}/wp-content/uploads/1/1.jpg" alt="" width="300" height="200"></a>

Где https://{ваш сайт}/wp-content/uploads/1/1.jpg - путь к изображению 1.jpg, хранящемуся в папке 1.

Обычная вставка изображения (без увеличения):

<img class="aligncenter" title="" srcset="https://{ваш сайт}/wp-content/uploads/1/1.jpg" alt="" width="300" height="200">

Где /wp-content/uploads/1/1.jpg нужно заменить на путь к вашему изображению!

Картинка слева, текст справа (с увеличением)

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.



<a href="https://{ваш сайт}">

<img src="https://{ваш сайт}/wp-content/uploads/1/1.jpg" alt="" width="300" height="200" class="leftimg">

Для уменьшения размера выравниваемой слева или справа картинки, измените, например, атрибут width=»100″ в тэг img, где 100 — размер по ширине в пикселях (высота выровняется пропорционально). Пример:



<img src="https://{ваш сайт}/wp-content/uploads/1/1.jpg" alt="" width="100" class="leftimg">

Картинка слева, текст справа (без увеличения)



<img src="https://{ваш сайт}/wp-content/uploads/1/1.jpg" alt="" width="300" height="200" class="leftimg">

Картинка справа, текст слева (с увеличением)



<a href="https://{ваш сайт}">

<img src="https://{ваш сайт}/wp-content/uploads/1/1.jpg" alt="" width="300" height="200" class="rightimg">

Картинка справа, текст слева (без увеличения)



<img src="https://{ваш сайт}/wp-content/uploads/1/1.jpg" alt="" width="300" height="200" class="rightimg">

ВИДЕО

<div align="center"><iframe src="https://www.youtube.com/embed/XXX" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></div>;

<div class="b-video" data-video="XXX"></div>

* XXX — код видео YouTube.

Дополнение

В файл темы header перед тегом

</head>

загрузить следующий код:

<style type="text/css">
span.hidden-link {
	color: #0000ff; /*-цвет ссылки – синий-*/
	text-decoration: underline; /*-подчеркивание-*/
	cursor: pointer; /*-указатель в виде пальца-*/
}


</style>
	
	/* Обтекание картинки текстом */
	<style>
   .leftimg {
    float:left; /* Выравнивание по левому краю */
    margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
   }
   .rightimg  {
    float: right; /* Выравнивание по правому краю  */ 
    margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
   }
  </style>
	
<!-- Java-скрипты-->

<!-- Подключение библиотеки jQuery -->

<script src="https://code.jquery.com/jquery-3.0.0.min.js"> </script>

<script language=JavaScript src="images/scripts.js" 

type=text/javascript></script>

<script language=JavaScript type=text/javascript>

</script>

В файл footer перед тегом

</body>

ввести следующий код:

<script>$('.hidden-link').click(function(){window.open($(this).data('link'));return false;});</script>

Порядок работы с плагином Drop Shadow Boxes

1. Загрузить и активировать плагин Drop Shadow Boxes.
2. В текстовом редакторе появляется клавиша добавления рамки.

3.	В тексте выбрать щелчком левой кнопкой мыши место куда надо вставить рамку.
4.	Скопировать вставляемый в рамку текст и щелкнуть по клавише “Add Box”.
5.	Во всплывающем окне набрать параметры рамки, ввести скопированный текст (6) и нажать “Insert Box” (7).

Пояснения. В окне Effect (1) осуществляется выбор границ рамки:
- поднять обе, левую или правую;
- витые границы, левая или правая, нижняя или верхняя.
В  окне Background (фон) (2)  посредством ползунка можно выбрать его цвет или ввести код вручную.
В окне Alignment (Выравнивание) (3)  осуществляется выравнивание рамки по левой, правой стороне или по центру.
Далее определяется высота и ширина границы в пикселях
В окне Border (Граница) (4) выбирается толщина границы в пикселях, а рядом (5) задается ee цвет, как в (2).


6. В текстовом редакторе появляется конструкция с указанными параметрами границы.
7. После обновления страницы и перехода на сайт в статье появляется текст в рамке.

Блог Ивана Комиссарова

Типографика