메뉴얼 안내

01

테마 설치

그누보드 설치 후 위즈테마 파일을 업로드하면 설치 안내 팝업이 자동으로 표시됩니다.

설치 안내

그누보드 설치가 완료된 후 제공받은 위즈테마 파일을 업로드하면 설치 안내 팝업이 자동으로 표시됩니다.

신규로 그누보드를 설치한 경우에는 [자동설치] 버튼을 클릭하면 샘플 테마와 동일한 구성으로 메뉴, 게시판, 기본 설정이 자동 적용됩니다.

기존에 운영 중인 홈페이지에 테마를 적용하는 경우에는 사이트의 기존 설정과 데이터 구조를 고려해야 하므로 [닫기] 버튼을 눌러 자동설치를 종료한 뒤 수동 설치로 진행해 주세요.

수동 설치에 대한 자세한 내용은 [설명서 보기] 버튼을 통해 확인하실 수 있습니다.

02

페이지 추가

관리자 메뉴 설정을 이용하면 AK2 테마의 구조에 맞춰 자동으로 메뉴가 구성됩니다.

관리자에서 메뉴 생성

AK2 테마는 관리자페이지 > 환경설정 > 메뉴설정에서 일반페이지 또는 게시판을 생성하면 자동으로 셋팅됩니다.

03

CSS 경로

테마 수정 시 자주 사용하는 CSS 파일 위치입니다.

css경로


/wzd_lib/font_defualt.css 기본 폰트 셋팅
/wzd_lib/common.css 기본 팝업등
/wzd_lib/css/layout.css 메인 및 전체 레이아웃
/wzd_lib/css/sub.css 서브 컨텐츠 
/wzd_lib/css/responsive.css 메인 및 전체 레이아웃 반응형
/wzd_lib/css/sub_responsive.css 서브 컨텐츠 레이아웃 반응형
/wzd_lib//css/swiper_layout.css"> 메인 비주얼  슬라이드

04

로고 수정

테마 로고 이미지와 관련 CSS 수정 방법입니다.

로고수정

/wzd_lib/css/layout.css

head.php 로고 경로 : /img/common/logo.png

logo.png 는 로고 2개를 이어 붙힌 이미지입니다.
height: 19px; 는 두개의 로고중 상단 첫번째 사이즈를 입력하시면 됩니다.


.header h1 a {
    overflow: hidden;
    display: block;
    height: 19px; // 로고 1/2 세로 사이즈
    background: url('../../img/common/logo.png') 0 0 no-repeat;
    text-indent: -9999px;
}

05

상단 네비게이션

상단 메뉴의 폰트, 간격, hover 영역을 조절하는 방법입니다.

상단 네비게이션

head.php

대메뉴 폰트 조절



.header .gnb li { 
    float: left;
    width: 170px; // 네비게이션 가로 간격
    text-align: left;

}

.header .gnb .depth1>a {
    display: block;
    height: 57px;
    padding: 40px 0 0;
    font-size: 20px;  //메인 네비 폰트 사이즈
}

#header.all {
    height: 350px; // 마우스 올리면 떨어지는 전체배경 세로 높이
    background: #fff;
    z-index: 1100;
}

#header.all:before {
    position: absolute;
    left: 0;
    top: 95px; //메인메뉴와 서브메뉴의 상단 간격
    width: 100%;
    height: 260px; // 마우스 올리면 떨어지는 배경 세로 높이
    background: #f1f1f3; // 떨어지는 메뉴 배경 색상
    content: "";
}

소메뉴 폰트 조절


header .nav .depth02>li a {
    color: #000;
    display: block;
    padding: 10px 0; // 10px 상하 높이
    transition: .4s;
    font-size: 16px;
    font-family: 'Poppins', 'NotoSans', sans-serif;
}

메뉴 hover시 백그라운드 높이 조절


.header.down .gnb-bg {
    height: 220px;
}

06

메인 비주얼

메인 슬라이드 이미지, 영상, 문구를 수정하는 방법입니다.

메인비주얼

head.php

이미지 변경


https://placehold.co/1920x1024 를 이미지 경로에 맞게 변경하세요

<div class="slide-image slide-media" style="background-image:url('https://placehold.co/1920x1024.jpg');">
예)
 <div class="slide-image slide-media" style="background-image:url('<?php echo G5_THEME_URL?>/img/main/visual01.jpg');">

유튜브 주소변경


