LiveCanvas 검토 – 개발자 친화적인 WordPress 페이지 빌더

이 리뷰에서는 HTML 및 CSS 편집기가 내장된 WordPress 페이지 빌더 플러그인인 LiveCanvas를 살펴봅니다.

WordPress에 사용할 수 있는 페이지 빌더 플러그인이 많이 있지만, 이 플러그인은 가능한 한 개발자 친화적으로 만들어 경쟁사와 차별화하는 것을 목표로 합니다.

뿐만 아니라 이 페이지 빌더의 출력은 순수 HTML 및 CSS입니다. 덕분에 다른 페이지 빌더 플러그인에 비해 페이지가 더 빨리 로드되고 SEO 친화적이어야 합니다.

이 LiveCanvas 리뷰에서는 웹사이트에 적합한 WordPress 페이지 빌더 플러그인인지 결정하는 데 도움이 되는 이 도구의 모든 최고의 기능을 다룹니다.

시작하자…

LiveCanvas 플러그인은 누구를 위한 것입니까?

WordPress 웹사이트의 디자인을 완전히 제어하려는 사람은 LiveCanvas가 흥미로운 플러그인을 찾을 수 있어야 합니다.

그러나 LiveCanvas에는 개발자와 코더가 특히 매우 유용해야 하는 많은 기능이 있습니다. 이러한 기능은 LiveCanvas를 경쟁 제품과 구분하는 데 도움이 됩니다. 이 리뷰의 뒷부분에서 더 자세히 다룰 HTML 및 CSS 편집기 덕분에 이 WordPress 플러그인으로 사이트가 어떻게 보이는지 많은 제어가 가능합니다.

따라서 사용자 정의 WordPress 웹 사이트를 만들거나 사이트에 사용자 정의 디자인이 있는 페이지를 추가하려는 경우 LiveCanvas가 플러그인이 될 수 있습니다.

LiveCanvas는 UnderStrap의 사용자 지정 하위 테마인 자체 테마로 작동합니다. 이는 두 가지를 의미합니다. 좋은 사이트 성능과 Bootstrap 4를 CSS 프레임워크로 사용하는 것입니다.

LiveCanvas WordPress 플러그인 기능

LiveCanvas는 강력한 WordPress 페이지 빌더 플러그인이므로 많은 기능이 있습니다. 다음은 이 도구가 자신에게 적합한지 결정하는 데 도움이 되는 몇 가지 주요 기능입니다.

플러그인에 대한 간략한 개요를 보려면 이 비디오에서 LiveCanvas가 수행할 수 있는 작업을 빠르게 살펴보세요.

개발자 친화적인 페이지 빌더 플러그인

이 페이지 빌더의 개발자 친화적인 기능 중 하나는 LiveCanvas 코드 편집기입니다. 플러그인으로 페이지 디자인을 만들 때 기본 HTML과 CSS를 빠르게 볼 수 있습니다. 이 코드를 볼 수 있을 뿐만 아니라 사용자 친화적인 편집기를 통해 편집할 수도 있습니다.

이것은 다른 많은 WordPress 페이지 빌더 플러그인보다 훨씬 더 많은 자유를 제공합니다. 덕분에 기성 플러그인을 사용하면서 WordPress 웹사이트를 위한 진정으로 맞춤형 고유한 디자인을 만들 수 있습니다.

그러나 개발자가 아니고 기본 HTML 및 CSS 편집에 관심이 없다면 LiveCanvas의 프런트 엔드 WYSIWYG 인터페이스를 사용하여 페이지를 구축할 수 있습니다.

많은 레디메이드 콘텐츠

LiveCanvas는 완전히 사용자 정의된 WordPress 웹 사이트를 만들고자 하는 모든 사람에게 확실히 어필할 것이지만 멋진 기성 콘텐츠도 함께 제공됩니다.

사용자 정의 웹 페이지를 쉽게 만들기 위해 결합하고 혼합할 수 있는 많은 섹션이 손끝에 있습니다.

멘트는.

