Visual Composer <응용편>
WP 플러그인 시리즈 1탄 - 클릭을 코딩으로 바꿔주는 비주얼 컴포저
지난 시간 비주얼 컴포저에 대해 간단히 알아봤습니다.
예고한 대로 이번에는 비주얼 컴포저 <응용편>으로 진행됩니다.
응용 또한 어렵지 않으니 차근차근해봅시다~
앗, 아직 <소개편>을 못 봤다구요? 그럼 아래 링크 클릭!
▼ ▼ ▼
이제 본격적으로 비주얼 컴포저를 이용해서
페이지를 만들어 봐야겠죠?
저는 카페 소개 페이지를 만들어 봤는데요,
비주얼 컴포저의 몇 가지 요소만으로 빠르고 쉽게 만들 수 있었습니다.
어떤 요소를 사용해서 만들었는지는
지금부터 설명해드리겠습니다.
자 그럼 GoGo!
(사용된 비주얼 컴포저 요소 - Single Image, Text Block, Empty Space, Image Gallery)Single Image
(Single Image Settings 화면 – Image, Image Size, Image Alignment)▷ Image
미디어 라이브러리에 저장된 이미지 중 선택
▷ Image Size
'thumbnail', 'medium', 'large', 'full' 중 하나를 입력하거나
'300x200'와 같이 원하는 크기의 픽셀을 입력하는 것도 가능
▷ Image Alignment
'Left', 'Center', 'Right' 중 선택
Text Block
(Text Block Settings 화면)텍스트 입력 후 원하는 속성을 적용
이미지, 비디오 등의 미디어 추가도 가능
Empty Space
(Empty Space Settings 화면 – Height)
입력한 픽셀만큼의 상하 여백이 추가
Image Gallery
(Image Gallery Settings 화면 – Auto Rotate, Images, Image Size)여러 개의 이미지를 슬라이드 또는 그리드 형태로 표현하는 요소
▷ Auto Rotate
현재 이미지에서 머무는 시간(초)을 뜻한다.
3/5/10/15초 중 선택 가능하며 'Disable'로 지정하면
버튼을 클릭해야만 다음 이미지로 넘어간다.
▷ Images, Image Size
위 1. Single Image 요소와 동일한 방법으로 적용
(사용된 비주얼 컴포저 요소 – Icon, Row (Row Layout), Button)Icon
(Icon Settings 화면 – Icon Library, Icon, Icon Color, Background Shape, Background Color 등)▷ Icon Library, Icon, Icon Color
원하는 아이콘과 색상 선택
▷ Background Shape, Background Color
아이콘 모양과 배경색 선택
(Custom Background Color에서 다양한 색상 선택 가능)
▷ Size
'Mini', 'Small', 'Normal', 'Large', 'Extra Large' 중 선택
▷ Icon Alignment
'Left', 'Center', 'Right' 중 선택
Row (Row Layout)
(STORY 영역과 MENU 영역의 열의 넓이를 지정하는 Row Layout 화면)행을 추가와 동시에 열의 넓이도 지정할 수 있다.
1/6, 1/4, 1/3, 1/2, 1/1 중 지정 가능하며
1/1이 좌우로 꽉 찬 모양이다.
각 열 넓이를 서로 달리 하는 것도 가능하다.
STORY 영역은 3개의 열이 각 1/3 값으로 지정되어 있으며
MENU 영역은 4개의 열을 각 1/4 값으로 나열하였다.
Button
(Button Settings 화면 – Text, URL (Link), Color, Size, Alignment, Add Icon?)▷ Text
버튼에 표시되는 텍스트
▷ URL (Link)
버튼 클릭 시 링크되는 사이트 주소
(새 탭에서 링크 열기 지정도 가능)
▷ Color
버튼 색상
▷ Size
'Mini', 'Small', 'Normal', 'Large', 'Extra Large' 중 선택
▷ Alignment
'Inline', 'Left', 'Center', 'Right' 중 선택
'Inline'은 버튼 여러 개를 한 줄에 위치시키자 할 때 사용
▷ Add Icon?
'예'로 체크하면 버튼 내 아이콘 삽입 가능
(사용된 비주얼 컴포저 요소 – Google Maps, Contact Form)Google Maps
(Google Maps Settings 화면 – Map Embed Iframe)Iframe 코드 정보는 Google 지도에서 위치 검색 후
좌측 공유 - 지도 퍼가기 탭에 있다.
(Iframe 코드를 제공하는 구글 지도 페이지)Contact Form
(Contact Form Settings 화면 – Button Text, Email)▷ Button Text
버튼에 표시되는 텍스트
폼에 입력한 내용이 수신되는 메일 계정
여기까지 첫 번째로 소개한 워드프레스 플러그인
비주얼 컴포저 글이 마무리됐습니다.
제가 소개해주면서도 참 유용한 플러그인이라는 생각이 들었네요.
단시간에 전문가 수준의 페이지를 만들어야 한다면
비주얼 컴포저를 꼭 사용해보시길 바랍니다.
혹시 이해되지 않는 설명이 있거나
작업 중 궁금한 점이 있나요?
(어려웡...)
그렇다면 주저하지 말고 댓글로 질문해주세요~
빠르고 정확한 답변을 약속합니다.
다음에 또 다른 플러그인을 가지고 찾아오겠습니다!
