메뉴얼 안내

01

테마 설치

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

설치 안내

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

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

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

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

02

페이지 추가

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

관리자에서 메뉴 생성

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

03

CSS 경로

AB 테마에서 자주 수정하는 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/swiper_layout.css 메인 비주얼 슬라이드
/wzd_lib/aside_nav.css 서브 중앙 네비게이션

04

로고 수정

AB 테마 로고 이미지는 /img/common/logo.png를 기준으로 사용합니다.

로고 이미지 위치

head.php의 로고 경로는 /img/common/logo.png입니다. 로고 이미지는 2개 상태를 이어 붙인 이미지이며, height 값은 상단 첫 번째 로고의 세로 사이즈를 입력합니다.

.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

상단 네비게이션

상단 메뉴 높이, 대메뉴 폰트, 메뉴 간격을 수정하는 예시입니다.

상단 메뉴 마우스 오버 높이

head.php

파일 위치: /wzd_lib/css/layout.css

:root {
    --top_nav_hight: 97px;
    --top_nav_all_hight: 390px; /* 이 부분을 조절하세요 */
}

대메뉴 폰트 조절

.header .gnb .depth1 > a {
    display: block;
    height: 57px;
    padding: 40px 0 0;
    font-size: 19px;
    font-weight: 500;
    line-height: 1em;
    color: #fff;
    font-family: 'Noto Sans KR', 'Poppins', 'Ubuntu', dotum, sans-serif;
}

대메뉴 간격 조절

.header .gnb li {
    float: left;
    width: 10px;
    text-align: center;
    transition: 0.4s;
}

06

메인 비주얼

메인 슬라이드 이미지 변경과 슬라이드 추가 방법입니다.

이미지 변경

파일 위치: head.php
https://placehold.co/1920x1024를 원하는 이미지 경로로 변경합니다.

<div class="swiper-slide data-image" data-background="https://placehold.co/1920x1024">

<!-- 예시 -->
<div class="swiper-slide data-image" data-background="<?php echo G5_THEME_URL?>/img/main/visual03.jpg">

슬라이드 추가

아래 블록을 복사해서 슬라이드를 하나 더 추가합니다.

<div class="swiper-slide data-image" data-background="https://placehold.co/1920x1024">
    <div class="text-wrap">
        <div class="container">
            <h1 class="wiz_swiper">탄소중립을 위한 실천 <br>위자드솔류션</h1>
            <p class="wiz_swiper">위즈테마가 언제나 함께 해드리겠습니다.</p>
        </div>
    </div>
    <div class="bg"></div>
</div>

슬라이드 페이징 추가

파일 위치: /wiz_lib/js/wiz.js

swiper.on('slideChange', function() {
    if (swiper.activeIndex == 0) {
        $(".main-copy .pag .n1").addClass("on").siblings().removeClass("on");
    } else if (swiper.activeIndex == 1) {
        $(".main-copy .pag .n2").addClass("on").siblings().removeClass("on");
    } else if (swiper.activeIndex == 2) {
        $(".main-copy .pag .n3").addClass("on").siblings().removeClass("on");

    /* 이미지 추가시 사용
    } else if (swiper.activeIndex == 3) {
        $(".main-copy .pag .n4").addClass("on").siblings().removeClass("on");
    */
    }
});