이 모든 기성품 섹션은 완전히 편집할 수 있으므로 제공되는 대로 사용하거나 사용자 정의하여 나만의 섹션으로 만들 수 있습니다. 부트스트랩 4를 사용하는 HTML5 코드 덩어리입니다.

이 콘텐츠에서 다루는 섹션 유형의 몇 가지 예에는 영웅 섹션, 기능 패널, 갤러리 그리드 및 클릭 유도문안 패널이 있습니다. 또한 팀원 프로필 패널, 가격 테이블 섹션 및 평가 디스플레이를 추가할 수 있습니다. 각 유형에는 다양한 변형이 있으므로 디자인 기본 설정과 요구 사항이 무엇이든 상관없이 사이트에 적합한 것을 찾을 수 있어야 합니다.

세련된 기성 콘텐츠 섹션 덕분에 LiveCanvas를 사용하여 페이지를 쉽고 빠르게 구축할 수 있습니다.

프런트 엔드 페이지 빌더 인터페이스

WordPress용 최고의 최신 페이지 빌더 플러그인과 마찬가지로 LiveCanvas에는 프론트 엔드 인터페이스가 있습니다. 즉, 모든 사용자 정의 작업은 WYSIWYG 편집기를 통해 이루어집니다. 과거에는 이 유형의 대부분의 플러그인을 사용하여 이 작업이 WordPress 웹사이트의 백엔드에서 수행되었을 것입니다. 작업 중인 페이지의 보기가 콘텐츠가 게시될 때 방문자에게 표시되는 버전과 전혀 같지 않기 때문에 불편했습니다.

LiveCanvas에는 프론트 엔드 인터페이스가 있으므로 작업하는 동안 페이지가 라이브로 전환될 때 페이지가 어떻게 보일지 매우 잘 알 수 있습니다. 이렇게 하면 작업을 저장하고 새 브라우저 탭에서 페이지를 미리 보고 탭을 전환하여 게시될 때 어떻게 보일지 확인할 필요가 없습니다. 덕분에 백엔드 편집기와 함께 페이지 빌더를 사용할 때보다 훨씬 빠르게 LiveCanvas로 사용자 정의 페이지 디자인을 만들 수 있습니다.

다음은 LiveCanvas 페이지 빌더 인터페이스의 몇 가지 최고의 기능입니다.

편집 기록

보다 창의적인 자유와 실수에 대한 걱정 없이 작업할 수 있는 기능을 제공하기 위해 LiveCanvas에는 실행 취소 기능이 있습니다. 이를 통해 사용자 정의 페이지 디자인의 이전 버전으로 되돌릴 수 있습니다. 이제 실수를 신속하게 되돌릴 수 있다는 사실을 알고 자신 있게 실험할 수 있습니다.

쉬운 HTML 및 CSS 편집

이 LiveCanvas 리뷰의 앞부분에서 언급했듯이 이 페이지 빌더 플러그인에는 코드 편집기가 있습니다.

다른 인기 있는 WordPress 페이지 빌더 플러그인과 달리 LiveCanvas를 사용하면 페이지의 기본 HTML 및 CSS를 쉽게 편집할 수 있습니다. 덕분에 콘텐츠가 표시되는 방식을 훨씬 더 많이 제어할 수 있습니다. 언제든지 HTML을 보고 변경할 수 있습니다. 이러한 변경 사항은 페이지에 즉시 적용되므로 콘텐츠 디자인을 보다 쉽게 ​​제어할 수 있습니다.

LiveCanvas를 사용하면 코드 편집기 인터페이스를 통해 HTML 및 CSS를 더 쉽게 편집할 수 있습니다. HTML 편집기를 열면 모든 코드가 명확하게 형식이 지정되고 정렬됩니다. 색상은 코드를 읽기 쉽게 하기 위해 사용됩니다. 또한 코드를 쉽게 접고 접을 수 있어 편집 중인 섹션을 더 명확하게 볼 수 있습니다.

