CSS Hero 라이브 WordPress 테마 편집기

WordPress 사이트를 구축하고 있는데 조정하고 싶은 요소를 발견했다고 상상해 보십시오. 대답은 요소를 사용자 지정하기 위해 일부 CSS를 작성하는 것일 수 있습니다. 유일한 문제는 CSS를 변경하기에 충분한 CSS를 알지 못하고 사용할 올바른 코드를 검색하는 데 이미 몇 시간을 보냈다는 것입니다.

CSS를 처음부터 작성하지 않아도 되는 도구를 사용하면 상당한 시간을 절약할 수 있고 본격적인 편두통도 줄일 수 있습니다. 인스펙터에서 올바른 요소를 찾는 것은 잊으십시오. 사용할 올바른 CSS를 기억하고 사용할 위치에 대해 걱정하지 않아도 됩니다.

CSS Hero 플러그인은 WordPress 사이트를 빠르고 쉽게 사용자 지정하는 데 도움이 되는 100% 코드 없는 솔루션입니다. 확인 해보자!

CSS Hero로 사이트 사용자 지정

CSS Hero는 사이트의 모양을 쉽게 사용자 지정할 수 있는 WordPress용 플러그인입니다. 아름답게 디자인된 직관적인 포인트 앤 클릭 인터페이스가 있습니다.

어떤 WordPress 테마를 사용하든 사이트의 사용자 지정을 완전히 제어할 수 있습니다. 사이트에서 요소를 클릭하고 변경하고 실시간으로 확인하는 것만큼 간단합니다. CSS Hero를 사용하여 다음을 제어할 수 있습니다.

• 색상
• 타이포그래피 및 글꼴 스타일
• 측정
• …그리고 더!

CSS Hero는 기본적으로 반응형이므로 데스크탑과 모바일 장치 모두에서 사이트가 어떻게 보이는지 제어할 수 있습니다. 사이트 손상에 대해 걱정할 필요도 없습니다. 실시간 미리보기 기능 외에도 CSS Hero에는 생명을 구하는 데스크톱 기능이 포함되어 있어 변경 사항을 데스크톱으로만 제한할 수 있습니다.

기존 테마 파일을 변경하지 않고 CSS Hero Theme Editor에서 원하는 만큼 변경할 수 있습니다. CSS Hero 플러그인을 비활성화하면 사이트가 원래대로 돌아갑니다.

숙련된 WordPress 디자이너가 알고 있듯이 사이트에 너무 많은 CSS를 추가하면 성능이 크게 저하될 수 있습니다. 그러나 CSS Hero는 많은 CSS 코드를 쌓지 않습니다. 오히려 테마의 스타일시트를 재정의하는 단일 정적 추가 스타일시트를 생성합니다.

이미 CSS 작성 경험이 있는 경우 CSS Hero 코드 편집기에서 자신의 코드를 추가할 수도 있습니다. 포인트 앤 클릭 인터페이스와 동일한 실시간 미리보기 기능을 제공하고 코드에서 실수를 즉석에서 확인합니다. 또한 나만의 미디어 쿼리를 추가할 수 있습니다. 다른 곳에서 사용하기 위해 CSS 코드를 내보낼 수도 있습니다.

CSS Hero는 다음과 잘 작동합니다.

• 엘리멘터
• 비버 빌더
• GeneratePress
• 우커머스
• 구텐베르크
• 테미파이
• 튜터LMS
• 비비프레스
• 문의 양식 7
• …그리고 더!

원하는 테마로 작업하고 사이트의 모든 요소를 ​​사용자 지정할 수 있습니다.

CSS Hero를 사용하여 사이트를 사용자 지정하는 방법

CSS Hero를 사용하는 것은 만족스럽고 직관적이지만 설정과 플러그인의 주요 기능 중 일부를 사용하는 방법을 안내해 드리겠습니다.

1단계: CSS Hero 플러그인 설치

웹 사이트에서 CSS Hero 플러그인을 찾을 수 있습니다. 여러 가지 구매 계획이 있으며 나중에 가격을 다룰 것입니다. 그들은 30일 환불 보장을 제공하므로 시도해 볼 위험이 없습니다.

