Как удалить боковые панели из Divi

Удалить боковую панель из шаблона страницы Divi по умолчанию можно легко, если вы используете Divi Builder. Однако, поскольку шаблоны страниц Divi по умолчанию (с боковой панелью) по-прежнему отображаются на таких страницах, как 404 и архивы, вы можете полностью удалить боковую панель из своего шаблона.

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

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

Давайте начнем!

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

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

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

Если вы не хотите использовать Divi Builder для этой страницы или публикации и просто хотите удалить боковую панель для каждой страницы, просто найдите поле Настройки страницы Divi на боковой панели при редактировании страницы и выберите полную ширину (или нет боковая панель ) для макета вашей страницы.

Это уберет боковую панель для этого конкретного сообщения или страницы.

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

Если у вас установлен WooCommerce, вы можете найти несколько опций в опциях темы Divi, чтобы изменить макет страницы WC Shop, Category и Product.

Чтобы удалить боковую панель на страницах WC Shop и Category, перейдите в Divi> Theme Options. На вкладке «Общие» найдите параметр «Макет страницы магазина и категории для WooCommerce» и измените макет на «Без боковой панели» или «Полная ширина».

Чтобы удалить боковую панель для страниц продукта, перейдите в Divi> Параметры темы. Выберите вкладку Builder. В разделе «Интеграция типов сообщений» выберите в раскрывающемся списке макет продукта «Без боковой панели».

Удаление боковых панелей путем создания пользовательских шаблонов с помощью построителя тем

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

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

Создание полноразмерного шаблона сообщения в блоге с помощью Divi Builder

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

Вот краткий пример того, как это сделать:

Сначала создайте новый шаблон и назначьте его всем сообщениям.

Затем добавьте в шаблон собственное тело.

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

Например, вы можете использовать модуль заголовка сообщения для динамического отображения заголовка сообщения. Или вы можете вставить заголовок сообщения в виде динамического содержимого в тело текстового модуля и обернуть его тегами H1.

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

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

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

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

Чтобы узнать больше, ознакомьтесь с нашим сообщением о том, как создать шаблон сообщения в блоге с помощью Divi Theme Builder.

Создание полноразмерного шаблона страницы продукта WooCommerce с помощью Divi Builder

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

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

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

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

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

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

Создание шаблонов страниц полноразмерного архива с помощью Divi Builder

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

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

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

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

Создание полноразмерного шаблона страницы 404 с помощью Divi Builder

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

Чтобы получить полное представление, ознакомьтесь с нашим сообщением о том, как создать шаблон страницы 404 с помощью Divi Theme Builder.

Создание шаблона страницы полноэкранного поиска с помощью Divi Builder

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

1. Заголовок публикации / архива как динамический контент.

2: Модуль блога для отображения сообщений для текущей страницы.

3: Модуль поиска, позволяющий пользователям продолжать поиск по мере необходимости.

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

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

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

Для получения дополнительной информации ознакомьтесь с документацией по созданию глобального шаблона тела.

Удаление боковой панели по умолчанию с помощью настраиваемого CSS

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

Перейдите в Divi> Параметры темы. На вкладке «Общие» вставьте следующий код в поле «Пользовательский CSS» внизу страницы:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

Последние мысли

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!