https://www.youtube.com/watch?v=QV5EXOFcdrQ  주소형식이 같게 변경
----------------------------------------------------------------

 <!-- 슬라이드03 유튜브-->
      <div class="swiper-slide slide02" id='bgPlayer1' data-swiper-autoplay="120000"> <!-- 120000 : 동영상 연장시간 설정  -->
            <div id="bgPlayer" class="player" data-property="{useOnMobile:true,mobileFallbackImage:'http://theme03.wiztheme.net/slider2.jpg',videoURL:'https://www.youtube.com/watch?v=QV5EXOFcdrQ',vol:'90',stopMovieOnBlur:true,containment:'#bgPlayer1',showControls:false,startAt:0,mute:true,autoPlay:true,loop:true,opacity:1,quality:'highres',optimizeDisplay:true}"></div>
            <div class="swiper-content">
                <div class="content text-left">
                    <h1 class="animated" data-swiper-animation="fadeInUp" data-duration=".8s" data-delay="1s" data-swiper-out-animation="fadeIn" data-out-duration="2s">YOUTUBE <br>PLAYERS CODE</h1>
                    <div class="line animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.8s" data-swiper-out-animation="fadeIn" data-out-duration="2s"></div>
                    <p class="animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.3s" data-swiper-out-animation="fadeIn" data-out-duration="2s">위즈테마템플릿06버전이 출시 했습니다. <br>쉽고 퀄리티가 다른 위즈테마 템플릿. 불법사용을 금지합니다</p>
                    <div class="btn_wrap" hidden><a href="http://ak.wiztheme.co.kr/theme/ak/company/company_02.php" class="btn btn-default animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.5s" data-swiper-out-animation="fadeIn" data-out-duration="2s">more</a></div>
                </div>
            </div>
            <div class="overlay data-overlay" data-overlay="0,0,0,0.4"></div>
        </div>
        <!-- 슬라이드03 유튜브 마감 -->

슬라이드 폰트 크기 등 css변경

/wzd_lib/css/swiper_layout.css


#index_swiper.swiper-container .swiper-content h1 { //큰 글씨 
    color: #fff;
    font-size: 92px;
    line-height: 96px;
    font-weight: 600;
    font-family: 'Poppins', 'NotoSans', sans-serif;
}
#index_swiper.swiper-container .swiper-content p { // 작은 글씨
    color: #fff;
    font-size: 22px;
    line-height: 36px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
 
    font-family: 'Poppins', 'NotoSans', sans-serif;
}

슬라이드 추가 및 삭제


기존소스에서 하나 더 추가

  <div class="swiper-slide slide04">
            <div class="swiper-content">
                <div class="content text-left">
                    <h1 class="animated" data-swiper-animation="fadeInUp" data-duration=".8s" data-delay="1s" data-swiper-out-animation="fadeIn" data-out-duration="2s"><span>탄소중립 </span><br> 위자드 풍력</h1>
                    <div class="line animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.8s" data-swiper-out-animation="fadeIn" data-out-duration="2s"></div>
                    <p class="animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.3s" data-swiper-out-animation="fadeIn" data-out-duration="2s">위즈테마 템플 AK버전이 출시 했습니다. <br>쉽고 퀄리티가 다른 위즈테마 템플릿. 불법사용을 금지합니다</p>
                    <div class="btn_wrap" hidden><a href="<?php echo G5_THEME_URL?>/company/company_02.php" class="btn btn-default animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.5s" data-swiper-out-animation="fadeIn" data-out-duration="2s">more</a></div>
                </div>
            </div>
            <div class="overlay data-overlay" data-overlay="0,0,0,0"></div>
            <div class="swiper-img slide-1 swiper-slide-cover data-image" data-background="https://placehold.co/1920x1024.png?ver=<?php echo G5_CSS_VER; ?>>"></div>
             <!-- 실제 이미지를 넣을시 코드 예)<?php echo G5_THEME_URL?>/img/main/ak_visual_03.jpg?ver=<?php echo G5_CSS_VER; ?> -->
        </div>

        <!-- 추가 -->
  <div class="swiper-slide slide05">
            <div class="swiper-content">
                <div class="content text-left">
                    <h1 class="animated" data-swiper-animation="fadeInUp" data-duration=".8s" data-delay="1s" data-swiper-out-animation="fadeIn" data-out-duration="2s"><span>탄소중립 </span><br> 위자드 풍력</h1>
                    <div class="line animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.8s" data-swiper-out-animation="fadeIn" data-out-duration="2s"></div>
                    <p class="animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.3s" data-swiper-out-animation="fadeIn" data-out-duration="2s">위즈테마 템플 AK버전이 출시 했습니다. <br>쉽고 퀄리티가 다른 위즈테마 템플릿. 불법사용을 금지합니다</p>
                    <div class="btn_wrap" hidden><a href="<?php echo G5_THEME_URL?>/company/company_02.php" class="btn btn-default animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.5s" data-swiper-out-animation="fadeIn" data-out-duration="2s">more</a></div>
                </div>
            </div>
            <div class="overlay data-overlay" data-overlay="0,0,0,0"></div>
            <div class="swiper-img slide-1 swiper-slide-cover data-image" data-background="https://placehold.co/1920x1024.png?ver=<?php echo G5_CSS_VER; ?>>"></div>
             <!-- 실제 이미지를 넣을시 코드 예)<?php echo G5_THEME_URL?>/img/main/ak_visual_03.jpg?ver=<?php echo G5_CSS_VER; ?> -->
        </div>
        <!-- 추가 마감 -->

테마 설치

설치 안내

위즈테마 AK2설치

페이지 추가

관리자에서 메뉴 생성

CSS 경로

css경로

로고 수정

로고수정

상단 네비게이션

상단 네비게이션

대메뉴 폰트 조절

소메뉴 폰트 조절

메뉴 hover시 백그라운드 높이 조절

메인 비주얼

메인비주얼

이미지 변경

유튜브 주소변경

슬라이드 폰트 크기 등 css변경

슬라이드 추가 및 삭제