สร้างเว็บไซต์หน้าเดียวด้วยการนำทางหน้าเดียวใน WordPress (พร้อมโบนัส)

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

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

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

คนส่วนใหญ่ออกจากเว็บไซต์หากพวกเขาไม่พบวิธีที่เหมาะสมในการติดต่อเจ้าของ ดังนั้นเคล็ดลับโบนัสนี้จะช่วยเพิ่มมูลค่าที่ไม่ธรรมดาให้กับเว็บไซต์ของคุณได้อย่างแท้จริง

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

การนำทางหน้าเดียวคืออะไร

การนำทางหน้าเดียวเหมือนชื่อแนะนำคือเมนูการนำทางที่ออกแบบมาเป็นพิเศษเพื่อนำทางไปยังส่วนต่างๆ ของเว็บไซต์หน้าเดียว การนำทางหน้าเดียวพร้อมเอฟเฟกต์การเลื่อนที่ราบรื่นทำให้การนำทางไปยังส่วนต่างๆ เป็นประสบการณ์ที่ง่ายและใช้งานง่าย

“ความเรียบง่ายคือความซับซ้อนขั้นสูงสุด” — เลโอนาร์โด ดา วินชี

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

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

ประโยชน์ของเว็บไซต์หน้าเดียวที่มีการนำทางหน้าเดียวคืออะไร

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

• ประการแรกมันเหมาะกับมือถือ นั่นเป็นสิ่งสำคัญที่ควรพิจารณาเมื่อทำ SEO ของเว็บไซต์ (Search Engine Optimization) ในปี 2564 พลเมืองสหรัฐฯ 70% ใช้อุปกรณ์เคลื่อนที่เพื่อค้นหาทางอินเทอร์เน็ต ข้อมูลเช่นนี้เป็นเหตุผลที่ Google ให้ความสำคัญกับเว็บไซต์ที่เหมาะกับอุปกรณ์เคลื่อนที่ ด้วยการออกแบบหน้าเดียว เว็บไซต์ของคุณจะเข้าถึงหนังสือดีๆ ของ Google ตั้งแต่เริ่มต้น

• คนส่วนใหญ่ชอบเว็บไซต์ที่เรียบ สวยงาม และตรงประเด็นมากกว่าเว็บไซต์ที่ยาวเกินความจำเป็น
• Google นับสิทธิ์ของโดเมนและลิงก์ระดับหน้าเป็นระดับ 40% นี่เป็นอีกพื้นที่หนึ่งที่ไซต์หน้าเดียวของคุณจะมีความได้เปรียบ
• เว็บไซต์หน้าเดียวโหลดได้เร็วกว่าเว็บไซต์ที่มีหน้ามากมาย เมื่อพิจารณาจากข้อเท็จจริงที่ผู้คนในปัจจุบันมีตัวเลือกไม่จำกัด การมีไซต์ที่โหลดเร็วนั้นไม่สามารถต่อรองได้จริงๆ
• ไซต์หน้าเดียวดูแลรักษาง่าย
• เนื่องจากเว็บไซต์หน้าเดียวมีข้อมูลทั้งหมดอยู่ในหน้าเดียว การนำทางแบบเลื่อนจึงทำให้การนำทางง่ายขึ้นมาก และเอฟเฟกต์การเลื่อนที่ราบรื่นทำให้ประสบการณ์ผู้ใช้ผ่อนคลาย

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

วิธีสร้างเว็บไซต์เดียวด้วยการนำทางหน้าเดียว ใน WordPress

ในบล็อกนี้ ฉันจะแสดงให้คุณเห็นไม่เพียงแค่วิธีสร้างเว็บไซต์เท่านั้น แต่ยังแสดงการนำทางหน้าเดียวที่ดูทันสมัยใน WordPress ที่จะสร้างความประทับใจให้ผู้มีโอกาสเป็นลูกค้าของคุณ สำหรับบทช่วยสอนนี้ ฉันจะใช้ WordPress ตัวสร้างเว็บไซต์ยอดนิยม (ฉันรู้ว่ามันระบุไว้ในชื่อ!)

เอาล่ะมาเริ่มกันเลย…

ขั้นตอนที่ #1: ติดตั้งปลั๊กอิน WordPress ที่จำเป็น

เมื่อคุณติดตั้ง WordPress ในระบบของคุณแล้ว คุณต้องติดตั้งปลั๊กอิน WordPress ต่อไปนี้:

• Elementor (เวอร์ชันฟรี)
• ElementsKit (ทั้งรุ่นฟรีและรุ่น Pro)
• MetForm (เวอร์ชันฟรี)

เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอิน WordPress ที่จำเป็นเสร็จแล้ว ก็ถึงเวลาสร้างไซต์

ขั้นตอนที่ #2: สร้างเว็บไซต์โดยใช้หน้าสร้างล่วงหน้าของ ElementsKit

