CSS Hero Review : WordPress 테마 사용자 정의가 쉬워졌습니다!

워드 프레스 거래


웹 사이트를 원하는대로 정확하게 볼 수있게되면 다양한 워드 프레스 테마를 이용할 수 있습니다. 충분히 오래 보냈다면 실제로 사이트에 딱 맞는 테마를 찾을 수있을 것입니다. 그러나 기회는 원하는 것에 가까워 지더라도 여전히 완벽에서 약간 벗어날 수 있습니다. 결국, 사전 제작 된 테마가 실제로 개인의 요구를 T까지 충족시킬 수 있습니까?…

원하는 주제와 가까운 테마를 찾았지만 몇 가지 변경이 필요한 경우 어떻게해야합니까? 물론 필요한 기술이 있다면 문제 없습니다. 원하는대로 기술을 수정할 수 있습니다.. 하지만 필요한 파일을 직접 변경하고 자신이 변경할 확신이 없다면 어떻게해야합니까??

오늘 저는 매우 편리한 플러그인 인 CSS Hero를 소개합니다. CSS Hero는 여러분이 작거나 비교적 큰 시각적 인 커스터마이제이션을 가능하게하는 플러그인입니다 : 한 줄의 코드를 건드릴 필요없이!

CSS Hero 란 무엇인가?

CSS Hero는 테마 사용자 정의 플러그인입니다 (기능보기)..

CSS 영웅

따라서 페이지 작성기 플러그인을 끌어서 놓기위한 유사한 공간을 차지합니다. 그러나 페이지 빌더가 사용자 정의 디자인을 처음부터 작성하도록 권장하는 경우 CSS Hero를 사용하면 기존 WordPress 테마를 원하는 방식으로 조정할 수 있습니다..

이를 통해 일반적으로 관련된 개발자 기술이 없어도 개발자를 플레이 할 수 있습니다. 전문적으로 디자인 된 워드 프레스 테마 (아마도 전문가가 만든 테마, 페이지 빌더 플러그인과 같은 임의의 모듈을 함께 던지는 사람이 아닌 테마)를 계속 사용하면서 요구 사항에 맞게 약간 조정합니다..

온 사이트 요소가 제한을 벗어남이 없음 : 무엇이든 모든 것을 사용자 정의 할 수 있습니다. CSS Hero는 사용자 정의를 관련 CSS 코드로 변환 한 다음 새로운 CSS 스타일 시트에 적용합니다 (원래 스타일 시트는 그대로 유지되므로 문제가 발생하지 않습니다).

CSS Hero는 모든 WordPress 테마에서도 작동합니다. 호환성을 위해 광범위하게 테스트 된 것을 Hero-ready라고하며, 테스트되지 않은 테마는 여전히 로켓 모드에서 지원됩니다.

물가

CSS Hero는 저렴한 프리미엄 플러그인입니다. 경쟁을 반영하기 위해 가장 인기있는 페이지 빌더 플러그인과 가격이 책정됩니다..

기본 초보자 라이센스는 단 $ 29이며, CSS Hero 플러그인 전체에 액세스 할 수 있습니다 (단 하나의 웹 사이트에서만 사용하도록 제한되어 있음).

둘 이상의 웹 사이트에서 CSS Hero를 사용하려는 경우 옵션은 다음과 같습니다.

  • 개인 라이센스 ($ 59) — 최대 5 개의 사이트
  • 프로 라이센스 ($ 199)-최대 999 개 사이트

아시다시피, 프로 라이센스는 크리에이티브 에이전시와 커리어 개발자를 대상으로합니다. 개인용 라이센스와 프로 용 라이센스 모두 프리미엄 애드온 인 Inspector Pro에 액세스 할 수 있습니다. 자세한 내용은 페이지 아래에서 자세히 다루겠습니다..

3 개의 CSS Hero 라이센스 모두 1 년 동안 유효하며 1 년 업데이트 및 지원에 대한 액세스 권한을 부여하며 30 일 환불 보증이 제공됩니다..

시작하기

구매하면 CSS Hero 대시 보드로 이동합니다. 여기에서 플러그인의 광범위한 문서와 멋진 CSS Hero Academy에 액세스 할 수 있습니다. 아카데미는 새로운 플러그인을 최대한 활용할 수 있도록 고안된 초보자에게 친숙한 일련의 비디오 자습서를 제공합니다. (다른 고급 플러그인을보고 싶습니다).

