시즌 4에서 원페이지 홈 만들기 > 팁 & 테크

시즌 4를 이용하시는 분들을 위하여 [시즌3] 반응형 개인 테마 #0013와 같은 원페이지 홈을 만드는 방법을 소개하고자 합니다.

물론, 완벽한 솔루션을 원하신다면, 이윰빌더에서 판매하는 시즌 3 원페이지 테마를 구매하시는 편이 더 나을 것 같네요.

 

    [시즌3] 반응형 개인 테마 #0013 http://eyoom.net/shop/item.php?it_id=1500280671

 

하지만, 시즌 4용으로는 아직 원페이지 테마가 없기에 이렇게 글을 씁니다.

시즌3와 같이 원페이지 전용 테마는 없습니다만, 시즌 4의 어떤 테마이든지 구매하셨다면, 그 테마를 원페이지 테마처럼 이용하실 수도 있습니다. 단지, 메뉴 모양만 CSS를 이용하여 좀 바꾸시면 될 것 같네요. 예를 들어, 현재 노출된 Section에 따라 Menu의 Active 상태가 자동 변경되도록 설정하는 것은 CSS를 좀 추가하면 됩니다.

 

[단계 1] 메뉴 수정하기
테마설정관리 => 홈페이지메뉴설정 => 최상위 레벨1 메뉴를 다음과 같이 만듭니다.
    http://도메인명/#mainSection00

 

[단계 2] Index page 수정하기
다음 파일 /theme/테마명/index.html.php 을 아래 보기와 같은 패턴으로 수정합니다. section 태그를 추가하고 그 아이디를 단계1의 메뉴 링크와 일치하게 만든다. 여기서, anchor-page이라는 이름의 style class의 margin-top은 메뉴의 높이에 따라 조절하면 됩니다.

eb_contents('1234567892');는 원하는 페이지의 콘텐츠 아이디를 입력하면 됩니다. 이윰빌더에서 제공하는 페이지의 콘테츠 아이디라면 어떤 것이든지 적용할 수 있습니다. 예를 들면, 다음 링크된 페이지의 어떤 콘텐츠이든지 사용할 수 있습니다.

   웹페이지 목록 http://eyoom.net/shop/list.php?ca_id=40&sn=eb4

이윰빌더 짱이예요~ ^ ^

 

```html <?php /** * theme file : /theme/THEME_NAME/index.html.php */ if (!defined('_EYOOM_')) exit; ?> <style> .anchor-page {position:absolute;margin-top:-130px;height:0;width:0} </style> <div id="fakeloader"></div> <?php echo eb_slider('10123456789'); ?> <div class="anchor-page" id="mainSection00"></div> <div class="margin-bottom-30"> <?php echo eb_contents('1234567890'); ?> </div> <div class="anchor-page" id="mainSection01"></div> <div class="margin-bottom-30"> <?php echo eb_contents('1234567891'); ?> </div> <div class="anchor-page" id="mainSection02"></div> <div class="margin-bottom-30"> <?php echo eb_contents('1234567892'); ?> </div> <script src="<?php echo EYOOM_THEME_URL; ?>/plugins/fakeLoader/fakeLoader.min.js"></script> <script> $('#fakeloader').fakeLoader({ timeToHide:2000, zIndex:"11", spinner:"spinner6", bgColor:"#f4f4f4", }); $(window).load(function(){ $('#fakeloader').fadeOut(300); }); </script> ```