Tehnografi.com - Технологические новости, обзоры и советы
[adinserter block="67"]

Обзор CSS Hero: настроить тему WordPress очень просто!

Когда дело доходит до того, чтобы веб-сайт выглядел именно так, как вы этого хотите, огромное количество доступных тем WordPress – настоящее благо! И если вы тратите достаточно времени на поиск, вы можете найти тему, которая идеально подходит для вашего сайта. Тем не менее, есть вероятность, что даже если вы приблизитесь к тому, что вы хотите, вы, вероятно, все еще немного не в курсе. Может ли предопределенная тема действительно удовлетворить потребности человека до T? …

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

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

Что такое CSS Hero?

CSS Hero – это плагин для настройки темы (см. характеристики)

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

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

Статьи на сайте не запрещены; Вы можете настроить все что угодно. CSS Hero преобразует ваши настройки в правильный код CSS, который затем используется в новой таблице стилей CSS (исходная таблица стилей сохраняется, чтобы избежать будущих проблем).

CSS Hero также работает с любой темой WordPress. Будут названы те, которые были тщательно протестированы на совместимость, а непроверенные темы по-прежнему совместимы.

Цены

CSS Hero – доступный плагин премиум-класса. Отражать вашу компетенцию Цена наравне с самыми популярными плагинами Page Builder.

Базовая лицензия стоит всего $ 29 и дает вам доступ к полному плагину CSS Hero (хотя вы можете использовать его только на одном сайте).

Если вы хотите использовать CSS Hero на нескольких сайтах, вы можете:

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

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

рано

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

Панель выполняет еще одну важную функцию: здесь вы загружаете CSS Hero и, в зависимости от уровня лицензии, плагины Inspector Pro.

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

Однако установка CSS Hero требует еще одного шага: проверка. Нажмите синюю кнопку и следуйте инструкциям при регистрации одной из ваших лицензий. Все идет нормально.

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

CSS Hero Иконка

CSS Hero Editor

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

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

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

Целевой элемент CSS Hero

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

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

  • Шрифт: выберите из всех доступных шрифтов Google
  • Цвет шрифта
  • размер шрифта
  • вес шрифта
  • выравнивание текста
  • Преобразование текста: например, верхний регистр
  • Расстояние между словами
  • высота линии

Внесите необходимые изменения и посмотрите, как текст применяется на долю секунды позже.

Стиль шрифта CSS Hero

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

CSS Hero Фоновый градиент

Он также имеет ту же настройку полей с полной гибкостью в отношении стиля рамки, ширины и цвета.

CSS полностью стиль границы

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

CSS Hero ReadyMade Стили

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

Отменить изменения

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

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

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

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

Редактировать тему

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

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

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

CSS Hero перед снимком экрана

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

CSS Hero после скриншота

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

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

Больше возможностей

CSS Hero имеет некоторые другие интересные функции, на которые я хочу обратить внимание.

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

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

Экран планшета CSS Hero

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

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

Инспектор Pro Плагин

Те из вас, кто обновил свои планы или включил плагин CSS Hero Inspector Pro в свою лицензию.

Inspector Pro был анонсирован в мае 2015 года и недавно выпустил бета-версию. Он предназначен для опытных пользователей CSS. Хотя CSS Hero является инструментом, который не требует знаний CSS, Inspector Pro предназначен для тех, кто хочет настроить свой сайт, напрямую настраивая CSS.

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

CSS Hero Inspector Pro

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

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

Поддержка CSS Hero

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

Я уже упоминал обширную документацию и CSS Hero Academy (академия все еще находится в зачаточном состоянии, но есть конкретные планы по ее расширению).

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

Академия CSS Hero

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

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

Форум поддержки CSS

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

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

Последние мысли

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

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

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

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

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

(Обновить – 16 марта – CSS Hero любезно предоставил нам специальный, так как я написал этот пост Код купона на скидку Авторизуйте читателей WinningWP на Скидка 40% – смотри квитанцию).

Add comment