CSS 영웅 대시 보드

대시 보드는 다른 중요한 기능 중 하나를 수행합니다. CSS Hero 및 라이센스 수준에 따라 Inspector Pro 플러그인을 다운로드하는 위치.

다운로드가 완료되면 WordPress 대시 보드에 로그인하십시오. 플러그인으로 이동 > 새로운 걸 더하다 > 플러그인 업로드를 수행 한 후 지시 사항에 따라 플러그인 zip 파일을 업로드하고 플러그인을 활성화하십시오. 이전에 WordPress 플러그인을 설치 한 적이 있다면 모두 매우 친숙하게 느껴질 것입니다.

그러나 CSS Hero 설치에는 추가 단계 인 확인이 필요합니다. 파란색 버튼을 클릭 한 다음 라이센스 중 하나를 등록 할 때 지침을 따르십시오. 여태까지는 그런대로 잘됐다.

이제 CSS Hero는 테마 편집 도구이므로 프런트 엔드에서 편집이 수행되어 변경 사항을 실시간으로 볼 수 있습니다. 사이트의 프런트 엔드에 액세스하면 화면 오른쪽 상단에 새로운 파란색 아이콘이 표시됩니다. 새 플러그인 사용을 시작하려면 이것을 클릭하십시오.

CSS 영웅 아이콘

CSS 히어로 에디터

파란색 아이콘을 클릭하면 CSS Hero가 켜질 때까지 몇 초 정도 기다려야합니다. 플러그인이 활성화되면 이제 스타일링을 시작하고 웹 사이트를 사용자 정의 할 수 있습니다.

시작하려면 옵션 패널 상단의 파란색 아이콘을 클릭하십시오. 진행 방법을 잘 모를 경우 플러그인은 모든 기본 사항을 다루는 편리한 링크를 제공합니다. 그러나 바로 시작할 준비가되면 페이지의 모든 요소를 ​​타겟팅하고 편집 할 수 있습니다..

수정하려는 요소 위로 마우스를 가져간 다음을 클릭합니다 (아래 스크린 샷에서 볼 수 있듯이 상대적으로 기본적인 내용 단락을 살펴 보겠습니다). 클릭하면 CSS Hero가 요소에 고정되어 자유롭게 사용자 정의를 시작할 수 있습니다..

CSS 영웅 대상 요소

프로세스를 최대한 간단하게하기 위해 CSS Hero는 선택한 요소의 유형에 따라 사용자 정의 옵션 목록을 제공합니다. 단락을 선택하면 옵션에 글꼴, 배경 및 테두리 변경, 텍스트 주위의 패딩 구성이 포함됩니다.

오른쪽 메뉴 표시 줄에서 모든 것을 제어하고 변경 사항을 실시간으로 미리 볼 수 있으므로 요소를 쉽게 편집 할 수 있습니다. 먼저 텍스트 속성에 중점을두기로 결정했습니다. 이 옵션을 선택하면 CSS Hero는 다음을 포함하여 텍스트 구성에 사용 가능한 모든 옵션을 표시합니다.

  • 글꼴 얼굴 — 모든 Google 글꼴을 선택할 수 있음
  • 폰트 색깔
  • 폰트 사이즈
  • 폰트 무게
  • 텍스트 정렬
  • 텍스트 변환 (예 : 대문자)
  • 단어 간격
  • 선 높이

원하는 내용을 변경하고 텍스트에 몇 초 후에 적용되었는지 확인하십시오..

CSS Hero 폰트 스타일

그런 다음 되돌아 가서 단락의 배경을 구성 할 수 있습니다. 다시 CSS Hero는 사용자에게 모든 권한을 부여합니다. 사용자 정의 이미지를 업로드하거나 색상을 선택하거나 그라디언트를 구성하여 배경으로 표시 할 수 있습니다.

CSS 영웅 배경 그라디언트

테두리 스타일, 너비 및 색상에 대한 유연성이 뛰어난 단락 테두리에도 동일한 옵션이 제공됩니다..

CSS 영웅 테두리 스타일

