Content Component - 버그8/9

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

카드 형태로 컨텐츠를 표현하고자 할 때 사용 가능한 컨텐츠 컴포넌트이다.

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

카드 컨텐츠 컴포넌트를 추가한 직후의 초기 화면은 다음과 같다.

헤딩과 디스크립션 텍스트 영역을 클릭하면, 관련 셋팅 옵션이 우측에 출력된다. 원하는 텍스트를 입력하자.

각각의 카드 영역은 이미지, 타이틀, 디스크립션, 버튼으로 구성되어 있다.

카드 영역을 선택하면, 이미지와 버튼 관련 옵션이 우측에 출력된다. 만약 버튼을 사용하고 싶지 않다면, 카드 설정 마지막에 위치한 버튼 목록에서 버튼 삭제()아이콘을 클릭하면 된다.

이미지, 타이틀, 디스크립션, 버튼 영역을 각각 클릭하여, 해당 셋팅 옵션만 우측에서 확인 할 수도 있다. 카드를 구성하는 요소 각각이 셋팅 옵션은 Element Components [19] 를 참고하자.

각각의 카드별로 컨텐츠 내용을 설정하면, 다음과 같이 카드 타입의 컨텐츠가 완성된다.

특정 피쳐를 사용하여 컨텐츠를 표현하고자 할 때 사용하는 컨텐츠 컴포넌트이다.

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

피쳐 컨텐츠 컴포넌트는 Mobile Features, Side by side, Card Grid, Text Grid, Swipe 5개 타입이 있다.

피쳐 컨텐츠 컴포넌트를 추가한 직후의 초기 화면은 다음과 같다. 타입은 Mobile Features가 Default로 설정된다.

클라이언트 정보를 표현하고자 할 때 주로 사용하는 컨텐츠 컴포넌트이다.

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

클라이언트 컴포넌트는 Client1, MobileSlider 2가지 타입이 존재한다.

클라이언트 컴포넌트를 추가하면 다음과 같이 Client1이 Default Type으로 출력된다.

행과 열은 기본 5행, 1열로 출력되며, 옵션에 숫자를 입력하여 변경할 수 있다. 이 옵션은 Images 테이블과도 연관된다. 행/열을 설정했다면, 반드시 이에 맞는 이미지를 테이블에 셋팅해야만 한다. 그렇지 않으면, 이미지 영역은 Blank로 출력된다.

CASE 1. Number of Columns="3"으로 설정하고, Images 추가 완료 시 화면

CASE 2. Number of Columns="3", Number of Rows="2"설정하고, Images 추가 완료 시 화면

CASE 3. Number of Columns="8"으로 설정하고, Images 테이블에 이미지 미추가시 화면

TIP Image Setting

이미지 셋팅 방법은 2가지가 있다.

첫번째, Client 컴포넌트에 있는 Images 옵션에서 셋팅() 아이콘을 클릭하여 설정 할 수 있다.

두번째, Client 컴포넌트 화면에서 바로 이미지를 클릭하면, 우측에 이미지 관련 셋팅 영역이 출력된다.

행/열과 이미지 셋팅을 완료하였다면, Swiper와 기타 옵션을 설정해보자.

Type Swiper :
- Single Slide :
- Multiple Slide :
Speed : 슬라이드 롤링 스피드 설정
Focus Active :
Auto Play : 슬라이드 자동 롤링 기능
Hide Pagenation : 페이지네이션 표시 숨김 기능
Pagination Type : 2가지 페이지네이션 타입{Dot, Number, Number with navigation} 선택 가능

이미지와 스와이퍼를 모두 셋팅했다면, Heading와 text도 설정해보자. 해당 영역을 각각 클릭하면, 우측에 해당 설정 내용이 출력된다. 기본적인 Heading, text Customized 설정 내용은 다른 컴포넌트와 모두 동일하다.