Как удалить границу боковой панели Divi

Одна вещь, которую почти каждый пользователь Divi хочет знать, как делать с темой Divi, - это удалить границу боковой панели. К счастью, это простая задача. Это можно сделать с помощью кода, но, что более важно, это легко сделать с помощью Divi Theme Builder. В этой статье мы покажем вам, как удалить границу боковой панели Divi с помощью обоих методов, и увидим, почему использование Divi Theme Builder дает наилучшие результаты.

Боковая панель Divi по умолчанию

Страницы Divi по умолчанию и макеты публикации помещают линию между содержимым и боковой панелью. Многие элементы боковой панели можно стилизовать или настроить с помощью настройщика темы, но эта строка не входит в их число. Это область, в которой отсутствуют параметры WordPress.

Параметры темы Divi позволяют перемещать боковую панель вправо или влево, но не включают параметры стиля.

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

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

Удаление или стилизация границы боковой панели Divi с помощью кода

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

Вам нужно будет добавить немного CSS в поле Custom CSS параметров темы Divi. Чтобы получить доступ к полю Custom CSS, перейдите в Divi > Theme Options в меню панели управления WordPress. Оставайтесь на вкладке « Общие » и прокрутите до конца настроек, чтобы вставить свой код.

Вот CSS, который вам понадобится:

#main-content .container:before {
width:0;
}
.et_pb_widget_area_right { border-left:0 !important; }
.et_pb_widget_area_left { border-right:0 !important; }

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

Вставьте код в поле Custom CSS и сохраните изменения.

Граница теперь удалена. CSS действительно работает с темой Divi, удаляя границу боковой панели, но это не идеально, и не все хотят обрабатывать какой-либо код. Что, если вы хотите создать страницу блога с помощью Divi Builder? Лучшим вариантом является использование Divi Theme Builder.

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

Также можно использовать тему Divi для удаления границы боковой панели без кода. Перейдите в Divi Theme Builder, выбрав Divi > Theme Builder в меню панели управления WordPress. Если у вас еще нет макета блога, выберите Добавить новый шаблон .

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

Откроется модальное окно, в котором вы можете выбрать, где будет отображаться этот шаблон. Выберите страницу своего блога в разделе " Определенные страницы" . Вы также можете создавать страницы архива, страницы авторов, страницы категорий, страницы дат, страницы тегов и многое другое. После того, как вы сделали свой выбор, нажмите « Сохранить» .

Теперь вашей странице назначен пустой шаблон. Затем вам нужно создать макет блога. Щелкните область с надписью « Добавить пользовательское тело» .

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

Модуль боковой панели Divi

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

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

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

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

Второй вариант в разделе « Макет » - это переключатель « Показать разделитель границ» . Это позволяет отключить или включить границу. По умолчанию он включен. Просто нажмите на переключатель. Граница теперь удалена с боковой панели. Сохраните макет и выйдите из редактора. Это так просто.

Наконец, выберите « Сохранить изменения» перед выходом из Divi Theme Builder. Теперь он показывает настраиваемое тело для страницы блога.

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

Создание настраиваемой границы боковой панели Divi

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

На вкладке « Дизайн » модуля боковой панели перейдите к параметрам « Граница» . Здесь вы можете добавить границу к одной стороне модуля. Выберите каждую сторону, границу которой вы не хотите отображать, и установите ширину границы равной 0. Вы также можете выбрать ширину границы, выбрать цвет и выбрать стиль. Стили включают в себя сплошной, штриховой, пунктирный, двойной, паз, гребень, врезку, выход и отсутствие.

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

На странице моего блога теперь отображается моя настраиваемая граница боковой панели Divi.

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

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

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

Заключение

Это наш взгляд на то, как использовать тему Divi для удаления границы боковой панели. Его достаточно просто удалить в коде, но использование Divi Theme Builder дает вам гораздо больше возможностей, что дает вам больше контроля над дизайном. Эта функция чрезвычайно проста, но большинство пользователей Divi хотят изучить ее. Это также хорошее упражнение для изучения того, как небольшие изменения в модулях Divi могут иметь огромное значение в дизайне вашего веб-сайта.

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

Избранные изображения через Эндрю Рыбалко / shutterstock.com