텍스트를 버튼으로 바꾸거나 수많은 멋진 디자인으로 기성품 배경을 표시하는 등 몇 가지 멋진 사전 구성된 스타일이 있습니다..

CSS Hero ReadyMade 스타일

한 번에 한 섹션 씩 변경을 수행하지 않으려면 모든 옵션을 선택하여 편리한 옵션 화면 하나에 모든 사용자 정의 옵션을 표시 할 수도 있습니다.

변경 사항 취소

텍스트를 변경하면 CSS Hero가 웹 사이트의 라이브 버전에 적용합니다. 그러나이 시점에서 영구적으로 변경하는 것에 대해 걱정하지 마십시오. 변경 사항을 적용하기 전에 취소를 클릭하여 삭제하거나 저장 버튼을 눌러 확인하는 옵션이 있습니다.

그러나 저장을 누른 후에도 원치 않는 변경 사항이 발생하지 않습니다. 원본으로 되돌리려면 CSS Hero 메뉴의 최상위 수준으로 돌아가서 도구 섹션으로 이동 한 다음 테마를 기본 설정으로 재설정 옵션을 선택하십시오..

개별 요소를 기본 공장 설정으로 복원 할 수도 있습니다. 복원 할 요소를 클릭 한 다음 메뉴 오른쪽의 작은 ‘R’재설정 아이콘을 클릭하십시오. 확인을 누르면 불량 요소가 이전 영광으로 복원됩니다..

앞에서 언급했듯이 모든 사용자 정의는 추가 스타일 시트에 적용됩니다. 최악의 상황이 발생하면 테마의 원본 스타일 시트는 그대로 유지됩니다. 즉, CSS Hero를 사용하여 어떤 변경을 하든지 장기적인 손상은 불가능합니다. 다른 모든 복원 옵션이 실패하면 기본 테마를 복원하고 쉽게 잠을 잘 수 있습니다!

모든 요소 편집

CSS Hero의 강점 중 하나는 페이지의 크기에 상관없이 페이지의 요소를 편집 할 수 있다는 것입니다..

큰 그림을 보면 사이트의 배경 이미지, 사이드 바 스타일 및 바닥 글 섹션을 편집 할 수 있습니다.

이는 단락을 편집 할 때 사용한 것과 동일한 프로세스를 사용하여 달성되지만 CSS Hero를 사용하여 사이트의 미학을 근본적으로 변경할 수 있음을 보여줍니다. 사이드 바의 배경을 변경하고, 위젯 헤더 스타일을 변경하고, 간격을 재구성 한 아래 스크린 샷을 확인하십시오. 촬영 전 기본 사항은 다음과 같습니다.

CSS Hero Before 스크린 샷

그리고 이것은 내가 조정 한 후입니다. 저는 디자이너가 아니지만,이 작업을 완료하는 데 몇 초 밖에 걸리지 않았습니다..

CSS Hero After Screenshot 스크린 샷

이미지, 링크 색상 및 목록 스타일과 같은 작은 컨텐츠 요소를 사용자 정의 할 수도 있습니다. 전용 목록 섹션에서 사용자 정의 글 머리 기호를 선택할 수 있으므로 목록 스타일이 특히 흥미 롭습니다. 정사각형, 소수 및 로마 숫자를 포함하여 6 가지의 멋진 사전 빌드 된 글 머리 기호가 지원되며보다 개인적인 접촉을 위해 사용자 정의 아이콘을 업로드 할 수 있습니다.

이 방법을 통해 사이트 디자인을 점검 할 수있는 방법에 대한 아이디어를 얻을 수 있기를 바랍니다. WordPress 테마는 기초를 제공하지만 CSS Hero 덕분에 웹 사이트의 모든 픽셀을 원하는대로 조정할 수 있습니다..

다른 특징들

CSS Hero에는 내가 주목하고 싶은 몇 가지 멋진 기능이 있습니다..

먼저 뷰 체인저입니다. 반응 형 디자인에 대한 중요성이 높아짐에 따라 웹 사이트가 모든 모양과 크기의 기기에서 완벽하게 작동하는 것이 중요합니다. CSS Hero에는 데스크탑, 태블릿 및 모바일보기에서 사이트를 볼 수있는 기능이 내장되어 있습니다..

