Вы хотите отключить переполнение на своем веб-сайте WordPress?
Горизонтальная полоса прокрутки появляется, когда элемент на этой странице слишком широк для отображения и выходит за пределы экрана. Большинство тем WordPress не используют горизонтальную прокрутку, потому что это может нарушить макет вашего сайта и запутать пользователей.
В этой статье мы покажем вам простой и быстрый способ отключить переполнение в WordPress и удалить горизонтальную полосу прокрутки.
Что вызывает горизонтальную полосу прокрутки или переполнение в WordPress
При настройке вашего веб-сайта WordPress важно сделать его удобным и доступным для всех.
WordPress покажет горизонтальную полосу прокрутки, если элемент шире макета вашего сайта. Это называется «переполнение». Горизонтальная полоса прокрутки может сломать ваш дизайн и сделать ваш сайт менее удобным для пользователя.
Веб-страница с горизонтальными и вертикальными полосами прокрутки может дезориентировать посетителя и затруднять навигацию. Это может привести к тому, что люди покинут ваш сайт, что приведет к снижению конверсии и продаж.
Отключение переполнения может быть полезным для вас, так как это сделает ваш сайт более удобным и интуитивно понятным.
Отключение переполнения — чрезвычайно простой процесс. Имея это в виду, давайте посмотрим, как легко отключить горизонтальную полосу прокрутки переполнения в WordPress.
Способ 1: добавление фрагмента CSS с помощью настройщика тем
Вы можете отключить переполнение в WordPress, просто добавив код CSS в параметр «Дополнительный CSS» настройщика темы.
Все, что вам нужно сделать, это зайти в панель управления WordPress и нажать Внешний вид » Настроить.
Примечание: Вы можете увидеть вид » редактор вместо Настроить. Это означает, что ваша тема использует полнофункциональный редактор (FSE) вместо настройщика темы, и вам следует ознакомиться с нашим руководством о том, как исправить отсутствующий настройщик темы или использовать Способ 2 ниже.
Когда вы окажетесь на странице настройки, нажмите «Дополнительный CSS», а затем просто скопируйте и вставьте следующий код.
html, body {
max-width: 100%;
overflow-x: hidden;
}
После того, как вы вставите код, любое переполнение будет удалено, и вы сможете увидеть его применение на панели предварительного просмотра вашего веб-сайта.
Не забудьте нажать кнопку «Опубликовать» в верхней части страницы, когда закончите!
Способ 2: добавление фрагмента CSS с помощью WPCode
Вы также можете добавить CSS через фрагмент кода с помощью плагина WPCode.
WPкод — самый популярный плагин фрагментов кода, используемый более чем на 1 миллионе веб-сайтов. Мы рекомендуем этот метод, так как этот плагин упрощает добавление пользовательского кода в WordPress без необходимости редактировать какие-либо файлы вашей темы.
Итак, первое, что вам нужно сделать, это установить и активировать WPкод плагин на вашем сайте. Для получения более подробной информации вы можете ознакомиться с нашим пошаговым руководством по установке плагина WordPress.
Как только вы активируете плагин, он добавит новый пункт меню с надписью Фрагменты кода в панель администратора WordPress. Нажмите на нее, и вы попадете на страницу «Все фрагменты».
Нажмите кнопку «Добавить новый», чтобы добавить код CSS.
Теперь, когда вы находитесь на странице «Добавить фрагмент», вы можете либо выполнить поиск в библиотеке фрагментов WPCode, либо начать с нуля со своей собственной. Это то, что вы будете делать здесь.
Просто наведите указатель мыши на «Добавить собственный код (новый фрагмент)» и нажмите «Использовать фрагмент».
Когда вы окажетесь на странице «Создать пользовательский фрагмент», начните с ввода заголовка для своего фрагмента кода. Это только для вас, и это может быть что угодно, что поможет вам идентифицировать код.
Затем вам нужно будет выбрать «Тип кода» в раскрывающемся меню справа. Обратите внимание, что WPCode не предлагает опцию для CSS, поэтому вам нужно нажать на опцию «Универсальный фрагмент».
Далее все, что вам нужно сделать, это скопировать и вставить следующий фрагмент кода CSS в «Предварительный просмотр кода».
<style type="text/css">
html, body {
max-width: 100%;
overflow-x: hidden;
}
</style>
Это будет выглядеть так, как только вы вставите код:
После этого прокрутите вниз до раздела «Вставка». Здесь вы найдете две опции: «Автоматическая вставка» и «Шорткод».
Вы выберете опцию «Автоматическая вставка», чтобы ваш код был автоматически вставлен и выполнен на вашем сайте.
Однако, если вы просто хотите отключить горизонтальную полосу прокрутки на некоторых определенных страницах, вы можете использовать параметр условной логики в WPCode, чтобы отображать фрагмент только на определенной странице.
В качестве альтернативы вы можете использовать WP Code Pro версия для загрузки фрагментов на определенных страницах сообщений с помощью редактора блоков.
После того, как вы выбрали свой вариант, перейдите в верхнюю часть страницы и переключите переключатель с «Неактивно» на «Активно» в правом верхнем углу.
Затем просто нажмите кнопку «Сохранить фрагмент».
Вот и все! Вы только что удалили все горизонтальные полосы прокрутки на своем сайте.
Мы надеемся, что эта статья помогла вам узнать, как отключить переполнение на вашем сайте WordPress. Вы также можете ознакомиться с подборкой экспертами обязательных плагинов WordPress для развития вашего сайта и нашим руководством для начинающих о том, как создать контактную форму в WordPress.
Если вам понравилась эта статья, то, пожалуйста, подпишитесь на нашу Канал YouTube для видеоуроков WordPress. Вы также можете найти нас на Твиттер а также Фейсбук.