ElementsKit มีเพจที่สร้างไว้ล่วงหน้า เทมเพลต และส่วนต่างๆ เพื่อให้ผู้คนสามารถสร้างเว็บไซต์ด้วยการออกแบบ เลย์เอาต์ และสไตล์ใดก็ได้ที่ต้องการโดยไม่ต้องเขียนโค้ด สำหรับบล็อกนี้ ฉันจะใช้หน้า Landing Page ผู้วางแผนงานแต่งงานโดย ElementsKit

ในการสร้างเว็บไซต์ของคุณ จากแดชบอร์ด WordPress ให้ไปที่ หน้า ⇒ เพิ่มใหม่

• ตั้ง ชื่อ เช่น หน้าแรก เลือก Elementor Full Width จากตัวเลือกเทมเพลต
• คลิกเพื่อเผยแพร่ และหลังจากเผยแพร่ให้คลิกที่ แก้ไขด้วย Elementor

• คลิกที่ปุ่ม ElementsKit (EK) เมื่อหน้าต่าง Elementor Builder เปิดขึ้น

• ไปที่แท็บ หน้า ค้นหาหน้า งานแต่งงาน และคลิกที่ แทรก

ตอนนี้ คลิก ที่อัปเดตเพื่อบันทึก

ขั้นตอนที่ #3: วิธีเพิ่ม Elementor การนำทางหนึ่งหน้า โดยใช้ ElementsKit

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

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

3.1 เปิดโมดูล Onepage Scroll

ในการเพิ่มการนำทางแบบเลื่อนไปยังไซต์ WordPress ของคุณ อันดับแรก เราต้องเปิดโมดูล Onepage Scroll

• ไปที่: WordPress Dashboard ⇒ ElementsKit ⇒ Modules
• เปิด Onepage Scroll
• คลิกที่ บันทึกการเปลี่ยนแปลง เพื่ออัปเดต

3.2 เปิดใช้งาน One Page Scroll จากการตั้งค่าหน้า

• คลิกที่ไอคอนการตั้งค่าที่มุมล่างซ้ายของแผงองค์ประกอบ
• เปิดแท็บการตั้งค่า ElementsKit
• เปิดใช้งานตัวเลือก Onepage Scroll

หมายเหตุ: หากคุณไม่พบตัวเลือกการตั้งค่าการเลื่อน Onepage คุณอาจยังไม่ได้ เปิดใช้งาน ElementsKit Pro

3.3 เลือกรูปแบบการนำทาง

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

คุณสามารถเลือกสไตล์ที่ต้องการได้ สำหรับบล็อกนี้ ฉันจะเลือกไอคอนที่กำหนดเอง เมื่อคุณเลือกไอคอนแบบกำหนดเอง คุณจะได้รับตัวเลือกให้เลือกไอคอนสำหรับตัวเลือก One Page Scroll Navigation Style คุณสามารถเลือกไอคอนจาก ไลบรารีไอคอน หรืออัปโหลด ไอคอน SVG ที่กำหนดเอง

ในการเลือกไอคอนที่กำหนดเอง

• เลือกตัวเลือกไอคอนที่กำหนดเอง จากดรอปดาวน์รูปแบบการนำทาง
• วาง เมาส์ เหนือไอคอนการนำทางแล้ว คลิก ไอคอนไลบรารี
• ค้นหาและแทรก ไอคอนที่คุณชอบ

3.4 ตั้งค่าการนำทางอื่น ๆ

เมื่อคุณเลือกรูปแบบการนำทาง คุณจะสามารถเข้าถึงการตั้งค่าต่อไปนี้:

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

3.5 เพิ่มส่วนของหน้าไปยังลิงก์การนำทาง

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

• วาง เมาส์ เหนือส่วนและคลิกที่ไอคอน แก้ไขส่วน
• ไปที่ แท็บขั้นสูง
• ขยาย ตัวเลือกการเลื่อนหน้าเว็บของ ElementsKit
• เปิดเปิดใช้งานส่วน เพื่อให้มองเห็นส่วนนี้
• เปิดตัวเลือก enable do t เพื่อเพิ่มส่วนนี้เป็นหนึ่งในลิงก์การนำทาง
• ระบุชื่อสำหรับ ข้อความคำแนะนำเครื่องมือ ข้อความคำแนะนำเครื่องมือจะปรากฏขึ้นเมื่อมีคนวางเมาส์เหนือลิงก์
• สุดท้ายคลิกที่อัปเดตเพื่อบันทึก

คุณสามารถทำขั้นตอนเดิมซ้ำที่กล่าวไว้ข้างต้นเพื่อเพิ่มส่วนทั้งหมดที่คุณต้องการไปยังการนำทาง

หมายเหตุ: คุณสามารถเพิ่มส่วนในการนำทาง ไม่ใช่ส่วนภายใน ดังนั้น คุณจะไม่พบตัวเลือก ElementsKit Onpage Scroll ใต้แท็บขั้นสูงสำหรับส่วนด้านในหรือวิดเจ็ตอื่นๆ

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

ขั้นตอนที่ #4: เพิ่มส่วนท้ายของส่วนหัวโดยใช้ส่วนท้ายของส่วนหัวที่สร้างไว้ล่วงหน้าของ ElementsKit

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

