วิธีสร้างเว็บไซต์เลื่อนหน้าแบบเต็มใน Elementor

Rifat บทช่วยสอน WordPress Jan 24, 2023

การสร้างหน้าเลื่อนแบบเต็มหน้าจอใน Elementor นั้นง่ายและสะดวกมากเช่นกัน เพื่อให้บรรลุ เราจะใช้ปลั๊กอินที่เรียกว่า fullPage.js มีวิธีอื่นเพื่อให้ได้เอฟเฟกต์นี้ เช่น การเลื่อน CSS หรือ Elementor Addons อย่างไรก็ตาม 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 ไม่มีวิธีเพิ่มโค้ดในส่วนหัวของไซต์ แม้ว่าจะมีปลั๊กอินหลายตัวที่สามารถเพิ่มโค้ดในส่วนหัวของเราได้ แต่ฉันพบว่าปลั๊กอินนี้ใช้ง่ายที่สุด

เลือก เพิ่ม Custom HTML ภายใต้ Custom CSS & JS ใน WordPress Dashboard หลังจากติดตั้งปลั๊กอิน ตอนนี้ วางรหัสดังกล่าว ตรวจสอบให้แน่ใจว่าได้วางไว้ทั้งในส่วนหัวและส่วนหน้า

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>

แต่ละ divs ของหน้าเลื่อนที่มีส่วนชั้นเรียนจะเป็นส่วนแบบเต็มหน้าจอ การใช้เทมเพลตเป็นวิธีที่ง่ายที่สุดในการทำงานร่วมกับ 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

หลังจากสร้างสไลด์จริงในขั้นตอนต่อมา เราจะเปลี่ยน ID แม่แบบ Elementor เป็นค่าที่ถูกต้อง

ขั้นตอนที่ 3: ตั้งค่าส่วนต่างๆ

ขั้นตอนสุดท้ายคือการสร้างและบันทึกแต่ละส่วนเป็นเทมเพลตแยกกัน

คุณจะต้องใช้ Elementor Pro เพื่อใช้รหัสย่อ ถึงเวลาแล้วที่จะซื้อหากคุณยังไม่ได้คิดที่จะทำเช่นนั้น คุณมีเครื่องมือทั้งหมดที่จำเป็นในการสร้างเว็บไซต์โดยใช้ Elementor ไม่จำเป็นต้องซื้อธีมใหม่เสมอไป!

สร้างส่วนใหม่โดยไปที่เทมเพลต - เพิ่มใหม่

สไลด์แรกของไซต์เลื่อนแบบเต็มหน้าของเราจะถูกสร้างขึ้น สร้างส่วนใหม่ใน Elementor และตั้งค่าความสูงเป็น "พอดีกับหน้าจอ" เมื่อคุณได้เพิ่มเนื้อหาของคุณแล้ว คุณสามารถจัดรูปแบบได้ เพียงตรวจสอบให้แน่ใจว่าแต่ละเทมเพลตมีส่วนมากที่สุด ในการสร้างเลย์เอาต์ที่ไม่ซ้ำใคร คุณสามารถใช้คอลัมน์และคอลัมน์ภายในได้มากเท่าที่คุณต้องการ

บันทึกสไลด์ของคุณเมื่อคุณทำเสร็จแล้ว จากนั้นกลับไปที่เทมเพลต Elementor ของคุณ เทมเพลตที่คุณเพิ่งพัฒนาควรปรากฏในรายการ นำ ID ของเทมเพลตนี้ไปวางในเพจที่เราสร้างในขั้นตอนที่ 2 โดยคัดลอก

ตอนนี้ทำซ้ำขั้นตอนนี้สำหรับทุกสไลด์ที่คุณมี ทุกเทมเพลตต้องมีหนึ่งพื้นที่ที่มีความสูงที่ปรับให้ตรงกับหน้าจอ

ห่อ

แค่นั้นแหละ! นี่เป็นวิธีที่ง่ายที่สุดในการสร้างหน้าเลื่อนแบบเต็มหน้าจอด้วย fullPage.js ใน Elementor ฉันหวังว่านี่อาจช่วยให้คุณออกแบบเว็บไซต์ที่เรียบง่ายและเรียบง่ายสำหรับการลงทุนในอนาคตของคุณ

Divi WordPress Theme