위젯별 기능 설명 (디자인 요소)
텍스트 위젯과 더불어 가장 자주 쓰이는 위젯 중 하나입니다. 페이지에 이미지 요소를 삽입하고자 할 때 사용합니다.
이미지 추가하기 : 이미지 위젯 위에서 마우스 오른쪽 커서를 눌러 이미지 설정을 클릭합니다. 왼쪽 상단 이미지 영역에 마우스 커서를 올려놓으면 이미지를 업로드 하거나 캠페이너스가 제공하는 무료 이미지를 선택할 수 있습니다.
이미지 채우기 : 이미지를 그리드에 빈 공간 없이 가득 채우게 됩니다. 이 옵션이 해제되면 허용된 그리드 공간 내에서 이미지를 잘림 없이 표현합니다.
라이트박스 : 이미지를 누르면 주변이 어두워지면서 큰 이미지로 확대하여 보여줍니다. 이미지 링크와 함께 사용할 경우 이 옵션이 무시됩니다.
원형 이미지 : 이미지를 원형으로 만듭니다. 이미지의 원본 비율과 상관 없이 정원 형태로 만듭니다.
흑백 이미지 : 이미지를 흑백으로 만듭니다.
선명하게 : 이미지가 좀 더 선명하게 보입니다. 이미지 유형에 따라 부적절하게 보일 수 있으니 주의해야 합니다.
높이/높이고정 : 이미지의 높이를 지정합니다. 높이고정이 활성화 되면 기기에 상관 없이 지정된 높이로 표현됩니다.
설명 : 이미지와 함께 출력할 텍스트를 삽입합니다. 이미지 아래에 표시하거나 겹쳐서 표시할 수도 있습니다.
음영 : 이미지 위에 입힐 색상을 지정할 수 있습니다.
링크 : 이미지를 클릭하면 이동하는 메뉴의 링크를 설정할 수 있습니다.
롤오버 이미지란?롤오버 이미지란 마우스 커서가 이미지에 올라갔을 때 발동되는 효과 또는 이미지 전환을 말합니다. 롤오버 이미지 설정이 비어있으면 마우스를 올려도 변화가 생기지 않습니다. 예를 들어 롤오버 이미지 항목에서 '흑백 이미지'를 체크하게 되면 마우스를 올렸을 때 흑백 이미지로 표현됩니다.
하나의 이미지에 여러 링크 영역을 구현하고자 할 때 사용합니다.
1
이미지 맵으로 사용할 이미지를 업로드 합니다.
2
이미지 맵 링크의 추가 버튼을 눌러 링크 영역을 추가하고 이동될 경로를 지정합니다.
3
이미지에서 링크 영역을 적절한 크기로 배치합니다.
4
이미지 맵 링크는 여러번 추가할 수 있습니다.
팁 : 단락 구분(Enter) 외에도 줄바꾸기(Shift+Enter)를 통해 다음 줄에 붙여서 작성할 수 있습니다.
텍스트 위젯은 다른 위젯과 마찬가지로 마우스 오른쪽 버튼을 눌러 설정 창에 진입이 가능합니다. 이곳에서는 텍스트 위젯의 전체적인 배경색, 간격, 테두리 등을 설정할 수 있습니다.
여백 위젯은 디자인 모드에서만 흐린 점선으로 표시되며 실제로는 공간만 차지할 뿐 다른 방문자에게는 보이지 않습니다.
캠페이너스의 그리드 시스템 특성상 여백 위젯은 원하는 크기 조정이나 배치를 위해 필요합니다. 예를 들어 이미지 위젯을 본문폭의 절반 만큼만 표현하고 가운데로 배치하고자 할 때 여백 위젯을 이미지 위젯의 양 옆에 배치함으로써 표현이 가능합니다. 여백 위젯은 특별한 추가 설정이 없으며 폭과 높이 조정만 가능합니다. PC에서 추가된 12그리드 크기(본문 가로폭을 가득 채우는 크기)의 여백은 1/2 높이로 자동 변환되어 모바일에서 표현되며, 그렇지 않은 여백은 자동으로 숨겨집니다.
페이지에 동영상을 간편하게 삽입할 수 있습니다. 유튜브(YouTube) 또는 비메오(Vimeo)에 업로드한 동영상 주소(URL)를 입력하기만 하면 자동으로 삽입됩니다.
커버 이미지 : 기본적으로 유튜브 또는 비메오에 설정된 대표 이미지를 가져오지만, 커버 이미지를 업로드하면 해당 커버 이미지가 적용됩니다.
라이트 박스 : 동영상 재생 버튼을 누르면 주변부가 어두워지며 큰 화면으로 영상이 재생됩니다.
반복 재생 : 동영상 재생이 끝나도 다시 처음부터 재생합니다.
문단이나 컨텐츠 묶음 사이를 명확하게 구분하기를 원할 때 가로선 위젯을 사용합니다. 가로선 위젯은 매우 단순한 구조를 가지고 있으며 길이, 정렬, 두께, 선모양, 선색을 설정할 수 있습니다.
페이지에 버튼 위젯을 삽입하여 특정한 위치로 유도할 수 있습니다.
여러 버튼을 한 번에 추가할 수 있으며, 각각의 버튼을 다른 스타일로 설정할 수도 있습니다.
캠페이너스에서는 상단에서 풀다운 형태로 서브메뉴들을 표시하지만, 본문 영역에 서브메뉴를 표시하고자 할 때 사용합니다. 메뉴 리스트 위젯을 추가한 이후 메뉴가 수정, 삭제, 이동된 사항들을 자동으로 반영해 줍니다.
참고 : 메뉴 리스트 위젯은 모바일에서 자동 숨김 처리 됩니다. 따라서 모바일에서도 표시되게 하려면, '모바일에서 표시' 옵션을 체크해주셔야 합니다.
설정항목
다른 스타일 : 위젯 설정창 중앙부에 있는 다른 스타일 버튼을 눌러 메뉴 리스트 위젯의 스타일을 선택할 수 있습니다.
기준 위치 : 기본값은 현재메뉴이며 원하는대로 서브메뉴가 표시되지 않으면 기준 위치를 적절하게 변경합니다.
메뉴, 텍스트, 정렬 : 선택한 스타일의 세부 디자인 요소(각종 색상, 텍스트 크기 등)를 설정합니다.
현재 위치한 메뉴명을 출력해 줍니다. 일반적으로는 잘 사용하지 않지만 섹션 설정에서 사이드 영역의 상단에 타이틀 위젯을 배치하면 매번 페이지 제목을 입력하지 않아도 되므로 편리합니다. 단, 타이틀 위젯이 관련 모든 페이지에 자동으로 삽입되는 것은 아니기 때문에 각 페이지마다 타이틀 위젯을 복사해 붙여넣으셔야 합니다.
하나의 위치정보를 사용자에게 알려주고자 할 때 사용합니다. 주로 "찾아오시는 길" 또는 Contact 메뉴 등에서 많이 활용합니다.
주소 : 주소의 전체 또는 일부만 입력하고 엔터(Enter)를 누르면 검색된 주소 목록이 표시됩니다. 예를 들어 '연희동 413-16'을 입력한 후 엔터를 누르면 아래에 주소 목록이 표시되고, 이를 누르면 위치 정보가 반영됩니다. 건물 층수나 호수 등 추가 주소 정보는 상세 주소 항목에 입력합니다.
지도 핀 이동 : 주소를 입력하면 자동으로 해당 주소의 위치로 지도가 이동되며 핀이 생성됩니다. 핀의 위치를 변경하려면 지도에서 해당 위치에 더블클릭하고 적용 버튼을 누릅니다.
정보 : 핀에 말풍선으로 표시될 정보를 입력합니다.
코드 위젯은 고급 사용자를 위한 기능입니다. 외부 모듈 및 사용자 정의 스타일시트 및 스크립트 등을 내 사이트에 삽입하고 싶은 경우 사용할 수 있습니다. 코드 위젯에는 클라이언트 사이드에서 동작하는 모든 요소(HTML, CSS, JavaScript 등)를 삽입할수 있습니다.
*단, 서버 사이드에서 사용하는 언어(JSP, PHP 등) 및 데이터베이스(MySQL,MariaDB, MS-SQL 등)는 사용할 수 없습니다.
코드 위젯은 다른 위젯과 달리 확인 버튼을 눌러야 저장됩니다.
디자인 모드의 오동작을 방지하기 위해 코드 위젯은 미리보기에서만 실행됩니다.
아이콘 위젯은 그래픽툴이나 이미지를 사용하지 않고 폰트 아이콘을 이용해 사이트에 아이콘을 삽입할 수 있게 해줍니다. 수백가지의 아이콘을 삽입할 수 있으며, 자유롭게 크기와 색상을 조정할 수 있습니다.