วิธีสร้างโฮมเพจที่สวยงามโดยใช้ Elementor และ Genesis

หากคุณต้องการสร้างโฮมเพจที่สวยงามโดยใช้ปลั๊กอิน Elementor Pro WordPress และธีมย่อยของ Genesis นี่คือคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการทำ ขั้นแรก คุณจะต้องติดตั้งและเปิดใช้งาน Genesis Framework บนเว็บไซต์ WordPress ของคุณ จากนั้น คุณจะต้องติดตั้งและเปิดใช้งานปลั๊กอิน Elementor Pro เมื่อเปิดใช้งานทั้งสองสิ่งนี้ คุณจะต้องสร้างหน้าใหม่ใน WordPress และเลือกเทมเพลต “ElementorCanvas” จากแผงแอตทริบิวต์ของหน้า ตอนนี้คุณสามารถเริ่มสร้างหน้าแรกของคุณด้วย Elementor เพียงลากและวางองค์ประกอบที่คุณต้องการใช้ลงในพื้นที่ผ้าใบ คุณสามารถเพิ่มข้อความ รูปภาพ วิดีโอ และอื่นๆ ของคุณเองได้ เมื่อคุณพอใจกับหน้าแรกแล้ว เพียงคลิกปุ่ม "เผยแพร่" และหน้าแรกใหม่ของคุณจะพร้อมใช้งาน

คำถามส่วนใหญ่ที่ฉันได้รับเกี่ยวกับการใช้ Elementor ใน Genesis Framework คำตอบง่ายๆคือใช่ อย่างไรก็ตาม มีธีมย่อยที่ไม่ได้รับการอัปเดตเพื่อรองรับการอัปเดต WordPress Core และ Gutenberg ล่าสุด แม้ว่าคุณจะได้ติดตั้งสิ่งนี้บนอุปกรณ์ของคุณ คุณก็ยังสามารถใช้ตัวสร้างเพจของ Elementor กับธีม Genesis ใดๆ ได้ ไม่ว่าคุณจะใช้ตัวสร้างเพจใด Elementor หรือ Genesis Pro คุณก็จะได้รับประสบการณ์ที่ยอดเยี่ยม ต้องอัปเดต Genesis Framework เพื่อใช้งาน อย่าลังเลที่จะถามคำถามที่คุณมี รวมทั้งขอตัวอย่างวิธีการทำงาน

Elementor ทำงานร่วมกับ Genesis Framework ได้หรือไม่?

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

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

Elementor: กรอบงานสำหรับการเปลี่ยนแปลง

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

ฉันจะเปิดใช้งานธีม Genesis Child ได้อย่างไร

ในการเปิดใช้งานธีมย่อยของ Genesis คุณต้องติดตั้ง Genesis Framework ก่อน เมื่อติดตั้งเฟรมเวิร์กแล้ว คุณสามารถเปิดใช้งานธีมย่อยได้จากเมนู ลักษณะที่ปรากฏ > ธีม ในแดชบอร์ด WordPress ของคุณ

มีหลายคนที่กลัวความคิดที่จะติดตั้งกรอบงานปฐมกาลและธีมลูก เป็นงานง่าย ๆ ที่จะทำให้เสร็จ คุณยังสามารถใช้ WordPress ได้โดยไม่ต้องติดตั้งธีมใดๆ ถูกกำหนดให้เป็นธีมที่ใช้งานได้สูงซึ่งอิงตามกรอบงาน ธีมลูกเป็นสิ่งที่รวมอยู่ใน ธีมหลัก ธีมลูกของ Genesis เหมือนกับธีม WordPress อื่นๆ ทั้งหมด ความแตกต่างหลักคือความจำเป็นในการอัปโหลดและจัดเก็บธีมหลักและธีมย่อยในไดเร็กทอรีธีมของ WordPress Genesis Framework และ Child Theme สามารถติดตั้งได้ด้วยการผูกปมเล็กน้อยเท่านั้น

วิธีปรับ Css ของคุณสำหรับธีม Genesis ที่กำหนดเอง

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

ฉันจำเป็นต้องใช้ธีมลูกกับ Elementor หรือไม่

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

เมื่อใดควรใช้ธีมเด็ก (และเมื่อไม่ใช้!)

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

ธีมลูกของ Elementor

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

คุณต้องการธีมลูกสำหรับ Hello Elementor หรือไม่?

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

ความแตกต่างระหว่างธีม WordPress และธีมลูกคืออะไร?

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

วิธีใช้ธีมลูกใน WordPress

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

ธีมย่อยจะปรากฏในลักษณะเดียวกับธีมหลัก แต่มีการยืมคุณลักษณะและลักษณะที่ปรากฏ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับธีมย่อยของ WordPress โปรดอ่านบทความของเราเกี่ยวกับ WordPress Theme คืออะไร? หากธีมลูกของคุณรวมเป็นไฟล์ zip คุณต้องคลิกปุ่ม "อัปโหลดธีม" หากธีมหลักพร้อมใช้งานจากไดเร็กทอรีธีม WordPress.org การติดตั้งจะเกิดขึ้น มันจะแจ้งให้คุณทราบว่าคุณต้องติดตั้งธีมหลักด้วยตนเองซึ่งเป็นส่วนหนึ่งของกระบวนการตั้งค่า หลังจากติดตั้งทั้งธีมหลักและธีมย่อย คุณจะสามารถเปิดใช้งานธีมย่อยได้ คุณไม่จำเป็นต้องเปิดใช้งานธีมหลักเพื่อใช้ธีมลูก นอกจากนี้ เราได้สร้างคำแนะนำเกี่ยวกับวิธีค้นหาไฟล์ที่คุณต้องการแก้ไขในธีม WordPress เมื่อกลับไปที่แดชบอร์ด WordPress คุณจะสามารถเข้าถึงแท็บลักษณะที่ปรากฏและเลือกธีมลูกของคุณ

