Header Component [05]

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

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

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

배경 이미지를 추가하면 다음과 같이 백그라운드로 추가한 이미지가 삽입된다.

텍스트(“Enter text here") 영역을 마우스로 클릭하면, 다음과 같이 텍스트 셋팅 영역이 우측에 출력된다.

원하는 텍스트를 HTML로 입력하고 저장하자.

버튼을 클릭하면, 버튼 컴포넌트의 셋팅 옵션이 우측에 출력된다. 원하는 설정을 진행하고 저장하자.

버튼의 디자인을 설정 할 수도 있다.

설정 완료 후 미리보기 아이콘을 클릭하여 셋팅 결과를 미리 확인 할 수 있다.

Swipe card 타입으로, 백그라운드 헤더 컴포넌트를 설정 하면, 다음과 같이 텍스트와 Swipe가 화면에 출력된다.

배경 이미지를 추가하면 다음과 같이 백그라운드로 추가한 이미지가 삽입된다.

Card영역에서 추가( ) 아이콘을 클릭하자. 다음과 같이 카드 이미지 셋팅 옵션이 Modal로 출력된다.

카드 이미지와 함께 버튼을 추가하면, 다음과 같이 화면에 반영된다. 텍스트를 HTML로 자유롭게 셋팅 할 수 있다.

텍스트 삽입 컴포넌트이다. 컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다.

텍스트 삽입 컴포넌트이다. 컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다.

텍스트 삽입 컴포넌트이다. 컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다.

텍스트 삽입 컴포넌트이다. 컴포넌트 추가 후, 다음과 같이 옵션 설정이 가능하다.