ElementsKit มีส่วนหัวและส่วนท้ายที่สร้างไว้ล่วงหน้ามากมายให้คุณเลือก ในการใช้ส่วนท้ายของส่วนหัว ElementsKit:

• ไปที่ ElementsKit ⇒ Header Footer ⇒ Click on Add New

• เลือก Type as Header , Conditions as ทั้งเว็บไซต์ , เปิด ตัวเลือก Activate/Deactivate และสุดท้ายคลิกที่ บันทึกการเปลี่ยนแปลง

• ตอนนี้เพื่อเพิ่มส่วนหัว คลิกแก้ไขบนเมนูที่คุณสร้างขึ้น
• คลิกที่แก้ไขเนื้อหา
• คลิกที่ปุ่ม EK และไปที่แท็บส่วน
• เลือกการออกแบบส่วนหัวที่คุณชอบแล้วคลิกแทรก

คุณสามารถติดตามวิดีโอด้านล่างเพื่อสร้างส่วนหัวที่สวยงามสำหรับเว็บไซต์ของคุณ

หมายเหตุ: คุณสามารถทำตามขั้นตอนเดียวกับส่วนหัวเพื่อสร้างส่วนท้ายสำหรับเว็บไซต์ของคุณโดยใช้ส่วนที่สร้างไว้ล่วงหน้าโดย ElementsKit

ขั้นตอนที่ #5: เพิ่มแบบฟอร์มการติดต่อเป็น Modal Popup (โบนัส)

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

ในการเพิ่มโมดอลป๊อปอัป ฉันจะแทนที่ปุ่ม RSVP ด้วยโมดอลป๊อปอัปและเพิ่มแบบฟอร์มการติดต่อลงไป

• ไปที่ ElementsKit ⇒ วิดเจ็ต ⇒ เปิดป๊อปอัป modal ⇒ คลิกที่บันทึกการเปลี่ยนแปลง

• ไปที่โฮมเพจทั้งหมดของคุณ ⇒ (หรืออะไรก็ตามที่คุณตั้งชื่อให้เพจของคุณ) และคลิกที่ แก้ไขด้วย Elementor

• ในโหมดแก้ไข เลื่อนไปที่ส่วน RSVP และลบปุ่ม RSVP
• ลากและวางกิริยาที่ปรากฏขึ้นในตำแหน่งของปุ่ม RSVP

• หากต้องการเปลี่ยนข้อความปุ่มโมดอลให้ไปที่เนื้อหา ⇒ ปุ่มสลับ ⇒ ป้ายกำกับและเปลี่ยน "เปิดโมดอล" เป็น RSVP (หรืออะไรก็ได้ที่คุณต้องการ)

• ไปที่แท็บรูปแบบ ⇒ ปุ่มสลับเพื่อเปลี่ยนสีพื้นหลังของปุ่ม สีข้อความ รัศมีเส้นขอบ และการตั้งค่าอื่นๆ สำหรับทั้งมุมมองปกติและมุมมองแบบโฮเวอร์

• ไปที่เนื้อหาแล้วเปิดโหมดเปิดใช้งานเทมเพลตเพื่อให้เราสามารถเพิ่มแบบฟอร์มการติดต่อของเรา
• คลิกที่ปุ่มป๊อปอัป เมื่อเปิดแล้ว ให้คลิกที่ไอคอนแก้ไขบนร่างกายเพื่อเปิดตัวแก้ไข Elementor

• ค้นหา Metform ลากและวางวิดเจ็ต
• คลิกที่แก้ไขแบบฟอร์มเพื่อเลือกแบบฟอร์มการติดต่อ
• เลือกแบบฟอร์มที่คุณต้องการจากรายการแล้วคลิกบันทึก & ปิด
• สุดท้ายคลิกที่อัปเดตเพื่อบันทึก

หมายเหตุ: ฉันได้สร้างแบบฟอร์ม RSVP โดยใช้ Metform แล้ว และยังเปลี่ยนสีและรูปแบบเล็กน้อยเพื่อให้ตรงกับเทมเพลตหน้า Landing Page ที่เราใช้อยู่ คุณสามารถดูบล็อกเกี่ยวกับ วิธีสร้างและจัดรูปแบบแบบฟอร์มการติดต่อโดยใช้ Metform

คุณยังสามารถดู วิดีโอด้านล่างเพื่อดูคำแนะนำ เกี่ยวกับวิธีสร้างแบบฟอร์มการติดต่อแบบกำหนดเองโดยใช้ Metform

ขั้นตอนที่ #6: อัปเดตและดูตัวอย่างเว็บไซต์เดี่ยวพร้อมการนำทางหน้าเดียว

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

หากคุณได้ทำตามขั้นตอนทั้งหมดอย่างถูกต้องแล้ว คุณควรจะได้เว็บไซต์หน้าเดียวที่มีการนำทางหน้าเดียวใน WordPress เช่นเดียวกับด้านล่าง:

สรุป

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

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

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการสร้างเว็บไซต์โดยใช้ WordPress, Elementor และ ElementsKit ที่มีมนต์ขลัง ติดตามเราได้ที่บัญชีโซเชียลมีเดียของเรา