사전 검토: 프런트 엔드 편집기를 통해 모든 것을 사용자 정의

제작자가 "WordPress의 미래"라고 청구한 Upfront는 WPMU DEV에서 2015년 초에 출시한 새로운 웹 사이트 빌더 및 콘텐츠 편집기 도구입니다.

Upfront에는 WordPress 웹사이트를 위한 다양한 시작 테마가 포함되어 있습니다. 선택을 한 후에는 시각적, 프런트 엔드, 끌어서 놓기 인터페이스를 통해 웹사이트의 거의 모든 요소를 ​​사용자 정의 할 수 있습니다.

Upfront는 또한 기본 WordPress 게시물 및 페이지 편집기 화면을 대체하여 WordPress에 인라인 편집을 제공합니다. 따라서 초보자용 테마를 완전히 재설계하여 나만의 맞춤형 웹사이트를 구축하거나 WordPress에 새 콘텐츠를 더 직관적으로 추가 하려는 경우 Upfront는 여러분이 기다려온 도구가 될 수 있습니다.

이것이 WordPress를 위한 최고의 빌더 도구인지 알아보려면 전체 Upfront 검토를 읽으십시오. 또는 데모로 바로 이동하여 직접 경험해 보십시오.

사전 검토: 이 사이트 빌더 도구가 할 수 있는 작업

Upfront는 부모 자식 테마 관계에서 작동합니다. 즉, Upfront가 WordPress 웹 사이트에 핵심, 상위 테마로 설치된 다음, Upfront용으로 구축된 하위 테마 중 하나에서 선택할 수 있습니다.

이러한 하위 테마는 웹 사이트의 기초로 작동합니다. 작성 당시 Fixer, Scribe 및 Spirit의 세 가지 하위 테마 중에서 선택할 수 있습니다 . 하지만 앞으로 더 많은 디자인이 추가될 예정입니다.

그들은 모두 좋아 보이고 사용자 정의가 필요하지 않은 독립 실행형 테마로 똑같이 잘 작동합니다.

프런트 엔드 드래그 앤 드롭 편집

하위 테마 또는 초보자용 테마를 선택한 후에는 사용자 정의할 수 있습니다.

언급했듯이 모든 편집 및 디자인 작업은 직관적인 프런트 엔드, 끌어서 놓기, 시각적 편집기를 통해 이루어집니다. 이것은 당신이 보는 것이 실제로 당신이 얻는 것을 의미합니다. 기본 코드를 직접 편집하거나 작업을 미리 보기 위해 창을 전환할 필요가 없습니다.

부동 영역, 무제한 페이지 요소

사용자 정의 페이지 레이아웃을 구축할 때 Upfront는 영역과 요소를 사용합니다. 사용 가능한 요소(작성 당시 16개)를 웹사이트 페이지로 끌어다 놓을 수 있습니다. 이미지와 같은 페이지 요소를 제자리에 끌어다 놓을 수 있을 뿐만 아니라 라인에서 텍스트를 편집 할 수도 있습니다.

이 인라인 편집은 텍스트를 두 번 클릭 한 다음 입력을 시작하기만 하면 됩니다. 또한 프론트 엔드 편집기를 통해 텍스트를 추가하고 편집하는 동안 좋은 서식 컨트롤 세트에 액세스할 수 있습니다.

텍스트 영역과 이미지를 드래그 앤 드롭한 다음 시각적 인터페이스를 통해 이동할 수 있을 뿐만 아니라 선택할 수 있는 다른 페이지 요소가 많이 있습니다. 작성 당시 이러한 드래그 가능한 페이지 요소에는 슬라이더, 탭, 아코디언, 이미지 갤러리, 비디오, 양식, 버튼 및 지도가 포함됩니다. 또한 코드 요소를 사용하여 디자인에 사용자 정의 코드를 추가할 수 있습니다.

또한 타사 플러그인, WordPress 코어 또는 맞춤형 옵션 등 웹사이트에서 활성화된 모든 위젯을 페이지 디자인에 삽입할 수 있습니다. 이것은 실제로 웹사이트 레이아웃에 포함할 수 있는 범위를 거의 무제한으로 제공합니다.

전체 지역 사용자화

페이지를 구성하는 각 영역과 여기에 포함된 요소를 추가로 사용자 지정할 수 있습니다. 여기에는 크기 변경이 포함됩니다. 위치; 배경 유형 – 비디오, 슬라이더, 지도 포함; 및 편집 중인 영역 유형과 관련된 기타 모양 설정. 편집 아이콘을 클릭하면 상황에 맞는 패널이 표시되며 이를 통해 변경할 수 있습니다.

변경 사항은 모두 실시간으로 적용됩니다 . 이 프런트 엔드 편집기의 실시간 미리 보기 효과 덕분에 페이지를 새로 고칠 필요가 없습니다.

페이지 주변의 영역을 끌어 이동하면 그리드에 고정되지 않고 떠 있는 것을 알 수 있습니다. 이는 임의의 경계에 구속되지 않고 진정한 자유 흐름 설계를 생성할 수 있음을 의미합니다.

