시작하기
템플릿 폴더 Sland 다운로드한 zip 파일 안에 있습니다. 템플릿과 문서 폴더를 찾으려면 zip 파일을 압축 해제해야 합니다.
The 파일 및 폴더 구조 와 유사합니다:
- assets/css — CSS 파일 폴더.
- assets/fonts — 글꼴 파일 폴더.
- assets/images — 이미지 파일 폴더.
- assets/js — Javascript 파일 폴더.
FileZilla와 같은 FTP 클라이언트를 사용하여 템플릿 파일을 서버에 업로드하세요.
파일 편집 및 업로드:
VS Code와 같은 코드 편집기에서 열어 개별 페이지를 사용자 정의할 수 있습니다. 모든 사용자 정의가 완료되면 웹사이트를 라이브로 만들려면 업데이트된 프로젝트 파일을 자체 도메인의 호스팅 서버에 업로드해야 합니다. FileZilla와 같은 FTP 클라이언트를 사용하여 파일을 업로드할 수 있습니다.
HEAD CSS 구조
다음은 css 파일이며 Head 섹션:
<!--====== Font Awesome ======-->
<link rel="stylesheet" href="assets/css/fontawesome.5.9.0.min.css">
<!--====== Flaticon CSS ======-->
<link rel="stylesheet" href="assets/css/flaticon.css">
<!--====== Bootstrap css ======-->
<link rel="stylesheet" href="assets/css/bootstrap.4.5.3.min.css">
<!--====== Magnific Popup ======-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--====== Slick Slider ======-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--====== Animate CSS ======-->
<link rel="stylesheet" href="assets/css/animate.min.css">
<!--====== Nice Select ======-->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!--====== Padding Margin ======-->
<link rel="stylesheet" href="assets/css/spacing.min.css">
<!--====== Menu css ======-->
<link rel="stylesheet" href="assets/css/menu.css">
<!--====== Main css ======-->
<link rel="stylesheet" href="assets/css/style.css">
<!--====== Responsive css ======-->
<link rel="stylesheet" href="assets/css/responsive.css">
Javascript 구조
다음은 JS 파일이며 HEAD 또는 BODY 섹션:.
<!--====== Jquery ======-->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!--====== Bootstrap ======-->
<script src="assets/js/bootstrap.4.5.3.min.js"></script>
<!--====== Appear js ======-->
<script src="assets/js/appear.js"></script>
<!--====== WOW js ======-->
<script src="assets/js/wow.min.js"></script>
<!--====== Isotope ======-->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--====== Circle Progress ======-->
<script src="assets/js/circle-progress.min.js"></script>
<!--====== Image loaded ======-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<!--====== Nice Select ======-->
<script src="assets/js/jquery.nice-select.min.js"></script>
<!--====== Magnific ======-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Slick Slider ======-->
<script src="assets/js/slick.min.js"></script>
<!--====== Main JS ======-->
<script src="assets/js/script.js"></script>
HTML 구조
일반 템플릿 구조는 템플릿 전체에서 동일하며 각 부분은 섹션 ID 이름이 있는 섹션 아래에 있습니다. 다음은 일반 구조:
问鼎官网 제공 플랫폼 정보, 인기 게임 소개, 이벤트 소식, 브랜드 정보 및 버전 업데이트 등 풍부한 콘텐츠를 제공하여 최신 플랫폼 정보를 쉽게 얻고 전 세계 인기 엔터테인먼트 콘텐츠를 탐색하도록 돕습니다.
사용된 글꼴
글꼴 코드는 "style.css" 파일 경로에서 찾을 수 있습니다: assets/css/style.css
// Font Family
--base-font: 'Inter', sans-serif;
--heading-font: 'Poppins', sans-serif;
주요 색상 변경 옵션
파일 경로: assets/css/style.css
// colors
--base-color: #5b5675;
--heading-color: #141125;
--primary-color: #5138ee;
--light-color: #f8f7fc;
--yellow-color: #ffc800;
--border-color: #edebfd;
Slick 편집 옵션
파일 경로: assets/js/script.js
// 08. Feedback Slider One
if ($('.feedback-wrap').length) {
$('.feedback-wrap').slick({
dots: true,
infinite: false,
autoplay: true,
fade: true,
autoplaySpeed: 5000,
arrows: false,
centerMode: false,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
});
}
더 많은 정보는 링크를 찾아보세요: Slick Docs 옵션
스크롤 애니메이션 숨기기 방법
아래 코드 파일 경로를 제거하거나 주석 처리하세요: assets/js/script.js
// 15. WOW Animation
if ($('.wow').length) {
var wow = new WOW({
boxClass: 'wow', // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset: 0, // distance to the element when triggering the animation (default is 0)
mobile: false, // trigger animations on mobile devices (default is true)
live: true // act on asynchronously loaded content (default is true)
});
wow.init();
}
속도 최적화
모든 이미지를 KB, MB로 최적화하고 플레이스홀더 파일 경로에 따라 이미지 크기를 사용하세요: assets/images/..
- Tinypng
모든 CSS 파일 경로를 최소화하세요: assets/css/..
모든 JS 파일 경로를 최소화하세요: assets/js/..
이미지 변경 방법?
이미지 파일 '경로: assets/images/...'로 이동하여 플레이스홀더 이미지 크기 및 이름에 따라 원하는 이미지를 교체하세요.
기존 템플릿의 새 업데이트 추가 방법
일정 시간이 지나면 최신 기술을 기반으로 프로젝트를 업데이트할 것입니다. 하지만 템플릿에서는 원하는 경우 직접 업데이트해야 합니다.
크레딧
이미지 모든 미리보기 은 포함되지 않음 목적으로만 사용되며 최종 구매 파일에 있습니다. 이미지 출처: 참고:
글꼴:
https://www.freepik.com/
https://pixabay.com/
https://unsplash.com/