Обзор плагина CSS Hero. Настройка темы WordPress в режиме реального времени

Приветствуем вас! Ни один веб-сайт не обойдется без дизайна. Что если у вас не хватает дизайнерских навыков и у вас нет опыта в программировании, и о найме дорогого профессионала для выполнения работы не может быть и речи? Да, конечно можно использовать бесплатные темы WP, но с таким количеством вариантов, доступных на рынке, может быть сложно решить, какую из них использовать. К счастью выход есть.

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

Познакомьтесь с CSS Hero, плагином WordPress, который поможет вам легко настроить тему WordPress в режиме реального времени. Мы покажем вам, как легко изменить внешний вид стандартной темы WordPress всего за несколько кликов.

Что такое CSS Hero и как он работает?

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

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

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

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

Ключевые особенности включают в себя:

• Настройка шрифтов
• Выбор цвета
• Ползунки изменяющие поля, высоту текста и ширину столбцов
• Специальные эффекты, такие как градиенты, переходы и тени
• Чистый и минимизированный вывод CSS
• Полная история изменений
• Адаптивные режимы предварительного просмотра для разных размеров экрана
• Стилизация страницы входа в WordPress
• Опция «Сброс», чтобы вернуть все в режим по умолчанию

Сколько стоит CSS Hero?

С точки зрения цены CSS Hero не так уж и дорог. Доступны четыре тарифных плана, каждый из которых соответствует различным потребностям и требованиям.

Вот краткая разбивка цен CSS Hero:

• Стартовый план ($ 29 / год): для использования на 1 сайте.
• Персональный план ($ 59 / год): для 2-5 сайтов и отлично подходит для издателей с несколькими сайтами.
• Pro Plan ($ 199 / год): до 999 сайтов и идеально подходит для тех, кто управляет веб-агентствами и управляет множеством сайтов.
• Lifetime Pro (единовременная оплата 599 долларов): до 999 сайтов, обновления и поддержка продуктов в течение всей жизни, а также WordPress Multisite.

Редактирование темы с CSS Hero

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

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

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

Чтобы настроить цвет фона, кликаем по пункту меню «Фон». Откроется еще один параметр настройки, которые мы будем использовать для внесения желаемых изменений.

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

Помните, что фон — это только один раздел, который вы можете настроить. Вы также можете внести изменения в:

• Типография
• Границы
• Границы радиуса
• Расстояния
• Преобразование
• Фильтры
• Списки

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

И что бы вы ни делали, не беспокойтесь о том, что вы можете испортить свой сайт. Мы покажем вам чуть позже, как все можно отменить и восстановить. Так что смело можете экспериментировать.

Одна популярная настройка, которую люди любят делать на своем сайте, — это изменение цвета гиперссылок в сообщении блога. С помощью Hero вы можете детализировать все до самых маленьких элементов на странице и настраивать их по своему усмотрению, без знания кодирования и переписывания таблиц стилей. Хотите знать, как это сделать?

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

Вы увидите небольшое окно. Нажмите на опцию «Только этот элемент». Это действие говорит CSS Hero, что нужно изменить только этот элемент.

Затем нажмите на раздел «Типография» на боковой панели и выберите цвет вашей ссылке, который вы хотите.

Если вы хотите изменить все гиперссылки поста на один и тот же цвет, вместо выбора «Только этот элемент», кликаем по ссылке «entry-content». Затем нажимаем «Типография» и выбираем цвет ссылок.

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

Восстановление кода по умолчанию

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

Для этого начните с изменения вкладок в редакторе CSS Hero. В верхнем левом углу перейдите на вкладку «Инспектор».

Оттуда, нажмите на CSS или Minified CSS (в зависимости от того, что вы предпочитаете) в нижней части редактора в разделе «Экспорт», и смотрите, как он автоматически добавляется в буфер обмена. Оттуда вы можете вставить новую таблицу стилей в любое место, например, на веб-сайт клиента.

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

Для этого нажмите «Инструменты» и «Сбросить редактирование темы» в верхнем правом углу редактора CSS Hero.

Появится окно подтверждения, чтобы убедиться, что вы уверены, что хотите сбросить настройки. Нажмите OK, и ваш экран обновится.

Мы тестировали CSS Hero на нескольких наших тестовых сайтах. Плагин отлично работает и при работе никаких проблем не вызвал. В целом, CSS Hero легок, прост в использовании.

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

С уважением Вячеслав и Валерия!