5 WordPress плагины для визуального редактирования CSS в вашем блоге

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

Настройка CSS - это функция, предлагаемая несколькими плагинами на WordPress.org. Если вы ищете плагин, который генерирует таблицу стилей (CSS), у вас есть несколько вариантов, доступных для вас. Но, хотя есть много плагинов, которые вы можете использовать для создания собственного CSS, есть очень мало вариантов, которые предлагают редактирование кода CSS в реальном времени.

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

1. Желтый карандаш: редактор CSS в стиле Visual

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

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

скачать | Демонстрация | веб-хостинг

2. Easy Custom JS и CSS

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

У вас есть возможность ограничить область использования вашего персонализированного кода. Например, вы можете использовать свой код только для статьи, которая имеет формат видео. Или вы можете ограничить свой код конкретной темой; Что удобно, если вы в настоящее время меняете темы для своего блога WordPress.

скачать | Демонстрация | веб-хостинг

3. Кастомные JS и CSS для Гутенберга

Пользовательский плагин JS и CSS для Gutenberg WordPress позволит вам добавить неограниченное количество пользовательских стилей в редактор WYSIWYG для ваших статей и страниц WordPress. Он полностью совместим с версией Гутенберга WordPress.

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

скачать | Демонстрация | веб-хостинг

4. Advanced CSS Editor

Продукт компании WordPress ThemeIsle и Wunderkind разработали этот плагин. После установки и активации перейдите в «Внешний вид> Персонализация», чтобы получить доступ к панели управления и выполнить поиск «Расширенный редактор CSS» в меню. Он появится в самом верху списка пунктов меню в Customizer.

Чтобы изменить код CSS, просто добавьте селектор и правило, которое применяется к нему в текстовом поле, когда вы нажимаете на меню « Advanced CSS Editor».

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

скачать | Демонстрация | веб-хостинг

5. SiteOrigin CSS

Это, безусловно, плагин, который предлагает большинство вариантов в этом списке. Самое удивительное в последнем состоит в том, что это бесплатно. Этот плагин - единственный, который не найден в настройщике. После того, как вы установите и активируете плагин, вам нужно перейти в следующую папку Внешний вид> Пользовательский CSS Чтобы получить доступ к версии CSS плагина.

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

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

скачать | Демонстрация | веб-хостинг

Вывод

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

Тем не менее, не стесняйтесь обращаться к нашим Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Если вам понравилась эта статья, нне стесняйтесь поделиться им в ваших любимых социальных сетях.