계정을 만들고 나면 계정 대시보드에서 플러그인의 최신 버전을 다운로드하기만 하면 됩니다.

.zip 파일이 컴퓨터에 저장되면 WordPress 사이트로 이동하여 Plugins→Add New 로 이동합니다. 플러그인 zip 파일을 찾아 업로드하고 활성화합니다.

2단계: 계정 연결

라이선스 활성화를 요청하는 알림이 WordPress 관리 대시보드에 즉시 표시됩니다. 큰 파란색 버튼을 클릭하고 프롬프트에 따라 사이트에 라이선스를 추가합니다.

이제 상단 메뉴 표시줄에 CSS Hero 탭이 표시됩니다. 클릭하면 편집 환경으로 들어갑니다.

3단계: 사이트 편집

CSS Hero에서 편집 모드로 들어가면 Customizer와 유사한 현재 페이지의 미리보기 창이 표시됩니다. 그러나 이제 다양한 편집 옵션이 있습니다.

편집자

미리보기 창에서 커서를 움직이면 브라우저의 인스펙터에서 볼 수 있는 것처럼 호출된 페이지 요소가 더 자세하고 명확하게 표시됩니다.

왼쪽 메뉴에는 선택한 요소를 변경할 수 있는 편집 도구 세트가 있습니다. 내 예에서는 단순히 .site-title 요소를 선택하고 색상, 글꼴 크기, 글꼴 두께, 글자 간격을 변경하고 그림자를 추가했습니다. 이 모든 작업은 완전한 사이트 빌더처럼 느껴지는 슬라이더와 선택기가 포함된 직관적인 메뉴를 사용하여 수행되었습니다. 내 디자인 선택이 의심스러운 만큼 편집기는 사용하기가 매우 쉽습니다. 코드를 작성할 필요 없이 사이트 요소를 시각적으로 편집할 수 있습니다.

시각적 편집기 창 아래에는 요소를 수정할 때 적절한 CSS 코드 철자를 볼 수 있는 코드 편집기가 있습니다. CSS를 알고 있고 코드 자체를 조정하는 것을 즐기는 경우 두 가지 옵션을 모두 즐길 수 있습니다. CSS를 처음 사용하는 경우 유용한 학습 도구로 작동합니다.

코드 편집기에서 코드를 직접 변경하거나 추가할 수 있으며 시각적 편집기를 사용할 때와 마찬가지로 실시간 미리 보기를 볼 수 있습니다. CSS Hero는 또한 작업할 때 코딩 오류를 알려줍니다. 예를 들어 색상 선택기에서 인수 중 하나를 제거하고 쉼표를 남겨두면 어디에서 실수했는지 알려주는 경고가 즉시 나타납니다.

실수를 수정하면 경고가 자동으로 사라집니다.

여러 장치 미리보기

CSS Hero 편집기 상단 표시줄에서 다양한 장치에 대한 아이콘 배열을 찾을 수 있습니다. 기본값은 데스크탑 모드입니다. 장치 아이콘을 클릭하면 해당 장치 및 방향에 표시되는 미리보기가 표시됩니다. 또한 핸들을 사용하거나 하단의 상자에 픽셀 너비를 입력하여 미리보기 창의 크기를 조정할 수 있습니다.

또한 상단 표시줄 메뉴에는 편집할 요소를 선택하는 대신 사이트를 탐색할 수 있는 토글이 있습니다.

실행 취소 및 다시 실행 아이콘을 클릭하고 전체 편집 기록을 볼 수 있습니다.

더 많은 기능

이것이 CSS Hero 인터페이스의 주요 기능입니다. 이 편집기로 더 많은 작업을 수행할 수 있습니다. 상단 메뉴 표시줄에서 프로젝트 드롭다운을 클릭하면 더 많은 옵션이 제공됩니다.

변수

CSS Hero에서 활용할 수 있는 변수에는 LESS 변수와 CSS 변수의 두 가지 유형이 있습니다. 자주 사용하는 변수를 LESS Variables 아래에 추가하여 하나의 메뉴에서 관리할 수 있습니다. CSS 변수에서 모든 변수를 검색하고 이름과 값을 편집할 수 있습니다.

