CodeWatchers

Cách tạo một trang web cuộn toàn trang trong Elementor

Rifat Hướng dẫn WordPress Mar 31, 2024

Tạo các trang cuộn toàn màn hình trong Elementor cũng rất dễ dàng và thuận tiện. Để đạt được điều đó, chúng tôi sẽ sử dụng một plugin có tên fullPage.js . Có các phương pháp khác để đạt được hiệu ứng này, chẳng hạn như cuộn CSS hoặc Addons Elementor . Tuy nhiên, fullPage.js cung cấp giải pháp tốt nhất về khả năng tương thích, khả năng phản hồi và khả năng sử dụng.

Cách tạo một trang web cuộn toàn trang trong Elementor

Tạo trang web cuộn toàn màn hình trong Elementor

Bây giờ chúng ta sẽ trình diễn quá trình tạo một trang web cuộn toàn trang trong Elementor.

Bước 1: Tải fullPage.js

Để sử dụng các chức năng plugin fullPage.js , trước tiên chúng ta phải tải nó.

Đoạn mã sau phải được thêm vào tiêu đề trang web của chúng tôi để nó tải chính xác:

Tạo trang web tuyệt vời

Với trình tạo trang miễn phí tốt nhất Elementor

Bắt đầu bây giờ 
<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>

Chúng tôi cần một plugin để thực thi mã này vì Elementor hiện không cung cấp phương tiện để thêm mã vào tiêu đề trang web. Mặc dù có một số plugin có thể thêm mã vào tiêu đề của chúng tôi, nhưng tôi thấy rằng plugin này là dễ sử dụng nhất.

Chọn Thêm HTML tùy chỉnh trong CSS & JS tùy chỉnh trong Bảng điều khiển WordPress sau khi cài đặt plugin. Bây giờ, dán mã nói trên, đảm bảo đặt mã đó ở cả tiêu đề và giao diện người dùng.

Adding code to the Header using a WordPress Plugin

Bước tiếp theo là đưa vào một số JS duy nhất. Để khởi tạo fullPage.js cũng như đặt các tùy chọn và quy trình cho nó, chúng ta phải sử dụng jQuery. Dưới đây là một số lựa chọn cơ bản áp dụng cho tất cả các trang web có tính năng cuộn dọc.

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

Đảm bảo bao gồm mã này ở chân trang của giao diện người dùng.

Chúng tôi cũng đặt cài đặt FullPage của mình trong giai đoạn này. Ví dụ trước bao gồm các dấu chấm điều hướng, sẽ xuất hiện ở phía bên phải của trang cuộn của chúng tôi, cũng như các tùy chọn tối thiểu cần thiết cho trang cuộn toàn trang. Khi chúng tôi sửa đổi thiết kế của mình để đáp ứng, tôi sẽ xem xét nhiều lựa chọn thay thế hơn. Hãy truy cập tài liệu chính thức để biết thêm chi tiết về các lựa chọn của bạn.

Bước 2: Thiết lập trang Elementor

Đánh dấu sau đây được fullPage.js yêu cầu cho Trang cuộn của chúng tôi.

<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>

Mỗi div riêng lẻ của trang cuộn của chúng tôi với phần lớp sẽ là các phần toàn màn hình. Sử dụng Mẫu là cách tiếp cận đơn giản nhất để thực hiện công việc này với Elementor.

Trước tiên hãy định cấu hình trang thực tế của chúng tôi. Tạo một trang mới trong Trang, đặt tiêu đề và URL phù hợp cho trang đó, sau đó chỉnh sửa trang đó bằng Elementor.

Tạo Phần có một Cột trong Elementor ngay bây giờ. Chúng tôi muốn thêm Tiện ích HTML vào cột này. Tiện ích này, bao gồm các mã ngắn cho từng trang trình bày riêng lẻ, sẽ đóng vai trò là khuôn khổ Trang của chúng tôi. Chúng tôi muốn thêm đoạn mã sau:

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

Xác minh rằng phần này có chiều rộng đầy đủ. Ngoài ra, vì chúng tôi không muốn phần đệm mà Elementor thêm vào các cột theo mặc định, nên hãy đặt phần đệm của phần và cột thành 0.

Sau khi tạo các trang trình bày thực tế ở các bước sau, chúng tôi sẽ thay đổi id mẫu Elementor thành giá trị chính xác.

Bước 3: Thiết lập các phần

Bước cuối cùng là xây dựng và lưu riêng từng phần dưới dạng mẫu.

Bạn sẽ cần Elementor Pro để sử dụng Shortcodes. Đã đến lúc mua nó nếu bạn chưa nghĩ đến việc đó. Bạn có tất cả các công cụ cần thiết để xây dựng một trang web bằng Elementor. Không cần phải luôn mua một chủ đề mới!

Tạo một phần mới bằng cách đi tới Mẫu - Thêm mới.

Trang trình bày đầu tiên của trang cuộn toàn trang của chúng tôi sẽ được tạo. Tạo một phần mới trong Elementor và đặt chiều cao của nó thành "Vừa với màn hình". Bây giờ bạn đã thêm tài liệu của mình, bạn có thể tạo kiểu cho nó. Chỉ cần đảm bảo mỗi mẫu chứa nhiều nhất một phần. Để tạo bố cục độc đáo, bạn có thể sử dụng bao nhiêu cột và cột bên trong tùy thích.

Lưu trang trình bày của bạn khi bạn hoàn tất, sau đó quay lại Mẫu Elementor của bạn. Mẫu bạn phát triển gần đây sẽ xuất hiện trong danh sách. Lấy ID của mẫu này và dán vào Trang chúng tôi đã tạo ở Bước 2 bằng cách sao chép nó.

Bây giờ hãy lặp lại quy trình này cho mọi slide bạn có. Mỗi mẫu phải có một khu vực có chiều cao được điều chỉnh để phù hợp với màn hình.

Kết thúc

Thế thôi! Đây là cách đơn giản nhất để xây dựng các trang cuộn toàn màn hình với fullPage.js trong Elementor . Tôi hy vọng điều này có thể giúp bạn thiết kế một trang web dễ dàng và tối giản cho các dự án kinh doanh trong tương lai của bạn.

Divi WordPress Theme