툴바에서 원하는보기를 선택하면 (두 번째 옵션은 아래로) CSS Hero가 화면을 적절한 크기로 변환 할 수 있습니다. 더 작은 기기에 적용한 변경 사항을 테스트 할 수있는 좋은 방법입니다..

CSS Hero 태블릿보기

다음으로 중요한 기록 기능이 있습니다. 저장 버튼을 누를 때마다 CSS Hero는 웹 사이트의 스냅 샷을 저장합니다. 이러한 스냅 샷은 버튼 클릭으로보고 복원 할 수 있습니다. 즉, 힘든 작업을 잃어 버리지 않습니다. 시간을 앞뒤로 건너 뛸 수 있습니다..

마지막으로 도구 섹션에서 사용할 수있는 CSS 내보내기 옵션이 있습니다. 이를 통해 편집 한 CSS를 다른 웹 사이트에서 사용하기 위해 내보내거나 화면에 표시하여 변경 사항을 연구 할 수 있습니다 (CSS를 배우는 가장 좋은 방법 중 하나)..

인스펙터 프로 애드온

개인 또는 프로 요금제로 업그레이드 한 사용자는 라이센스에 CSS Hero 애드온 인스펙터 프로도 포함됩니다.

2015 년 5 월에 발표되었으며 최근 베타 모드에서 벗어난 Inspector Pro는 고급 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 영웅 아카데미

Developers Knowledge Base라는 고급 문서 섹션도 있습니다. 이 제품은 플러그인 / 테마 개발자를 대상으로하며, 제품이 완전히 CSS 영웅 호환 (일명, 영웅 지원)이되도록 제품과 관련된 단계를 안내합니다..

자세한 문서에도 불구하고 여전히 문제를 해결할 수없는 사람들을위한 지원 포럼도 있습니다. CSS Hero 지원 직원은 일반적으로 몇 시간 안에 모든 질문에 답변 할 수 있습니다. 라이센스를 통해 1 년 동안 포럼 및 지원 팀에 액세스 할 수 있습니다.

CSS 지원 포럼

전반적으로 CSS Hero는 지원 노력으로 잘못 될 수 없습니다. 미리 작성 및 기록 된 자습서는 매우 유용하며 사용자 경험 전반에 걸쳐 필요할 가능성이 가장 높은 지점에 점선으로 표시되어 있습니다..

WordPress 플러그인이 점점 정교 해짐에 따라 CSS Hero의 예를 따르는 개발자가 더 많아 져서 즉시 지원을 제공하여 경험이없는 사용자가 깊이 느끼지 않게하고 싶습니다..

마지막 생각들

전반적으로 CSS Hero에 깊은 인상을 받았습니다. 이러한 무제한 커스터마이징 가능성으로 인해이 플러그인은 쉽게 압도적 일 수 있습니다. 그러나 영리하고 직관적 인 인터페이스 (및 유용한 자습서) 덕분에이 플러그인은 전체적으로 사용하기 쉬웠습니다..

커스터마이징 옵션은 끝이 없어 상상할 수있는 방식으로 테마를 조정할 수 있습니다. 이를 통해 테마의 기초를 사용하여 코드로 손을 더럽 히지 않고도 멋진 독창적 인 디자인을 만들 수 있습니다..

그러나 CSS Hero는 아마추어 코더만을위한 것이 아닙니다. Inspector Pro는 처음부터 웹 사이트를 구축하려는 숙련 된 개발자를위한 흥미로운 도구입니다..

추가 기능을 사용하면 사이트를 처음부터 새로 작성할 수 있으며 코드를 작성할 때마다 한 줄씩 생성되는 것을 볼 수 있습니다. 그러나 사실적으로는 테마 사용자 정의에서 추측을 취해 개발자가 클라이언트 작업을 수행하는 데 많은 시간을 절약합니다..

전반적으로 CSS Hero는 최고의 플러그인이며 모든 기술 수준의 WordPress 사용자에게 호소력을 발휘하는 플러그인입니다. 아직 확인하지 않은 경우 확인하십시오.!

(업데이트 – 3 월 16 일 –이 글을 쓴 이후 CSS Hero는 우리에게 특별한 할인 쿠폰 코드 WinningWP 독자에게 최대 40 % 할인 – 쿠폰보기.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me