레이아웃 영역에 위젯 추가

By | 2010년 6월 5일

1. 이번 글에서는 레이아웃 영역에 설치된 위젯을 추가하는 방법에 대해 살펴보겠다. XpressEngine에서 생성한 페이지는 아래 그림에서와 같이 페이지 영역과 레이아웃 영역으로 구분할 수 있다. 페이지 영역에 위젯을 추가하는 방법은 페이지 수정 버튼을 이용 몇번의 마우스 조작만으로도 위젯을 추가할 수 있지만 레이아웃 영역에 위젯을 추가하려면 페이지 영역에 위젯을 추가하는 것 보다 복잡한 과정을 거치며 또한 html, javascript, css 등에 대한 약간의 지식이 필요하다. 그러면 아래 그림에서와 같이 기본레이아웃의 분홍색으로 된 부분에, 앞 글에서 설치한 “플래시시계(DroArc)” 위젯을 추가해 보겠다.

2. 관리자 화면의 레이아웃 관리 화면에서 “기본레이아웃” 설정 아이콘을 클릭한다.
 

3. “기본레이아웃” 설정 화면의 “레이아웃 편집” 탭을 클릭한 후 “HTML” 코드 아래 부분에 보이는 “플래시 디지털 시계”를 클릭한다.

4. 플래시 디지털 시계 설정창이 뜨면 위젯, 스킨, 컬러셋을 설정한 다음 화면 하단의 “코드생성” 버튼을 클릭한다. 그러면 그림에서 파란색으로 된 부분처럼 코드가 생성되는데 이 코드를 복사한 후 창을 닫는다.

5. 이제 HTML 코드부분의 적당한 위치(아래 그림 참조)에 복사한 코드를 붙여 넣고 저장버튼을 클릭한다. 여기서는 플래시 시계를 좌측 컬럼의 중앙에 오도록 하기 위해 복사한 코드 앞, 뒤로 <center>, </center> 태그를 적용했다. 레이아웃에 따라서는 코드 생성 후 “레이아웃 편집”이 아닌 “레이아웃 설정” 화면에서 코드를 추가해야하는 경우도 있다.

6. 팝업 창에서 “확인” 버튼을 클릭한다.

7. 위 과정이 올바르게 진행됐으면 1번 화면에서 새로고침을 하면 아래와 같이 플래시 시계가 출력된다.

2 thoughts on “레이아웃 영역에 위젯 추가

  1. 1234

    뭐..저도 로그긴창 밑에 붙이고싶은데..레이아웃이 달라서 그럴까요?

    Reply

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.