비쥬얼 에디터 이용가이드
(Visual Composer)
비주얼컴포저(페이지에디터)를 활용하시면 편리하게 웹페이지나 블로그 포스트를 마음껏 편집하실 수 있습니다. 처음에는 익숙치않아 어려울수 있으나 각각의 엘리먼트 기능을 숙지해두시면 그 어떤 솔루션보다 편리함을 느끼실 수 있습니다.
01. 비주얼컴포저(에디터) 인터페이스 안내
[point] 새 페이지를 생성하거나 편집하기 위한 페이지에서 제목아래 글쓰기 영역상단에 위치한 [BackEnd Editor] 버튼을 클릭하시면 비주얼컴포저 에디터 화면으로 변경됩니다. 이후 다양한 엘리먼트를 사용하여 페이지를 구성합니다.
02. 페이지 만들기 시작하기
[point] 새페이지를 추가하고 [관리자화면 편집모드]버튼을 클릭합니다. [엘리먼트 추가]버튼을 클릭하여 페이지를 만들어 나갈수 있으며, 이미 만들어져있는 레이아웃을 선택하시면 자동으로 행(Row)과 엘리먼트가 생성되어 그것을 수정하는 것 만으로 페이지가 완성됩니다.
생각보다 쉽고 재미있습니다. 바로 시작하세요!
03. 행(Row)과 열(Column)
모든 레이아웃은 행과 열로 만들어집니다. 가장 중요한 핵심영역이니 꼭 숙지하셔야 합니다.
[point] 행(row) 엘리먼트를 생성하고 그것을 원하는 열(column)으로 분리할 수 있습니다.
행(row)안에 행(row)를 추가하여 그것을 원하는 열(column)로 생성하여 관리하시면 더욱 편리합니다.
04. 텍스트블록 사용법
가장 많이 사용하는 엘리먼트입니다. 필수 숙지하세요!
[point] “텍스트블록”은 글을 쓰고 다양하게 글꼴을 표현하는 엘리먼트입니다. 기능이 무척 다양해서 다른엘리먼트를 사용하지 않고도 “텍스트블록” 만으로 페이지를 구성하시는데 지장이 없습니다.
05. 싱글이미지 사용법
이미지를 추가하는 엘리먼트입니다. 필수 숙지하세요!
[point] “싱글이미지”는 이미지를 추가하는 엘리먼트입니다. 페이지에 이미지를 첨부할 때 가장 많이 사용합니다. 행(Row)과 열(Column)로 레이아웃을 만들고 원하는 블럭에 “싱글이미지” 엘리먼트로 내컴퓨터의 이미지를 불러올 수 있습니다.
다양한 엘리먼트
위에 설명된 주사용 엘리먼트 외에 보다 다양한 엘리먼트가 탑재 되어있습니다.
많이 사용되지는 않으나 직관적으로 이해할 수 있으니 활용해보세요!
보다 자세한 설명은 아래를 참고하세요.
Row 기능
“Row” 기능은 비주얼 컴포저에서 가장 많이 사용되는 기능입니다. Row 기능을 통해 페이에서 블럭을 나눠 구성할 수 있습니다. 한 Row 안에서도 영역을 나눌 수 있습니다. (예> 1/2 + 1/2, 1/3 + 1/3 + 1/3, 등등) 드래그를 통해서 Row의 위치를 조정할 수도 있습니다
주의사항 : 기본 수준의 Row 내에서 내부에 Row를 삽입하여 다양한 레이아웃을 만들 수 있습니다. 다만 내부에 생성된 Row에서 또 다른 내부 Row를 생성하는 것을 불가능 합니다.
Column 기능
“Columns” 기능은 Row 기능의 일부분으로 내부에 콘텐츠를 삽입할 수 있는 기능입니다. 클릭과 드래그를 통해 Columns을 재배치할 수 있습니다.
| 파라명 | 설명 |
| 폰트색상 | 글꼴의 색상을 선택할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한사용을 위해 엑스트라 클래스명을 추가기능을 사용하세요 |
| 디자인 옵션 | 볼드,배경색뿐만이 아닌 다른 스타일 설정을 할 수 있습니다. |
| 넓이 | 넓이를 조정하여 엘리먼트의 가독성을 향상 시킬 수 있습니다. |
Separator기능 가이드
“Separator“ 기능을 통해 페이지에 구분선을 추가할 수 있습니다.
| 파라명 | 설명 |
| 색상 | 구분선의 색상을 선택하세요. 기존의 색상을 선택 하거나 사용자 지정 색상을 선택할 수 있습니다. |
| 스타일 | 선의 스타일을 선택하세요- solid, dotted, dashed 등 |
| 엘리먼트 폭 | %를 통해 선의 폭을 지정할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Separator (Divider) with text 기능 가이드
“Separator with Text“ 기능은 페이지에 구분선을 추가할 때 텍스트를 함께 추가할 수 있는 기능입니다.
| 파라명 | 설명 |
| 타이틀 | 구분선에 추가될 텍스트를 삽입하세요 |
| 타이틀 위치 | 구분선의 가운데, 오른쪽, 왼쪽으로 텍스트의 위치를 조정할 수 있습니다. |
| 색상 | 구분선의 색상을 선택하세요. 기존의 색상을 선택 하거나 사용자 지정 색상을 선택할 수 있습니다 |
| 스타일 | 선의 스타일을 선택하세요- solid, dotted, dashed 등 |
| 엘리먼트 폭 | %값을 입력하여 선의 폭을 지정할 수 있습니다. |
Message Box 기능 가이드
“Message Box” 기능은 성공, 오류, 경고 등의 메세지를 웹사이트에서 보여지게 하는 기능입니다.
| 파라명 | 설명 |
| 메세지 박스 타입 | 메세지 박스의 타입을 선택할 수 있습니다. (경고, 성공, 오류 등) |
| 스타일 | 메세지 박스의 모양을 선택할 수 있습니다. (사각형, 둥근형태 등) |
| 메세지 텍스트 | WYSIWYG 편집기 TinyMCE를 사용하여 내용을 추가/편집할 수 있습니다 |
| CSS 애니메이션 | Element에 애니메이션 효과를 추가할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Facebook Like 기능 가이드
“Facebook Like“ 기능은 페이스 북의 라이크 버튼을 추가하는 기능입니다.
| 파라명 | 설명 |
| 버튼 타입 | 라이크 버튼의 타입을 선택하세요. |
Tweetmeme Button 기능 가이드
“Tweetmeme button“ 기능은 트위터 버튼을 추가하는 기능입니다.
| 파라명 | 설명 |
| 버튼 타입 | 라이크 버튼의 타입을 선택하세요. |
Google+ Button 기능 가이드
“Google+ button“ 기능을 통해 구글+ 버튼을 추가할 수 있습니다.
| 파라명 | 설명 |
| 버튼 크기 | 버튼의 크기를 조정할 수 있습니다. |
| 주석 | 버튼과 함께 보여질 주석의 타입을 선택할 수 있습니다. |
Pinterest 기능 가이드
“Pinterest“ add 소셜 미디어 Pinit 버튼을 추가할 수 있습니다.
| 파라명 | 설명 |
| 버튼 레이아웃 | 버튼의 레이아웃 형태를 선택할 수 있습니다. |
FAQ 기능 가이드
“FAQ“ 접을 수 있는 토글키를 추가할 수 있습니다.
| 파라명 | 설명 |
| 토글 타이틀 | 열기/닫기 버튼 근처에 표시될 토글 타이틀을 설정할 수 있습니다. |
| 토글 콘텐츠 | WYSIWYG 편집기 TinyMCE를 사용하여 토글 콘텐츠를 편집할 수 있습니다. |
| 기본 상태 | 기본상태에서 토글이 열려 있을지 접혀 있을지 설정할 수 있습니다. |
| CSS 애니메이션 | Element에 애니메이션 효과를 추가할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Single Image 기능 가이드
이미지를 추가하는 기능입니다. 레이아웃과 스타일을 하여 간단한 이미지를 추가할 수 있습니다. CSS 애니메이션과 디자인 옵션을 적용하여 이미지를 표현할 수 도 있습니다.
| 파라명 | 설명 |
| 위젯 타이틀 | 위젯 상단에 위치할 Element 타이틀의 설정 |
| 이미지 | 미디어 라이브러리에서 이미지를 선택하여 이미지를 업로드 할 수 있습니다. |
| CSS 애니메이션 | Element에 애니메이션 효과를 추가할 수 있습니다. |
| 이미지 사이즈 | 이미지의 사이즈를 조정할 수 있습니다. (크게, 작게 등) 또는 사용자가 지정하는 사이즈로도 조정이 가능합니다. (넓이px x높이px) |
| 이미지 정렬 | 칼럼 안에서 이미지의 정렬을 설정할 수 있습니다. |
| 이미지 스타일 | 이미지 스타일을 선택할 수 있습니다. – 둥근형, 사각형, 외곽 볼드 등 |
| 이미지 크게 보기 | 클릭 시, ‘이미지 크게 보기’ 기능을 설정할 수 있습니다. |
| 이미지 링크 | 이미지에 링크를 추가할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Image Gallery 기능 가이드
이미지 갤러리 사용법입니다. Flex Slider, Nivo Slider, grid에서 갤러리 타입을 선택하세요.
| 파라명 | 설명 |
| 위젯 타이틀 | 위젯 상단에 위치할 Element 타이틀의 설정 |
| 자동 슬라이드 | 이미지 사이의 전환 간격을 설정하세요. |
| 이미지 | 미디어 라이브러리에서 이미지를 선택하여 원하는 이미지를 업로드 할 수 있습니다. |
| 이미지 사이즈 | Large 혹은 Small 등 이미지의 사이즈를 설정할 수 있습니다. 또한 넓이 x 높이의 설정을 통해 이미지를 원하는 사이즈로 조정할 수 있습니다. |
| On click | 필요한 경우 Onclick 이벤트를 사용하세요. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Image Carousel 기능 가이드
고정된 사이즈의 애니메이션 이미지의 carousel을 사용하세요.
| 파라명 | 설명 |
| 위젯타이틀 | 위젯 상단에 위치할 Element 타이틀의 설정 |
| 자동 슬라이드 | 이미지 사이의 전환 간격을 설정하세요. |
| 이미지 | 미디어 라이브러리에서 이미지를 선택하여 원하는 이미지를 업로드 할 수 있습니다. |
| 이미지 사이즈 | Large 혹은 Small 등 이미지의 사이즈를 설정할 수 있습니다. 또한 넓이 x 높이의 설정을 통해 이미지를 원하는 사이즈로 조정할 수 있습니다. |
| On click | 필요한 경우 Onclick 이벤트를 사용하세요. |
| 슬라이드 모드 | 상하좌우로 슬라이드의 움직임을 설정할 수 있습니다. |
| 슬라이드 속도 | 슬라이드 사이의 애니메이션 효과 지속 시간을 설정할 수 있습니다. (in ms) |
| Slides per view | 캐러셀 모드에서 한번에 나타내고 싶은 슬라이드의 수를 설정하세요. “자동”모드를 설정할 경우, 슬라이드는 container의 넓이에 자동으로 맞춰집니다. “자동”모드는 루프모드에서는 호환되지 않습니다. |
| 슬라이드 오토플레이 | 오토플레이 모드를 사용할 수 있습니다. |
| 페이지번호 숨김 | ‘예’를 클릭하여 페이지 번호를 보이지 않게 합니다. |
| 이전/다음 버틍 숨김 | ‘예’를 선택하여 이전/다음 버튼을 보이지 않게 합니다. |
| 부분도 | ‘예’를 선택하여 오른편에 다음 슬라이드를 보이게 할 수 있습니다. |
| 슬라이드 루프 | 루프모드를 사용할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Tab 기능 가이드
“탭”기능은 행과 열 구조의 복잡한 기능을 간편화하여 사용할 수 있게 만든 기능입니다. 원하는 대로 요소 내의 많은 내부 섹션을 만든 후 내 어떤 유형의 콘텐츠든 배치 할 수 있습니다.
탭과 tab element 는 서로 다른 변수에 의해 구동됩니다.
Tabs Parameters (탭 변수)
| 파라명 | 설명 |
| 위젯명 | 위젯 상단에 위치할 Element 타이틀의 설정 |
| 자동 전환 탭 | 탭 전환 간격을 초단위로 설정할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Tab Parameter (탭 변수)
| 파라명 | 설명 |
| 타이틀 | 탭 헤더에 표시될 탭의 타이틀을 설정하세요. |
| 탭 ID | 링크에서 사용 가능한 독특한 탭 ID (수정이 불가능 함) |
주의사항: 탭은 다른 복잡한 elements에 삽입할 수 없습니다.
Tour 기능 가이드
“Tour”기능은 행과 열 구조의 복잡한 기능을 간편화하여 사용할 수 있게 만든 기능입니다. 원하는 대로 요소 내의 많은 내부 섹션을 만든 후 내 어떤 유형의 콘텐츠든 배치 할 수 있습니다.
Tour와 inner tab element는 서로 다른 변수에 의해 구동됩니다.
Tour 변수
| 파라명 | 설명 |
| 위젯명 | 위젯 상단에 위치할 Element 타이틀의 설정 |
| 자동 전환 탭 | 탭 전환 간격을 초단위로 설정할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Accordion 기능 가이드
“Accordion”기능은 행과 열 구조의 복잡한 기능을 간편화하여 사용할 수 있게 만든 기능입니다. 원하는 대로 요소 내의 많은 내부 섹션을 만든 후 내 어떤 유형의 콘텐츠든 배치 할 수 있습니다.
Accordion Parameter (Accordion 변수)
| 파라명 | 설명 |
| 위젯명 | 위젯 상단에 위치할 Element 타이틀의 설정 |
| 섹션 활성화 | 활성화를 위한 섹션 번호를 입력하세요 |
| 모든 섹션 접기 허용 | 모든 섹션을 접어 숨길 수 있는 기능입니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Posts Grid 기능 가이드
포스트 타입을 선택하고, 자신만의 쿼리를 적용하여 워드프레스 사이트의 포스트를 추가할 수 있습니다.
주의사항: 같은 타입의 포스트 내에 포스트 그리드 element를 배치하지 마세요. 그 경우, 무한한 루프가 발생합니다.
Posts Carousel 기능 가이드
캐러셀 타입을 선택하고, 자신만의 쿼리를 적용하여 워드프레스 사이트의 캐러셀을 추가할 수 있습니다.
주의사항: 같은 타입의 포스트 내에 캐러셀 element를 배치하지 마세요. 그 경우, 무한한 루프가 발생합니다.
Posts Slider 기능 가이드
워드프레스 사이트의 포스트 및 페이지, 사용자 정의 포스트에서 슬라이드를 만들 수 있습니다. 이미지의 설정과 스타일링을 통해 이미지를 게시할 수 있습니다.
Widgetised Slidebar 기능 가이드
| 파라명 | 설명 |
| 위젯명 | 위젯 상단에 위치할 Element 타이틀의 설정 |
| 슬라이드바 | 위젯 영역을 선택 |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Button 기능 가이드
버튼의 사이즈, 링크, 텍스트 등을 설정하고 버튼을 추가할 수 있습니다.
| 파라명 | 설명 |
| 텍스트 추가 | 버튼에 텍스트를 추가하는 기능입니다. |
| URL (Link) | 버튼에 링크를 추가하는 기능입니다. |
| 색 | 버튼의 색을 설정하는 기능입니다. |
| 아이콘 | 버튼에 표시될 아이콘을 선택할 수 잇습니다. 아이콘은 필수선택사항이 아니며, 미선택 시 아이콘이 나타나지 않습니다. |
| 사이즈 | 버튼의 사이즈를 설정할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Button 2.0 기능 가이드
다양한 색상과 스타일링 옵션을 사용하여 버튼을 추가할 수 있습니다.
| 파라명 | 설명 |
| 텍스트 추가 | 버튼에 텍스트를 추가하는 기능입니다. |
| URL (Link) | 버튼에 링크를 추가하는 기능입니다. |
| 스타일 | 곡선, 사각형 등 여러 가지 형태의 스타일을 활용하여 버튼을 구성할 수 있습니다. |
| 색 | 버튼의 색을 설정하는 기능입니다. |
| 사이즈 | 버튼의 사이즈를 설정할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Call to Action 기능 가이드
텍스트 및 버튼, 스타일링을 통해 call to action block을 생성할 수 있습니다.
| 파라명 | 설명 |
| 텍스트 | call to action block에 텍스트를 추가하는 기능입니다. |
| 텍스트 추가 | 버튼에 텍스트를 추가하는 기능입니다. |
| 색 | 버튼의 색을 설정하는 기능입니다. |
| 아이콘 | 버튼에 표시될 아이콘을 선택할 수 잇습니다. 아이콘은 필수선택사항이 아니며, 미선택 시 아이콘이 나타나지 않습니다. |
| 사이즈 | 버튼의 사이즈를 설정할 수 있습니다. |
| 버튼 위치 | 버튼의 위치를 선택할 수 있습니다 |
| CSS 애니메이션 | Element에 애니메이션 효과를 추가할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Call to Action 2.0 기능 가이드
| 파라명 | 설명 |
| 헤더 첫째 줄 | call to action block에 헤더 텍스트를 입력할 수 있습니다. |
| 헤더 둘째 줄 | call to action block에 서브(두번째) 헤더 텍스트를 입력할 수 있습니다 |
| CTA 스타일 | 원형, 사각형 등 다양한 형태의 스타일링을 할 수 있습니다. |
| Element 넓이 | 칼럼 내의 Element넓이를 설정할 수 있습니다. |
| 텍스트 정렬 | 텍스트 정렬을 설정할 수 있습니다. |
| 배경 색상 설정 | call to action block의 배경 색상을 사용자의 임의로 설정할 수 있습니다. |
| 프로모션 텍스트 | WYSIWYG editor TinyMCE를 사용하여 텍스트를 입력 편집할 수 있습니다. |
| 텍스트 추가 | 버튼에 텍스트를 추가하는 기능입니다. |
| URL (Link) | 버튼에 링크를 추가하는 기능입니다. |
| 스타일 | 곡선, 사각형 등 여러 가지 형태의 스타일을 활용하여 버튼을 구성할 수 있습니다. |
| 색 | 버튼의 색을 설정하는 기능입니다. |
| 사이즈 | 버튼의 사이즈를 설정할 수 있습니다. |
| 버튼 위치 | 버튼의 위치를 선택할 수 있습니다 |
| CSS 애니메이션 | Element에 애니메이션 효과를 추가할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Video Player 기능 가이드
워드프레스에서 제공하는 멀티플 포맷의 비디오 플레이어를 선택 삽입할 수 있습니다.
| 파라명 | 설명 |
| 위젯명 | 위젯 상단에 위치할 Element 타이틀의 설정 |
| 비디오 링크 | 비디오 링크를 삽입하는 기능입니다. 워드프레스 codex page 에서 더 많은 포맷을 지원받을 수 있습니다. |
| CSS 애니메이션 | Element에 애니메이션 효과를 추가할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
| 디자인 설정 | 보더, 배경색 등의 다양한 디자인 설정을 활용할 수 있습니다. |
Google map 기능 가이드
Google Map Engine 을 사용하여 손쉽게 구글 맵을 삽입할 수 있습니다.
| 파라명 | 설명 |
| 위젯명 | 위젯 상단에 위치할 Element 타이틀의 설정 |
| Iframe맵 삽입 | 구글 맵을 통해 구글 맵을 생성, 추가할 수 있습니다. 1) 위치 검색 2) ‘Share’ 버튼을 클릭_사용맵은 공용맵입니다. 3) “Embed on my site” 아이콘 클릭 4) iframe 코드 복사 및 붙여넣기 |
| Map 크기 | 맵의 높이를 설정할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Raw HTML 기능 가이드
원하는 HTML을 삽입할 수 있습니다.
| 파라명 | 설명 |
| Raw HTML | HTML을 입력하세요. |
Raw JS 기능 가이드
원하는 JS을 삽입할 수 있습니다. .
| 파라명 | 설명 |
| Raw JS | JS을 입력하세요. |
Flickr Widget 기능 가이드
플리커 위젯을 통해 워드프레스사이트에 포토 스트림을 추가할 수 있습니다. 이미지 추가를 위해서는 플리커 ID가 필요합니다. (ID는 http://idgettr.com/ 를 통해 받을 수 있습니다.
| 파라명 | 설명 |
| 위젯명 | 위젯 상단에 위치할 Element 타이틀의 설정 |
| 플리커 ID | 플리커 ID를 입력하세요 |
| 사진수 | 표시될 사진의 수를 선택하세요 |
| 타입 | 포토 스트림 타입을 선택하세요. |
| 디스플레이 | 나타날 사진의 순서를 정하세요. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Progress bar 기능 가이드
진행률을 바형태의 그래프로 나타낼 수 있습니다. 필요에 따라 바그래프의 형태를 조정하여 표현할 수 있습니다.
| 파라명 | 설명 |
| 위젯명 | 위젯 상단에 위치할 Element 타이틀의 설정 |
| 그래픽값 | Development|#e75956 |
| 유닛(단위) | %, px, point 등의 단위를 입력하세요. 그래픽 값과 유닛(단위)는 그래픽 타이틀을 나타내는데 사용되어 집니다. |
| 바 색상 | 바의 배경 색상을 선택하세요. |
| 줄무늬 | 바 그래프에 줄무늬를 추가할 수 있습니다. |
| 애니메이션 효과 | 줄무늬에 애니메이션 효과를 추가할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Pie chart 기능 가이드
자신만의 스타일을 적용한 파이차트를 추가할 수 있습니다.
| 파라명 | 설명 |
| 위젯명 | 위젯 상단에 위치할 Element 타이틀의 설정 |
| 파이값 | 0부터 100 중 수치를 입력하세요. |
| 파이 라벨 값 | 라벨 값을 입력하세요. (정수만 입력 가능합니다.) 만약 입력하지 않을 경우, “파이값”과 동일하게 나타나게 됩니다. |
| 유닛(단위) | %, px, point 등의 단위를 입력하세요. 그래픽 값과 유닛(단위)는 그래픽 타이틀을 나타내는데 사용되어 집니다. |
| 차트 색상 | 차트 색상을 선택하세요. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Empty Space 기능 가이드
Element사이의 공간을 설정할 수 있습니다.
| 파라명 | 설명 |
| 높이 | 사이의 여백 값을 입력하세요. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
Custom Heading 기능 가이드
기존의 구글 폰트에 스타일링을 적용하여 선택 사용자 고유의 헤더를 만들 수 있습니다.
주의사항: 라틴계열의 문자가 아닐 경우, 호환되지 않을 수 있습니다.
| 파라명 | 설명 |
| 텍스트 | 원하는 텍스트를 입력하세요. |
| Element 태그 | 태그를 선택하세요. |
| 텍스트 정렬 | 텍스트 정렬을 선택할 수 있습니다. |
| 폰트 사이즈 | 폰트 사이즈를 선택하세요. 기본적으로는 테마 별로 지정된 사이즈가 제공되어 집니다. |
| 줄여백 값 | 줄 사이의 여백을 설정할 수 있습니다. |
| 텍스트 색 | 택스트 색상을 선택하세요. |
| 폰트 패밀리 | 기존의 리스트에서 구글 폰트 패밀리를 선택하세요. |
| 폰트 스타일 | 선택한 폰트 패밀리에서는 빛, 볼드, 기울임 등 폰트 스타일링을 설정할 수 있습니다. |
| 구글 폰트 미리보기 | 스타일링을 적용한 폰트 패밀리를 미리 확인할 수 있습니다. |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
워드프레스 디폴트 위젯 기능 가이드
비주얼 컴포저를 사용하여 손쉽게 워드프레스 위젯을 추가할 수 있습니다. 모든 위젯들은 비주얼 컴포저에서 사용할 수 있습니다.
| 파라명 | 설명 |
| 위젯명 | 위젯 상단에 위치할 Element 타이틀의 설정 |
| 엑스트라 클래스 명 | CSS에서 Element의 편한 사용을 위해 엑스트라 클래스 명을 추가기능을 사용하세요. |
타사 플러그인 지원
비쥬얼 컴포저는 타사의 플러그인을 지원하고 있습니다.
현재 지원하고 있는 타사의 플러그 인은:
- Layer Slider
- Revolution Slider
- Contact Form 7
- Gravity Form
작업 페이지에 content element를 배치한 후, 연필 아이콘을 클릭하여 특정 단축 코드 사용 옵션을 사용할 수 있습니다.