그러나 픽셀 푸셔의 경우 Upfront에는 페이지 요소를 보다 정확하게 정렬하는 데 도움이 되는 편리한 시각적 그리드 (선택 사항)가 포함되어 있습니다.

사용자 정의 프런트 엔드 게시물 및 페이지 편집

Upfront를 사용하면 웹사이트의 각 게시물과 페이지에 고유한 사용자 지정 디자인과 레이아웃 이 포함될 수 있습니다. 이 모든 것은 비주얼, 프런트 엔드, 드래그 앤 드롭 인터페이스를 통해 구축할 수 있습니다.

사이트의 백엔드에서 게시물을 생성할 필요를 제거한 다음 프론트 엔드 미리보기와 핵심 편집기 사이를 앞뒤로 전환하여 올바른 모양을 얻기 위해 Upfront는 이미 WordPress를 가로막는 한 가지 주요 영역을 해결했습니다. 위젯 및 요소와 같은 추가 사용자 지정 및 콘텐츠 옵션 덕분에 완전히 다른 가능성의 영역도 열렸습니다.

사이트 전체에서 사용되는 전체 머리글 및 바닥글 영역을 사용자 정의할 수 있지만 단일 페이지에 대한 보다 사용자 정의 모양을 위해 개별 게시물 및 페이지 기반으로 해당 영역을 사용자 정의할 수도 있습니다.

Upfront의 다른 주목할만한 기능 으로는 스마트폰과 태블릿을 통해 웹사이트에 액세스하는 모바일 사용자의 증가를 위한 완전 반응형 레이아웃이 있습니다. WPMU DEV 팀에서 예상할 수 있듯이 이 테마는 Multisite를 완벽하게 지원합니다.

사용자 정의 게시물 유형도 지원되며 일반 블로그 게시물 유형과 동일한 방식으로 편집할 수 있습니다. 또한 사용자 정의 인터페이스를 처음 시작할 때 시작하는 데 도움이 되는 편리하지만 간략한 둘러보기가 있습니다.

Upfront의 주요 기능은 모든 작업 및 콘텐츠 편집이 프런트 엔드 편집기를 통해 이루어진다는 것입니다. 이것이 프로젝트 개발자가 경쟁에서 분리하기를 바라는 것입니다. 일부 다른 WordPress 페이지 빌더는 웹 사이트 사용자 정의를 위한 프런트 엔드 편집기를 제공하지만 Upfront는 블로그 게시물 콘텐츠 생성을 포함하여 프런트 엔드, 시각적 인터페이스를 통해 모든 작업이 수행되는 유일한 것 같습니다.

사전 검토: 사용자 경험

Upfront를 웹사이트에 업로드하고 이를 위한 스타터, 하위 테마 중 하나를 선택한 후에는 웹사이트 작업을 시작할 수 있습니다.

웹사이트의 프런트 엔드 보기에서 'Upfront를 사용하여 테마 사용자 정의' 버튼을 클릭하면 편집 인터페이스가 시작됩니다.

옵션 둘러보기를 통해 플러그인의 주요 기능을 안내합니다. 또는 바로 뛰어들어 시작할 수 있습니다. 스타터 테마는 최신 WordPress 테마의 모든 기능으로 채워 지므로 기존 요소를 검사하고 사용자 지정하여 시작할 수 있습니다.

자신의 이미지를 교체하는 것은 이미지를 클릭한 다음 새 이미지를 미디어 라이브러리로 끌어다 놓는 것만큼 쉽습니다. 그러나 원하는 만큼 기존 콘텐츠를 삭제할 수 있습니다 . 이를 통해 Upfront로 창의력을 발휘할 수 있습니다.

사용 가능한 요소를 페이지 레이아웃에 추가할 때 실제로는 페이지의 아무 곳이나 끌어서 놓는 경우입니다. 페이지에 추가되면 각 요소를 고유한 방식으로 사용자 지정할 수 있습니다. 예를 들어, 게시물 요소 를 수정하여 레이아웃에 단일 또는 게시물 목록을 표시할 수 있습니다.

이것은 사용자 정의 게시물 아카이브 페이지를 만들 거나 웹사이트의 홈 페이지에서 최고의 게시물을 강조하는 데 유용합니다. 게시물 요소에 대한 설정은 해당 콘텐츠가 표시되는 방식에 대해 많은 유연성을 제공합니다. 여기에는 표시할 게시물뿐만 아니라 게시물의 어떤 부분을 포함할 것인지도 포함됩니다. 여기에는 게시 날짜, 댓글 수, 추천 이미지 등이 포함됩니다.

Upfront를 사용하여 스타터 테마의 홈 페이지를 디자인하고 사용자 정의할 뿐만 아니라 게시물 및 페이지에서 작업할 때도 사용됩니다 . 이것은 웹사이트 디자인과 콘텐츠 제작을 위한 매끄럽고 일관된 인터페이스를 생성하기 때문에 훌륭합니다.

게시물 및 페이지 보기로 전환하려면 게시물 / 페이지 링크를 클릭한 다음 편집할 기존 콘텐츠를 선택하거나 새 항목을 생성하기만 하면 됩니다.

