Как использовать встроенные пользовательские входы CSS Divi для расширенного адаптивного редактирования

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

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

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

Встроенные точки останова Divi для адаптивного редактирования

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

Три основные точки останова Divi для дисплеев настольных компьютеров, планшетов и телефонов:

• Рабочий стол: 981 пикселей и выше
• Таблетка: от 980 до 768 пикселей.
• Мобильный: 767 пикселей и ниже

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

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

Понимание пользовательских полей ввода CSS Divi

Когда вы настраиваете элемент (раздел, строку или модуль) в конструкторе Divi, каждый вариант дизайна соответствует (или нацелен) на определенную часть этого элемента. Например, при редактировании текстового модуля вы можете настроить таргетинг на любую часть этого модуля, используя встроенные настройки (например, шрифт заголовка 2, отступ слева и т. Д.).

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

Вот иллюстрация различных настраиваемых полей ввода CSS, доступных для модуля призыва к действию.

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

Следовательно, вам не нужно добавлять класс CSS к фрагменту CSS в поле ввода. Если вы это сделаете, код не будет работать.

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

Как добавить собственный CSS в точки останова адаптивного дизайна

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

Теперь все, что вам нужно сделать, это использовать вкладки, чтобы добавить CSS на любой из трех дисплеев устройств (рабочий стол, планшет и телефон).

Например, предположим, что вы хотите, чтобы промо-кнопка для призыва к действию охватывала всю ширину модуля на планшете и телефоне, но не на рабочем столе. Вы должны выбрать вкладку планшета под полем ввода Promo Button и добавить «display: block;».

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

Меньшее устройство по умолчанию наследует CSS больших устройств

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

Причина того, что дисплей телефона наследует дисплей планшета, заключается в том, что фактическая точка останова (медиа-запрос) для дисплея планшета на серверной части установлена ​​на «max-width: 980px;» Это означает, что код, добавленный к планшету, также будет применен к телефону, поскольку экран телефона имеет ширину менее 980 пикселей. Поэтому, если вы хотите применить к телефону другой стиль, вам нужно будет добавить дополнительный код в поле ввода вкладки телефона.

ПРИМЕЧАНИЕ. Если вы также добавите пользовательский CSS на дисплей телефона, Divi умно изменит медиа-запрос для планшета на бэкэнде на более точный диапазон между 768px и 980px (или max-width: 980px и min-width: 768px).

Что настраиваемый CSS применяется на бэкэнде

Допустим, мы добавляем собственный CSS ко всем трем адаптивным вкладкам (рабочий стол, планшет и телефон).

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

На планшете мы переопределяем код рабочего стола и просто растягиваем кнопку на всю ширину модуля.

На телефоне мы отменяем CSS планшета и возвращаем дисплей в нормальное состояние.

Если мы проверим CSS на бэкэнде, вы увидите, что Divi организует код со следующими медиа-запросами, поэтому вам не нужно:

Рабочий стол:

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

Таблетка:

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

Телефон

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

Как CSS хранится в Divi?

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

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

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

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

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

Какой у вас был опыт работы с пользовательскими входами CSS Divi?