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

Вы хотите добавить или убрать пустое пространство между блоками WordPress?

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

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

Зачем добавлять или удалять пустое пространство между блоками WordPress?

WordPress упрощает создание пользовательских страниц и постов с помощью встроенного редактора блоков WordPress.

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

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

Учитывая это, давайте рассмотрим, как добавить или удалить пустое пространство между блоками WordPress на вашем сайте. Просто используйте быстрые ссылки ниже, чтобы сразу перейти к методу, который вы хотите использовать.

• Добавление пустого пространства с помощью редактора блоков WordPress
• Добавление или удаление пустого пространства путем добавления кода в WordPress
• Добавление или удаление пустого пространства с помощью CSS Hero
• Добавление или удаление пустого пространства с помощью SeedProd

Метод 1. Добавление пустого пространства между блоками WordPress с помощью редактора блоков

Самый простой способ добавить пустое пространство между блоками — использовать редактор блоков WordPress. Есть встроенный блок интервалов, который позволяет добавить пустое пространство парой щелчков мыши.

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

Затем найдите в поиске ‘Spacer’ и выберите блок.

Это автоматически вставит разделитель на страницу.

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

Как только вы закончите, нажмите кнопку «Обновить», чтобы сохранить изменения.

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

Способ 2. Добавление или удаление пустого пространства между блоками WordPress с помощью пользовательского CSS

Еще один способ как добавить, так и удалить пустое пространство между блоками — это добавить пользовательский CSS-код в вашу тему.

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

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

Затем нажмите на пункт меню ‘Block’ в правой части панели опций.

После этого прокрутите вниз до выпадающего списка «Дополнительно» и нажмите на него. Откроется набор дополнительных опций для этого блока.

Затем в поле ‘Дополнительные классы CSS’ добавьте следующий код:

.add-remove-bottom-space

Этот фрагмент создает новый CSS-класс специально для этого блока.

После этого нажмите кнопку ‘Обновить’, чтобы сохранить изменения.

Далее перейдите к пункту Внешний вид » Настроить откройте настройщик темы WordPress.

Затем прокрутите вниз и нажмите на пункт меню ‘Additional CSS’.

Появится поле, в которое можно добавить код CSS.

Далее, вставьте следующий фрагмент кода в поле.

.add-remove-bottom-space

Этот фрагмент кода устанавливает нижнее поле на ноль и удаляет пустое пространство из блока. Если вы хотите добавить пространство внизу, то просто измените ‘0’ на что-то вроде ’20px’.

После внесения изменений не забудьте нажать кнопку «Опубликовать», чтобы изменения вступили в силу.

Сохранение пользовательского CSS-кода с помощью плагина

При добавлении пользовательского CSS в настройщике темы WordPress, он будет сохранен только для той темы, которую вы используете в данный момент. Если вы меняете тему WordPress, то вам нужно будет скопировать код CSS в новую тему.

Если вы хотите, чтобы ваш пользовательский CSS применялся независимо от используемой темы, то вам нужно использовать плагин Simple Custom CSS.

Первое, что вам нужно сделать, это установить и активировать плагин. Для более подробной информации смотрите наше руководство о том, как установить плагин WordPress.

После активации просто перейдите в раздел Внешний вид » Пользовательский CSS и добавьте свой пользовательский CSS-код.

Когда вы закончите, нажмите кнопку ‘Update Custom CSS’, чтобы сохранить изменения.

Метод 3. Добавление или удаление пустого пространства между блоками WordPress с помощью CSS Hero

Другой удобный для новичков способ добавить или удалить пустое пространство между блоками WordPress — это использование плагина WordPress custom CSS. Это позволит вам вносить визуальные изменения в ваш блог WordPress без редактирования кода CSS.

Мы рекомендуем использовать плагин CSS Hero. Он позволяет редактировать практически все стили CSS на вашем сайте WordPress, не написав ни строчки кода.

Действуйте: Читатели WPBeginner могут получить скидку 34%, используя наш код купона CSS Hero.

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

После активации вам нужно нажать кнопку ‘Proceed to Product Activation’, чтобы активировать плагин. Вы найдете эту кнопку прямо над списком установленных плагинов.

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

Далее, вам нужно открыть страницу или пост, который вы хотите отредактировать, затем нажмите кнопку ‘CSS Hero’ в верхней части панели инструментов администратора WordPress.

Откроется та же страница с запущенным поверх нее CSS Hero. Плагин использует визуальный редактор, поэтому вы сможете вносить изменения в режиме реального времени.

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

Чтобы убрать или добавить пустое пространство между блоками, просто нажмите на опцию «Пространства», а затем прокрутите вниз до раздела «Отступ снизу».

Здесь вы можете перемещать ползунок вверх или вниз, чтобы добавить или убрать пустое пространство.

Все внесенные изменения будут автоматически отображаться на вашей странице.

Как только вы закончите вносить изменения, вам нужно нажать кнопку ‘Save’, чтобы изменения вступили в силу.

Метод 4. Добавление или удаление пустого пространства между блоками WordPress с помощью SeedProd

SeedProd — это лучший конструктор страниц, используемый более чем 1 миллионом веб-сайтов.

Вы можете использовать библиотеку из 150+ шаблонов для создания пользовательских страниц 404, страниц продаж, целевых страниц и многого другого. SeedProd можно использовать даже для создания пользовательской темы WordPress без написания кода.

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

В процессе настройки страницы вы можете добавить пространство в любом месте с помощью блока Spacer.

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

Затем вы можете использовать слайдер для регулировки его высоты.

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

Это вызовет панель опций слева. Затем перейдите на вкладку «Дополнительно.

Далее прокрутите вниз до пункта «Интервал» и нажмите на него.

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

Как только вы закончите вносить изменения, нажмите кнопку «Сохранить» и выберите пункт «Опубликовать», чтобы изменения вступили в силу.

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

Источник: www.wpbeginner.com