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

Вы хотите добавить или убрать пустое пространство между блоками WordPress? Добавление или удаление пустого пространства между блоками 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-класс специально для этого блока.

Добавить новый класс CSS

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

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

Перейдите к настройщику темы WordPress

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

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

Нажмите кнопку Дополнительный CSS

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

.add-remove-bottom-space

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

Добавьте код CSS

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

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

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

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

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

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

Добавьте код с помощью плагина Simple Custom CSS

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

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

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

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

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

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

Активируйте плагин CSS Hero

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

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

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

Нажмите CSS Hero

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

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

Настройщик страниц CSS Hero

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

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

CSS Hero для изменения нижнего поля

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

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

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

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

SeedProd

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

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

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

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

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

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

Использование ползунка для регулировки высоты блока SeedProd Spacer

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

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

Перейдите на вкладку

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

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

Изменить нижнее поле

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

Сохранить и опубликовать страницу SeedProd

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

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

Оцените статью
Добавить комментарий