Как добавить разделитель горизонтальных линий в WordPress (5 методов)

/

Вы хотите добавить горизонтальную линию через свой пост или страницу в WordPress?

Горизонтальные разделители строк - отличный способ разбить длинные сообщения на более мелкие разделы, выделить специальные объявления или рекламные акции и четко разделить разные части страницы.

В этой статье мы покажем вам, как легко добавить горизонтальный разделитель линий в WordPress.

Как добавить горизонтальную линию в WordPress

Поскольку это исчерпывающее руководство о том, как добавить горизонтальный разделитель линий в WordPress, вам может быть полезно использовать нашу таблицу содержания:

Добавление горизонтальной линии в редакторе блоков WordPress

Чтобы добавить горизонтальную линию с помощью редактора блоков WordPress, щелкните значок (+), чтобы добавить новый блок туда, где вы хотите, чтобы линия была.

Добавление нового блока туда, где вы хотите создать горизонтальную линию

Затем выберите блок Separator в разделе Layout Elements или найдите его с помощью панели поиска.

Найдите и добавьте блок Separator

После добавления вы увидите горизонтальный разделитель в области содержимого.

Стилизация горизонтальной линии в редакторе блоков WordPress

По умолчанию горизонтальный разделитель - это бледно-серая линия, пересекающая центр вашего сообщения или страницы.

Вы можете изменить его внешний вид, щелкнув строку, чтобы выбрать ее блок. Затем в правой части экрана откроется панель редактирования «Блокировать».

Щелкните блок Separator, чтобы выбрать его и отредактировать настройки.

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

Вы можете изменить горизонтальную линию на одну из следующих, если хотите:

  • Широкая линия, покрывающая всю ширину содержания вашего сообщения.
  • Три точки в центре вашего сообщения.

Различные стили, доступные для блока Separator

Примечание. В некоторых темах WordPress и широкая линия, и линия по умолчанию будут покрывать всю ширину вашего сообщения.

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

Изменить цвет горизонтальной линии

Если вы хотите вернуться к серому цвету по умолчанию, просто нажмите кнопку «Очистить» под опциями цвета.

Здесь наша горизонтальная линия синего цвета и использует «широкий» стиль.

Горизонтальная линия была изменена на широкую и синюю

Добавление горизонтальной линии в классическом редакторе WordPress

Если вы все еще пользуетесь классическим редактором, вы можете добавить базовые горизонтальные линии. Для этого просто отредактируйте существующий пост или страницу или создайте новую.

Если вы видите только один ряд кнопок на панели инструментов над редактором сообщений, щелкните значок переключения панели инструментов справа:

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

Это откроет второй ряд кнопок, который включает вариант горизонтальной линии.

Теперь сделайте разрыв строки между абзацами там, где вы хотите разместить горизонтальную линию. Затем вы можете нажать кнопку «Горизонтальная линия». Это второй слева во втором ряду:

Кнопка горизонтальной линии в классическом редакторе WordPress

Ваша горизонтальная линия будет светло-серой. Он будет занимать всю ширину вашего сообщения следующим образом:

Горизонтальная линейка, созданная с помощью классического редактора

Добавление разделителя горизонтальной линии вручную с помощью HTML

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

Если да, вы можете просто сделать это, используя HTML-тег hr в своем контенте:

<hr>

Это добавит горизонтальный разделитель линий в содержание вашего сообщения.

Другие разделители, которые вы можете использовать в своих сообщениях и страницах

Редактор блоков WordPress по умолчанию позволяет добавлять несколько типов разделителей к вашим сообщениям и страницам.

Помимо разделителя горизонтальной линии, другие параметры в наборе блоков «Элементы макета» включают в себя разделитель, ссылку «Еще» и блоки «Разрыв страницы».

Разделительный блок

Разделитель позволяет добавлять пробелы между блоками. Например, если вы хотите, чтобы в конце сообщения перед специальным предложением был небольшой промежуток, вы можете использовать разделитель.

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

Блок Spacer в редакторе блоков

А вот как разделитель отображается на вашем сайте:

Как разделительный блок отображается на странице или в публикации

Больше Блок

Если ваша тема показывает полные сообщения (а не отрывки) на главной странице вашего блога, то добавление ссылки «Еще» прервет ваш пост на этом этапе. Посетитель может щелкнуть, чтобы узнать больше.

