Если вы один из многих новичков, которые хотят настроить дизайн сайта 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 действительно впечатлил нас с самого начала.
Если вы попросите нас дать честный отзыв о CSS Hero, то мы дадим ему 5 из 5 звезд.
Как использовать CSS Hero для настройки вашей темы WordPress
Сначала вам нужно установить и активировать плагин CSS Hero. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.
Это премиум-плагин WordPress, цена которого начинается от $29 за один сайт (полностью оправдывает вложения, учитывая время и хлопоты, которые он вам сэкономит).
Используйте код купона CSS Hero: WPBeginner получить специальную скидку 34% Off. Если вы покупаете тарифный план PRO, то этот же код даст вам скидку в 40%.
После активации вы будете перенаправлены для получения лицензионного ключа CSS Hero. Просто следуйте инструкциям на экране, и вы будете перенаправлены на свой сайт через несколько кликов.
Цель CSS Hero — предоставить вам WYSIWG (что видишь, то и получаешь) интерфейс для редактирования вашей темы. Просто зайдите на свой сайт, авторизовавшись, и вы заметите кнопку CSS Hero в панели администратора WordPress.
Нажатие на кнопку переведет ваш сайт в режим предварительного просмотра в реальном времени. Теперь вы сможете увидеть панель инструментов CSS Hero.
Затем просто нажмите на любой элемент на вашем сайте, и CSS Hero покажет вам CSS-свойства, используемые вашей темой для этого элемента.
Они будут включать общие свойства CSS для выбранного элемента, такие как фон, шрифт, границы, интервал и многое другое. Вы можете нажать на любой элемент, чтобы развернуть его, а затем отредактировать свойства CSS с помощью простого пользовательского интерфейса.
По мере внесения изменений вы заметите, что пользовательский CSS волшебным образом появляется ниже. Если вы изучаете CSS, то вам будет полезно посмотреть, как применяются различные изменения CSS с результатом в режиме реального времени.
Проблемы с поиском бесплатных изображений для вашего сайта? CSS Hero поставляется со встроенной интеграцией Unsplash, которая позволяет просматривать, искать и использовать красивые фотографии в дизайне вашего сайта.
CSS Hero также поставляется с некоторыми готовыми сниппетами, которые вы можете применить к различным элементам вашего сайта. Просто переключитесь на вкладку «Сниппеты» в левой колонке.
По мере внесения изменений на ваш сайт CSS Hero будет автоматически сохранять эти изменения, но не публиковать их. Чтобы применить эти изменения к вашему живому сайту, вам нужно нажать на кнопку Сохранить и опубликовать.
Как отменить изменения в CSS Hero
Одной из лучших особенностей CSS Hero является возможность отменить любые внесенные изменения в любой момент. CSS Hero хранит историю всех изменений, которые вы вносите в свою тему. Просто нажмите на кнопку истории на панели инструментов CSS Hero, чтобы увидеть список изменений.
Вы можете нажать на дату и время, чтобы посмотреть, как выглядел ваш сайт в тот момент. Если вы хотите вернуться к этому состоянию, то просто сохраните или возобновите редактирование с этого момента.
Это не означает, что изменения, внесенные вами после этого момента, исчезнут. Они будут сохранены, и вы сможете вернуться к тому времени. Проще не бывает.
Но что, если вы хотите вернуть изменения, внесенные только в определенный элемент??
В этом случае вам не нужно использовать инструмент истории. Просто нажмите на элемент, который вы хотите вернуть, а затем нажмите на кнопку сброса.
Это изменит элемент обратно на настройки по умолчанию, определенные вашей темой WordPress.
Настройка сайта для мобильных устройств в CSS Hero
Самым сложным аспектом веб-дизайна является совместимость с устройствами. Вам нужно убедиться, что ваш сайт выглядит одинаково ослепительно на всех устройствах и размерах экрана. Веб-дизайнеры используют различные инструменты для тестирования на совместимость с браузерами и устройствами. К счастью для вас, CSS Hero поставляется со встроенным инструментом предварительного просмотра.
Просто нажмите на значок рабочего стола на панели инструментов CSS Hero, а затем выберите тип устройства. Вы можете выбрать мобильное, планшетное или настольное устройство. Область предварительного просмотра изменится на выбранное вами устройство.
Теперь вы можете редактировать свой сайт, просматривая его на мобильных устройствах. Этот инструмент особенно полезен для настройки дизайна вашей темы для мобильных и планшетных компьютеров.
Совместимость тем CSS Hero
На официальном сайте CSS Hero есть постоянно растущий список совместимых тем. В этот список входят многие из лучших бесплатных тем WordPress. Здесь также есть самые популярные премиум-темы от таких магазинов, как CSSIgniter, Themify, StudioPress и др.
Что делать с темами, отсутствующими в списке совместимости тем?
CSS Hero поставляется с функцией под названием Rocket Mode Auto-detection. Если вы используете тему, не включенную в список совместимости тем, то CSS Hero автоматически начнет использовать режим ракеты.
Rocket Mode пытается самостоятельно угадать селекторы CSS из вашей темы. В большинстве случаев это работает идеально. Если ваша тема соответствует стандартам кодирования WordPress, то вы сможете редактировать практически все.
Вы также можете связаться с разработчиком вашей темы и попросить его обеспечить совместимость с CSS Hero.
Какие плагины совместимы с CSS Hero?
CSS Hero регулярно тестируется на совместимость с лучшими плагинами WordPress. Сюда входят плагины контактных форм, популярные конструкторы страниц, WooCommerce и другие.
Если вы используете плагин WordPress, который генерирует вывод, не редактируемый CSS Hero, то вы можете попросить автора плагина исправить это. Для обеспечения совместимости с CSS Hero им действительно не нужно делать многого.
Мы надеемся, что наш обзор CSS Hero был вам полезен. Вы также можете ознакомиться с нашим руководством по улучшению скорости и производительности WordPress для начинающих.
Источник: www.wpbeginner.com