카테고리
페이지 구성하기
사이트 이름 변경하기
캠페이너스를 개설할 때 설정된 사이트 이름은 다음과 같은 방법으로 언제든지 바꿀 수 있습니다. 환경설정에서 사이트 제목 변경하기 1. 내 사이트의 관리자 모드에 접속하여, 환경설정 > 기본설정 메뉴를 클릭합니다. 2. 사이트 이름을 수정하여 입력합니다. 3. 변경사항을 저장버튼을 클릭하여 반영합니다. 사이트 이름을 변경했다면 카카오톡, 페이스북 등에 표시되는 이름도 업데이트가 필요해요 다음 도움말을 참고하여 진행해보세요 SNS 공유시 썸네일 이미지 바꾸기 (페이스북) > SNS 공유시 썸네일 이미지 바꾸기(카카오톡, 텔레그램)공통 디자인 설정하기
공통 디자인 설정 공통 디자인 설정을 사용하면 기본 텍스트의 색상, 크기와 기본 배경 색상 등을 맞춤설정 할 수 있습니다. 내 사이트 전반에 걸쳐 사용하는 텍스트, 배경색, 버튼 등을 맞춤설정 하려면 아래 그림처럼 톱니바퀴 아이콘을 클릭해 공통 디자인 설정으로 이동합니다. 공통 디자인 설정 메뉴 알아보기 공통 디자인 설정 메뉴를 클릭하면 아래 그림처럼 우측에서 패널이 열립니다. 각 항목에 대한 자세한 설명은 아래에서 확인해보세요. 본문 - 브랜드/링크색 : 내 사이트를 대표하는 색상을 지정하여 브랜드 표현을 강화 할 수 있습니다. 이곳에서 설정한 색상은 버튼 및 링크, 강조할만한 텍스트 등에 자동 적용됩니다. - 뱃지색 : 새로운 가입자가 생겼거나, 주문이 들어왔을 때 등 표시되는 알림 색상을 변경할 수 있습니다. - 글자색 : 본문에 입력되는 텍스트의 기본 색상을 변경할 수 있습니다. - 배경색 : 내 사이트의 기본 배경색을 설정합니다. 섹션에서 설정한 배경이 있을 경우 기본 배경본문 배경을 메뉴 배경으로 확장하기(겹치기)
겹치기 기능에 대한 이해 캠페이너스에서 '겹치기'는, 메뉴가 본문 배경과 겹쳐진 형태를 말합니다. 겹치기 기능을 활성화하기 위해서는 상단(헤더) 섹션에서 '겹치기' 기능을 켜야 합니다. 겹치기가 활성화 되면, 아래 그림처럼 상단 메뉴와 본문 섹션이 겹치면서 마치 메뉴가 떠있는 듯한 효과를 낼 수 있습니다. 참고 - 겹쳐진 메뉴(헤더)의 배경은 무시되어 투명이 됩니다. 따라서 배경을 설정하더라도 투명한 형태로만 표시됩니다. - 겹치기를 해제할 경우 설정한 배경이 적용됩니다. - 헤더 섹션과 겹쳐진 아래쪽 섹션 내의 위젯은 메뉴와 겹쳐지지 않습니다. 섹션의 배경만 메뉴와 겹쳐집니다. 겹치기 효과를 구현하는 방법 1단계, 겹쳐질 본문 섹션을 상단(헤더)의 바로 아래쪽에 배치합니다. 섹션은 위젯(이미지, 텍스트, 게시판 등)을 감싸는 영역이며, 마우스 오른쪽 버튼을 눌러 '위로 이동' 또는 '아래로 이동'을 통해 이동할 수 있습니다. 2단계, 상단 메뉴 영역에서 마우스 오른쪽 버튼을 클릭해상단(헤더) 설정 주요기능 알아보기
시작에 앞서 상단은 웹사이트의 분위기를 결정 짓는 매우 중요한 요소 중 하나입니다. 캠페이너스에서 상단이란 웹사이트 최상단에 위치한 로고, 메뉴, 마이페이지 등이 들어가는 영역을 가리킵니다. 워드로 치면 머리말이며, 웹사이트 개발 때는 전문용어로 헤더(Header) 라고 부릅니다. 이 섹션에서는 상단디자인 메뉴가 가진 주요 기능 및 특징에 대해 알아보겠습니다. Point 1. 최대 3단으로 나눌 수 있는 상단 섹션 우리는 페이지 본문을 디자인할 때, 메뉴를 추가한 다음, 위젯을 추가해 컨텐츠를 삽입하고, 필요한 경우 섹션을 나누기도 합니다. 상단 역시 기본적인 제작 방식은 같습니다. 상단은 가로로 최대 3개 단까지 나눌 수 있으며, 각 단마다 필요한 위젯을 나누어 배치할 수 있습니다. 1) 위젯 배치에 따라 자동으로 나눠지는 상단 섹션 처음 1개 위젯을 추가하면 상단 섹션은 기본적으로 1개 단으로 삽입됩니다. 다음으로 새로운 위젯을 왼쪽 또는 오른쪽에 추가하는 경우 자동으로 새로운상단(헤더) 설정 작업환경 살펴보기
시작에 앞서 이번 섹션에서는 상단 디자인 모드에 어떤 메뉴들이 있는지 알아보겠습니다. 상단을 디자인하려면 먼저 상단 설정을 열어야 합니다. 1 . 상단 영역에 마우스 커서를 놓고, 마우스 오른쪽 버튼을 클릭해보세요. 2 . 보조 메뉴가 나타나면 가장 위에 '상단 설정'을 클릭합니다. 그럼 아래와 같이 상단 디자인 모드로 진입합니다. 1) 디자인 모드로 돌아가기 상단 디자인 편집 모드를 끄고, 디자인 모드로 돌아갑니다. 2) 상단 기본/겹치기 모드 전환하기 메뉴를 클릭해, 기본 상단 또는 겹치기 한 상단 디자인을 따로따로 관리할 수 있습니다. 3) 뷰포트 변경 모바일 버전 상단 디자인도 사용자가 직접 편집할 수 있게 되었습니다. 뷰포트 변경을 클릭해, 모바일 뷰포트로 변경하면 모바일 전용 상단 디자인을 꾸밀 수 있습니다. 4) 공통 디자인 설정 공통 디자인 설정을 클릭해, 기본적인 글자 색, 메뉴 색, 활성화 메뉴 색, 글꼴 등을 지정할 수 있습니다. 제 경우 상단 디자인 편집 모드에하단(푸터) 설정하기
하단이란? 하단 또는 푸터(Footer)라는 이름을 가진 이 섹션은 문서로 치면 꼬리말 영역을 말합니다. 하단/푸터 영역은 사용자가 의도적으로 제외하지 않는 이상 모든 페이지 최하단에 똑같이 표시됩니다. 하단 디자인 시작하기 하단 디자인을 변경하고, 설정하는 단계별 방법을 설명합니다. 1단계: 하단 디자인 변경하기 미리 구성된 하단 디자인 템플릿을 불러와 하단 디자인을 변경합니다. 변경방법 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단의 마술봉 아이콘을 클릭합니다. 3. 섹션 추가 메뉴가 나오면 푸터 카테고리에 마우스 포인터를 올립니다. 4. 마음에 드는 푸터 템플릿을 마우스로 클릭합니다. 5. 섹션 추가 바깥 영역을 클릭해 설정을 종료합니다. 2단계: 하단에 텍스트 정보 입력하기 하단 템플릿마다 텍스트를 입력할 수 있는 영역이 존재합니다. 텍스트 영역을 마우스로 클릭하여, 사업자 정보, 연락처, 주소 등의 정보를 입력합니다. 설정방법 1. 하단 영역에서 텍스트가 입력된 영역을 마하단(푸터) 요소 변경 및 설정하기
하단(푸터) 요소 변경 및 설정하기 하단(푸터)에서 우측 마우스 클릭 후 하단 설정에 접속합니다. ① 표시요소 - 사이트명 : 사이트 이름 표시 여부 - 메인메뉴 : 상단메인 메뉴를 하단(푸터)영역에 표시할지 여부 - 하단메뉴 : 하단메뉴를 하단(푸터)영역에 표시할지 여부 - 약관/개인정보처리방침 : 이용약관 및 개인정보처리방침 표시 여부 - 국내/국외 여행약관 : 여행약관 표시 여부 (여행 사업자 사이트의 경우) - SNS 바로가기 : SNS 바로가기 아이콘 표시 여부 - 저작권 문구 표시 : 저작권 문구 표시 여부 - 앱 링크 표시 : 안드로이드, iOS 앱 링크 표시 여부 ② 디자인 요소 글자와 여백, 배경 색상, 배경 이미지 등 설정 ③ SNS 바로가기 Facbook, Twitter, Instargram, 플러스친구, 블로그 등 SNS 채널 아이콘 설정 * 참고 : 주소, 연락처, 사업자등록번호 등의 텍스트는 하단(푸터) 영역에서 마우스 더블 클릭으로 직접 편집이 가능합니다.하단 SNS 추가 및 삭제하기
하단에서 마우스를 우클릭, 하단설정으로 접속해 SNS 바로가기 옵션을 체크합니다. 설정할 SNS 채널을 추가하고 연결할 URL을 입력하세요.하단에 입력폼, 갤러리 등 다양한 위젯을 넣을 수 있나요?
하단에 입력폼, 갤러리 등 다양한 위젯을 넣을 수 있나요? 하단 바로 위에 빈 섹션을 추가하여 원하는 위젯을 넣고, 하단으로 사용할 수 있습니다. 1 . 하단(푸터)에 가장 근접한 섹션을 추가합니다. 2. 추가된 섹션에 원하는 위젯을 추가합니다. 3. 추가된 섹션을 우클릭하고 섹션 반복 을 선택합니다. 4. 섹션 반복이 설정된 섹션의 경우 우측의 [핀 모양 아이콘]이 활성화 됩니다. 참고 : 섹션 반복이 설정된 섹션은 모든 페이지의 하단에 공통적으로 표시됩니다. 특정메뉴(페이지)에서 반복된 섹션을 숨기려면, 해당 메뉴설정의 옵션에서 반복 섹션 숨김을 선택합니다. 기존의 하단을 사용하지 않으려면, 메뉴 관리 > 메뉴 설정의 옵션에서 하단 숨김을 선택합니다.섹션에 동영상 배경 넣기
섹션 배경에 동영상을 넣는 방법은 두가지가 있습니다. 1. 비주얼 섹션에 동영상 넣기 - 디자인모드 좌측 상단 섹션추가를 누릅니다. - 비주얼의 2번째 항목 동영상 섹션을 클릭합니다. 2. 섹션에 동영상 배경 넣기 섹션에서 우측 마우스를 통해 섹션 설정에 접속합니다. 섹션 설정에서 동영상을 클릭하면 YouTube 동영상 URL을 입력하는 창이 나옵니다. 동영상 위젯에서는 YouTube와 Vimeo 동영상 URL 등록이 가능하지만 섹션 배경은 YouTube만 지원되는 점 참고바랍니다. 참고 크롬/사파리 등 일부 브라우저는 브라우저 정책상 "음소거"가 아닌 영상에는 자동 재생이 되지 않습니다. 비주얼 섹션과 섹션 배경의 경우, "자동 재생"이 기본적으로 설정된 섹션 이기 때문에 음소거인 상태에서 영상이 재생이 되는 점은 이용에 참고 부탁드립니다. 또한 모바일은 안드로이드의 경우 음소거 설정이 되어있다면 자동재생이 되지만 애플의 ios기기는 애플측의 정책으로 인해 자동재생 영상 지원이 되모바일에서는 동영상 자동재생기능이 반영되지 않습니다.
동영상 자동재생기능이란, 추가로 재생버튼을 누르거나 화면을 터치하는 작동없이 동영상이 자동으로 재생되는 기능을 말합니다. 디자인모드에서 섹션의 배경으로 동영상을 삽입하고, 자동재생을 설정하면, PC상에서 동영상이 별도의 클릭 없이 자동재생되도록 이용할 수 있습니다. 하지만 이러한 동영상 자동재생 기능은 PCWindows 또는 MacOS 등의 PC(데스크톱) 환경에서는 가능하나, 모바일에서는 자동재생 되지 않습니다. 이유는 모바일 기기(운영체제 또는 웹브라우저) 차원에서 동영상을 비롯한 음원 등의 멀티 미디어를 자동으로 재생하지 못하도록 제한했기 때문입니다. 캠페이너스에서는 이를 Google이나 Apple 등 모바일 운영체제 제작사에서 시스템 및 네트워크 자원을 절감하기 위한 강제사항으로 판단하고 있습니다. 웹에서는 아직 위의 규칙을 무시하는 방법이 존재하지 않습니다. 또한 모바일의 경우 보안 기능이 강화되어 별도의 코드를 활용하시더라고 코드 적용이 어려울 수 있습니다. 따라서 모바일특정 메뉴(페이지)를 숨기고 싶어요.
특정 메뉴(페이지)를 상단 메뉴, 메뉴 위젯, 모바일 서랍 메뉴 등에서 표시되지 않도록 할 수 있습니다. 예를 들면, Home 메뉴는 로고를 눌렀을 때에도 나타나므로 Home 메뉴명이 별도로 나타나지 않도록 하고 싶을 때 메뉴 숨김 기능을 이용할 수 있습니다. - 디자인 모드> (왼쪽 윗부분) 메뉴 관리를 클릭합니다. - 숨기고자 하는 메뉴를 우클릭하여 메뉴 설정을 클릭합니다. - 메뉴 설정 창의 아래쪽 메뉴 숨김을 선택(체크)합니다.원페이지로 사이트를 구성하거나 해제하는 방법
원페이지 구성 방법 원페이지는 하나의 웹페이지에 주요한 내용들을 포함하여 구성하는 기법입니다. 캠페이너스에서도 원페이지로 사이트를 구성하거나 해제할 수 있습니다. [원페이지 사이트 예시 보기] 1 . 내 사이트의 디자인 모드에 접속합니다. 2. 디자인 모드 화면 우측 상단 공통 디자인 설정을 클릭합니다. 3. 오른쪽에 공통 디자인 설정 사이드바가 나타나면 아래쪽의 원페이지 구성에 체크를 합니다. 4. 공통 디자인 설정을 닫고 저장을 합니다. 5. 원페이지로 사이트가 재구성 됩니다. 원페이지 구성의 해제도 마찬가지의 방법으로 가능합니다. 원페이지 구성은 1차 메뉴만 포함됩니다. 상단 메뉴에서 표현되는 1차 메뉴만 원페이지 구성에 포함되며 2차 이하의 메뉴는 원페이지 구성에 포함되지 않습니다. 이러한 메뉴들은 각각 독립적인 페이지로 접근이 가능합니다. 1차 메뉴 중 예외적으로 원페이지 구성에서 제외시키기 원페이지 구성에 포함되길 원치 않는 메뉴를 제외시킬 수 있습니다. 1. 디자인 모드비주얼섹션 풀페이지 사용시 배경 이미지의 최적 해상도는?
풀페이지를 사용할 경우 각 슬라이드는 브라우저의 화면 크기를 가득 채운 상태로 표시됩니다. 따라서 최적의 해상도란 존재하지 않으며, 표시하고자 하는 이미지에 따라 처리 방법이 달라질 것입니다. 아래는 비주얼 섹션의 이미지 속성에 대한 이해를 돕기 위한 예시입니다. 채우기 채우기는 비주얼 섹션 배경속성의 기본값입니다. 브라우저의 해상도가 변하더라도 배경 이미지가 공백으로 표시되는 일 없이 항상 영역을 가득 채웁니다. 이런 경우 원본 이미지의 비율과 표시되는 영역의 비율에 따라 이미지의 일부가 표시되지 않는 경우가 있습니다. 따라서 이미지에 텍스트가 포함되면서 좌우 또는 상하 가장자리에 텍스트가 배치된 경우 해상도에 따라 잘리는 문제가 발생할 수 있습니다. 중요한 컨텐츠는 배경 이미지에 포함하지 않고, 별도의 텍스트로 작성하는 방법이 권장됩니다. 반복안함 배경 속성을 반복안함으로 설정한 경우 배경 이미지 원본 크기 그대로 출력합니다. 다만 위 예시와 같이 원본 크기보다 브라우저의 창이모바일 편집하기
모바일 사이트 디자인하기 캠페이너스는 반응형웹으로 PC 버전 사이트를 제작하면 모바일 버전도 자동으로 제작해줍니다. 하지만 자동으로 만들어진 결과물이 모두 마음에 들지 않을 수 있습니다. 그래서 준비된 기능이 바로 모바일 버전 편집 기능입니다. 모바일 편집 기능은 모바일 모드에서 최대한 원하는 결과물을 만들 수 있도록 도와줍니다. 주의사항 : 모바일 편집은 PC구성을 모두 완료한 후 진행하시는 것을 권장드립니다. 모바일 이동 및 숨기기가 적용된 페이지의 위젯을 PC 편집모드에서 이동이나 삭제를 할 때 아래와 같은 경고가 나타납니다. 확인을 누르면 모바일에서 편집했던 사항들이 모두 초기화 되므로 다시 모바일 편집을 해야 할 수 있습니다. 모바일 편집 진입 방법 1단계, 디자인 모드 상단 중앙부에 위치한 뷰포트 변경 메뉴에서 '모니터' 아이콘을 클릭합니다. 2단계, 하단에 추가 메뉴가 나타나면 '모바일'을 선택해주세요. 3단계, 다시 PC 편집 모드로 돌아가려면 위 1단계에서 클릭했던섹션을 좌/우로 나누기 (사이드바 추가)
섹션 영역을 좌우로 나누어 요소들을 구성하고 싶을 때 사이드바를 추가할 수 있습니다. 1. 먼저 디자인 모드에서 섹션 우측의 ⓘ 아이콘을 눌러서 섹션 설정으로 들어갑니다. 2. 섹션 설정 아래의 사이드에서 원하는 형태를 선택합니다. 스크롤을 내려도 왼쪽 또는 오른쪽의 사이드가 따라 내려오는 효과를 원하시면, '섹션 사이드 고정'을 선택합니다. 3. 섹션을 나누게 되면 사이트가 나눠지며 각 사이드마다 위젯을 추가할 수 있습니다. 4. 좌측 사이드에 메뉴리스트 위젯을 추가한 모습입니다.섹션 ID를 사용해 특정 섹션으로 이동시키기
시작에 앞서 섹션 ID란, 각 섹션이 가진 고유의 ID를 말합니다. 이 섹션 ID를 링크시킬 주소(URL) 대신 삽입하면, 특정 섹션으로 화면을 이동시킬 수 있습니다. '섹션 링크'는 흔히 원페이지(1-Page) 사이트에서 많이 쓰이며, 필요한 경우 다른 메뉴의 특정 섹션으로 이동시키는 것도 가능합니다. 이번 팁에서는 같은 페이지에 존재하는 섹션으로 이동시키는 방법에 대해 알아보겠습니다. 기능 미리보기 1) 섹션 이동 예시 보기에 접속하여, 페이지 가운데에 있는 [문의하기] 버튼을 눌러보세요. 2) 같은 페이지 아래 문의하기 입력폼이 있는 섹션으로 이동하는 것을 확인할 수 있습니다. 제작방법 1단계, 이동하고자 하는 섹션의 설정 창 켜기 1) 이동하고자 하는 섹션의 오른쪽 기둥에 마우스 커서를 놓고, 마우스 오른쪽 버튼을 클릭해주세요. 2) 보조 메뉴가 나타나면, [섹션 설정]을 클릭합니다. 2단계, 섹션 ID 복사하기 설정 창 우측 중간쯤 위치한, 섹션 ID를 #을 포함해, 마우스파일첨부시 확장자 및 용량 제한
첨부파일 제한 용량은 다음과 같습니다. - 게시판: 100MB (게시물을 쓰는 이가 파일을 업로드하여 방문자가 다운로드 받을 수 있음) - 버튼 위젯 등 위젯 내 파일첨부 : 100MB(디자인 모드 접근권한이 있는 관리자가 파일을 업로드하여 방문자가 다운로드 받을 수 있음) - 입력폼 위젯: 50MB (입력폼을 작성하는 방문자가 파일을 업로드할 수 있음) 파일첨부 확장자(파일종류)에는 제한이 없으니 이용에 참고 부탁드립니다.비주얼 섹션(메인 배너) 설정하기
비주얼섹션이란? 슬라이드 방식으로 동작하는 비주얼섹션은 사이트의 대표적인 아이덴티티를 나타내거나 중요한 정보(이벤트, 행사 등)를 알리는데 사용됩니다. 사용방법 1단계: 비주얼섹션 추가하기 메뉴에 비주얼섹션을 추가합니다. 1. 디자인 모드에 접속합니다. 2. 비주얼섹션을 추가할 메뉴를 추가하거나, 특정 메뉴로 이동합니다. 3. 디자인 모드 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다. 4. 비주얼섹션을 클릭합니다. 5. 비주얼섹션 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 6. 컨텍스트 메뉴가 나오면 비주얼 설정을 클릭합니다. 2단계: 비주얼 설정하기 비주얼 설정 창이 나오면 아래의 그림과 설명을 참고해, 필요한 만큼 슬라이드를 추가하고 콘텐츠를 작성합니다. - 새 슬라이드 추가 : 새로운 슬라이드 버튼을 클릭해 새 슬라이드를 추가할 수 있습니다. - 슬라이드 순서 변경 및 삭제 : 슬라이드 목록에서 기존 슬라이드를 마우스 클릭 후 드래그하여 순서를 변경하거나방문자가 파일을 다운로드 받을 수 있도록 파일 업로드하는 방법
캠페이너스에서 사이트 방문자가 파일을 다운로드 받을 수 있도록 파일을 업로드하는 세가지 방법을 소개드립니다. 1. 게시판 파일 첨부 및 다운로드 - 게시판에 파일을 첨부합니다. - 게시판이 있는 메뉴에서 글쓰기버튼을 누릅니다. - 글양식 메뉴바의 오른쪽 파일첨부버튼을 눌러 파일을 첨부하고 오른쪽 윗부분의 작성을 눌러 저장합니다. - 게시판에서 파일을 다운로드 받을 수 있습니다. - 참고 : 게시판에 글, 이미지 , 동영상 등 컨텐츠 올리기(파일첨부 포함) 2. 버튼위젯에 파일 첨부하기 - 디자인 모드에서 버튼 위젯을 추가합니다. - 버튼 위젯을 우클릭하여 버튼 위젯 설정을 엽니다. - 오른쪽 아랫부분의 링크 설정을 눌러, 파일첨부를 선택하고 파일을 업로드합니다. - 방문자가 다운로드 버튼으로 쉽게 인지하도록 버튼의 텍스트, 아이콘, 텍스트 위젯 등을 수정 및 활용할 수 있습니다. - 방문자는 파일이 첨부된 버튼을 누르면 바로 파일을 다운로드 받습니다. 3. 아이콘위젯에 파일 첨부하기회원가입 알림창(alert)을 만들고 싶어요
캠페이너스는 회원가입 완료 후 가입 직전 페이지로 이동하도록 심플한 사용자 경험을 제공하고 있습니다. 회원가입 사실을 명확히 인지시키려면 다음과 같이 회원가입 완료 페이지 설정을 이용하실 수 있습니다. 1) 디자인모드 > 메뉴 관리 > 메뉴 추가를 통해 회원가입 완료 페이지용 메뉴를 구성합니다. (메뉴 설정 > '메뉴 숨김'에 체크하여 메뉴에 표시되지 않도록 하세요. 2) 디자인모드 > 공통 디자인 설정(오른쪽 상단 톱니바퀴 버튼) > 옵션 > '가입완료 후 특정 위치로 이동'에 체크 3) 1)에서 미리 만들어둔 회원가입 완료 메뉴를 지정합니다.상단 이동 스크롤 버튼 만들기 (위젯 사용)
본 도움말은 웹사이트 하단에 위로 이동 스크롤 버튼을 추가하는 방법을 안내드립니다. 제작방법 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. (선택 사항) 빈 섹션을 추가하거나 섹션 고정 등 기능을 사용해 나만의 모바일 상단을 디자인 합니다.텍스트 위젯을 사용한 카드 디자인
언제 사용하면 좋을까요? - 배경 이미지 가운데 글자 작성하고자 할 때 - 카드 디자인을 색다르게 하고 싶을 때 활용 예시 - 제작 방법 - 텍스트 위젯을 만든다 - 텍스트 위젯 설정에서 높이를 500px 정도로 조정 - 내부 좌우 상하 여백을 30px 정도로 조정 - 테두리를 실선을 지정 - 적절한 배경이미지를 설정 - 가운데 원하는 텍스트나 버튼을 설정하고 디자인 완료팝업 추가하기
캠페이너스에서는 팝업/배너를 직접 만들 수 있어요. 영상을 통해 팝업/배너 만드는 방법을 알려드릴게요. 사이트에 팝업을 구현할 경우 팝업의 형태, 크기, 노출할 페이지, 기간, 대상, 기기까지 다양한 옵션을 지원합니다. 중요: 여러 개의 팝업 노출은 방문자의 사이트 이용에 방해가 될 수 있으므로 꼭 필요한 만큼 추가하실 것을 권장합니다. 팝업 추가방법 1. 내 사이트 관리자 페이지에 접속합니다. 2. 왼쪽 메뉴에서 [환경설정 > 팝업/배너 관리]를 클릭합니다. 3. 팝업 추가 버튼을 클릭합니다. 4. 팝업을 설정합니다. 자세한 설정 옵션은 아래 추가 도움말을 참고해 주세요. 5. 저장 버튼을 클릭합니다. 6. 팝업/배너 관리 페이지 오른쪽 상단의 사이트 확인하기 버튼을 클릭해 정상적으로 표시되는지 확인합니다. 팝업 설정 옵션 - 제목: 관리자용 팝업 배너 제목을 입력합니다. 회원에겐 표시되지 않습니다. - 기간: 팝업이 노출되는 기간을 설정합니다. - 대상 기기: 팝업이 노출될 기기모바일 하단 고정 섹션 구현하기 (코드, 하단 고정 메뉴)
섹션 반복 기능과 섹션의 위치를 수정하는 코드를 활용해, 아래 애니메이션과 같은 하단 고정 메뉴를 제작할 수 있습니다. 중요 : 캠페이너스에서 제공하지 않는 기능을 코드로 해결하는 도움말입니다. 향후 캠페이너스의 기능 업데이트에 따라 본 도움말에서 안내되는 코드가 동작하지 않을 수 있습니다. 1단계: 모바일 전용 섹션 추가하기 1. 디자인 모드에 접속합니다. 2. 디자인 모드 상단 중앙의 모니터 아이콘을 클릭하여, 뷰포트를 모바일로 변경합니다. 3. 마우스 휠 스크롤을 내려 페이지 최하단으로 이동합니다. 4. 위젯이 없는 곳에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.참고: 위젯에 마우스 포인터를 올리지 마세요. 5. 컨텍스트 메뉴가 나오면 모바일 전용 섹션추가를 클릭합니다. 6. 아래 그림과 같이 모바일 전용 섹션이 추가됩니다. 2단계: 모바일 전용 섹션을 페이지 최하단으로 내리기 1. 추가된 모바일 전용 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합특정 메뉴의 반복 섹션 숨김 처리하기
섹션 반복 기능을 활용하면, 모든 메뉴마다 페이지 하단에 같은 디자인의 섹션이 표시되도록 설정할 수 있습니다. 다만 특정 메뉴에서는 반복 섹션이 나오지 않도록 숨김 처리해야 하는 경우 다음 방법을 참조할 수 있습니다. 반복 섹션 숨김 방법 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단 메뉴 관리 를 클릭합니다. 3. 반복 섹션을 해제할 메뉴명 오른쪽 끝 ⓘ 아이콘을 클릭합니다. 4. 옵션 항목에서 반복 섹션 숨김을 선택합니다. 5. (선택 사항) 반복 섹션을 숨겨야 하는 모든 메뉴에 해당 옵션을 추가해줍니다.상단 배너 추가하기
웹사이트 상단에 디스플레이 배너를 표시할 수 있습니다. 이 도움말에서는 기본적인 형태의 상단 배너를 제작하는 방법에 대해 알아봅니다. 1단계: 상단 배너 이미지 만들기 상단 배너에 추가할 배너 이미지를 준비합니다. 배너 이미지가 이미 준비된 경우 이 단계는 건너뜁니다. 1. 가로 길이는 1280px, 1440px, 1920px, 2560px 정도로 설정하고, 세로는 자유입니다. (참고: 사실 정해진 크기는 없습니다. 사이트의 본문폭 및 콘셉트에 따라 자유롭게 지정해 주세요.) 2. 배너 이미지 제작을 완료하면, 웹용 이미지로 저장합니다. (파일 형식: JPG, JPEG, PNG) 3. 아래 샘플을 참고 부탁드립니다. 2단계: 상단 배너 설정하기 데스크톱(PC) 전용 상단 배너를 설정합니다. 1. 내 사이트 관리자 페이지에 접속합니다. 2. 왼쪽 메뉴에서 [환경설정 > 팝업/배너 관리]를 클릭합니다. 3. 오른쪽 상단의 팝업 추가 버튼을 클릭합니다. 4. 팝업 옵션을 설정합니다 - 제비주얼섹션 스크롤 다운 애니메이션 알림 아이콘 만들기 (코드, 고급)
주의: 본 튜토리얼을 진행하려면 기초적인 HTML 및 CSS에 대한 이해가 필요합니다. 제공되는 도움말과 소스 코드 이외의 추가적인 기술지원은 제공하지 않습니다. 브라우저 화면을 꽉 채우는 비주얼섹션에 움직이는 애니메이션 아이콘을 추가하여, 방문자로 하여금 페이지 하단에 추가 콘텐츠가 있음을 알릴 수 있습니다. 이 튜토리얼에서는 코드를 사용해 애니메이션 스크롤 다운 아이콘을 제작하는 방법을 소개합니다. 앞서 완료해야 할 사항 이 튜토리얼을 진행하려면, 스크롤 다운 알림 아이콘으로 사용할 이미지가 필요합니다. 웹디자인에 사용할 커스텀 이미지는 게시판을 활용할 수 있습니다. 게시판에 커스텀 디자인 아이콘을 올리고, 해당 아이콘의 이미지 주소를 획득하는 방법은 아래 도움말을 참고해 주세요. 게시판을 파일 자료실로 활용하기 1단계: 비주얼 섹션 추가하기 비주얼섹션을 추가하고 꾸며줍니다. 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭하고, 비주얼섹션을 추가할섹션 ID 확인하기
섹션은 웹 페이지를 상하로 나눈 구획을 의미하며, ‘섹션 ID’는 해당 구획을 가리키는 고유의 값을 의미합니다. 섹션 ID 활용 예시 섹션 ID는 대표적으로 앵커 링크를 걸 때 사용합니다. 예를 들어, 버튼에 ‘URL 주소’ 대신 ‘섹션 ID’를 추가할 수 있으며, 방문자가 해당 버튼을 클릭하면 링크 건 섹션 ID로 이동하게 만들 수 있습니다. 섹션 ID는 아래의 튜토리얼 도움말과 같이 여러 디자인에 활용할 수 있습니다. - 특정 섹션으로 이동하도록 링크 연결이 가능한가요? - 상단/하단 이동 스크롤 버튼 만들기 (코드, 고급) - 비주얼섹션 스크롤 다운 애니메이션 알림 아이콘 만들기 섹션 ID 확인방법 1. 디자인 모드에 접속합니다. 2. 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 아래의 애니메이션과 같이 컨텍스트 메뉴가 나오면 섹션 설정 을 클릭하세요. 참고: 위젯이 없는 곳에 마우스 오른쪽 버튼을 클릭해야 합니다. 3. 섹션 설정 창이 나오면 오른쪽 중간