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

Rifat 워드프레스 튜토리얼 Jan 24, 2023

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

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 대시보드의 Custom CSS & JS에서 Add Custom 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에서 이 작업을 수행하는 가장 간단한 방법입니다.

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

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

<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