วิธีสร้างหน้า Landing Page ใน WordPress โดยใช้ Element Pack & Elementor
เผยแพร่แล้ว: 2019-10-20สวัสดีทุกคน ในบทความนี้ เราจะมาเรียนรู้เกี่ยวกับวิธีสร้างหน้า Landing Page ใน WordPress โดยใช้ Element Pack และ Elementor Page builder นี่จะเป็นบล็อกการสอนทีละขั้นตอน ดังนั้นจงกลั้นหายใจสำหรับการเดินทางที่ยาวนาน
มาเริ่มกันเลย!
การสร้างหน้า Landing Page โดยใช้ Elementor และชุดองค์ประกอบนั้นง่ายมาก
สำหรับผู้เริ่มต้น มีหลายวิธีที่คุณสามารถสร้างหน้า Landing Page ที่สวยงามด้วย Elementor และ Element Pack
เราจัดทำบทความนี้ขึ้นเพื่อแจ้งให้คุณทราบวิธีที่สะดวกที่สุดในการสร้างหน้า Landing Page ด้วยปลั๊กอิน WordPress ฟรี
ใช่ที่ศูนย์ต้นทุน
สิ่งที่เราจะแสดงให้คุณเห็นที่นี่ -
- ปลั๊กอินฟรี – ทั้งตัวสร้างหน้า Elementor และ Element Pack Pro มีปลั๊กอินรุ่นฟรีที่ตรงตามเครื่องหมายสำหรับการพัฒนาเว็บ
- ขั้นตอนง่าย ๆ – เราจะทำทุกอย่างในลักษณะที่ง่ายขึ้น ไม่มีเรื่องยากๆ เข้ามาเกี่ยวข้อง
- ไม่จำเป็นต้องมีความรู้ด้านการเข้ารหัส – เรากำลังทำงานกับปลั๊กอินตัวสร้างหน้า Elementor ที่ไม่ต้องใช้ความรู้ด้านการเขียนโปรแกรมเป็นศูนย์ในฐานะปลั๊กอินแบบลากและวาง ถึงอย่างนั้น คุณก็ไม่ต้องใช้ความพยายามใดๆ กับกระบวนการสร้างเพจที่เหลือด้วยโค้ด
- การออกแบบสร้างสรรค์ – หมีตัวเก่ามีรสชาติดีกว่า แต่เราไม่ยึดติดกับเทมเพลตของหน้าแบบเก่าที่มีอินเทอร์เฟซแบบทำซ้ำเหมือนกัน ทั้งหมดของเราคือการออกแบบเลย์เอาต์ที่สดใหม่และสร้างสรรค์
- CTR & Conversion ที่มากขึ้น - คู่มือนี้จะทำให้คุณสร้างหน้าเว็บที่ไม่เพียงแต่ดูสวยงาม แต่ยังมีอัตราการแปลงที่สูงขึ้นด้วย
ก่อนที่เราจะเข้าสู่ขั้นตอนการสร้างหน้าเว็บ ให้เราบอกคุณสักเล็กน้อยเกี่ยวกับคำจำกัดความของสิ่งที่เรากำลังจะสร้างและเครื่องมืออะไร
ก้าวไปข้างหน้ากันเถอะ
สารบัญ
Landing Page ใน WordPress คืออะไร?
หน้าแรกของเว็บไซต์ของคุณนั้นโดยพื้นฐานแล้วเป็นส่วนหนึ่งของเว็บไซต์ที่เราเห็นเป็นอันดับแรกเมื่อเยี่ยมชมเว็บไซต์ หน้า Landing Page คือหน้าเฉพาะสำหรับการดำเนินการบางอย่างที่คุณต้องการจากผู้เยี่ยมชมของคุณ นี่คือหน้าพิเศษที่ใช้เพื่อวัตถุประสงค์ทางการตลาดและเพิ่มมูลค่าให้กับเว็บไซต์ของคุณ หน้า Landing Page ได้รับการออกแบบมาเพื่อให้ส่งผลต่อ CTR และ Conversion ของคุณโดยดึงดูดผู้คนจำนวนมากขึ้นด้วยความน่าสนใจและคุณลักษณะของพวกเขา
หน้า Landing Page ที่ออกแบบอย่างเหมาะสมมักจะสร้างปริมาณการค้นหามากกว่าบล็อกหรือโพสต์ส่งเสริมการขาย มันสมเหตุสมผลแล้วที่ผู้คนต้องการสิ่งใหม่และสนุกที่จะได้รับประสบการณ์และหน้า Landing Page เป็นสถานที่ที่สมบูรณ์แบบในการทำเช่นนั้น
คุณสามารถออกแบบแลนดิ้งเพจได้หลายวิธี หน้า Landing Page มาตรฐานควรมีส่วนหัว ส่วนท้าย บริการ คำถามที่พบบ่อย ราคา ฯลฯ คุณอาจคิดว่ามันเป็นหน้าแรก แต่กลับไม่ใช่
ข้อเท็จจริงที่ทำให้หน้าแรกแตกต่างจากหน้า Landing Page
แน่นอนว่าหน้าแรกคือหน้าแรกที่คุณคาดหวังให้ผู้เยี่ยมชมเข้ามา
ตัวอย่างเช่น หน้าแรกประกอบด้วยโครงสร้างเว็บไซต์โดยรวม รายละเอียดเกี่ยวกับผลิตภัณฑ์หรือบริการ และใช้สำหรับแนะนำแบรนด์ของคุณให้ผู้เยี่ยมชมของคุณรู้จัก นอกจากนี้ยังสนับสนุนให้ผู้คนดูเพิ่มเติมในเว็บไซต์หรือหน้าอื่นๆ ของคุณ
แต่เราสร้างหน้า Landing Page เพื่อตอบสนองความต้องการบางอย่าง เช่น การมุ่งเน้นที่ผลิตภัณฑ์หรือคุณลักษณะบางอย่างภายในหน้าเดียวเท่านั้น
ด้วยเหตุนี้ หน้า Landing Page ส่วนใหญ่จึงมีเนื้อหาน้อยกว่าหน้าแรกที่มีเฉพาะเนื้อหาเกี่ยวกับผลิตภัณฑ์
กล่าวคือ เราสร้างหน้า Landing Page ด้วยวิธีที่เรียบง่ายและไม่มีอะไรยุ่งยาก เพื่อที่จะสื่อข้อความที่ชัดเจนไปยังผู้เยี่ยมชม
นั่นคือความแตกต่างหลักระหว่างหน้าแรกและหน้า Landing Page
สร้างหน้า Landing Page โดยใช้ Elementor ทีละขั้นตอน
เมื่อคุณทราบคำจำกัดความของหน้า Landing Page แล้ว ก็ได้เวลาเรียนรู้เกี่ยวกับกระบวนการสร้างหน้า Landing Page โดยใช้ Elementor
เราใช้ Elementor เนื่องจากเป็นปลั๊กอินตัวสร้างเพจแบบลากและวางที่ได้รับความนิยมมากที่สุดสำหรับ WordPress
มันใช้งานง่ายมากและไม่ต้องการความรู้ในการเขียนโปรแกรมเลย
นั่นไม่ใช่เหตุผลที่เราใช้ Elementor สำหรับการพัฒนาเว็บ-
- ประสบการณ์การสร้างไซต์ที่ปราศจากสิ่งรบกวน: Elementor จัดเตรียมผ้าใบที่ว่างเปล่าทั้งหมด เพื่อให้คุณสามารถเริ่มสร้างเว็บไซต์ของคุณตั้งแต่เริ่มต้น สิ่งนี้ทำให้นักพัฒนาเว็บมืออาชีพชื่นชม Elementor เหนือสิ่งอื่นใด
- วิดเจ็ต Drag-n-Drop: Elementor มีความยืดหยุ่นสูงเนื่องจากวิธีการสร้างและสิ่งที่ให้ การเพิ่มคุณสมบัติหรือฟังก์ชันให้กับเว็บไซต์ที่ออกแบบใหม่ของคุณ ทำได้เพียงลากวิดเจ็ตโดยการคลิกเคอร์เซอร์ของคุณ
- การจัดการไซต์เต็มรูปแบบ: Elementor ให้การควบคุมเฉพาะสำหรับเลย์เอาต์หน้า Landing Page ทำให้ไดนามิกและเป็นมืออาชีพมากขึ้นในการสร้างเพจของคุณ
- เทมเพลตและบล็อก: Elementor เป็นมิตรกับผู้เริ่มต้นและมีการออกแบบเทมเพลตที่สร้างไว้ล่วงหน้าจำนวนมากซึ่งคุณสามารถนำเข้าและปรับแต่งเพื่อสร้างหน้า Landing Page ของคุณเองในไม่กี่นาที
ดังนั้น ก้าวไปข้างหน้า
สิ่งที่คุณต้องเริ่มต้น
เพื่อให้คุณเริ่มสร้างหน้า Landing Page แรกโดยใช้ Element Pack & Elementor คุณต้องเตรียมสิ่งที่จำเป็นไว้ล่วงหน้า
สิ่งที่คุณต้องการคือ-
- เว็บไซต์ WordPress ที่เสถียร
- ตัวสร้างหน้า Elementor (ฟรี)
- Element Pack Pro
เหตุผลที่เราใช้ Element Pack Pro เพราะมีวิดเจ็ต essentail มากกว่า 200 รายการสำหรับ Elementor และเทมเพลตมากกว่า 2,000 รายการที่จะเป็นมืออาชีพในไม่กี่นาที
นี่คือเครื่องมือพัฒนาเว็บไซต์ในตำนานที่ทำขึ้นเพื่อให้การพัฒนาเว็บเป็นเรื่องง่ายเหมือนพาย
คุณสามารถใช้ Element Pack Lite เวอร์ชันฟรีที่มีวิดเจ็ตและฟีเจอร์มากกว่า 45 รายการได้ฟรี
นอกจากนี้ยังมีเทมเพลตหน้า Landing Page จำนวนมาก (มากกว่า 100 รายการ) ที่คุณสามารถนำเข้าและใช้เป็นเทมเพลตของคุณเองได้
ส่วนของแลนดิ้งเพจ
หน้าที่เชื่อมโยงไปถึงที่ดีควรประกอบด้วยส่วนเหล่านี้โดยทั่วไป-
- ส่วนหัว: โลโก้เว็บไซต์ เมนูหลัก และคุณลักษณะเพิ่มเติม เช่น แถบค้นหาจะอยู่ในส่วนหัว สามารถเคลื่อนย้ายหรือหยุดนิ่งขึ้นอยู่กับส่วนที่เหลือของหน้า
- ส่วนฮีโร่: ส่วน ฮีโร่จะเต็มหน้าจอจนกว่าผู้เยี่ยมชมของคุณจะเลื่อนลงมาด้านล่าง คุณต้องให้ความสำคัญสูงสุดกับรายละเอียดของส่วนนี้ของเว็บไซต์
- ส่วนบริการ: นี่คือที่ที่คุณบอกผู้เยี่ยมชมของคุณเพิ่มเติมเกี่ยวกับธุรกิจของคุณโดยละเอียด
- คุณสมบัติ: เน้นว่าคุณมีคุณลักษณะใดที่ทำให้คนอื่นเลือกคุณมากกว่าคนอื่น
- แกลเลอรี: ตกแต่งแกลเลอรีของไซต์ของคุณด้วยตารางรูปภาพ ภาพหมุน ไอคอน ปุ่มแชร์ทางสังคม ฯลฯ
- ข้อความรับรอง: แสดงว่าผู้คนพูดถึงบริการของคุณอย่างไร และได้รับความนิยมและไว้วางใจมากขึ้น
- แบบฟอร์มลงทะเบียน: ในส่วนนี้ คุณต้องระบุวิธีให้ผู้เยี่ยมชมป้อนรายชื่ออีเมลของคุณสำหรับขอบเขตในอนาคต
ตอนนี้ เราแค่ต้องเริ่มสร้างหน้า Landing Page โดยใช้ Element Pack & Elementor เหนือองค์ประกอบเหล่านี้
ขั้นตอนที่ 1: สร้างหน้า Landing Page โดยใช้เมนูเทมเพลต
เป็นข้อดีอีกอย่างของ Elementor ที่ช่วยให้คุณสร้างเทมเพลตหน้าด้วยการควบคุมแดชบอร์ดเทมเพลตเฉพาะ
ดังนั้น แทนที่จะทำงานที่นี่และที่นั่น คุณสามารถนำงานของคุณไปวางบนสายงานได้จากที่เดียว
เพียงไปที่ WordPress Dashboard> Templates และเลือกตัวเลือก Landing Pages เพื่อเพิ่มหน้า Landing Page ใหม่ในเมนูเทมเพลต
ตอนนี้ คุณจะถูกเปลี่ยนเส้นทางไปยังตัวแก้ไขหน้า Elementor สำหรับหน้าเทมเพลต
ที่นี่ คุณสามารถเลือกเทมเพลตที่สร้างไว้ล่วงหน้าจากไลบรารีเทมเพลต Element Pack Pro หรือกำหนดเองแบบเต็มได้
ขั้นตอนที่ 2: เตรียมสีและแบบอักษรสำหรับการออกแบบของคุณ
ดังที่เราได้กล่าวไว้ก่อนหน้านี้ Elementor มีหน้าต่างตัวแก้ไขที่ปราศจากสิ่งรบกวน ยกเว้นทุกอย่าง แม้แต่ส่วนหัวและส่วนท้าย

