Visual Composer <소개편>
클릭을 코딩으로 바꿔주는 플러그인, 비주얼 컴포저(Visual Composer)
![Visual Composer 소개편](https://presscat.co.kr/wp-content/uploads/2017/01/responsive-wide-post6.jpg)
워드프레스는 플러그인을 사용할 수 있다는 큰 장점을 가진 플랫폼입니다.
그 수많은 플러그인 중 오늘은 바로
비주얼 컴포저(Visual Composer)라는 플러그인을 소개하겠습니다!
왜 하필 비주얼 컴포저냐구요?
그에 대한 답은 아래 이미지를 보면 알 수 있습니다.
![프레스캣 웹사이트 중 구글 지도와 문의 폼](https://presscat.co.kr/wp-content/uploads/2017/01/presscat-contact.jpg)
좌측에 구글 지도와 우측 문의 폼이 보이시죠?
이 모두 코딩이 아닌 비주얼 컴포저로만 만들어낸 것입니다.
구글 지도는 해당 사이트에서 제공해주는
HTML 코드를 그대로 갖고 와서 붙여 넣기만 하면 끝.
문의 폼은 더 쉽습니다.
문의를 받을 메일 주소만 입력하면 끝이랍니다.
이 두 가지 기능을 코딩으로 구현하려면
전문가에게 맡겨야 하고 비용 부담도 생기겠죠?
그래서 홈페이지 제작 시 비용 절감에 도움이 되는
비주얼 컴포저를 알려드리려 합니다.
또 비주얼 컴포저로 만들어진 웹사이트를
직접 유지보수해야 할 경우도 많은 도움이 되리라 생각해요~
이번 글은 비주얼 컴포저의 소개와 간단한 사용 방법을 알아보는
<소개편>이며, 다음 시간에는 해당 플러그인을 사용하여
완성도 높은 페이지를 만들어보는 <응용편>을 순서로 진행하겠습니다.
내용 순서
1. 소개
2. 구입 방법
3. UI 구성
4. 사용 방법
1. 소개
비주얼 컴포저는 단지 클릭만으로 페이지 레이아웃 구성과
다양한 유형의 컨텐츠를
쉽게 추가시킬 수 있어
홈페이지 제작에 큰 도움을 주는 플러그인이다.
코딩을 몰라도 원하는 페이지가 뚝딱
만들어지니 참으로 고마운 플러그인이 아닐 수 없다.
2. 구입 방법
아쉽게도 비주얼 컴포저는 유료 플러그인이라 구입이 필요하다.
보통 플러그인을 별도로 구입하는 대신 유료 테마에 내장되어 사용하는 경우가 많다.
테마를 구입할 예정이라면 비주얼 컴포저가 포함되어 있는지 확인해 볼 것!
별도 구매는 Envato market에서 구입할 수 있는데
가격은 6개월에 $34, 12개월에 $11.25가 추가된다. (2017.01 기준)
3. UI 구성
플러그인을 설치했다면 워드프레스 관리자 페이지에서
페이지 추가 또는 페이지 편집 화면에 가보자.
‘BACKEND EDITOR’ 버튼을 클릭하면 아래와 같은 상태로 바뀐다.
![비주얼 컴포저 기능을 사용할 수 있는 작업 화면](https://presscat.co.kr/wp-content/uploads/2017/01/visual-composer-editor.jpg)
3-1 상태 전환 버튼
비주얼 컴포저를 사용하기 위해서는 ‘BACKEND EDITOR’ 상태여야 한다.
위 이미지가 해당 상태이며, 글자 또는 HTML 코드를 입력하여
편집하는 상태로 돌아가고 싶다면 ‘CLASSIC MODE’ 버튼을 클릭하면 된다.
![글자 또는 HTML 코드를 입력하여 작업할 수 있는 CLASSIC MODE](https://presscat.co.kr/wp-content/uploads/2017/01/classic-mode.jpg)
3-2 Add Element
원하는 요소(Element)를 추가할 수 있으며
비주얼 컴포저를 사용하는 데 가장 핵심적인 기능이다.
자세한 설명은 아래 4. 사용 방법에 있다.
3-3 Templates
현재 작업된 레이아웃을 템플릿으로 저장(My Templates)하거나
기존에 있는 템플릿을 가져와 사용(Default Templates)할 수 있다.
![템플릿과 관련된 작업을 할 수 있는 창](https://presscat.co.kr/wp-content/uploads/2017/01/templates.jpg)
4. 사용 방법
비주얼 컴포저로 페이지를 만들기 전에 먼저 두 가지를 생각해봐야 한다.
어떤 컨텐츠를 어떤 비율로 나타낼 것인가?
여기서 컨텐츠는 텍스트, 이미지, 동영상, 구글 지도 등
페이지를 채우는 내용이라고 생각하면 되고
비주얼 컴포저에서는 요소라고 한다.
참고로 많이 쓰이는 기본적인 요소 12개를 뽑아 보았다.
![많이 사용되는 비주얼 컴포저 요소 12가지 – Row, Text Block, Icon, Google Maps, Single Image, Image, Button1, Button2, Facebook Like, Tweetmeme Button, Video player, Contact Form](https://presscat.co.kr/wp-content/uploads/2017/01/recommended-elements.jpg)
그다음은 컨텐츠의 비율인데
정확하게는 컨텐츠를 담는 열(Column)의 비율을 말한다.
예를 들면 이미지 3개를 한 줄에 동일한 비율로 표현하거나
텍스트와 이미지를 3:1의 비율로 표현하는 것이라고 생각하면 된다.
이것은 행(Row)이라는 요소 내에서 지정한다.
TIP
행(Row) 요소에서 열의 비율 지정하기
열의 비율은 1/12부터 1/1까지 지정할 수 있고
별도로 지정하지 않았을 때 기본값은 1/1이다.
![선택한 열의 비율에 맞게 생성되는 행 요소들 – 1/6, 1/3, 1/2, 1/1](https://presscat.co.kr/wp-content/uploads/2017/01/row-elements.jpg)
컨텐츠와 열의 비율을 정했으면 본격적으로
아래 방법에 따라 비주얼 컴포저를 사용해보자.
4-1 행(Row) 요소 추가
요소 추가(Add Element) 버튼을 클릭
![행 요소를 추가한 화면](https://presscat.co.kr/wp-content/uploads/2017/01/add-element-row.jpg)
4-2 열의 비율 지정
Custom을 클릭하여 뜨는 창에서 수식으로 입력(좌)하거나
아이콘에 마우스 오버하여 원하는 비율의 아이콘을 클릭(우)할 수도 있다.
수식 입력 시에는 합계가 1이 되어야 한다.
예시에서는 1/4 + 3/4를 선택하였다.
![열의 비율을 지정하는 방법 – 아이콘 클릭 또는 수식 입력](https://presscat.co.kr/wp-content/uploads/2017/01/set-row-layout.jpg)
4-3 컨텐츠 요소 추가
추가된 행 영역에서 + 버튼을 클릭하여 넣고자 하는
컨텐츠 성격에 맞는 요소를 선택하고 요소별 옵션까지 지정하면 끝난다.
![Image와 Text Block 요소로 각각의 열을 채운 화면](https://presscat.co.kr/wp-content/uploads/2017/01/fill-contents.jpg)
![화살표](https://presscat.co.kr/wp-content/uploads/2017/01/arrow.png)
![결과 화면](https://presscat.co.kr/wp-content/uploads/2017/01/result.jpg)
여기까지 비주얼 컴포저에 대해 알아보았습니다.
몇 번의 클릭만으로 원하는 비율의 컨텐츠를 만들어주니 참 기특한 플러그인이죠?
예시에서는 이미지와 텍스트 요소 두 가지만 사용하였지만
구글 지도, 페이스북 좋아요 버튼, 문의 폼, 동영상 플레이어 등의
다양한 기능의 요소도 총 100여 개나 된답니다.
위에 추천한 12개 요소를 포함해 특히 많이 사용되는 요소는
다음 <응용편>에서 다룰 예정이니 잊지 말고 다시 찾아와 주세요~ (꼭이요!)
Visual Composer <응용편>이 궁금하다면? 아래 링크 클릭!
▼ ▼ ▼
![PRESSCAT 홈페이지 제작은 프레스캣에서! 지금 바로 클릭 Primium Web Agency](https://presscat.co.kr/wp-content/uploads/2017/05/round_pen.png)