การออกแบบเว็บไซต์ที่ดูเป็นมืออาชีพไม่ได้มีไว้สำหรับทุกคนโดยเฉพาะอย่างยิ่งเมื่อเราทุกคนรู้สึกว่าคุณจำเป็นอย่างยิ่งที่จะต้องเป็นมืออาชีพในการเขียนโค้ดและการออกแบบเว็บไซต์ ปัจจุบันเราเห็นเครื่องมือใหม่ ๆ เกิดขึ้นสำหรับระบบนิเวศของ WordPress เพื่อที่จะมอบโซลูชันที่ง่ายกว่าเดิมในการออกแบบเว็บไซต์และสิ่งนี้อยู่ในมือของผู้เริ่มต้นส่วนใหญ่
เกี่ยวกับการออกแบบเค้าโครงของ WordPress เราต้องส่งปลั๊กอินไปแล้ว แต่งภาพซึ่งเป็นหนึ่งในเครื่องมือที่ดีที่สุดในการออกแบบเลย์เอาต์ อย่างไรก็ตาม ควรสังเกตว่าวิธีนี้ไม่เหมาะสำหรับทุกคน นี่คือเหตุผลว่าทำไมในบทช่วยสอนนี้ เราจะแนะนำให้คุณรู้จักกับ .มากขึ้น WordPress ปลั๊กอิน Elementor ซึ่งก็คือ a WordPress ปลั๊กอิน freemium (ฟรี แต่ขยายได้ภายใต้การสมัครสมาชิก)
สถานที่รับ Elementor สำหรับ WordPress
เรากำลังพิจารณาอย่างจริงจังเพื่อให้คุณเห็นศักยภาพของปลั๊กอินและโซลูชันฟรีจะช่วยให้คุณเริ่มต้นได้โดยไม่ต้องเสียเงิน โซลูชันฟรีนี้มีให้ที่ WordPress.org เป็น WordPress ปลั๊กอินหลังได้รับการติดตั้งเหมือนอย่างอื่น ปลั๊กอินจากแผงควบคุม.
หากปลั๊กอินจัดการเพื่อตอบสนองคุณอย่างสมบูรณ์คุณจะสามารถขอรับใบอนุญาตที่สมบูรณ์พร้อมฟังก์ชั่นทั้งหมดในเว็บไซต์ องค์ประกอบอย่างเป็นทางการ.
คุณสมบัติหลักของ Elementor
ก่อนที่จะเริ่มบทช่วยสอนด้วยภาพรวมของปลั๊กอินก่อนอื่นเราจะแนะนำคุณเกี่ยวกับคุณสมบัติหลักของปลั๊กอิน (เวอร์ชันฟรีและเวอร์ชันเต็ม)
| รุ่นฟรี | เวอร์ชั่นเต็ม |
|---|---|
| หลายคอลัมน์ | เมนูนำทางบทความ |
| โมดูลข้อความ, ชื่อเรื่อง | โมดูล WooCommerce (สินค้าหมวด) |
| โมดูลวิดีโอ, รูปภาพ, ม้าหมุน, แกลเลอรี่, Soundcloud | การรวม Facebook (หน้า, ปุ่ม, ความคิดเห็น) |
| แชร์โมดูล | ราคาตาราง |
| โมดูล HTML | Portfolio, Form |
| โมดูลสำหรับเครื่องมือ WordPress | โมดูลการวิจัย |
โปรดทราบว่านี่เป็นรายการคุณลักษณะต่างๆที่ปลั๊กอินนำเสนอโดยละเอียด คุณจะพบรายละเอียดเพิ่มเติมใน สำรวจเว็บไซต์ของพวกเขา.
เริ่มต้นใช้ Elementor
เราจะไม่กล่าวถึงขั้นตอนการติดตั้งทั้งหมดที่นี่ เนื่องจากนี่เป็นปลั๊กอิน WordPress ขั้นตอนการติดตั้งจึงได้อธิบายไว้แล้ว บทช่วยสอนก่อนหน้า. อย่างไรก็ตามหลังการติดตั้งคุณจะเข้าสู่โฮมเพจของปลั๊กอิน
หากคุณมีหน้านี้บนหน้าจอแสดงว่าคุณได้ติดตั้ง .อย่างถูกต้อง ปลั๊กอินองค์ประกอบ. เรากำลังใช้เวอร์ชันเต็มสำหรับบทช่วยสอนนี้ แต่อินเทอร์เฟซไม่ควรแตกต่างจากเวอร์ชันฟรีมากเกินไป
ก่อนไปที่อินเทอร์เฟซการแก้ไขฉันจะเชิญคุณให้ลงทะเบียนใบอนุญาตของคุณ สิ่งนี้ใช้ได้เฉพาะกับผู้ที่เลือกใช้เวอร์ชันเต็มเท่านั้น หากคุณมีเวอร์ชันฟรีคุณสามารถไปที่หัวข้อถัดไป ในการลงทะเบียนใบอนุญาตของคุณคุณจะสังเกตเห็นการแจ้งเตือนบน WordPress ซึ่งจะแจ้งให้คุณลงทะเบียนใบอนุญาตของคุณ
เพียงแค่คลิกเพื่อไปที่หน้าลงทะเบียนและคลิกที่ กระตุ้น.
โดยปกติคุณจะต้องมีหน้ายืนยันหากใบอนุญาตของคุณถูกต้อง
หากคุณไม่มาที่หน้านี้ฉันขอเชิญคุณติดต่อผู้พัฒนาปลั๊กอินเพื่อขอข้อมูลเพิ่มเติม ความช่วยเหลือเกี่ยวกับปัญหา.
วิธีการใช้ Elementor
Elementor ทำงานบนเพจและโพสต์บน WordPress ไม่ว่าคุณจะใช้อินเทอร์เฟซแบบคลาสสิกหรืออินเทอร์เฟซ Gutenberg ใหม่คุณจะเห็นปุ่มที่จะแจ้งให้คุณใช้ตัวสร้าง Elementor
ในทางปฏิบัติคุณไม่จำเป็นต้องแก้ไขโพสต์ของคุณโดยใช้ Elementor เสมอไป ฉันจึงขอเชิญชวนให้คุณใช้ปลั๊กอินเฉพาะในหน้า เมื่อคลิกที่ปุ่มคุณจะเข้าถึงอินเทอร์เฟซการออกแบบ Elementor ซึ่งให้บรรยากาศของเดจาวู (สำหรับผู้ที่ใช้ WordPress Customizer)
คุณจึงมีตัวควบคุมต่างๆที่ปลั๊กอินนำเสนอทางด้านซ้ายและทางด้านขวาคุณจะมีตัวอย่างการเปลี่ยนแปลงของคุณ ในบทช่วยสอนนี้เราใช้ธีม Twenty Sixteen WordPress
ส่วน Elementor
ส่วนต่างๆ ใน Elementor คือกลุ่มของบล็อกฟังก์ชันที่ Elementor นำเสนอ จำนวนส่วนขึ้นอยู่กับว่าคุณกำลังใช้เวอร์ชันเต็มหรือไม่และคุณกำลังใช้ WooCommerce, Yoast SEO หรือปลั๊กอินอื่นๆ ที่รองรับ คุณจะมีส่วนต่างๆ บนอินเทอร์เฟซของคุณไม่มากก็น้อย ขึ้นอยู่กับเงื่อนไขเหล่านี้ เนื่องจากเราใช้เวอร์ชันเต็มกับปลั๊กอิน WooCommerce เปิดใช้งานแล้ว นี่คือหน้าตาอินเทอร์เฟซของเรา
วิธีการวางบล็อก Elementor
เมื่อคุณขยายส่วนคุณจะพบ Elementor Blocks บล็อก Elementor ต่างๆวางโดย "ลากและวาง" บนพื้นที่ที่เน้นด้วยเส้นประ
วิธีเลือกเค้าโครงใน Elementor
ก่อนที่จะเพิ่มบล็อกใน Elementor คุณต้องจำไว้ว่าให้เลือกเค้าโครงโดยคลิกปุ่ม“ +” ในส่วนที่ไฮไลต์
ขึ้นอยู่กับความต้องการของคุณคุณจะเลือกเค้าโครงที่เหมาะสมที่สุด เมื่อคุณเลือกเค้าโครงแล้วคุณจะมีการนำเสนอส่วนนั้นบนพื้นที่เดียวกันที่ไฮไลต์ไว้ ส่วนนี้จะแสดงจำนวนคอลัมน์เดียวกันกับที่คุณเลือก ในกรณีของฉันฉันเลือกคอลัมน์ที่มี 3 คอลัมน์
บล็อกต่างๆที่มีเครื่องหมาย "+" อยู่ด้านในคือพื้นที่ที่สามารถรับบล็อก Elementor ได้ หากคุณเพิ่มบล็อก Elementor โดยไม่เลือกเค้าโครงก่อนเค้าโครงคอลัมน์เดียวจะถูกเลือกโดยค่าเริ่มต้น
คุณสามารถจัดเรียงส่วนองค์ประกอบใหม่ได้โดยใช้หลักการ "ลากและวาง" เดียวกัน คุณยังสามารถลบส่วนได้หากคุณไม่ต้องการใช้อีกต่อไป
นี่คือตัวอย่างของส่วนที่มี 2 บล็อกคือบล็อกหัวเรื่องและบล็อกข้อความ
วิธีใช้เครื่องมือออกแบบอื่น ๆ
หลังจากออกแบบเสร็จแล้วสิ่งหนึ่งที่คุณต้องทำคือบันทึกงานของคุณ คุณจะพบตัวเลือกนี้ที่ด้านล่างสุดของส่วนที่แสดงส่วนของ Elementor ต่างๆ
คุณมีทางเลือกระหว่างการบันทึกโดยตรง (เผยแพร่) และบันทึกเป็นฉบับร่างหรือเป็นเทมเพลต เราจะสำรวจจุดต่างๆเหล่านี้เพิ่มเติมในภายหลัง
ในระหว่างการออกแบบของคุณคุณอาจต้องการดูตัวอย่างการเปลี่ยนแปลงโดยไม่ต้องใช้อินเทอร์เฟซเพิ่มเติมของ Elementor สิ่งที่คุณต้องทำคือคลิกที่ไอคอนรูปตา
มันเกิดขึ้นว่าในระหว่างการออกแบบมีข้อผิดพลาดเกิดขึ้น (การกระทำโดยไม่สมัครใจ) ในกรณีนี้ Elementor นำเสนอประวัติซึ่งช่วยให้คุณสามารถนำทางการกระทำทั้งหมดของคุณ
สิ่งนี้จะช่วยให้คุณย้อนกลับไปได้ง่าย
ตัวเลือก“ เบราว์เซอร์” ซึ่งอยู่ก่อนปุ่มประวัติช่วยให้คุณสามารถแก้ไขส่วนต่างๆเพิ่มเติมที่เกี่ยวข้องกับเบราว์เซอร์ที่ผู้เยี่ยมชมใช้ ตัวเลือกนี้ช่วยให้คุณเข้าถึงการแก้ไขขั้นสูงของโครงสร้างส่วน (ความกว้างของคอลัมน์) คุณต้องทำการเปลี่ยนแปลงที่นี่อย่างระมัดระวัง
ปุ่ม "การตั้งค่า" ช่วยให้คุณสามารถแก้ไขตัวเลือกบางอย่างสำหรับเพจเช่นชื่อภาพที่โดดเด่นหรือสถานะอื่น ๆ
สำหรับบทช่วยสอนนี้เราจะสำรวจ Elementor เพิ่มเติมในบทช่วยสอนถัดไป อย่าลังเลที่จะดูไฟล์ เว็บไซต์อย่างเป็นทางการ ซึ่งมีตัวอย่างที่ประสบความสำเร็จมากขึ้น