미디어 쿼리 설정

이 메뉴는 기존 미디어 쿼리를 모두 관리하고 필요에 따라 사용자 지정 쿼리를 추가할 수 있는 단일 위치를 제공합니다.

검문소

사이트의 일부 변경 사항을 미리 보고 싶지만 아직 라이브 사이트를 업데이트할 준비가 되지 않았다고 가정해 보겠습니다. 여기에서 Checkpoint가 도움을 드릴 수 있습니다. 원하는 대로 변경한 다음 체크포인트를 생성합니다. 라이브 사이트에 영향을 미치지 않도록 변경 사항을 취소할 수 있지만, 모든 작업을 다시 수행하지 않고도 언제든지 돌아가서 해당 변경 사항을 활성화할 수 있습니다.

맞춤 글꼴

.ttf, otf 및 woff 형식으로 원하는 사용자 지정 글꼴을 업로드할 수 있습니다.

비디오 배경

매끄럽고 간결한 비디오 루프 중 하나를 배경으로 추가하고 싶습니까? 놀랍게도 편집기에서 바로 이 작업을 수행할 수 있습니다. CSS Hero는 coverr에서 제공하는 많은 양의 사전 제작된 비디오 중에서 선택할 수 있도록 합니다. 요소를 선택하고 비디오를 선택한 다음 조정하기만 하면 됩니다. 그렇게 간단합니다.

CSS Hero 이전 및 이후

현재 사용자 정의 프로그램에서 원하는 모든 CSS를 추가할 수 있습니다. WordPress는 미리보기도 표시합니다.

잘 작동하지만 몇 가지 사항을 고려하십시오.

1. 당신은 CSS를 많이 또는 전혀 알지 못할 수도 있습니다.
2. 이전에 코딩한 것을 검색하는 데 많은 시간이 걸릴 수 있습니다.
3. 사용자 정의 프로그램의 모든 CSS는 사이트 속도를 크게 저하시킬 수 있습니다.

CSS Hero 편집기를 사용하기 시작한 후 시각적 편집기를 사용하여 코딩할 필요 없이 신속하게 변경할 수 있습니다. 요소를 클릭하면 수정한 내용을 쉽게 찾을 수 있습니다. CSS 코드는 깔끔하게 정리된 자체 스타일시트에 포함되어 있기 때문에 사이트 속도를 저하시키지 않습니다.

가격

CSS Hero는 3단계의 연간 요금제와 평생 요금제를 제공합니다. 앞서 언급했듯이 모든 요금제 구매 후 30일 이내에 100% 환불이 보장됩니다. 시도해 볼 위험이 거의 없습니다.

기동기

이 계획은 하나의 사이트만 사용자 지정해야 하는 경우에 가장 적합합니다. 연간 $29에 모든 제품 업데이트와 기본 지원을 받을 수 있습니다.

개인의

프리랜서이거나 소규모 대행사를 운영하는 경우 다음 계층이 가장 적합할 수 있습니다. 최대 5개의 사이트에 CSS Hero를 설치할 수 있으며 모든 제품 업데이트 및 기본 지원을 받을 수 있습니다. 가격은 연간 $59입니다.

찬성

들리는 것처럼 이 계획은 전문 게시자와 대규모 대행사에 가장 적합합니다. 연간 $199에 WordPress Multisite를 지원하여 무려 999회 설치가 가능합니다.

평생 프로

이것은 999개의 사이트 설치, 우선 지원 및 평생 제품 업데이트를 영원히 얻을 수 있는 일회성 계획입니다. $599의 일회성 결제로 평생 보장됩니다.

직관적이고 쉬운 CSS 사용자 정의

모든 WordPress 디자이너에게 CSS Hero는 엄청난 가치가 있습니다. 손등처럼 CSS를 알고 있더라도 CSS Hero 편집기를 사용하면 사이트 편집을 놀랍도록 효율적으로 만들 수 있습니다.