워드프레스 페이지 편집디자인 플러그인 비주얼컴포저(Visual Composer)

워드프레스의 설치가 끝나면 일반적으로 메뉴구성 및 Home 화면을 디자인 하게 됩니다.
물론 별도의 페이지로 만들어진 Home 화면대신 블로그의 최신글보기등으로 설정해도 되지만 페이지로 만들어진 Home 화면이 있는 경우와 그렇지 않은 경우는 외적으로 볼때 많은 차이가 있습니다.
이렇게 개인용 블로그로 워드프레스를 사용하는 경우도 페이지를 만들게 되는 상황이 발생하며 기업용으로 제작되는 경우는 더 많은 페이지구성이 필요하게 됩니다.
하지만 기본적인 워드프레스 편집기로는 페이지구성에는 한계점이 있습니다. 이러한 페이지 편집디자인을 도와주는 플러그인중 대표적인 플러그인이 바로 비주얼 컴포저(Visual Composer) 입니다.

워드프레스 페이지 편집디자인 플러그인 비주얼컴포저(Visual Composer)

비주얼컴포저는 $28의 가격을 가진 유료 플러그인으로 Codecanyon에서 구매할수 있습니다. Codecanyon은 좀 낯설게 느껴지시겠지만 이미 여러차례 소개해드린 테마포레스트(Themeforest) 사이트에서 확인하실수 있습니다.

비주얼컴포저는 별도로 구매할수도 있지만 막강한 기능덕분에 유료 테마에 기본적으로 포함된 경우도 많습니다. 인기 테마중 하나인 “The 7” 테마처럼 비주얼컴포저가 기본적으로 포함된 것이 예입니다.

The 7 테마는 매주 판매량 TOP 10에 이름을 올릴 정도로 잘 만들어진 반응형 워드프레스 테마로 상세한 내용은 이곳을 참조하시면 되겠습니다.
따라서 비주얼 컴포저 플러그인을 구하는 방법은 2가지로 기본적으로 비주얼컴포저가 제공되는 테마를 구입하거나 별도로 비주얼컴포저 플러그인 만 구매하는 방법이 있습니다.
당연히 비주얼컴포저가 제공되는 테마를 구입하는 것이 비용적인 측면에서 유리합니다. 하지만 별도로 구매하더라도 비용이 아깝지 않은 플러그인이 비주얼 컴포저라고 하겠습니다.

비주얼컴포저(Visual Composer)는 어떻한 기능을 제공하는가?