코드 편집기 창의 크기를 조정해야 하는 경우에도 쉽습니다. 창의 가장자리를 드래그하여 필요에 따라 더 작게 또는 더 크게 만드십시오. LiveCanvas 코드 편집기의 또 다른 정말 인상적인 기능은 자동 완성 기능입니다. 이렇게 하면 자동 완성을 통해 제안하여 코드를 더 빠르게 작성하고 오류를 줄이는 데 도움이 됩니다. 코드 편집기의 또 다른 유용한 측면은 포함하는 것을 잊어버린 닫는 태그를 추가하여 코드를 수정할 수 있다는 것입니다.

LiveCanvas 편집기를 사용하면 페이지의 HTML 및 CSS를 편집할 때 너무 복잡해지는 것을 방지할 수 있습니다. 이를 위해 코드 편집기는 편집 중인 특정 요소를 제외하고 모든 HTML 및 CSS를 보기에서 숨깁니다. 이를 통해 페이지 코드의 나머지 부분에서 산만하거나 길을 잃지 않고 작업 중인 페이지 부분에 집중할 수 있습니다.

HTML에 대해 잘 모르더라도 이 기능은 여전히 ​​유용할 것입니다. 온라인에서 사용할 수 있는 HTML 스니펫이 너무 많기 때문에 해당 예제를 복사하여 LiveCanvas 페이지 디자인에 붙여넣을 수 있습니다. 이 때문에 온라인에서 찾은 클릭 유도문안 버튼과 같은 더 많은 요소를 페이지에 추가할 수 있습니다. 또는 HTML을 어느 정도 알고 있다면 자신의 HTML을 페이지에 쉽게 추가할 수 있다는 점에 감사할 것입니다.

나만의 벽돌 만들기: 블록 및 섹션 라이브러리

LiveCanvas에서는 자신의 HTML 청크를 로컬 라이브러리에 저장하여 페이지에서 쉽게 재사용할 수 있는 옵션이 있습니다. 이것은 시간을 절약해 주는 훌륭한 기능입니다. 여러 개의 사용자 정의 페이지나 웹 사이트를 만드는 사람들이 높이 평가할 것입니다.

실제로 섹션과 블록이라는 두 개의 별도 라이브러리가 있습니다. 섹션은 크고 전폭의 큰 기성 요소를 위한 것입니다. 블록은 그리드 내부에 들어가는 항목을 위한 것이므로 일반적으로 전체 너비가 아닙니다.

과거에 다른 WordPress 페이지 빌더를 사용했고 콘텐츠가 모두 비슷해 보인다면 이 기능을 사용하여 사용자 정의 모듈 라이브러리를 구축하여 디자인에 완전히 독창적인 모양을 부여하고 매우 구체적인 요구 사항을 충족할 수 있습니다. .

맞춤 바닥글 만들기

일부 WordPress 페이지 빌더에서는 게시물 및 페이지 영역만 편집할 수 있습니다. 하지만 LiveCanvas는 그렇지 않습니다. WordPress 웹 사이트에 대한 사용자 정의 바닥글을 만들고 싶다면 LiveCanvas로 할 수 있습니다. 바닥글에 위젯을 추가하는 것으로 제한되지 않습니다. 대신 LiveCanvas 콘텐츠 편집기 및 맞춤형 HTML 처리 지원을 통해 콘텐츠를 추가할 수 있습니다.

스톡 이미지에 대한 빠른 액세스

맞춤형 웹사이트 또는 페이지를 만드는 동안 LiveCanvas를 사용하여 레이아웃에 스톡 이미지를 빠르게 삽입할 수 있습니다. Unsplash와의 통합 덕분에 대규모 무료 이미지 라이브러리를 탐색할 수 있습니다. 마음에 드는 것을 찾으면 페이지에 빠르게 삽입할 수 있습니다. 이 모든 작업은 LiveCanvas 편집 인터페이스 내부에서 이루어집니다.

페이지 애니메이션 효과 *********

콘텐츠가 방문자의 관심을 끌 수 있도록 LiveCanvas를 사용하면 페이지에 애니메이션을 쉽게 추가할 수 있습니다. LiveCanvas의 백엔드 설정 페이지에서 옵션을 선택하면 Animate On Scroll 라이브러리가 사이트에 추가됩니다. LiveCanvas 편집기에서 페이드, 뒤집기, 슬라이딩 및 확대/축소와 같은 다양한 애니메이션을 각 요소에 할당하는 동시에 애니메이션의 지속 시간과 지연을 제어할 수 있습니다.