Вот как это выглядит, когда вы создаете свой пост:

Блок More в редакторе сообщений

А вот как ссылка "Еще" появляется на вашем сайте:

Блок Read More в сообщении на сайте

Вы можете узнать больше о выдержках из нашего руководства о том, как легко настроить выдержки в WordPress.

Блок разрыва страницы

Разрыв страницы позволяет разделить длинные сообщения блога на несколько страниц. Вы не можете его никак изменить. Вот как это выглядит, когда вы создаете свой пост:

Блок разрыва страницы, отображаемый в редакторе блоков

А вот как появляется разрыв страницы на вашем сайте:

Разрыв страницы, как он отображается на сайте

Любой из них может быть хорошей альтернативой добавлению горизонтальной линии в WordPress, в зависимости от того, что вы хотите сделать.

Добавление разрыва страницы в формы WordPress с помощью WPForms

Что, если вы хотите сделать паузу не в записи или странице, а в контактной форме WordPress? Вы тоже можете это сделать. Мы собираемся использовать для этого WPForms.

Во-первых, вам нужно скачать, установить и активировать плагин WPForms. Если вы не знаете, как это сделать, просто ознакомьтесь с нашим пошаговым руководством по установке плагина WordPress.

Затем перейдите в WPForms »Добавить новый на панели инструментов WordPress.

Создание новой формы с использованием WPForms

Введите имя для своей формы, затем выберите шаблон. Мы собираемся использовать шаблон «Запросить форму предложения». Наведите указатель мыши на шаблон и нажмите кнопку, чтобы создать форму.

Создание формы цитаты в WPForms

Затем прокрутите вкладку «Добавить поля» с левой стороны до раздела «Необычные поля». Перетащите разрыв страницы в любое место формы. Мы помещаем его прямо перед полем запроса.

Добавление разрыва страницы в WPForms

Вы увидите, что форма теперь разбита на две части. WPForms также автоматически добавил кнопку «Далее».

Вы можете изменить метку «Далее», если хотите, и вы можете добавить кнопку «Назад», чтобы перейти на вторую страницу формы. Просто щелкните поле разрыва страницы, чтобы отредактировать его.

Редактирование поля разрыва страницы в WPForms

По завершении сохраните форму, нажав кнопку «Сохранить» в правом верхнем углу.

Теперь вы можете добавить форму на свой сайт. Сначала вам нужно создать новую запись или страницу или отредактировать существующую.

Нажмите (+), чтобы добавить новый блок к своему сообщению или странице и найдите блок WPForms. Вы можете использовать панель поиска или заглянуть в раздел «Виджеты». Добавьте блок на свою страницу.

Добавление блока WPForms на вашу страницу или сообщение

Теперь выберите свою форму из раскрывающегося списка.

Выберите форму из выпадающего списка

Как только вы это сделаете, вы можете опубликовать сообщение или страницу и посмотреть, как ваша форма выглядит на вашем сайте.

Форма с разрывом страницы на сайте

Мы надеемся, что этот урок помог вам научиться добавлять разделители горизонтальных линий в WordPress. Если вы хотите добавить больше элементов дизайна и макета в свои сообщения и страницы, ознакомьтесь с нашей статьей о лучших конструкторах страниц WordPress с перетаскиванием.

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как отключить JSON REST API в WordPress

WordPress 4.4 добавил долгожданный JSON REST API. Он отлично подходит для разработчиков плагинов, но многие владельцы сайтов могут вообще не счесть его полезным.

Как перейти с Blogger на WordPress без потери рейтинга Google

Вы хотите перенести свой блог с Blogger на WordPress? Хотя Blogger - отличный бесплатный инструмент для ведения блога, многие новички вскоре осознают его ограничения

Как легко создать промежуточный сайт для WordPress (шаг за шагом)

Вы хотите создать промежуточный сайт для WordPress, но не знаете, с чего начать? Промежуточный сайт WordPress - это тестовый сайт, который вы можете использовать

Как исправить ошибку WordPress не удалось открыть поток

Вы видите ошибку «не удалось открыть поток» в WordPress? Эта ошибка обычно указывает расположение скриптов, в которых возникла ошибка. Однако начинающим