สิ่งที่คุณต้องทำคือเลือก “Elementor Canvas” จากการตั้งค่าหน้าเพื่อให้มีหน้าสีขาวเต็มเริ่มต้น
ก่อนที่คุณจะเริ่มต้น ตรวจสอบให้แน่ใจว่าได้ตั้งค่าสีและแบบอักษรสากลสำหรับหน้า Landing Page
นี่เป็นสิ่งสำคัญเพราะช่วยประหยัดเวลาได้มากโดยไม่จำเป็นต้องเปลี่ยนคุณสมบัติแบบอักษรหรือสีของแต่ละส่วน/องค์ประกอบด้วยตนเอง
เพื่อประสบการณ์การออกแบบที่รวดเร็วและเป็นมืออาชีพ คุณสามารถติดตั้งซอฟต์แวร์ตัวเลือกสีบนพีซีที่คุณใช้สร้างหน้า Landing Page ใน WordPress
ซึ่งจะช่วยรักษาขั้นตอนการทำงาน
ขั้นตอนที่ 3: ออกแบบส่วนหัว & หน้าฮีโร่
ก่อนอื่น คุณสามารถออกแบบส่วนหัวของคุณก่อน จากนั้นไปยังเนื้อหาสำหรับส่วนฮีโร่
ส่วนหัวควรมีโลโก้แบรนด์ เมนู และอื่นๆ เพื่อให้ผู้ใช้ดำเนินการต่างๆ เช่น ช่องค้นหา
ประการที่สอง คุณต้องทำให้มันง่ายสำหรับส่วนฮีโร่หรือส่วนด้านล่างของส่วนหัว
ขอแนะนำให้ใช้น้ำเสียงที่คล้ายคลึงกันกับส่วนหัวและหน้าฮีโร่เพื่อให้ดูดีขึ้น
จากนั้น คุณสามารถวางข้อความขนาดใหญ่ไว้ตรงกลางหน้าฮีโร่ ที่ด้านบนของรูปภาพพื้นหลังที่สวยงาม
ภาพพื้นหลังควรแสดงถึงบริการของคุณ
ปิดท้ายด้วยปุ่มที่ทำให้ผู้ใช้ได้รับข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อนี้
ณ จุดนี้ คุณสามารถใช้แท็บ ขั้นสูง ของ Elementor สำหรับแต่ละส่วนหรือองค์ประกอบ และตั้งค่าการเพิ่ม ระยะขอบ เส้นขอบ เงา ฯลฯ แบบกำหนดเองสำหรับการออกแบบ uqiue
Element Pack Pro มีวิดเจ็ตที่น่าทึ่งเพื่อปรับปรุงรูปลักษณ์ของหน้าฮีโร่ของคุณ -
- หัวเรื่องขั้นสูง
- หัวเรื่องเคลื่อนไหว
- ไอคอนการนำทาง
- ตัวเลื่อน
- ปุ่มคู่
- กำหนดเอง Carousel
ขั้นตอนที่ 4: เกี่ยวกับเราของหน้า Landing Page ใน WordPress
ส่วนเกี่ยวกับเรามีความสำคัญมากสำหรับเว็บไซต์ของคุณเนื่องจากมีข้อมูลหลักเกี่ยวกับเว็บไซต์ของคุณรวมถึงวัตถุประสงค์
พยายามอย่าพูดเกินจริงในส่วนนี้เพื่อดึงดูดความสนใจมากขึ้นโดยยืดให้ยาวเกินความจำเป็น
คุณสามารถออกแบบมินิมอลหรือทำอย่างอื่นเพิ่มเติมสำหรับส่วนนี้ได้ทั้งสองอย่าง
แต่อย่าใช้คำมากเกินไป ให้จบภายใน 10-12 บรรทัด
ที่ควรทำให้ผู้เข้าชมซึมซับข้อมูลโดยไม่ต้องกดดันใดๆ
นอกจากนี้ คุณสามารถลองใช้วิดเจ็ตเหล่านี้จาก Element Pack Pro เพื่อเพิ่มการปรับปรุงโบนัสให้กับเว็บไซต์ของคุณ
- หัวเรื่องขั้นสูง
- กล่องไอคอนขั้นสูง
- การ์ดแฟนซี
ขั้นตอนที่-5: ออกแบบส่วนแนะนำ
ส่วนเด่นมีขึ้นเพื่อดึงดูดความสนใจของผู้คนมากกว่าผลิตภัณฑ์หรือบริการของคุณ
การออกแบบส่วนนี้ของหน้า Landing Page ของคุณเป็นเรื่องง่ายโดยใช้ Element Pack และ Elementor
เลย์เอาต์ที่แนะนำควรมีการนำเสนอบริการของคุณด้วยภาพขนาดใหญ่ พร้อมด้วยข้อดีหรือลักษณะเฉพาะ
คุณควรตรงมากขึ้นกับส่วนแนะนำเพื่อให้ผู้คนเข้าใจบริการของคุณอย่างชัดเจน
วิดเจ็ตเหล่านี้จะช่วยคุณออกแบบส่วนเด่นที่น่าทึ่งใน Elementor-
- กล่องเลื่อน
- ตัวเลื่อนแฟนซี
- การ์ดอินเตอร์แอคทีฟ
- ตารางกิจกรรม
- แว่นขยายภาพ
ขั้นตอนที่ 6: สร้างแกลเลอรี่ภาพที่ยอดเยี่ยม
ในส่วนนี้ของหน้า Landing Page เราจะสร้างแกลเลอรีรูปภาพสำหรับผู้เยี่ยมชมของเรา
ทุกหน้า Landing Page ใน WordPress ที่สร้างโดยใช้ Element Pack และ Elementor ควรมีแกลเลอรีรูปภาพเพื่อให้เป็นที่รู้จักและสร้างความไว้วางใจจากผู้เยี่ยมชมมากขึ้น
ที่นี่ คุณสามารถใช้หัวเรื่องใหญ่ๆ แล้วเริ่มแทรกรูปภาพลงในวิดเจ็ตแกลเลอรีรูปภาพเดียว
นอกจากนี้ แกลเลอรีควรมีรูปภาพที่เว้นระยะห่างเท่าๆ กันเพื่อให้ดูเรียบร้อยและสะอาดตา
สามารถทำได้ง่ายโดยใช้เพียงสองวิดเจ็ตโดย Element Pack-
- หัวเรื่องเคลื่อนไหว
- แกลลอรี่รูปภาพขั้นสูง
- หีบเพลงภาพ
ขั้นตอนที่ 7: คำรับรองจากผู้ใช้
คำรับรองของผู้ใช้สร้างความไว้วางใจให้กับผู้เยี่ยมชมของคุณโดยแสดงสิ่งที่ผู้อื่นพูดถึงเกี่ยวกับบริการของคุณ
ไม่ว่าเว็บไซต์ของคุณจะเล็กหรือใหญ่ก็ตาม การมีคำรับรองจากผู้ใช้บนหน้า Landing Page ใน WordPress นั้นพิสูจน์แล้วว่าได้ผลในการนำการเข้าชมและโอกาสในการขายเพิ่มขึ้น
Element Pack Pro มีวิดเจ็ตเฉพาะสำหรับจุดประสงค์นี้ ซึ่งคุณสามารถวางไว้ที่ด้านล่างของไซต์ของคุณได้อย่างง่ายดาย (คุณสมบัติด้านล่าง) เพื่อให้เกิดผลในเชิงบวก-
- คำรับรอง Slider
- ม้าหมุนรับรอง
- หลักฐานทางสังคม
ขั้นตอนที่-8: แบบฟอร์มลงทะเบียนและติดต่อ
อีกส่วนที่สำคัญของหน้า Landing Page ที่ประสบความสำเร็จคือส่วนการสมัครเพื่อรวบรวมข้อมูลติดต่อของผู้เยี่ยมชมสำหรับธุรกิจในอนาคต
เมื่อตั้งค่าพื้นที่ติดต่อ คุณควรพิจารณารวมที่อยู่ หมายเลขโทรศัพท์ และที่อยู่อีเมลของคุณ
ย้ำอีกครั้งว่า คุณต้องให้แบบฟอร์มลงทะเบียนที่สัญญาว่าจะให้อีเมลข้อเสนอ อีเมลโปรโมชัน หรือของฟรีอื่นๆ
นั่นคือเหตุผลที่คุณต้องให้ความสำคัญกับพื้นหลัง กราฟิก และรายละเอียดอื่นๆ เพื่อดึงดูดสายตาผู้คน
Element Pack Pro มีวิดเจ็ตที่สมบูรณ์แบบในการสร้างการติดต่อและแบบฟอร์มการสมัครของคุณ -
- ไอคอนการนำทาง
- Mailchimp
- แบบฟอร์มนินจา
พิเศษ: เพิ่มรูปแบบการนำทางสำหรับหน้า Landing Page ใน WordPress
เมื่อหน้า Landing Page ของคุณพร้อมโดยพื้นฐานแล้ว มีเทคนิคบางอย่างที่คุณสามารถเล่นได้เพื่อให้เกิดประโยชน์สูงสุด
ขั้นแรก คุณสามารถเพิ่มแถบนำทางส่วนหัวแบบติดหนึบสำหรับหน้า Landing Page ได้
ด้วยวิธีนี้ ผู้ใช้สามารถดูแถบนำทางและสลับไปยังหน้าอื่นได้อย่างง่ายดาย
ประการที่สอง คุณสามารถทำให้แถบการนำทางหายไปได้จนกว่าจะมีคนเลื่อนลงมาจากด้านบนของหน้าในระยะที่กำหนด
สิ่งนี้สร้างความประทับใจให้กับเพจอย่างมืออาชีพและผู้ใช้จะต้องชอบมัน
พิเศษ: ใช้เทมเพลตหน้า Landing Page
ดังที่เราได้กล่าวไปแล้วข้างต้น Element Pack Pro มีเทมเพลตหน้า Landing Page ที่สร้างไว้ล่วงหน้าที่หลากหลายสำหรับผู้ใช้
คุณสามารถเลือกเทมเพลตแบบฟรีหรือแบบพรีเมียมและปรับแต่งส่วนด้านในเพื่อสร้างเอกลักษณ์ได้
นี่เป็นวิธีที่เร็วที่สุดในการสร้างหน้า Landing Page ใน WordPress ที่ดูสวยงามและยอดเยี่ยม
หน้า Landing Page ที่น่าสนใจบางส่วนจาก Element Pack Pro-
- วันฮาโลวีน
- หน้า Landing Page คริสต์มาส
- ไม่มีที่สิ้นสุด
- ห้า
- สุขภาพโควิด
- บริการ Ebus
- โควิด -19
- เมดิพลัส
- แฟชั่นผู้ชาย
- ร้านเฟอร์นิเจอร์
- แฟชั่นผู้หญิง
- ขององค์กร
หมดเขตแล้ว!
คุณชอบหน้า Landing Page ที่ทันสมัยสำหรับธุรกิจของคุณหรือไม่?
รับ Element Pack Pro วันนี้และเพลิดเพลินไปกับหน้า Landing Page ที่สร้างสรรค์สำหรับโครงการเว็บไซต์ครั้งต่อไปของคุณ
นอกจากนี้ คุณจะได้รับวิดเจ็ตและส่วนขยายที่น่าทึ่งกว่า 200 รายการเพื่อเพิ่มประสิทธิภาพคุณลักษณะของไซต์ของคุณให้ดียิ่งขึ้น
ทุกอย่างเป็นไปได้ด้วยปลั๊กอินเพียงตัวเดียว Element Pack Pro
หวังว่าคุณจะสนุกกับบล็อกนี้
ขอแสดงความนับถืออย่างสูง
BdThemes