วิธีการติดตั้งธีมลูกด้วย Oceanwp

คุณสามารถติดตั้งธีมลูกได้โดยไปที่แดชบอร์ดของ WordPress (การตั้งค่าเดิม: แผงธีม) จากนั้นให้บันทึกการตั้งค่าของคุณในไฟล์ a.dat และส่งออกไปยังคอมพิวเตอร์ของคุณ จากนั้นคุณสามารถถอนการติดตั้ง OceanWP Child Theme

วิธีแก้ไขธีม WordPress ด้วย Elementor

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

วิธีเปลี่ยนธีม WordPress เป็น Astra (ใช้ Elementor Pro Builder ) - นี่คือกระบวนการทีละขั้นตอน การเดินทาง หนังสือ และอาหารเป็นหัวข้อที่ครอบคลุม ระหว่างวันที่ 20 มิถุนายน 2020 ถึง 31 ธันวาคม 2020 ฉันพบว่าธีมเก่าเลิกใช้แล้วและไม่ได้รับการสนับสนุน ฉันรู้ว่าฉันต้องเปลี่ยนธีมเมื่อหนึ่งเดือนก่อน และในเดือนที่ผ่านมา ฉันกำลังดำเนินการแก้ไขอยู่ ธีมแบบชำระเงินที่พบบ่อยที่สุดมีราคาตั้งแต่ 20 ถึง 60 ดอลลาร์ บล็อกเกอร์การเดินทางส่วนใหญ่ในปัจจุบันใช้ธีม Generate Press, Avada, StudioPress, Genesis หรือ Astra หรือ OceanWp การเปลี่ยนธีม WordPress ส่งผลต่อเนื้อหาอย่างไร

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

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

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

วิธีใช้ตัวกำหนดค่าธีมลูก

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

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

เมนู วิดเจ็ต และการตั้งค่าการปรับแต่งอื่นๆ สามารถคัดลอกจากธีมหลักไปยังธีมย่อยได้ หลังจากที่คุณเลือกการปรับแต่งที่จำเป็นทั้งหมดแล้ว ให้คลิกปุ่มสร้างธีมลูกใหม่ รายการไฟล์เทมเพลตที่แก้ไขได้จะแสดงบนแท็บไฟล์ แบบสอบถาม/ตัวเลือกสองแท็บ และคุณสมบัติ/ค่าสามารถใช้เพื่อค้นหาสไตล์ที่เหมาะสมจากธีมหลักและแก้ไขได้ ปัญหาในการค้นหาคุณสมบัติ CSS และตัวเลือกเป็นเรื่องธรรมดาใน ธีมลูกแบบแมนนวล ปลั๊กอิน Child Theme Configurator ทำให้ปัญหานี้แก้ไขได้ง่ายที่สุด การนำเข้าแบบอักษรของเว็บใดๆ เช่น แบบอักษรของ Google ภายใต้ตัวเลือก #import แบบสอบถาม สามารถทำได้ภายใต้แท็บแบบอักษรของเว็บ

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

ฉันสามารถลบตัวกำหนดค่าธีมลูกได้หรือไม่

ในกรณีที่คุณลืมปลั๊กอินตัวแก้ไขธีมหลังจากสร้างธีมย่อย ข้อมูลจะไม่สูญหาย

Genesis Custom Child Theme

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

กรอบงาน Genesis จาก StudioPress นั้นคล้ายกับบล็อกเลโก้มาก ทำให้ง่ายต่อการทำงานและย้ายองค์ประกอบต่างๆ ของธีม ธีมทั้งหมดของเราสร้างด้วยธีม Genesis Child ต้องติดตั้งธีม Genesis เป็นธีมหลักของบุตรหลานเมื่อสร้างธีม หากต้องการเพิ่มโค้ดติดตาม Google Analytics ลงในไซต์ของคุณ ให้ไปที่หน้าการตั้งค่าธีม Genesis หากคุณกำลังใช้ปลั๊กอิน คุณไม่จำเป็นต้องป้อนรหัสติดตามในส่วนหัวของคุณด้วยตนเอง ปลั๊กอิน Genesis Visual Hook Guide จะแสดงส่วนต่างๆ ของหน้าและช่วยในการกำหนดว่าหน้าที่ใดอยู่ที่ใด

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

ปลั๊กอินสามารถเปลี่ยนเครดิตส่วนท้ายได้ในเวลาไม่กี่นาที Simple Edits เป็นโซลูชันที่สมบูรณ์แบบสำหรับสถานการณ์ประเภทนี้ ในตัวอย่างขนาดเล็ก คุณสามารถอัปเดตส่วนท้ายด้วยข้อมูลล่าสุดสำหรับธีมที่หลากหลาย หากคุณใช้ Simple Edits คุณสามารถแก้ไข post-info (byline) และ post-meta ของธีม Genesis ได้ คุณสามารถแก้ไขพื้นที่เหล่านี้ได้อย่างง่ายดายโดยใช้รหัสย่อ HTML และข้อความที่ให้ไว้