범용 단축 코드 지원

LiveCanvas를 사용하면 사용자 정의 페이지 디자인에 단축 코드를 삽입할 수 있습니다. 이를 통해 LiveCanvas 기반 페이지에서 모든 종류의 타사 플러그인 및 기능을 편리한 실시간 Ajax 미리 보기와 통합할 수 있으므로 단축 코드의 출력이 어떻게 보이는지 즉시 확인할 수 있습니다.

WordPress에 사용할 수 있는 단축 코드 플러그인이 너무 많기 때문에 LiveCanvas로 만든 맞춤 제작 페이지에 삽입할 수 있는 요소의 수를 빠르게 늘려 크리에이티브 옵션을 기하급수적으로 확장할 수 있습니다.

환상적인 보완 테마

LiveCanvas에는 권장되는 보완 스타터 WordPress 테마인 CustomStrap이 함께 제공됩니다.

속도와 안정성을 보장하기 위해 CustomStrap이 가장 평가되고 순수한 Bootstrap 4 기반 스타터 테마인 UnderStrap의 하위 테마라는 것을 알게 되어 기쁩니다.

CustomStrap에는 SCSS 컴파일러가 내장되어 있어 즉석에서 다시 빌드하고 Bootstrap의 CSS를 사용자 지정하여 특정 색상 팔레트를 가지며 고유한 스타일 트위스트를 제공할 수 있습니다. 명령 줄을 통해 기계.

일부 디자이너는 Bootstrap 사이트가 모두 똑같아 보인다고 주장합니다. CustomStrap에서는 이런 일이 발생하지 않습니다. 수천 개의 글꼴, 색상, 스타일 조합이 있습니다.

CustomIt은 또한 오늘날의 모바일 퍼스트 세계에서 매우 유용한 반응형 타이포그래피 기능을 활성화할 수 있습니다.

그러나 한 가지 선택에 얽매이지 않습니다. LiveCanvas는 모든 Bootstrap 4 기반 WordPress 테마와 함께 작동합니다. 사용자 정의 Bootstrap 4 기반 테마가 있는 경우 LiveCanvas 플러그인을 원활하게 실행하여 사용자 정의 페이지를 구축할 수 있습니다.

공급업체 종속 없음

이 LiveCanvas 검토의 앞부분에서 다루었듯이 편집기의 시각적 인터페이스에서 생성된 HTML 및 CSS에 쉽게 액세스하고 편집할 수 있습니다. 이렇게 하면 페이지에서 더 많은 창의적 자유를 얻을 수 있지만 또 다른 이점도 있습니다.

LiveCanvas는 페이지 디자인을 위해 깨끗한 HTML과 CSS를 생성하므로 플러그인을 비활성화해도 페이지 디자인은 여전히 ​​정상적으로 작동합니다. 즉, 다른 페이지 빌더 플러그인의 경우처럼 평생 LiveCanvas를 사용하는 데 국한되지 않습니다.

플러그인이 비활성화된 경우에도 페이지 HTML 및 CSS에 액세스하고 편집하여 변경할 수 있습니다. 해당 플러그인을 다시 활성화하지 않는 한 LiveCanvas 사용자 인터페이스 또는 코드 편집기를 통해 변경할 수 없습니다.

LiveCanvas 플러그인 사용자 경험

이 페이지 빌더가 사용하는 방식에 대한 아이디어를 제공하기 위해 LiveCanvas 검토의 이 부분에서는 플러그인의 사용자 경험을 살펴봅니다.

언급했듯이 LiveCanvas는 모든 Bootstrap 4 기반 WordPress 테마와 함께 작동해야 합니다. 그러나 플러그인에는 다른 소스의 테마 대신 사용할 수 있는 자체 스타터 테마도 함께 제공됩니다.

선택한 테마에 관계없이 플러그인이 사이트에 설치되면 LiveCanvas 라이선스 키를 입력하여 자동 업데이트를 활성화할 수 있습니다.

