카테고리
디자인모드
갤러리 위젯
위젯 소개 갤러리는 이미지 및 이미지 설명 텍스트의 묶음이며 다양한 방식으로 표현할 수 있습니다. 이미지 위젯으로도 비슷한 구성이 가능하지만 갤러리만으로 표현 가능한 요소들이 있으며, 무엇보다 한꺼번에 여러 이미지를 추가할 때는 갤러리 위젯이 효율적입니다. 위젯 설정 위젯 설정에서 갤러리를 설정합니다. 1. 갤러리 위젯을 추가합니다. 2. 갤러리 설정을 엽니다. 갤러리 설정항목 설정창 상단 갤러리 설정 탭 메뉴에서 갤러리 콘텐츠를 추가합니다. 다음으로 디자인 탭 메뉴에서 갤러리 스타일 및 디자인을 설정할 수 있습니다. 1. 갤러리 설정 창 왼쪽 상단의 + 이미지, 동영상 추가 에 마우스 포인터를 올립니다. 2. 이미지 추가 또는 동영상 추가를 클릭합니다. 3. 내 PC에서 이미지 추가하거나, 동영상(유튜브 또는 Vimeo) URL을 입력합니다. 4. (필요한 경우) 갤러리 별로 제목과 설명, 링크를 추가합니다. 5. 갤러리 설정 창 왼쪽의 갤러리 이름을 입력합니다. 6. 갤러리 설정게시판 게시물의 텍스트 줄간격 고급 조절 방법 (행간, 코드)
게시판의 게시물 줄간격은 텍스트 도구에서 줄간격 도구를 사용해 간단하게 조절할 수 있습니다. 그러나 만약 더 세밀한 줄간격 조절이 필요하다면 코드를 사용해 원하는 간격으로 조절할 수 있습니다. 이 도움말에서는 게시물 텍스트 에디터를 코드뷰로 전환하여 CSS 스타일을 추가해 텍스트 간격을 조절하는 방법을 설명합니다. 주의: 이 도움말에서는 텍스트 에디터에서 줄간격 및 일부 CSS 속성을 추가하는 방법에 관해서만 설명합니다. 그외 사용자가 임의로 편집한 부분에 대해서는 기술 및 고객지원이 불가합니다. 중요: 시작에 앞서 줄간격 속성을 추가하기 전 텍스트의 크기, 색상 등을 변경했다면 줄간격 속성이 정상적으로 작동하지 않습니다. 이 땐 먼저 텍스트에 적용된 스타일을 모두 초기화하고, CSS로 새롭게 스타일을 추가해 주세요. 모든 텍스트를 선택하고, 서식 제거 옵션을 클릭하여 텍스트 스타일을 초기화 할 수 있습니다. 조절방법 1단계: 게시물 텍스트 에디터를 코드뷰로 전환하기 1. 게시판이FTP 접속을 지원하나요?
캠페이너스는 FTP 방식을 지원하지 않습니다. 대량의 파일을 올리거나, 올린 파일들을 관리할 때 FTP가 필요할 수 있지만, 캠페이너스의 경우 몇 가지 이유로 FTP를 제공하지 않고 있습니다. 왜 지원하지 않나요? 타사 솔루션들은 웹호스팅 방식의 독립된 공간과 분리된 소스코드로 동작하는 반면, 캠페이너스는 중앙 집중식으로 관리하고 있습니다. 즉, 사이트별로 동일한 소스코드를 사용하여 동일한 기능이 동작되는 셈입니다. FTP를 지원하지 않는 대신 캠페이너스의 업데이트 사항이 사이트별로 자동으로 반영되어, 관리자들이 별도의 조치를 하지 않아도 항상 최신의 상태를 유지할 수 있도록 합니다. 단, 사이트별로 나뉘어진 영역이 존재하지 않기에 FTP를 제공하기 어려운 측면이 있습니다. 대안은 무엇인가요? 대량의 파일 업로드가 필요한 상황은 주로 상품 이미지 등록이나, 타사에서 사용하던 게시물에 연결된 첨부 파일(이미지)이 대부분일 것이며 아래와 같은 대안을 제공하고 있습니다. 1. 상품 이미지유튜브와 비메오 동영상이 재생되지 않아요.
YouTube(유튜브) 또는 Vimeo(비메오)에 올린 동영상을 내 사이트에 삽입했는데 재생되지 않는다면 그 원인은 일반적으로 동영상 공개상태가 비공개로 설정되어 있기 때문입니다. 이 도움말에서는 YouTube와 Vimeo에 올린 동영상이 내 사이트에서 재생되도록 공개상태를 변경하는 방법을 설명합니다. YouTube 공개 상태 설정방법 1단계: 공개 상태 변경하기 YouTube에 올린 동영상의 공개 상태가 비공개로 설정된 경우 소유자만 동영상을 재생할 수 있습니다. 이 도움말에서는 내 사이트에 삽입한 동영상을 누구나 볼 수 있도록 YouTube 동영상의 공개 상태를 변경하는 방법을 설명합니다. 1. YouTube 스튜디오에 접속 후 로그인합니다. 2. 왼쪽 메뉴에서 콘텐츠를 클릭합니다. 3. 업데이트하려는 동영상을 클릭합니다. 4. 공개 상태를 클릭해 공개 또는 일부 공개로 변경합니다. 중요: 공개로 설정한 경우, YouTube에서 내 동영상을 검색할 수 있습니다. 일부 공개로 설정이미지맵 위젯
위젯 소개 하나의 이미지에 여러 링크 영역을 구현하고자 할 때 사용합니다. 위젯 사용방법 1. 이미지 맵 위젯을 추가합니다. 2. 이미지 맵 설정을 엽니다. 3. 이미지맵 설정 창 오른쪽에 위치한 이미지 업로드 버튼을 클릭합니다. 4. 내 PC에서 이미지맵에 사용할 이미지 파일을 올려줍니다. 5. 이미지맵 설정 창 왼쪽 상단의 추가 버튼을 클릭합니다. 새 링크가 나오면 링크 방식을 선택하고, 이동할 메뉴를 선택합니다. 링크는 추가 버튼을 다시 클릭해 여러 개 추가할 수 있습니다. 참고: 링크를 외부 사이트로 걸려면 http:// 입력 후 URL(주소)를 입력해 주세요. (예: https://campaignus.do/) 6. 오른쪽 이미지에 생겨난 링크 영역을 마우스로 클릭 후 적절한 크기로 조절하고 배치합니다. 7. 이미지맵 설정 창 바깥 영역을 클릭해 설정을 완료합니다. 관련 도움말 다양한 링크 방식을 제공합니다. 이미지 맵 클릭 시 기본 링크 외 전화걸기, 문자발송, 파일첨부 등링크 타입의 종류
디자인 모드에서 사이트 제작 중 요소별로 링크를 추가할 수 있습니다. 기본 메뉴 링크 외에도 여러 링크 타입을 제공하고 있기에 다양하게 활용해 보시길 바랍니다. 링크 타입의 종류 1. 링크: 내부 메뉴로 링크를 걸거나 외부 사이트로 직접 URL을 입력해 링크걸 수 있습니다. 2. 전화걸기: 링크 클릭 시 입력하신 연락처로 전화를 겁니다. *PC에서 작동제한 3. 문자발송 : 링크 클릭 시 문자 작성 앱이 켜지며 문자를 발송할 수 있습니다. *PC에서 작동제한 4. 이메일: 링크 클릭 시 메일 앱이 켜지며 메일을 발송할 수 있습니다. *PC에서 작동제한 5. 파일첨부: 링크 클릭 시 첨부한 파일(최대 100Mb)이 다운로드 됩니다. 6. 동영상: 링크 클릭 시 동영상이 재생됩니다. 7. 소셜공유: 링크 클릭 시 소셜 공유 창이 켜집니다. 8. 말풍선: 링크 클릭 시 말풍선이 표시됩니다. 9. 코드: 입력하신 코드가 작동합니다. 10. 최신상품: 클릭 시 지정한 카테고리의 최신 상품 상상단 이동 스크롤 버튼 만들기 (위젯 사용)
이 도움말은 웹사이트 하단에 위로 이동 스크롤 버튼을 추가하는 방법을 설명합니다. 제작방법 1단계: 빈 섹션 추가하기 위로 이동 버튼을 추가할 새로운 빈 섹션을 추가합니다. 1. 디자인 모드에 접속합니다. 2. 빈 섹션 추가하기 도움말을 참고하여 섹션을 추가합니다. 2단계: 섹션 반복 설정하기 어느 메뉴에서나 위로 이동 버튼이 보이게 새로 추가한 빈 섹션을 바복 섹션으로 설정합니다. 1. 새로 추가한 빈 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 2. 섹션 컨텍스트 메뉴가 나오면 아래로 이동을 클릭합니다. 3. 위 1~2번 과정을 반복해 페이지 가장 아래로 이동시켜 주세요. 4. 가장 아래로 이동을 마쳤다면 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 5. 섹션 컨텍스트 메뉴가 나오면 섹션 반복을 클릭합니다. 6. 이 섹션은 이제 어느 메뉴에서든 표시됩니다. 참고: 특정 메뉴에서는 반복 섹션이 안 보이게 숨길 수도 있습니다. 특정 메뉴의모바일 상단 편집하기
모바일 전용 상단 디자인을 편집할 수 있습니다. 모바일 상단 작업 시 콘텐츠를 과하게 추가하지 마세요. 모바일 기기는 PC 대비 화면이 가로폭이 매우 좁아, 방문자가 보고 터치하는 데 어려움을 겪을 수 있습니다. 편집방법 1단계: 뷰포트 변경하기 1. 디자인 모드에 진입합니다. 2. 상단 설정에 진입합니다. 3. 뷰포트를 모바일로 변경합니다. 2단계: 모바일 상단 꾸미기 1. 모바일 상단에 마우스 포인터를 올립니다. 2. 아래 그림과 같이 위젯 추가 ⨁ 버튼이 나오면 클릭합니다. 3. 상단 전용 위젯 중 하나를 클릭합니다. 4. PC 버전과 같은 방법으로 위젯을 이동합니다. 상단 위젯 이동방법 5. 위젯에 마우스 오른쪽 버튼을 눌러 설정을 변경합니다. 위젯 설정 열기 6. (선택 사항) 빈 섹션을 추가하거나 섹션 고정 등 기능을 사용해 나만의 모바일 상단을 디자인 합니다.모바일에서 PC 버전 보기 버튼 사용하기
모바일 기기로 웹사이트 접속 시 페이지 최하단에 PC 보기 버튼을 표시할 수 있습니다. 설정방법 1. 디자인 모드에 접속합니다. 2. 오른쪽 상단의 톱니바퀴 아이콘을 클릭해 공통 디자인 설정을 켭니다. 3. 옵션 항목에서 모바일에서 PC 보기 버튼 사용을 선택합니다. 참고: 버튼의 배경색과 글자색은 마지막 섹션의 스타일을 따라가며, PC에서는 모바일 보기 버튼으로 표시됩니다. 4. 페이지 최하단에 PC 모드로 보기 버튼이 표시됩니다.텍스트 위젯을 사용한 카드 디자인
언제 사용하면 좋을까요? - 배경 이미지 가운데 글자 작성하고자 할 때 - 카드 디자인을 색다르게 하고 싶을 때 활용 예시 - 제작 방법 - 텍스트 위젯을 만든다 - 텍스트 위젯 설정에서 높이를 500px 정도로 조정 - 내부 좌우 상하 여백을 30px 정도로 조정 - 테두리를 실선을 지정 - 적절한 배경이미지를 설정 - 가운데 원하는 텍스트나 버튼을 설정하고 디자인 완료모바일 커스텀 하단 만들기 (푸터)
PC 버전에서 제작한 커스텀 하단이 모바일에서는 마음에 들지 않거나 모양이 틀어질 수 있습니다. 모바일에 딱 맞는 모바일 커스텀 하단을 만들려면 아래 제작 방법에 따라 제작해 보세요. 제작방법 모바일 커스텀 하단을 제작하는 방법을 설명합니다. 1단계: 모바일 전용 하단 디자인하기 뷰포트를 모바일로 전환하고, 모바일 전용 섹션을 만들어 페이지 최하단으로 이동하는 과정을 설명합니다. 1. 디자인 모드에 접속합니다. 2. 모바일로 뷰포트를 변경합니다. 3. 섹션에 마우스 오른쪽 버튼을 클릭합니다. 주의: 위젯에 마우스 오른쪽 버튼을 클릭하지 마세요. 4. 섹션 컨텍스트 메뉴가 나오면 모바일 전용 섹션추가를 클릭합니다. 5. 새로운 모바일 전용 섹션이 생성되면 이제 해당 섹션을 페이지 가장 아래로 이동시켜야 합니다. 섹션에 마우스 오른쪽 버튼을 클릭하고, 컨텍스트 메뉴가 나오면 아래로 이동을 클릭합니다. (모바일 전용 섹션이 생성된 위치에 따라 이 과정을 반복해야 할 수 있습니다.) 6.커스텀 하단 만들기 (푸터)
캠페이너스는 여러 개의 하단(푸터) 디자인 템플릿을 제공합니다. 사용자는 섹션 템플릿을 사용해 간편하게 하단 디자인을 적용하고 편집할 수 있습니다. 만약 기본 하단 디자인이 마음에 들지 않는 경우, 섹션 반복 기능을 활용해 커스텀 하단을 디자인할 수도 있습니다. 설정방법 1단계: 하단 숨기기 커스텀 하단을 추가하기 위해 기본 하단 섹션을 숨겨줍니다. 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다. 3. 메뉴에 마우스 포인터를 올리고, ⓘ 아이콘을 클릭합니다. 참고: 상단 메뉴 또는 하단 메뉴 항목의 어떤 메뉴여도 무방합니다. 4. 메뉴 설정 창이 나타나면 옵션 항목에서 하단 숨김을 선택합니다. 2단계: 빈 섹션 추가 및 하단 디자인하기 커스텀 하단을 디자인하기 위한 새로운 빈 섹션을 추가합니다. 1. 위젯이 없는 작업영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 참고: 위젯에 마우스 오른쪽 버튼 클릭 시 위젯 컨텍스트 메뉴가페이지에 구글 지도 삽입하기 (API 설정 불필요)
페이지에 단일 지도 위젯에서 구글 지도를 사용하려면, 앞서 구글 지도 API 설정을 마쳐야 합니다. 이 방법은 설정과정이 다소 번거롭지만, 한 번 설정을 완료하면 다양한 효과 및 기능을 편리하게 사용 가능하다는 장점이 있습니다. 만약 지도 API 설정에 어려움을 느끼거나 기본 구글 지도만으로 충분한 경우, 구글의 지도 공유하기 기능을 사용할 수 있습니다. 이 방법은 개인이 지도를 제어할 수는 없지만, 설치가 간단합니다. 참고: 지도 게시판 위젯에서 지도를 사용하려면 네이버 또는 구글 지도 API 설정을 필수로 완료해야 합니다. 삽입방법 1단계: 구글 지도 임베드 코드 복사하기 1. 구글 지도에 접속합니다. 2. 왼쪽 상단 검색필드에 검색할 장소명 또는 주소를 입력하고, 키보드 Enter를 눌러줍니다. 3. 표시할 장소가 맞는 경우 하단의 공유를 클릭합니다. 4. 공유 팝업이 나타나면 지도 퍼가기 탭을 클릭합니다. 5. HTML 복사를 클릭해, 임베드 코드를 복사합니다. 2단계: 코드상단 겹치기 (메뉴와 일체화된 디자인 구성하기)
상단 겹치기 기능에 대한 이해 캠페이너스 디자인 모드에서 겹치기란 상단 메뉴와 상단 바로 아래 본문 배경이 겹쳐진 형태를 말합니다. 겹치기가 활성화 되면 아래의 그림처럼 상단 메뉴와 본문 배경이 겹쳐집니다. 주의: 겹치기 기능을 사용하기 위해서는 상단 메뉴 바로 아래쪽 섹션에 배경(배경색/이미지/동영상)이 설정되어 있어야 합니다. 시작에 앞서 - 겹치기 옵션을 적용하면 상단의 배경은 투명하게 설정되며, 배경색 또는 배경 이미지를 적용했더라도 무시됩니다. - 겹치기를 해제할 경우 설정한 배경색 또는 배경 이미지가 다시 적용됩니다. - 상단과 겹쳐진 아래쪽 섹션 내 위젯은 메뉴와 겹쳐지지 않습니다. 섹션의 배경만 메뉴와 겹쳐집니다. 설정방법 1. 디자인 모드에 접속합니다. 2. 디자인 모드 오른쪽 상단의 겹치기 아이콘을 클릭합니다. 1. 또는,상단 마우스 오른쪽 버튼 클릭시 나타나는 컨텍스트 메뉴에서 겹치기 버튼을 클릭합니다. 2. 3. 상단 메뉴와 상단 바로 아래 본문 섹션이 겹쳐집니유튜브 동영상 사용 시 제목, 메뉴, 로고를 숨길 수 없나요?
캠페이너스 디자인 모드에서 비주얼 섹션과 섹션 배경에 유튜브(YouTube) 동영상을 사용하면 동영상이 재생될 때 잠시 제목과 공유 옵션, 로고 등의 원치 않는 정보가 표시될 수 있습니다. 참고: 동영상 위젯으로 유튜브 동영상을 삽입하면 동영상 플레이어 컨트롤 바를 숨길 수는 있지만 제목과 같은 동영상 정보를 감출 수는 없습니다. 유튜브는 서비스 특성상 기본적으로 동영상을 더 많은 사람에게 노출하고 추천하며 공유되게 합니다. 캠페이너스는 유튜브 동영상을 Embed(삽입) 형식으로 불러오기 때문에 유튜브에서 노출하려는 정보를 강제로 숨길 순 없습니다. 만약 동영상을 콘텐츠 공유보다 디자인을 위해 사용한다면 유튜브보다 비메오(Vimeo)를 추천합니다. 비메오는 유튜브와 유사한 동영상 스트리밍 서비스지만, 동영상 크리에이터의 포트폴리오 공유를 위해 더 다양한 공유 옵션을 제공하기 때문입니다. 예를 들어, 비메오를 사용하면 아래와 같은 장점이 있습니다. - 동영상 플레이어를 사용자가 디자인마우스 휠 스크롤 시 전환되는 상단 고정메뉴 만들기
마우스 휠 스크롤 시 기본 상단 디자인과는 다른 고정메뉴가 나오도록 설정할 수 있습니다. 아래 애니메이션은 고정메뉴 활용 예시입니다. 마우스 휠 스크롤 시 상단 디자인이 변하는 걸 확인할 수 있습니다. 캠페이너스에서는 상단 고정메뉴라 부르며, 고정메뉴 설정에서 변경할 수 있습니다. 제작방법 1. 디자인 모드에 접속합니다. 2. 디자인 모드 오른쪽 상단의 상단설정을 클릭합니다. 3. 상단설정 모드로 진입하면, 오른쪽 상단의 고정메뉴 설정을 클릭합니다. 4. 고정메뉴 설정 모드가 나타나면, 상단 고정메뉴를 디자인합니다. 위젯을 추가하고, 섹션 배경을 설정하는 등 기본적인 디자인 방법은 본문 디자인 방법과 같습니다. 5. (선택 사항) 기본 상단 디자인을 수정해 사용하고자 한다면, 오른쪽 상단의 상단 기본 디자인 가져오기 를 클릭해 불러올 수 있습니다. 6. 고정메뉴 디자인을 마치면, 왼쪽 상단의 상단 편집으로 돌아가기를 클릭해 상단 기본 상단설정 디자인모드로 돌아갑니다. 7. 토글버튼을상품 상세페이지 펼쳐보기 설정하기
지나치게 긴 상품 상세페이지의 경우 펼쳐보기 옵션을 통해 방문자가 상품 상세페이지를 펼치고 접을 수 있도록 설정할 수 있습니다. 시작에 앞서 펼쳐보기 옵션을 설정하기 위해선 쇼핑 기능을 활성화 되어 있어야 합니다. 설정방법 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다. 3. 글로벌 메뉴 항목에서 상품 상세페이지 메뉴를 클릭합니다. 4. 상품 상세페이지에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 5. 컨텍스트 메뉴가 나오면 상품 상세페이지 설정을 클릭합니다. 6. 디자인 탭 메뉴 최하단의 기타 항목에서 상품 상세정보 펼쳐보기 버튼 적용 옵션을 선택합니다. 7. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다. 8. 상품 상세페이지로 이동해, 펼쳐보기 버튼이 나타나는지 확인합니다. 9. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.아이패드, 안드로이드 태블릿에서 디자인 모드 사용이 가능한가요?
캠페이너스 디자인 모드는 아이패드 및 안드로이드 태블릿에서 작동하지 않습니다. 캠페이너스 인터넷 브라우저를 통해 사이트를 제작하는 솔루션입니다. 다양한 웹 브라우저에서 작동되도록 고안되었으나, 최적의 사이트 제작환경을 제공하기 위해 디자인 모드의 경우 특정 브라우저 및 운영체제에 최적화 되어 있습니다. 호환되는 브라우저 및 운영체제에 대한 자세한 정보는 다음 도움말을 확인해 보세요. 호환되는 브라우저 및 운영체제 단, 관리자 페이지는 거의 모든 기능을 스마트폰 및 각종 태블릿에서 브라우저에 상관없이 이용이 가능합니다.위젯 이동하기
페이지에 추가된 위젯을 이동시킬 수 있습니다. 아래의 방법과 애니메이션을 참고해 원하는 위치에 위젯을 배치해 보세요. 이동방법 1. 마우스로 위젯을 클릭합니다. 2. 클릭을 유지한 체로 드래그합니다. 3. 원하는 위치에 검정선이 나타나면 마우스를 놓습니다. 4. 위젯 이동이 완료됩니다.유튜브 쇼츠 동영상 등록하기
유튜브에 올린 쇼츠 동영상을 사이트에 보여줄 수 있으며, 이때 디자인 모드 또는 관리자 페이지에서 쇼츠 동영상의 소스 코드를 삽입해야 해요. 이 가이드에서는 유튜브 쇼츠 동영상의 소스 코드를 확인 후, 사이트에서 설정하는 방법에 대해서 알려드릴게요! 디자인 모드에서 코드 위젯 사용하기 1. [YouTube] 에 접속해요. 2. 오른쪽 상단의 프로필 이미지를 클릭 후, 내 채널을 클릭해 주세요. 3. 주소를 가져올 쇼츠 동영상을 클릭 후, 동영상 화면 위로 마우스 우 클릭해 주세요. 4. 소스 코드 복사를 클릭해 주세요. 5. 캠페이너스 사이트의 [디자인 모드 > 코드 위젯 추가] 후, ‘코드 위젯 우 클릭 > 코드 설정’에서 4. 번에서 복사한 소스코드를 붙여넣기 해요. 6. 미리보기로 사이트에서 쇼츠가 정상적으로 보이는지 확인 후. [게시하기] 버튼을 클릭하여 사이트에 반영해 주세요! TIP:만약, 쇼츠가 정상적으로 보이지 않는다면 [관리자 페이지 > 환경설정 > 보안 및 개인정보모바일에서 테이블(표)이 잘려 보여요
모바일 기기에서 테이블(표) 일부가 잘려 보일 수 있는데요. 이럴 땐 반응형 테이블로 설정해서 해결해 보세요! 설정 후 방문자는 모바일 기기에서 손가락을 좌우 움직여서 테이블을 확인할 수 있어요. 1. [디자인 모드 > 테이블(표)이 있는 텍스트 위젯에서 마우스 더블 클릭] 하고, 테이플을 마우스로 드래그하여 테이블(표) 전체를 선택해 주세요. 2. 테이블(표) 아이콘을 클릭한 다음, 반응형 테이블로 설정해 주세요. 3. 완료되었습니다. 👏🏻 미리보기 버튼을 클릭해서 디자인을 확인하고 [게시하기]를 클릭하여 실제 사이트에 반영해 주세요.비주얼섹션 한 줄에 텍스트와 이미지 첨부하기
테이블(표)를 사용해 비주얼섹션의 한 줄에 텍스트와 이미지를 나란히 삽입할 수 있습니다. 이 방법은 비주얼섹션뿐 아니라 텍스트 에디터를 제공하는 모든 위젯 및 관리자 페이지에서 적용 가능합니다. 1단계: 비주얼섹션 추가 및 설정 열기 메뉴에 비주얼섹션을 추가하고, 비주얼섹션의 설정을 여는 과정입니다. 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다. 3. 비주얼섹션을 클릭합니다. 4. 비주얼섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 5. 컨텍스트 메뉴가 나오면 비주얼 설정을 클릭합니다. 2단계: 슬라이드 선택 및 배경색 채우기 비주얼섹션 슬라이드의 샘플 콘텐츠는 모두 삭제하고, 배경색을 지정하는 과정입니다. 1. 비주얼 설정 창 왼쪽 상단에서, 편집할 슬라이드를 선택합니다. 참고: 새로운 슬라이드를 클릭해, 슬라이드를 추가하거나, 슬라이드 썸네일 상단의 ⨂를 클릭해 삭제합니다. 2. 선택한 슬라이드에 있는 샘플 텍스트를 경우갤러리 위젯으로 비주얼섹션 만들기
비주얼섹션은 웹사이트의 독자성을 표현하거나, 중요한 정보(이벤트, 행사 등)를 전달할 때 유용하지만, 텍스트와 이미지를 원하는 위치에 배치하기 어려운 점이 있습니다. 그 이유는 비주얼섹션에 포함되는 이미지가 섹션의 배경으로 처리되어, 브라우저 크기에 따라 이미지의 상하 또는 좌우 일부가 잘릴 수 있기 때문입니다. 이 문제를 해결하기 위해서는 몇 가지 방법이 있지만, 가장 쉽고 효과적인 방법은 갤러리 위젯을 활용하는 것입니다. 갤러리 위젯은 비주얼섹션 만큼 자유로운 편집은 불가하지만, 어떤 상황에서든 이미지 비율을 유지하는 속성을 가지고 있습니다. 만약 준비한 이미지에 텍스트가 포함되어 있거나, 어떤 크기의 화면에서도 이미지를 잘림 없이 유지하고자 한다면 갤러리 위젯으로 비주얼 이미지를 추가해 보세요. 중요: 갤러리 위젯을 비주얼섹션 대신 사용하는 경우, 상단 메뉴와 상단 메뉴 바로 아래 섹션과 겹치기가 제한됩니다. 1단계: 갤러리 위젯 추가하기 1. 디자인 모드에 접속합니다. 2.디자인 모드 실행취소 및 재실행
디자인 모드에서 사이트 디자인을 편집하다가 이전으로 돌아가고 싶었던 적 있으셨죠? 이제 디자인 모드에서 이전 작업으로 돌아가거나, 취소한 작업을 재실행할 수 있어요! 이 가이드에서 디자인 모드의 실행취소와 재실행 기능에 대해서 알아볼게요! --- 실행취소 및 재실행 이용 시 주의점 1. 같은 메뉴 내에서만 실행 취소 및 재실행이 가능해요! 디자인을 수정하거나 실수한 메뉴 내에서만 가능하며, 다른 메뉴에서 실행취소와 재실행은 불가해요. 2. 2개 이상의 브라우저에서 디자인 모드를 동시 접속할 경우, '동시 접속중' 문구가 노출돼요. 주의:동시에 같은 메뉴를 수정한다면 작업 도중 새로고침이 필요할 수 있고, 새로고침 후 이전 작업으로 실행취소 또는 재실행이 불가하여 디자인 모드 동시 접속은 권장 드리지 않습니다. 3. 실행취소 및 재실행의 기능은 현재 Beta 버전으로 일부 기능에서는 작동하지 않아요. 상단 설정, 메뉴 설정, 공통 디자인 설정, 하단 설정, 반복 섹션, 비주얼 섹션 -지도 게시판 위젯으로 지점 찾기 메뉴 만들기
지도 게시판 위젯을 사용해 회사 또는 프렌차이즈 지점 찾기와 같은 메뉴로 만들 수 있습니다. 이 도움말에서는 페이지에 지도 게시판 위젯을 삽입하고, 위치가 기록된 게시물을 올려 지점 찾기 메뉴를 만드는 방법을 설명합니다. 1단계: 지도 게시판 위젯 추가하기 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단의 메뉴 관리 아이콘을 클릭합니다. 3. 상단 메뉴 항목의 ⨁ 아이콘을 클릭해 새로운 메뉴를 생성하거나, 기존 메뉴가 있다면 클릭해 이동합니다. 4. 왼쪽 상단의 위젯 추가 아이콘을 클릭합니다. 5. 지도 게시판 위젯을 클릭합니다. 6. 새로운 지도 게시판 위젯이 페이지에 삽입됩니다. 2단계: 지도 게시판 위젯 설정하기 지도 게시판 설정을 열어, 사용할 지도를 선택하고, 권한을 설정합니다. 1. 지도 게시판 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 컨텍스트 메뉴가 나오면 지도 리스트 설정을 클릭합니다. 아래 그림과 설명을 참고해 지도 게시판 기본 설정을 완료해텍스트 링크 추가하기
텍스트 일부 또는 전체를 마우스로 선택하고 링크를 추가할 수 있습니다. 링크방법 1. 디자인 모드에 접속합니다. 2. 텍스트 위젯을 추가합니다. 3. 텍스트 위젯을 마우스로 더블-클릭 한 후 텍스트를 입력합니다. 4. 링크를 걸 텍스트를 마우스로 드래그하여 선택합니다. 5. 텍스트 편집도구에서 링크 아이콘 을 클릭합니다. 6. (선택 사항) 돋보기 를 클릭해 기존 메뉴를 연결하거나, 직접 주소(URL)를 입력합니다. 7. (선택 사항) 새 브라우저 창으로 열리게끔 하려면 새 탭으로 열기를 체크합니다. 8. 오른쪽 하단의 업데이트를 클릭해 저장합니다. 9. 디자인 모드 오른쪽 상단의 미리보기를 클릭합니다. 링크 동작여부를 확인합니다. 10. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.인스타그램 연동 시 계속 이전 계정으로 자동 연결됩니다.
갤러리 위젯에 인스타그램 연동 시 계속해서 이전 계정으로 자동 연결되는 이유는, 사용 중인 인터넷 브라우저에서 이전 계정으로 인스타그램이 로그인되어 있기 때문입니다. 새로운 인스타그램으로 연동하기 위해서는 현재 로그인된 인스타그램 계정에서 로그아웃하고, 캠페이너스 디자인 모드로 돌아가 인스타그램 재연동 작업이 필요합니다. 연동방법 1. 현재 캠페이너스를 이용 중인 브라우저로 인스타그램 에 접속합니다. 2. 브라우저 오른쪽 상단의 프로필 사진을 클릭하고, 프로필을 클릭합니다. 3. 프로필 편집 버튼 오른쪽에 위치한 톱니바퀴 아이콘을 클릭합니다. 4. 로그아웃을 클릭합니다. 5. 캠페이너스 디자인 모드로 돌아가 다시 인스타그램을 연동합니다.갤러리 위젯으로 인스타그램 연동하기
갤러리 위젯에 사용자의 인스타그램 계정을 연동하여 인스타그램 포스트를 불러올 수 있습니다. 연동 완료 후 새로운 인스타그램 포스트를 올리면 갤러리 위젯에도 따라서 올라갑니다. 참고: 인스타그램에 올린 새 포스트가 웹사이트의 갤러리 위젯에 표시되기 까지 약간의 시간이 소요될 수 있으며, 공동게시물은 갤러리 위젯에 연동되지 않습니다. 설정방법 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 갤러리 위젯을 추가합니다. 3. 갤러리 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 4. 위젯 컨텍스트 메뉴가 나타나면 갤러리 설정을 클릭합니다. 5. 갤러리 연동 항목에서 이름 없는 갤러리를 클릭합니다. 6. 드롭다운 메뉴에서 인스타 계정에서 가져오기를 클릭합니다. 7. 설정 창 상단에 인스타그램 연동하기를 클릭합니다. 8. 인스타그램 계정으로 로그인합니다. 디자인 모드를 사용 중인 브라우저(예: Google 크롬)에서 인스타그램에 이미 로그위젯 복제하기
위젯은 복사하고 붙여넣을 수 있습니다. 같은 위젯을 반복해서 추가할 때 유용합니다. 위젯 복사하기 1. 복사하려는 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 2. 컨텍스트 메뉴가 나오면 위젯 복사를 클릭합니다. 위젯 붙여넣기 1. 페이지 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 2. 컨텍스트 메뉴에 위젯 붙여넣기 메뉴가 활성화된 걸 확인할 수 있습니다. 3. 위젯 붙여넣기를 클릭합니다. 4. 위젯이 복제되어 페이지에 추가됩니다.사운드 클라우드 음원 페이지에 삽입하기
사운드 클라우드에 올린 음악을 내 사이트로 불러와 방문자가 재생할 수 있도록 삽입할 수 있습니다. 디지털 음원 판매하기 위해 미리듣기를 제공하거나, 기타 이유로 음원 재생이 필요할 때 사용할 수 있습니다. 이 도움말에서는 사운드 클라우드에 올린 음원 트랙의 Embed(임베드, 삽입) 코드를 가져와 내 사이트에 삽입하는 방법을 설명합니다. 삽입방법 1단계: 사운드 클라우드 Embed 코드 생성하기 1. 사운드 클라우드 에 접속 후 로그인합니다. 2. 오른쪽 상단의 프로필을 클릭하고, Tracks 를 클릭합니다. 3. 내 사이트에 삽입하려는 트랙 위에 마우스 포인터를 올리면 숨겨진 메뉴가 나타납니다. 여기서 더보기 ⋯ 아이콘을 클릭합니다. 4. 더보기 메뉴가 나오면 Share 를 클릭합니다. 5. Embed 탭을 클릭합니다. 아래 그림과 설명을 참고해 사운드 클라우드 오디오 플레이어의 모양 및 색상, 옵션을 설정합니다. - 오디오 플레이어 : 오디오 플레이어의 모양을 선택합니다. - C텍스트 위젯
위젯 소개 페이지에 텍스트를 추가할 때 사용합니다. 텍스트 입력하기 텍스트 위젯을 마우스로 더블-클릭한 다음 자유롭게 텍스트를 작성할 수 있습니다. 텍스트 입력 외 표를 추가하거나, 이미지, 코드를 삽입할 수도 있습니다. 참고: 키보드 Shift+Enter를 눌러 다음 줄에 붙여서 작성할 수 있습니다. 텍스트 편집도구 텍스트 편집도구를 활용해 텍스트의 단락, 크기, 색상, 배경색 등을 변경하거나, 링크, 표, 이미지 등을 추가할 수도 있습니다. - 단락 : 텍스트의 단락을 설정합니다. 제목(h1~h6), 본문(body) 단락을 설정할 수 있습니다. - 글꼴크기 : 텍스트의 크기를 변경합니다. - 텍스트 색상 : 텍스트의 색상을 변경합니다. - 배경색상 : 텍스트 배경 색상을 변경합니다. - 굵게 : 텍스트의 굵기를 변경합니다. - 기울임 꼴 : 텍스트를 기울게 변경합니다. - 밑줄 : 텍스트 아래 밑줄을 긋습니다. - 취소선 : 텍스트에 취소선을 긋습니다. - 자간 : 텍스트 사이의모바일 버전에서 PC 섹션 숨김/복원하기
모바일 버전에 불필요한 PC 섹션이 있는 경우 섹션 단위로 숨김 처리할 수 있습니다. 섹션 숨기기 1. 뷰포트를 모바일로 전환합니다. 2. 섹션마다 왼쪽 상단에 표시된 숨김 아이콘(눈 아이콘)을 클릭합니다. 참고: 섹션마다 숨김 아이콘이 준비되어 있어, 원하는 섹션만 클릭해 숨길 수 있습니다. 3. 섹션이 숨겨집니다. 섹션 복원하기 숨긴 섹션은 언제든 복원할 수 있습니다. 1. 뷰포트 오른쪽의 섹션 구분선(파란 점선) 주변에 표시된 말풍선 아이콘을 클릭합니다. (숨긴 섹션의 수에 따라 숫자가 다르게 표시될 수 있습니다.) 2. 화면 오른쪽에 숨긴 섹션 목록창이 나타나면 복원하려는 섹션을 클릭합니다. 3. 숨긴 섹션이 원래 위치로 복원됩니다.구글 폰트 사용하기 (사이트 전체 적용하기)
캠페이너스는 원활한 사이트 로딩 및 사용자분들의 저작권 문제 예방을 위해 캠페이너스에서 제공하는 폰트만을 사용하실 것을 권장합니다. 그러나 꼭 필요하신 분에 한하여 구글 폰트를 불러와 내 사이트에 적용할 수도 있습니다. 구글 폰트 글꼴들은 SIL Open Font License 1.1 라이센스가 적용되어 사이트에 자유롭게 사용하실 수 있습니다. 주의: 구글 폰트 사용에는 HTML 및 CSS에 대한 이해가 필요합니다. 또한 제공되는 소스 코드 및 도움말 외 추가적인 기술 및 고객지원은 제공하지 않습니다. 1단계: Google Fonts에서 글꼴 찾기 1. Google Fonts 에 접속합니다. 2. 왼쪽 상단의 검색 필드에 원하는 폰트 이름을 영문으로 작성합니다. 3. 폰트 검색 결과가 나오면 마음에 드는 폰트를 클릭합니다. 4. 마우스 휠 스크롤을 내려 Style 섹션으로 이동 후, 사용하려는 폰트 스타일을 선택합니다. (복수 선택 가능) 주의: 검색한 폰트의 한글 지원 여부를 확인