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

การสร้างหน้าเลื่อนแบบเต็มหน้าจอใน Elementor ก็ง่ายและสะดวกเช่นกัน เพื่อให้บรรลุเป้าหมาย เราจะใช้ปลั๊กอินชื่อ fullPage.js มีวิธีการอื่นๆ เพื่อให้บรรลุผลนี้ เช่น การเลื่อน CSS หรือ Elementor Addons อย่างไรก็ตาม fullPage.js มอบโซลูชันที่ดีที่สุดสำหรับความเข้ากันได้ การตอบสนอง และการใช้งาน

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

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

ขั้นตอนที่ 1: กำลังโหลด fullPage.js

ในการใช้ฟังก์ชั่นปลั๊กอิน fullPage.js เราต้องโหลดมันก่อน

ต้องเพิ่มรหัสต่อไปนี้ในส่วนหัวของเว็บไซต์ของเราเพื่อให้สามารถโหลดได้อย่างถูกต้อง:

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

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

ขั้นตอนต่อไปคือการรวม JS ที่ไม่ซ้ำใครเข้าด้วยกัน ในการเริ่มต้น fullPage.js และตั้งค่าตัวเลือกและขั้นตอน เราต้องใช้ jQuery ต่อไปนี้คือตัวเลือกพื้นฐานบางส่วนที่ใช้ได้กับทุกไซต์ที่มีการเลื่อนแนวตั้ง

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

อย่าลืมรวมโค้ดนี้ไว้ที่ส่วนท้ายของส่วนหน้า

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

ขั้นตอนที่ 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 ให้เป็นค่าที่ถูกต้อง

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

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

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

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

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

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

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

ห่อ

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