Page Comparison

컴포넌트 목록은 상황에 따라 추가, 삭제 및 디자인이 변경될 수 있습니다.

...

백그라운드와 함께 사용할 수 있는 헤더 컴포넌트이다. 백그라운드 헤더는 Text, Swipe Cards 2가지 타입이 있다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

01-01. Text Type

Default는 Text 타입으로, 백그라운드 헤더 컴포넌트 추가 시 다음과 같이 텍스트와 버튼이 화면에 출력된다.

...

카운트다운과 함께 사용하는 헤더 컴포넌트이다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

컴포넌트 추가 초기 화면은 다음과 같다.

...

카운트다운 헤더는 Text, Circular, Icon Countdown 3가지 타입이 있다.

...

03. with Video

비디오와 함께 사용되는 헤더 컴포넌트이다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다영상과 버튼, 2개의 셋팅 옵션 영역을 확인할 수 있다.

...

비디오는 Upload, Url 2가지 방법으로 셋팅 할 수 있다. 유투브 URL을 삽입하고 저장하면, 아래와 같이 영상이 화면내에서 Play된다. (ex. 아이온커뮤니케이션즈 유투브 영상 : https://www.youtube.com/watch?v=fq6kI35Kfmg)

...

04. with Chart

챠트를 함께 사용하는 헤더 컴포넌트이다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

컴포넌트 추가 초기 화면은 다음과 같다.

...

...

디바이스 이미지를 삽입하여 활용할 수 있는 헤더 컴포넌트이다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

컴포넌트를 추가시 Default 화면은 다음과 같다.

...

Heading과 Text는 해당 영역을 클릭하여 설정할 수 있다.

...

...

• Type : 헤딩의 크기 선택

• Text : 헤딩에 입력될 문자 설정

• Background : 헤딩 BG 칼라 설정

• Setting : 기본으로 제공하는 preset과 Customized 로 선택 가능

  • Font Family : 폰트 설정

  • Size(px) : 헤딩 사이즈 값 직접 입력

  • Line Spacing : 헤딩 위 아래 라인 간격 설정

  • Character : 노출 문자 개수 설정 가능

  • Color : 헤딩 문자 칼라 설정

  • Align : 헤딩 정렬 설정

  • Option : 볼드(헤딩의 경우, 이미 볼드 처리가 되어 있음), 기울기, 밑줄, 취소선 선택 가능

버튼을 추가, 삭제, 수정 할 수 있다.

...

설정() 아이콘을 클릭하면 버튼 상세 설정 화면이 Modal로 출력 된다.

...

버튼에 앱스토어, 구글 플레이 다운로드 링크를 설정한뒤 저장하자.

...

...