비주얼 컴포저 플러그인이 없더라도 페이지 디자인을 할수는 있지만 난이도가 대폭 상승하게 됩니다. 그만큼 비주얼 컴포저의 페이지 편집디자인 지원 능력은 막강하다고 하겠습니다.
[pe2-image src=”http://lh5.ggpht.com/-WGw7AHaoWYw/VOlaj9H8rcI/AAAAAAAAGc4/vKBE2Z1LZpY/s144-c-o/%2525EB%2525B9%252584%2525EC%2525A3%2525BC%2525EC%252596%2525BC%2525EC%2525BB%2525B4%2525ED%25258F%2525AC%2525EC%2525A0%25258001.jpg” href=”https://picasaweb.google.com/102394476629197694908/201502#6118521142509350338″ caption=”” type=”image” alt=”비주얼컴포저01.jpg” ]
 
플러그인을 설치하게 되면 워드프레스 편집기 화면 상단에 비주얼컴포저 에디터 버튼이 생성되게 됩니다. Backend Editor 버튼을 누르게 되면 아래와 같은 화면이 나타나게 됩니다.
[pe2-image src=”http://lh5.ggpht.com/-whB0HLnrDIg/VOlakCSXyII/AAAAAAAAGb8/GxBTSNmoaGg/s144-c-o/%2525EB%2525B9%252584%2525EC%2525A3%2525BC%2525EC%252596%2525BC%2525EC%2525BB%2525B4%2525ED%25258F%2525AC%2525EC%2525A0%25258002.jpg” href=”https://picasaweb.google.com/102394476629197694908/201502#6118521143895246978″ caption=”” type=”image” alt=”비주얼컴포저02.jpg” ]
 
편집기 화면이 비주얼컴포져 편집 화면으로 전환되게 되는데 페이지 레이아웃,구성요소등을 쉽게 삽입할수 있도록 하고 있습니다.
레이아웃의 경우는 사전에 설정된 템플릿을 불러와 바로 구성할수 도 있습니다.
[pe2-image src=”http://lh4.ggpht.com/-yDI3pFEa5cs/VOlakPSyV5I/AAAAAAAAGcI/bSMhuEX2nL0/s144-c-o/%2525EB%2525B9%252584%2525EC%2525A3%2525BC%2525EC%252596%2525BC%2525EC%2525BB%2525B4%2525ED%25258F%2525AC%2525EC%2525A0%25258003.jpg” href=”https://picasaweb.google.com/102394476629197694908/201502#6118521147386648466″ caption=”” type=”image” alt=”비주얼컴포저03.jpg” ]
 

40개이상의 페이지 구성요소가 제공되며 지속적으로 업데이트되고 있는데 “Add Element” 라는 버튼을 누르면 구성요소 창이 나타나게 됩니다.

텍스트블럭,메시지박스,페이스북좋아요 버튼,구글맵, 버튼,유투브 동영상플레이어,이미지,슬라이드 등 거의 모든 요소를 원클릭으로 삽입할수 있습니다.

구성요소가 너무 많아 Content , Deprecated , Social …. 등의 그룹으로 분류하여 상단에 배치 관련 구성요소를 쉽게 찾을수 있도록 하고 있습니다.

[pe2-image src=”http://lh3.ggpht.com/-w19GPGJ-Qjg/VOlakuF3fSI/AAAAAAAAGcM/XTE8up8CyE4/s144-c-o/%2525EB%2525B9%252584%2525EC%2525A3%2525BC%2525EC%252596%2525BC%2525EC%2525BB%2525B4%2525ED%25258F%2525AC%2525EC%2525A0%25258004.jpg” href=”https://picasaweb.google.com/102394476629197694908/201502#6118521155653958946″ caption=”” type=”image” alt=”비주얼컴포저04.jpg” ]

 Templates (템플릿) 버튼을 누르면 사전에 설정된 레이아웃 템플릿이 나타나는데 기본 템플릿이외에도 My Templates 옵션이 제공되어 편집자가 원하는 템플릿을 저장하여 추후 다시 사용할수 있도록 하고 있습니다.

[pe2-image src=”http://lh3.ggpht.com/-bt2pKjvGxfg/VOlakzDKF8I/AAAAAAAAGc8/aGgDre0WHig/s144-c-o/%2525EB%2525B9%252584%2525EC%2525A3%2525BC%2525EC%252596%2525BC%2525EC%2525BB%2525B4%2525ED%25258F%2525AC%2525EC%2525A0%25258005.jpg” href=”https://picasaweb.google.com/102394476629197694908/201502#6118521156984772546″ caption=”” type=”image” alt=”비주얼컴포저05.jpg” ]

 페이스북 좋아요 구성요소를 페이지에 삽입하게 되면 해당 구성요소의 세부설정옵션이 나타나게됩니다. 페이스북 좋아요 구성요소에서는 버튼 타입을 선호하는 것으로 선택할수 있도록 되어 있습니다. 물론 구성요소마다 세부옵션설정은 크기,디자인,컬러,위치등 다양하게 제공됩니다.

 [pe2-image src=”http://lh4.ggpht.com/-VIT8qLwy3Ak/VOlalO8imII/AAAAAAAAGcU/Q_ol-WazEtM/s144-c-o/%2525EB%2525B9%252584%2525EC%2525A3%2525BC%2525EC%252596%2525BC%2525EC%2525BB%2525B4%2525ED%25258F%2525AC%2525EC%2525A0%25258006.jpg” href=”https://picasaweb.google.com/102394476629197694908/201502#6118521164473211010″ caption=”” type=”image” alt=”비주얼컴포저06.jpg” ]

 구성요소가 삽입된 상단에는 3개의 탭이 있는데 “전후좌우화살표,컬럼,+” 모양의 아이콘이 있습니다. 페이스북 좋아요 버튼이 좌우를 모두 차지할 이유가 없기 때문에 컬럼아이콘을 이용하여 컬럼을 분할할수 있습니다.

1/2+1/2 즉 좌우 폭 공간을 2개로 균등 분할해 보겠습니다.

[pe2-image src=”http://lh6.ggpht.com/-um-hyI40pS8/VOlalpdK3kI/AAAAAAAAGcs/5jEkq82EH7g/s144-c-o/%2525EB%2525B9%252584%2525EC%2525A3%2525BC%2525EC%252596%2525BC%2525EC%2525BB%2525B4%2525ED%25258F%2525AC%2525EC%2525A0%25258007.jpg” href=”https://picasaweb.google.com/102394476629197694908/201502#6118521171589389890″ caption=”” type=”image” alt=”비주얼컴포저07.jpg” ]

 비어있는 컬럼이 우측에 추가로 생성되게 됩니다. 이렇게 분할된 영역에는 새로운 구성요소를 집어넣을수 있습니다.

그런데 우측영역에도 페이스북 좋아요 버튼을 집어넣고 싶을때 어떻게 하면 될까요? 페이스북 좋아요 구성요소는 설정이 간단하지만 10개이상의 설정을 해야 하는 구성요소들도 있습니다.

이럴때는 매번 구성요소를 삽입한 후 재설정을 하는 것이 아니라 설정이 완료되어 만들어진 구성요소를 복제하여 사용하면 됩니다.

[pe2-image src=”http://lh6.ggpht.com/-zTJ0SUgxu-E/VOlalql2HeI/AAAAAAAAGcg/Qh4bHjD0oDs/s144-c-o/%2525EB%2525B9%252584%2525EC%2525A3%2525BC%2525EC%252596%2525BC%2525EC%2525BB%2525B4%2525ED%25258F%2525AC%2525EC%2525A0%25258008.jpg” href=”https://picasaweb.google.com/102394476629197694908/201502#6118521171894214114″ caption=”” type=”image” alt=”비주얼컴포저08.jpg” ]

 좌측의 구성요소에 커서를 대면  순서대로 연필모양,문서모양, 휴지통 모양의 아이콘이 나타나게 됩니다. 각각 편집 – 복제 – 삭제 의 역할을 합니다.

Clone Facebook Like 라는 돌출설명이 나오는데 설정값 그대로 복제하는 옵션입니다.

[pe2-image src=”http://lh5.ggpht.com/-KZWRxlFF6OA/VOlamQHWF9I/AAAAAAAAGco/Z6pVPkITutk/s144-c-o/%2525EB%2525B9%252584%2525EC%2525A3%2525BC%2525EC%252596%2525BC%2525EC%2525BB%2525B4%2525ED%25258F%2525AC%2525EC%2525A0%25258009.jpg” href=”https://picasaweb.google.com/102394476629197694908/201502#6118521181966833618″ caption=”” type=”image” alt=”비주얼컴포저09.jpg” ]

 이 버튼을 누르면 구성요소가 복제되어 하단에 배치되게 됩니다. 이제 간단하게 비어있는 우측 컬럼영역으로 옮기면 되는 것입니다.

[pe2-image src=”http://lh4.ggpht.com/-tws_XbRQ8AM/VOlam66fAWI/AAAAAAAAGcw/VpL3o67A0yY/s144-c-o/%2525EB%2525B9%252584%2525EC%2525A3%2525BC%2525EC%252596%2525BC%2525EC%2525BB%2525B4%2525ED%25258F%2525AC%2525EC%2525A0%25258010.jpg” href=”https://picasaweb.google.com/102394476629197694908/201502#6118521193455616354″ caption=”” type=”image” alt=”비주얼컴포저10.jpg” ]

이러한 방식으로 다양한 형태의 페이지를 매우 쉽게 구성할수 있도록 지원합니다. 처음에는 좀 어색할수도 있지만 쉽게 적응할수 있으며 비주얼컴포저를 사용하는것이 매우 편하다는 것을 느끼게 됩니다.

[pe2-image src=”http://lh3.ggpht.com/-C59fzlYCLjw/VOlmc9D2hRI/AAAAAAAAGdc/83gXMI6MF9o/s144-c-o/%2525EB%2525B9%252584%2525EC%2525A3%2525BC%2525EC%252596%2525BC%2525EC%2525BB%2525B4%2525ED%25258F%2525AC%2525EC%2525A0%2525B8%2525EA%2525B5%2525AC%2525EC%252584%2525B1%2525EC%25259A%252594%2525EC%252586%25258C.jpg” href=”https://picasaweb.google.com/102394476629197694908/201502#6118534216372618514″ caption=”” type=”image” alt=”비주얼컴포져구성요소.jpg” ]

비주얼컴포저(Visual Composer) 상세 정보 페이지 보러가기 

$28(원화 약 3만원)이라는 비용을  투자해야 하지만 비주얼컴포저는 디자이너 수준의 페이지 편집을 가능하게 해주며 가장 소중한 시간을 절약시켜 준다는 점에서 추천할 만한 워드프레스 플러그인이라고 하겠습니다.