Если вы один из многих новичков, которые хотят настроить дизайн своего сайта WordPress, не затрагивая CSS, то вам повезло.

Плагин CSS Hero для WordPress позволяет настроить дизайн, не трогая ни одной строчки кода.

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

Наш обзор CSS Hero

CSS Hero — это плагин WordPress премиум-класса, который позволяет вам создавать собственную тему WordPress без написания единой строки кода (не требуется HTML или CSS).

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

Если вы дизайнер или разработчик, CSS Hero вам подойдет одинаково хорошо. Он хорошо работает со всеми популярными темами и фреймворками WordPress. Вы можете быстро изменить тему или дочернюю тему и экспортировать ее на сайт клиента.

CSS Hero может сэкономить вам время и нервы при настройке дизайна.

CSS Hero против конструкторов страниц WordPress

CSS Hero — это инструмент дизайна, а не идеальное решение для создания целевых страниц или создания собственной темы WordPress с нуля. Он работает вместе с вашей темой WordPress и позволяет настраивать CSS без написания кода CSS.

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

Как использовать CSS Hero для настройки вашей темы WordPress

Сначала вам необходимо установить и активировать плагин CSS Hero. Более подробную информацию можно найти в нашем пошаговом руководстве по установке плагина WordPress.

Это плагин WordPress премиум-класса, цена которого начинается от 29 долларов США за один сайт (вложение того стоит, учитывая время и хлопоты, которые он сэкономит вам).

Вы можете использовать код купона CSS Hero: WPНАЧИНАЮЩИЙ чтобы получить специальную скидку 34%. Если вы покупаете план PRO, то тот же код даст вам колоссальную скидку 40%.

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

Цель CSS Hero — предоставить вам WYSIWYG-интерфейс (что видите, то и получаете) для редактирования вашей темы.

Просто посетите свой веб-сайт WordPress, войдя в систему, и вы увидите кнопку CSS Hero в панели администратора WordPress.

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

Теперь вы сможете увидеть редактор CSS Hero. Он имеет верхнюю и нижнюю панели инструментов, левый столбец и предварительный просмотр вашего веб-сайта в реальном времени.

Затем наведите указатель мыши на элемент, который вы хотите отредактировать, и CSS Hero выделит его, показывая, где вы находитесь.

Нажав на него, вы выберете этот элемент и отобразите его свойства в левом столбце.

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

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

Когда вы вносите изменения, ниже волшебным образом появляется пользовательский CSS.

Если вы изучаете CSS, вам будет полезно увидеть, как различные изменения CSS применяются к результату в предварительном просмотре в реальном времени.

Возникли проблемы с поиском бесплатных изображений для вашего сайта?

CSS Hero также имеет встроенную интеграцию с Unsplash, позволяющую просматривать, искать и использовать красивые фотографии в дизайне вашего веб-сайта.

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

Просто переключитесь на вкладку «Фрагменты» в левом столбце. Там вы увидите множество элементов столбца.

Нажмите, чтобы выбрать элемент, и CSS Hero покажет вам различные варианты стиля.

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

Когда вы вносите изменения на свой веб-сайт, CSS Hero автоматически сохраняет эти изменения, но не публикует их.

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

Как отменить изменения в CSS Hero

Одна из лучших функций CSS Hero — возможность отменить любые внесенные вами изменения в любое время.

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

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

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

Но что, если вы хотите отменить изменения, внесенные вами только в определенный элемент?

В этом случае вам не нужно использовать инструмент истории. Просто нажмите на элемент, который вы хотите вернуть к более ранней версии, а затем нажмите кнопку «Сбросить».

Это вернет элемент к настройкам по умолчанию, определенным вашей темой WordPress.

Настройка вашего сайта для мобильных устройств в CSS Hero

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

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

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

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

Совместимость тем CSS Hero

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

Он также содержит самые популярные темы премиум-класса из таких магазинов, как CSSIgniter, Themify, StudioPress и других.

А как насчет тем, которых нет в списке совместимости тем?

CSS Hero имеет функцию под названием «Автоопределение режима Rocket». Если вы используете тему, не включенную в список совместимости тем, CSS Hero автоматически перейдет в режим Rocket.

Rocket Mode пытается угадать селекторы CSS из вашей темы. В большинстве случаев это работает отлично. Если ваша тема соответствует стандартам кодирования WordPress, вы сможете редактировать практически все.

Вы также можете связаться с разработчиком своей темы и попросить его обеспечить совместимость с CSS Hero.

Какие плагины совместимы с CSS Hero?

CSS Hero регулярно тестируется на совместимость с лучшими плагинами WordPress. К ним относятся плагины контактных форм, популярные конструкторы страниц, WooCommerce и другие.

Если вы используете плагин WordPress, который генерирует выходные данные, недоступные для редактирования CSS Hero, вы можете попросить автора плагина исправить это. Им не нужно много делать, чтобы обеспечить совместимость с CSS Hero.

Более подробную информацию можно найти в нашем руководстве о том, как правильно запросить поддержку WordPress и получить ее.

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

Если вам понравилась эта статья, то подписывайтесь на нашу рассылку YouTube канал для видеоуроков по WordPress. Вы также можете найти нас на Твиттер и Фейсбук.