CodeWatchers

Elementor에서 전체 페이지 스크롤 웹 사이트를 만드는 방법

Rifat 워드프레스 튜토리얼 Mar 31, 2024

Elementor에서 전체 화면 스크롤 페이지를 만드는 것도 매우 쉽고 편리합니다. 이를 달성하기 위해 fullPage.js 라는 플러그인을 활용할 예정입니다. CSS 스크롤링이나 Elementor Addons와 같이 이 효과를 얻는 다른 방법이 있습니다. 그러나 fullPage.js는 호환성, 응답성 및 유용성을 위한 최상의 솔루션을 제공합니다.

Elementor에서 전체 페이지 스크롤 웹 사이트를 만드는 방법

Elementor에서 전체 화면 스크롤 웹 사이트 만들기

이제 Elementor에서 전체 페이지 스크롤 웹사이트를 만드는 과정을 보여드리겠습니다.

1단계: fullPage.js 로드

fullPage.js 플러그인 기능을 사용하려면 먼저 이를 로드해야 합니다.

올바르게 로드하려면 웹사이트 헤더에 다음 코드를 추가해야 합니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>

Elementor는 현재 사이트 헤더에 코드를 추가하는 수단을 제공하지 않기 때문에 이 코드를 실행하려면 플러그인이 필요합니다. 헤더에 코드를 추가할 수 있는 여러 플러그인이 있지만 이 플러그인이 가장 사용하기 쉬운 것으로 나타났습니다.

플러그인을 설치한 후 WordPress 대시보드의 사용자 정의 CSS 및 JS에서 사용자 정의 HTML 추가를 선택합니다. 이제 앞서 언급한 코드를 헤더와 프런트엔드 모두에 붙여넣으세요.

Adding code to the Header using a WordPress Plugin

다음 단계는 고유한 JS를 포함하는 것입니다. fullPage.js를 초기화하고 옵션과 절차를 설정하려면 jQuery를 활용해야 합니다. 수직 스크롤이 가능한 모든 사이트에 적용되는 몇 가지 기본 선택 사항은 다음과 같습니다.

jQuery(document).ready(function($) {
    $('#fullpage').fullpage({
        //options here
        scrollingSpeed: 1000,
        navigation: true,
        slidesNavigation: true
    });
    //methods
    $.fn.fullpage.setAllowScrolling(true);
});

프런트 엔드의 바닥글에 이 코드를 포함해야 합니다.

또한 이 단계에서는 FullPage 설정을 지정합니다. 이전 예에는 스크롤 사이트의 오른쪽에 표시되는 탐색 점과 전체 페이지 스크롤 사이트에 필요한 최소한의 옵션이 포함되어 있습니다. 반응형으로 디자인을 수정하면 더 많은 대안을 검토하겠습니다. 옵션에 대한 자세한 내용은 공식 문서를 참조하세요.

2단계: Elementor 페이지 설정

스크롤 페이지를 위해 fullPage.js 에 다음 마크업이 필요합니다.

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">
        <div class="slide">Slide 2.1</div>
        <div class="slide">Slide 2.2</div>
        <div class="slide">Slide 2.3</div>
    </div>
    <div class="section">Section 3</div>
</div>

클래스 섹션이 있는 스크롤 페이지의 개별 div는 각각 전체 화면 섹션이 됩니다. 템플릿을 활용하는 것은 Elementor에서 이 작업을 수행하는 가장 간단한 접근 방식입니다.

먼저 실제 페이지를 구성해 보겠습니다. 페이지에서 새 페이지를 만들고 적절한 제목과 URL을 지정한 다음 Elementor를 사용하여 편집하세요.

지금 Elementor에서 하나의 열로 섹션을 생성하세요. 이 열에 HTML 위젯을 추가하고 싶습니다. 각 개별 슬라이드에 대한 단축 코드가 포함된 이 위젯은 페이지의 프레임워크 역할을 합니다. 다음 코드를 추가하고 싶습니다.

<div id="fullpage">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

섹션이 전체 너비인지 확인합니다. 또한 Elementor가 기본적으로 열에 추가하는 패딩을 원하지 않으므로 섹션과 열의 패딩을 0으로 설정합니다.

이후 단계에서 실제 슬라이드를 만든 후 Elementor 템플릿 ID를 올바른 값으로 변경합니다.

3단계: 섹션 설정

마지막 단계는 각 섹션을 별도로 구축하고 템플릿으로 저장하는 것입니다.

단축 코드를 사용하려면 Elementor Pro가 필요합니다. 아직 구매에 대해 생각하지 않았다면 구매해야 할 때가 왔습니다. Elementor를 사용하여 웹사이트를 구축하는 데 필요한 모든 도구가 있습니다. 항상 새로운 테마를 구매할 필요가 없습니다!

템플릿 - 새로 추가로 이동하여 새 섹션을 만듭니다.

이제 전체 페이지 스크롤 사이트의 첫 번째 슬라이드가 생성됩니다. Elementor에서 새 섹션을 만들고 높이를 "화면에 맞춤"으로 설정합니다. 이제 재료를 추가했으므로 스타일을 지정할 수 있습니다. 각 템플릿에 최대 한 부분만 포함되어 있는지 확인하세요. 고유한 레이아웃을 만들려면 원하는 만큼 많은 열과 내부 열을 사용할 수 있습니다.

완료되면 슬라이드를 저장한 다음 Elementor 템플릿으로 돌아갑니다. 최근에 개발한 템플릿이 이제 목록에 나타납니다. 이 템플릿의 ID를 복사하여 2단계에서 만든 페이지에 붙여넣습니다.

이제 가지고 있는 모든 슬라이드에 대해 이 절차를 반복합니다. 모든 템플릿에는 화면에 맞게 높이가 조정된 하나의 영역이 있어야 합니다.

마무리

그럼 그게 다야! 이는 Elementor 에서 fullPage.js를 사용하여 전체 화면 스크롤 페이지를 구축하는 가장 간단한 방법입니다. 이것이 귀하의 향후 모험을 위해 쉽고 최소한의 웹사이트를 디자인하는 데 도움이 되기를 바랍니다.

Divi WordPress Theme