Blog

Visual Composer 를 이용한 회사소개 페이지 만들기

Visual Composer 를 이용한 회사소개 페이지 만들기

Visual Composer는 정말 대단한 기능을 가진 편집기입니다. 예전에 html 배울때 자주 사용했던 드림위버나 나모웹에디터와 다소 유사한 개념의 프로그램이라고 보시면 이해가 쉬울거 같습니다..

Visual_Composer1

<그림 – Visual Composer 홈페이지 >

위 그림에서 [Live Preview]를 클릭하면 Visual Composer에 관한 유튜브동영상(http://goo.gl/Y1Vod)을 볼 수 있습니다. 유튜브 동영상을 보면 어떠한 기능을 가지고 있는지 어떻게 만드는지를 자세히 보여줍니다.

먼저 Visual Composer는 결제후 다운받으면 ‘codecanyon-242431-visual-composer-for-wordpress.zip 파일을 그대로 플러그인에 설치하면 됩니다. 그리고 Visual Composer는 반드시 페이지에서만 작동이 가능합니다. 여기서는 샘플로 저희 wordpressn.com의 운영진들을 소개하는 코너로 페이지를 만들어 보도록 하겠습니다.

페이지 추가를 하면 아래 그림처럼 제목칸 아래 [Visual Composer]가 생긴 것을 알 수 있습니다.

Visual_Composer2
<그림 – 페이지 추가시 나타나는 Visual Composer >

이제, 제목을 입력하고 [Visual Composer]를 클릭해 봅니다.

Visual_Composer3
< 그림 – Visual Composer 클릭시 페이지에 나타나는 화면>

이제 그림 [Add element] 클릭을 하면 아래와 같이 Element type를 선택할 수 있습니다.

Visual_Composer4
<그림 Select element type 종류들 >

그럼 여기서는 몇 가지 기본적인 방법만 익혀보도록 하겠습니다.
Visual Composer를 실행해서 다양한 아이콘 실행하면 아래와 같은 그림이 나옵니다.

Visual_Composer5

<그림 – Visual Composer 편집 화면 >

여기서 모든 Element type에 공통적으로 적용되는 아이콘이 있습니다.
Visual_Composer6기능에 대해 알아 보도록 하겠습니다. 이는 전체 영역에서 위의 [Taps]의 공간을 어디까지 차지할 것인지를 정해주는 것입니다.

다시말해 가로측 라인 즉, 동일한 행에서 전체 페이지 넓이 영역에서 얼마를 차지할 것인지 정하는 것입니다.

가령, 전체 페이지 영역의 가로가 600픽셀이라면 1/2일 경우 300픽셀의 공간을 차지한다는 것이며, 위 그림과 같이 탭의 사이즈를 3/4로 정했으면 450픽셀의 공간을 차지하게 됩니다.

이는 이미 왼쪽의 이미지가 150픽셀로 정해져있는 상태에서 순차적으로 적용이 되며, 만약 탭 사이즈가 3/4보다 더 큰사이즈가 되면, 자동으로 탭이 밑으로 밀려가게 됩니다.

두번째로Visual_Composer7 ‘ 아이콘은 수정/편집을 할 수 있는 아이콘입니다.

마지막으로 Visual_Composer8아이콘은 복사와 해당 Element를 삭제하는 기능입니다.

 

9
< Visual Composer를 이용한 운영진 소개페이지>

위 그림은 Visual Composer를 이용해서 운영진소개 페이지를 만들었습니다.
이미지는 3개를 넣어서 슬라이드 형식으로 보여주고 프로필을 탭기능을 이용해서
표현했습니다. 이처럼 Visual Composer는 페이지를 다양하게 개성있게 표현할 수 있습니다.