그러면 선택한 게시물이 Upfront 편집기에서 열립니다 . 이를 통해 단순히 콘텐츠를 추가하거나 디자인을 점검할 수 있습니다. 작업을 미리 보기 위해 창을 전환해야 하는 투박한 WordPress 사후 편집 시스템을 교체하면 핵심 소프트웨어를 즉시 업그레이드할 수 있습니다.

추천 이미지 추가, 게시물 제목 수정, 게시물 내용 추가와 같은 기본 WordPress 게시물 편집 화면을 통해 할 수 있는 대부분의 작업은 Upfront의 시각적 인터페이스를 통해 수행할 수 있습니다.

웹사이트의 타이포그래피를 변경 하려는 경우 Upfront에서 쉽게 변경할 수 있습니다. 테마 설정 패널을 통해 제목 2와 같은 유형 요소를 선택한 다음 사용된 글꼴을 편집할 수 있습니다. 그런 다음 사이트 전체에 걸쳐 전역적으로 적용됩니다.

여전히 개별 요소의 텍스트 모양을 사용자화할 수 있습니다. 그러나 테마 설정을 사용하면 전체 사이트에 변경 사항을 빠르게 적용 할 수 있습니다. 사이트 색상에도 동일하게 적용되지만, 인터페이스는 웹사이트의 어떤 요소에 각 색상 설정이 적용되는지 명확하지 않습니다.

시작 테마의 모양과 내용을 빠르게 변경하려면 Upfront를 선택하는 것이 매우 쉽습니다. 그러나 더 광범위한 사용자 정의를 수행하거나 처음부터 고유한 페이지 레이아웃을 구축하는 경우 파악하는 데 더 많은 시간 투자가 필요합니다.

이것은 꽤 합리적입니다. 특히 이 도구의 범위와 기능을 고려합니다. 이 유형의 다른 WordPress 테마 및 플러그인과 마찬가지로 더 많이 넣을수록 장기적으로 더 많은 것을 얻을 수 있습니다.

가격

WPMU DEV 멤버십 클럽에 가입하면 선결제가 될 수 있습니다. 이를 통해 Upfront는 물론 350개 이상의 플러그인 및 기타 테마에 액세스할 수 있습니다. 멤버십 요금은 연간 요금제에서 월 $24.50부터 시작하여 월별 지불 옵션에서 최대 $99입니다.

가입 후, 그리고 회원인 동안 연중무휴 지원 포럼과 일일 라이브 채팅 세션에 액세스할 수 있습니다. Upfront 의 전체 가격 옵션 을 확인하려면 WPMU DEV 웹사이트를 방문하세요.

결론

WPMU DEV는 새로운 WordPress 테마 출시와 관련하여 한동안 조용했습니다. Upfront가 출시되면서 그 이유를 쉽게 알 수 있습니다. 2년 이상의 제작 기간과 "백만 달러 이상"을 사용한 Upfront는 확실히 WPMU DEV 팀과 WordPress 자체에 중요한 프로젝트입니다.

Upfront의 발표에서 제작자 는 이 도구와 일반적으로 WordPress의 경쟁에 대해 흥미로운 점을 지적합니다. Squarespace, Wix 및 Weebly와 같은 서비스는 현재 WordPress보다 적은 개발 및 맞춤형 사용자 정의 및 확장 기회를 제공하지만 콘텐츠 게시 및 웹사이트 모양을 원하는 대로 만들기 위한 보다 사용자 친화적인 인터페이스를 제공합니다.

Upfront는 이러한 유형의 사용자 정의 인터페이스를 WordPress에 가져오는 것을 목표로 합니다. 전반적으로 꽤 좋은 일을 합니다. 자신, 고객 또는 이 소프트웨어를 추천하는 사람들을 위해 WordPress를 보다 사용자 친화적으로 만들고 싶다면 Upfront를 사용할 수 있는 옵션 중 하나입니다.

Upfront를 선택하는 것은 제3자 솔루션에 자신을 묶는 것과 관련이 있습니다. WordPress가 코어의 일부로 또는 '공식' 애드온을 통해 이러한 종류의 편집 경험을 제공할 수 있다면 좋겠지만 당분간은 Upfront가 있습니다.

자신만의 테마를 디자인하거나 기성품을 맞춤화할 수 있는 코더와 개발자는 Upfront가 별로 필요하지 않지만, 자신만의 맞춤 페이지 레이아웃과 디자인을 만들고 싶은 사람은 반드시 온라인 Upfront 데모를 수강해야 합니다. 시승을 위해.

Upfront의 경우 아직 초기 단계 이지만 좋은 출발을 보였습니다. 더 많은 스타터 테마가 온라인에 추가되고 추가 요소가 도입됨에 따라 이 사용자 친화적인 편집기는 실제로 자체적으로 등장해야 합니다.

Upfront에 대해 자세히 알아보거나 지금 데모를 사용해 보세요.

면책 조항: 저는 Upfront의 제작자인 WPMU DEV 블로그에 프리랜서로 게시물을 작성합니다. 그러나 이 글의 의견은 모두 제 의견이며 이 관계의 영향을 전혀 받지 않습니다.