Custom CSS for Elementor v2.1.1

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

См. репозиторий плагина на GitHub. Пользовательский CSS для Elementor.

Большое объявление -

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

Наслаждайтесь стилем с помощью CSS без каких-либо проблем.

Необходимые инструменты

- Только бесплатно Elementor

Как использовать собственный CSS для Elementor

Прежде всего, это инструмент plug-and-play. Вы не получите никакой страницы настроек. Итак, после установки инструмента "Пользовательский CSS для Elementor" просто перейдите к любой панели редактирования виджета Elementor, затем перейдите на вкладку "Дополнительно"; вы получите новый аккордеон Custom CSS для Elementor. Разверните гармошку, и вы получите три разных поля для написания CSS-кодов для ваших виджетов. Если вы хотите показать разные дизайны для разных устройств, выбирайте панели устройств в соответствии с вашими потребностями.

Направление: отредактируйте любой виджет Elementor > вкладка "Дополнительно" > "Пользовательский CSS для Elementor".

Примечание. Согласно общей логике CSS, если вы пишете CSS для большего экрана (рабочего стола), он будет автоматически реализован на меньших устройствах в хронологическом порядке. Если вы хотите что-то изменить для экрана меньшего размера, вам придется написать другой CSS для экранов меньшего размера.

В нашем дополнении "Пользовательский CSS для Elementor", если вы хотите добавить глобальный CSS, просто напишите код CSS на рабочем столе/глобальной панели, и код будет автоматически отображаться на другом экране. Если вы хотите изменить CSS для планшетов, вам придется написать другой CSS на нашей панели CSS для планшетов. То же самое касается и мобильных устройств. Если вы хотите изменить CSS для мобильных устройств, напишите другой CSS на панели Mobile CSS нашего инструмента.

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

Зачем вам это нужно

Если вы знаете множество проблем создания Домов в Elementor, вы познаете эту боль. Но вы можете уменьшить количество раздутого кода, если используете простой CSS. Но при написании CSS для различных устройств вам нужно быть экспертом в CSS, поскольку вам каждый раз приходится иметь дело с Media Query. Но наш аддон "Пользовательский CSS для Elementor" станет для вас спасителем. Мы справляемся с вашей болью. Более того, чтобы добавить собственный CSS, вам не нужно переходить к дополнительному CSS настройщика темы, если вы используете Elementor Free для управления своим сайтом, поскольку мы создаем этот инструмент для вас. Это просто расширенная версия панели Custom CSS по умолчанию в Elementor Pro.

Каковы ключевые особенности плагина Elementor Custom CSS

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

- Это легкий плагин, который будет использовать CSS-файлы Elementor для добавления в очередь пользовательского CSS. Не будет генерироваться новый CSS для уменьшения запросов к серверу.

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

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

- Он работает с любым виджетом Elementor, а также с другими виджетами дополнений Elementor сторонних производителей.

Как изменить точки останова в WordPress

Чтобы изменить точки останова для планшетов и мобильных устройств в WordPress, вы можете добавить собственный код в файл function.php вашей темы. Точки останова определяют, когда макет вашего веб-сайта переключается между различными размерами экрана, обеспечивая оптимальное отображение на разных устройствах.

Изменение точки останова планшета

Чтобы настроить точку останова для планшетов, выполните следующие действия:

- Откройте файл function.php вашей темы WordPress.

- Добавьте следующий фрагмент кода PHP:

add_filter("custom_css_for_elementor_breakpoints", function($default_breakpoints) {

$default_breakpoints["таблетка"] = 768; // изменяем это значение

вернуть $default_breakpoints;

}, 20, 1);

- Сохраните файл.

Изменение точки останова на мобильном устройстве

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

- Перейдите к файлу function.php вашей темы.

- Вставьте следующий PHP-код:

add_filter("custom_css_for_elementor_breakpoints", function($default_breakpoints) {

$default_breakpoints["mobile"] = 425; // изменяем это значение

вернуть $default_breakpoints;

}, 20, 1);

- Сохраните изменения.

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

ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ

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

Для технической поддержки

Мы все знаем, что нет ничего идеального. Но мы все делаем все идеально для всех, делясь и заботясь. Если вы обнаружите какую-либо ошибку...