비쥬얼 에디터 이용가이드
(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를 배치한 후, 연필 아이콘을 클릭하여 특정 단축 코드 사용 옵션을 사용할 수 있습니다.