วิธีสร้างหน้า Landing Page ด้วย Elementor และ PowerPack

เผยแพร่แล้ว: 2019-05-28
องค์ประกอบ powerpack
ติดตาม @Cloudways

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

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

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

  • Elementor คืออะไร?
  • คุณสมบัติของ Elementor
  • รุ่น Lite และ Pro
  • PowerPack สำหรับ Elementor
  • การสร้างหน้า Landing Page

Elementor คืออะไร?

Elementor คืออะไร

Elementor เป็นปลั๊กอิน Page Builder ยอดนิยมสำหรับ WordPress Elementor มีบล็อกเนื้อหาที่พร้อมใช้งานที่เรียกว่า Widgets พร้อมด้วยองค์ประกอบโครงสร้างพื้นฐาน เช่น ส่วนและคอลัมน์

คุณสามารถลากและวางวิดเจ็ตเหล่านี้บนหน้าใดก็ได้บนเว็บไซต์ WordPress ของคุณ และสร้างเค้าโครงแบบกำหนดเองได้ตามความต้องการของคุณ

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

คุณสมบัติของ Elementor

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

รวดเร็วและใช้งานง่าย

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

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

เทมเพลตหน้าที่ออกแบบไว้ล่วงหน้า

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

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

เต็มไปด้วยวิดเจ็ต

เต็มไปด้วยวิดเจ็ต

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

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

Elementor Pop up Builder

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

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

การตั้งค่าส่วนกลาง

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

สร้างส่วนต่างๆ ของธีม เช่น ส่วนหัว ส่วนท้าย คลังเก็บ เป็นต้น

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

เนื้อหาแบบไดนามิก

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

รุ่น Lite และ Pro

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

PowerPack สำหรับ Elementor

Elementor เป็นแพ็คเกจทั้งหมดอย่างแน่นอน เครื่องมือเดียวที่คุณต้องใช้เพื่อเริ่มออกแบบหน้าเว็บด้วยมุมการเรียนรู้ที่น้อยที่สุด

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

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

PowerPack สร้างขึ้นโดยทีมนักพัฒนาและนักออกแบบ WordPress ผู้เชี่ยวชาญโดยคำนึงถึงประสิทธิภาพ ปลั๊กอินได้รับการเข้ารหัสอย่างดีและอัปเดตเป็นประจำเพื่อให้เข้ากันได้กับ Elementor และ WordPress . เวอร์ชันล่าสุด

มาดูกันว่าคุณสามารถใช้ส่วนเสริม Elementor และ PowerPack ร่วมกันเพื่อสร้างหน้าเว็บที่ยอดเยี่ยมได้อย่างไร

การสร้างหน้า Landing Page

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

โปรดตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งทั้ง Elementor และ PowerPack บนไซต์ของคุณ คุณสามารถรับเวอร์ชันฟรีได้จากลิงก์ด้านล่าง:

  1. Elementor
  2. PowerPack Lite สำหรับ Elementor

การสร้างเพจด้วย Elementor

ลงชื่อเข้าใช้แดชบอร์ดผู้ดูแลระบบ WordPress แล้วคลิกตัวเลือก เพิ่มใหม่ ใต้ หน้า ตอนนี้ให้ชื่อ/ชื่อหน้าของคุณแล้วคลิกปุ่ม แก้ไขด้วย Elementor

ในบทช่วยสอนนี้ เรากำลังสร้างหน้า Landing Page สำหรับร้านพิชซ่า ดังนั้นเราจะตั้งชื่อเพจของเราตามนั้น ผลลัพธ์สุดท้ายของเราควรมีลักษณะดังนี้:

หน้า Landing Page สำหรับร้านพิชซ่า

มาเริ่มกันที่ส่วนแรก ก่อนที่เราจะทำสิ่งนี้ ให้เปลี่ยนเลย์เอาต์เป็น Elementor Canvas โดยคลิกที่ไอคอนการตั้งค่าเล็กๆ ที่มุมล่างซ้ายในตัวแก้ไข

ขั้นตอนที่ 1: หมวดฮีโร่

ส่วนฮีโร่ประกอบด้วยภาพพื้นหลัง วิดเจ็ตส่วนหัวสองส่วน และปุ่ม CTA

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

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

เรามีพื้นหลังพร้อม ตอนนี้ มาเพิ่มชื่อและปุ่มในส่วนฮีโร่ของเรากัน

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

มีการดัดแปลงอื่น ๆ อีกมากมายเพื่อให้ชื่อฮีโร่ของคุณในแบบที่คุณต้องการ

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

ตอนนี้เรา จะเพิ่มปุ่ม CTA .

ลากและวางวิดเจ็ตปุ่ม Elementor ในส่วนด้านล่างวิดเจ็ตหัวเรื่อง ตอนนี้เราจะเริ่มเปลี่ยนการตั้งค่าสำหรับปุ่ม

