БЛОГ 2410

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

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

Предлагаем обсудить, чем мы можем вам помочь. Забронируйте 15-минутную консультацию.

Поделиться статьей

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

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

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

Как добавить горизонтальную линию в WordPress
Как добавить горизонтальную линию в WordPress Изображение с сайта wpbeginner.com

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

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

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

Добавление нового блока туда, где вы хотите создать горизонтальную линию
Добавление нового блока туда, где вы хотите создать горизонтальную линию Изображение с сайта wpbeginner.com

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

Найдите и добавьте блок Separator
Найдите и добавьте блок Separator Изображение с сайта wpbeginner.com

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

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

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

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

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

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

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

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

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

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

Изменить цвет горизонтальной линии
Изменить цвет горизонтальной линии Изображение с сайта wpbeginner.com

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

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

Горизонтальная линия была изменена на широкую и синюю
Горизонтальная линия была изменена на широкую и синюю Изображение с сайта wpbeginner.com

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

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

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

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

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

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

Кнопка горизонтальной линии в классическом редакторе WordPress
Кнопка горизонтальной линии в классическом редакторе WordPress Изображение с сайта wpbeginner.com

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

Горизонтальная линейка, созданная с помощью классического редактора
Горизонтальная линейка, созданная с помощью классического редактора Изображение с сайта wpbeginner.com

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

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

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

<hr>

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

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

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

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

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

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

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

Блок Spacer в редакторе блоков
Блок Spacer в редакторе блоков Изображение с сайта wpbeginner.com

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

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

Больше Блок

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

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

Блок More в редакторе сообщений
Блок More в редакторе сообщений Изображение с сайта wpbeginner.com

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

Блок Read More в сообщении на сайте
Блок Read More в сообщении на сайте Изображение с сайта wpbeginner.com

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

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

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

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

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

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

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

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

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

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

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

Создание новой формы с использованием WPForms
Создание новой формы с использованием WPForms Изображение с сайта wpbeginner.com

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

Создание формы цитаты в WPForms
Создание формы цитаты в WPForms Изображение с сайта wpbeginner.com

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

Добавление разрыва страницы в WPForms
Добавление разрыва страницы в WPForms Изображение с сайта wpbeginner.com

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

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

Редактирование поля разрыва страницы в WPForms
Редактирование поля разрыва страницы в WPForms Изображение с сайта wpbeginner.com

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

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

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

Добавление блока WPForms на вашу страницу или сообщение
Добавление блока WPForms на вашу страницу или сообщение Изображение с сайта wpbeginner.com

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

Выберите форму из выпадающего списка
Выберите форму из выпадающего списка Изображение с сайта wpbeginner.com

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

Форма с разрывом страницы на сайте
Форма с разрывом страницы на сайте Изображение с сайта wpbeginner.com

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

Свяжитесь с нами.

Узнайте, чем мы можем быть для вас полезны.

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

Агентство веб разработки.

Услуги программирования и веб разработки по фиксированной цене. Специализация: WordPress, разработка B2B решений и создание кастомных скриптов.

WordPress

Разработка шаблонов, плагинов, интернет магазинов на WooCommerce, создание сайтов

Подробнее

B2B решения

CRM, ERP, внутренние системы, автоматизация, калькуляторы, SaaS и индивидуальные решения

Подробнее

Программирование

Разработка кастомных скриптов, API, интеграции, Zapier, Integromat, автоматизация

Подробнее

Подписка

Безлимитные услуги графического дизайна и веб разработки по фиксированной цене

Подробнее