One page 사이트

이전 다음 

링크 또는 메뉴 클릭시 같은 페이지내의 특정위치로 스크롤시켜 내용을 보여주는 스타일로 홈페이지를 꾸밀 수 있습니다.

하나의 페이지로 구성한 사이트가 무슨 말이냐구요?

그럼 일단 예제 사이트를 클릭해보세요.

예제 사이트 보기

샘플페이지에서 보시는것처럼 좌측 메뉴를 클릭하면 다른 페이지로 이동하지 않고 같은 페이지에서 원하는 위치로 스크롤 효과를 줘서 보여주는 형태를 말합니다.

오즈홈빌더에서는 기본적으로 링크를 "#anchor_name" 같이 지정하는 경우 자동으로 스크롤 애니메인션이 적용되어 해당 위치로 이동하게 됩니다.

바로 이 기능을 이용하여 예제사이트와 같은 페이지를 구성할 수 있습니다.

같은 페이지에서 이동할 위치는 아래 그림처럼 해당 셀속성화면에 보이는 #ID 값으로 지정됩니다.

  • 페이지내의 특정 셀로 스크롤 시키기

    이동할 위치의 셀 속성에서 ID 값으로 링크를 지정합니다.
    현재 빌더상의 페이지 주소가 "/builder/wiz.php?menu_id=1"이고, ID 값이 "cell_125_128"인경우 이동할 주소를 /builder/wiz.php?menu_id=1#cell_125_128 처럼 지정하면 됩니다.
    즉, URL # ID 형식으로 지정합니다.

  • 웹에디터 모듈내에서 특정위치로 스크롤 시키기

    웹에디터 모듈에서는 책갈피 삽입 아이콘을 이용하여 스크롤 시킬 위치(앵커)를 지정할 수 있습니다. 만약 책갈피이름을 "content_2" 로 지정한경우 /builder/wiz.php?menu_id=1#content_2 처럼 지정하면 됩니다.

메뉴모듈사용시에는 아래 화면처럼 메뉴관리페이지에서 해당 메뉴의 종류를 "현재창으로링크"를 선택하고, 이동할주소란(옵션란)에 위의 셀속성에서 알려주는 ID 번호로 지정하면 해당 위치로 이동하는 링크가 되는거죠.

 

그리고 샘플사이트처럼 좌측의 메뉴영역은 스크롤여부에 관계없이 항상 그자리에 있게 하려면 해당 셀속성에서 아래그림처럼 "스크롤 여부에 관계없이..." 옵션을 체크하시면 됩니다.

웹브라우저를 상하 스크롤시켜서 내용이 가려질 경우만 상단에 고정하려면 "상하 스크롤시" 옵션을 설정하세요.

이전 다음 
go top