นี่คือการเปลี่ยนแปลงที่ฉันได้ทำกับปุ่ม:

  • เปลี่ยนข้อความเป็น Order Now!
  • จัดตำแหน่งปุ่มให้อยู่ตรงกลาง
  • เพิ่ม ลิงค์ CTA
  • เปลี่ยนรูปแบบตัวอักษร เป็น Elise; 24;600 สำหรับแบบอักษร ขนาด และน้ำหนักตามลำดับ
  • เปลี่ยนสีพื้นหลังเป็นสีแดง ( #ff0000 ) และสีแบบอักษรเป็นสีขาว ( #ff0000 )
  • เพิ่มช่องว่างภายใน 18, 40, 18, 40 สำหรับบน ขวา ล่าง ซ้าย ตามลำดับ

หลังจากทำการเปลี่ยนแปลงแล้ว นี่คือสิ่งที่ส่วนฮีโร่จะดูเหมือน

ขั้นตอนที่ 2: ส่วนเกี่ยวกับ

ตอนนี้เราจะทำงานในส่วนเกี่ยวกับ ไปข้างหน้า และเพิ่มโครงสร้างสองคอลัมน์ลงในหน้าโดยคลิกที่ไอคอน "+"

ส่วนเกี่ยวกับ

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

เพียง เริ่มลากและวางวิดเจ็ต ในส่วนนั้นแล้วแก้ไขให้ดูเหมือนกับรูปภาพที่ให้ไว้ด้านบน เพิ่มชื่อและ เปลี่ยนรูปแบบตัวอักษร เหมือนกัน

เริ่มลากและวางวิดเจ็ต-เนื้อหา

ซึ่งจะมีลักษณะดังนี้:

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

เริ่มลากและวางวิดเจ็ต

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

เมื่อคุณทำการเปลี่ยนแปลงเสร็จแล้ว คอลัมน์ด้านซ้ายของส่วนเกี่ยวกับควรมีลักษณะดังนี้

วิดเจ็ตม้าหมุนรับรอง

สำหรับคอลัมน์ทางขวา ให้เพิ่มพื้นหลังเพื่อเพิ่มคอนทราสต์เล็กน้อยให้กับส่วน

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

จัดแนวคอลัมน์ด้านขวาให้อยู่ตรง กลาง จาก คอลัมน์แก้ไข> เลย์เอาต์>จัดแนวแนวตั้ง และคุณก็มีส่วนเกี่ยวกับพร้อมแล้ว!

นี่คือผลลัพธ์สุดท้ายของส่วนเกี่ยวกับ:

จัดแนวตั้ง

ขั้นตอนที่ 3: “รู้เพิ่มเติม” ส่วน CTA

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

ดังนั้นเราจึงต้องการให้ผลลัพธ์ของเรามีลักษณะดังนี้:

รู้เพิ่มเติม” ส่วน CTA

คุณสังเกตเห็นสิ่งที่คล้ายกันที่นี่หรือไม่?

ใช่! ส่วนหัว ตัวแก้ไขข้อความนั้นคล้ายกับที่เราสร้างไว้ก่อนหน้านี้ ดังนั้น แทนที่จะออกแบบวิดเจ็ตใหม่ทั้งหมด เราเพียงแค่ทำซ้ำ แล้วลากไปวาง

มาทำกัน!

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

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

นี่คือลักษณะของส่วน:

เพียงแค่ทำซ้ำพวกเขา

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

ลากและวางวิดเจ็ตรูปภาพ

ขั้นตอนที่ 4: ส่วนติดต่อ/สั่งซื้อ

ส่วนติดต่อสั่งซื้อ

นี่คือส่วน CTA ซึ่งจะช่วยผู้ใช้ในการสั่งซื้อ ตอนนี้ส่วนนี้ทั้งหมดควรมีอะไรบ้าง? มาดูกันว่าเราตั้งเป้าจะทำอะไรที่นี่

เราจำเป็นต้องสร้างสองหัวเรื่องและวิดเจ็ตแก้ไขข้อความ แบบฟอร์มการติดต่อ และวิดเจ็ตเมนูรายการราคาโดย PowerPack

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

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

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

หากคุณใช้ปลั๊กอินแบบฟอร์มการติดต่อใดๆ เช่น Gravity Forms, WPForms, Ninja Forms เป็นต้น คุณสามารถใช้วิดเจ็ต form styler ของ PowerPack เพื่อจัดรูปแบบแบบฟอร์มด้วย Elementor

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

วิดเจ็ตเมนูราคา

เข้าสู่การแจกทันที!

PowerPack Giveaway โฮสต์โดย Cloudways

ไขลานขึ้น!

หลังจากทำการเปลี่ยนแปลงทั้งหมดแล้ว เลย์เอาต์ทั้งหมดของเราจะเป็นแบบนี้

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

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