WordPress 웹 사이트에 대한 사용자 지정 페이지 디자인 만들기를 시작하려면 단순히 WordPress 대시보드 내에서 새 페이지를 만드는 경우입니다.

플러그인은 해당 콘텐츠에 대해 LiveCanvas 편집기를 켤 수 있는 패널을 페이지 편집기에 추가합니다.

LiveCanvas 편집기 활성화

특정 페이지에 대해 LiveCanvas를 활성화하면 콘텐츠 편집기를 사용하여 사용자 정의 디자인을 만들 수 있습니다.

페이지에 섹션을 추가한 후 해당 섹션에 일부 콘텐츠를 삽입할 수 있습니다. LiveCanvas에는 사전 제작된 섹션이 많기 때문에 페이지 제작을 빠르게 시작할 수 있습니다.

기성품 페이지 섹션

페이지에 추가할 수 있는 다양한 요소가 모두 잘 정리되어 있어 원하는 것을 쉽게 찾을 수 있습니다. 페이지에 추가한 후에는 라이브 편집기를 통해 사용자 정의를 시작할 수 있습니다.

인라인 텍스트 편집

LiveCanvas에는 인라인 텍스트 편집 기능이 있으므로 텍스트 영역을 클릭하고 입력을 시작하여 자신만의 콘텐츠를 추가할 수 있습니다.

페이지에서 이미지와 같은 다른 유형의 요소를 편집하려는 경우에도 간단합니다. 그렇게 하려면 요소를 클릭하면 해당 항목에 대한 컨트롤이 사이드바에 표시됩니다. 그런 다음 사이드바 패널 컨트롤을 통해 해당 요소를 사용자화할 수 있습니다.

스마트폰 및 태블릿 뷰포트

페이지에서 작업하는 동안 언제든지 표시 영역의 크기를 변경할 수 있습니다. 이렇게 하면 콘텐츠가 다양한 장치에서 어떻게 보일지 잘 알 수 있습니다. 여기에는 작은 화면의 스마트폰, 태블릿 및 기타 사전 설정된 뷰포트가 포함됩니다.

HTML 및 CSS 편집

언급했듯이 LiveCanvas의 주요 기능 중 하나는 HTML 및 CSS 편집기입니다. 행과 같은 페이지 요소를 클릭한 다음 적절한 메뉴 항목을 클릭하면 언제든지 HTML 편집기로 전환할 수 있습니다.

혼동을 피하기 위해 HTML 편집기는 편집 중인 요소의 HTML만 표시합니다. 또한 HTML을 변경하는 즉시 페이지에 적용되어 편집 결과를 볼 수 있습니다.

이 페이지 빌더 플러그인이 작동하는 방식에 대한 아이디어를 제공하기를 바랍니다. 이제 가격 정보를 살펴보겠습니다.

LiveCanvas WordPress 플러그인 가격 정보

LiveCanvas는 두 가지 요금제에서 사용할 수 있는 프리미엄 플러그인입니다.

• 프로: 1년 동안 업데이트 및 지원에 액세스하는 데 연간 $79.
• 평생: 업데이트 및 지원에 대한 평생 액세스의 경우 $199.

어떤 옵션을 선택하든 LiveCanvas를 필요한 만큼 많은 웹사이트에서 사용할 수 있습니다. 여기에는 고객을 위해 만든 모든 사이트가 포함됩니다.

LiveCanvas 검토 최종 생각

LiveCanvas에는 가장 인기 있는 WordPress 페이지 빌더 플러그인에서 찾을 수 있는 최고의 기능이 많이 있습니다. 여기에는 최신 끌어서 놓기 인터페이스, 다양한 기성 콘텐츠 및 다양한 사용자 지정 컨트롤이 포함됩니다.

그러나 사용자 친화적인 HTML 및 CSS 편집기도 있어 페이지 디자인을 훨씬 더 잘 제어할 수 있습니다.

따라서 유연하고 개발자 친화적인 WordPress 페이지 빌더 플러그인을 찾고 있다면 LiveCanvas가 훌륭한 옵션입니다.

이 페이지 빌더 플러그인에 대해 자세히 알아보려면 LiveCanvas 웹사이트를 방문하세요.