วิธีแปลง PSD เป็น WordPress โดยใช้ Elementor & WidgetKit

คุณกำลังมองหาโซลูชันการแปลง PSD เป็น WordPress หรือไม่? ต้องการแปลงเว็บไซต์ที่พร้อมใช้งาน PSD เป็น WordPress แต่ไม่รู้ว่าต้องทำอย่างไร โอเค ฉันสามารถช่วยคุณในเรื่องนี้ได้

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

ในบทความนี้ ผมจะแสดงให้คุณเห็น “วิธีการแปลง PSD เป็น WordPress โดยใช้ Elementor & WidgetKit” ทีละขั้นตอน

เรามาดูกันว่าเป็นอย่างไร

การเลือกการออกแบบ PSD

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

คุณสามารถเลือกการออกแบบ PSD ที่คุณต้องการได้จากคอลเลกชัน PSDHUB ที่กว้างขวาง

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

ตรวจสอบปัจจัยต่อไปนี้ในขณะที่คุณเลือกการออกแบบ PSD

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

ที่นี่เราใช้ Eventia-Conference and Event Management Template จาก PSDHUB

ติดตั้ง WordPress

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

WordPress.org มีบทความโดยละเอียดเกี่ยวกับ “วิธีการติดตั้ง WordPress” ที่หน้าสนับสนุนของเว็บไซต์ อย่างไรก็ตาม; นี่คือคำแนะนำพื้นฐานของการติดตั้ง WordPress สำหรับคุณ

1. ขั้นแรกให้ดาวน์โหลดและเปิดเครื่องรูดแพ็คเกจ WordPress
2. สร้างฐานข้อมูลสำหรับ WordPress บนเว็บเซิร์ฟเวอร์ของคุณ เช่นเดียวกับ MySQL
3. อัปโหลดไฟล์ WordPress ไปยังตำแหน่งที่ต้องการบนเว็บเซิร์ฟเวอร์ของคุณ:
4. หากคุณต้องการรวม WordPress เข้ากับรูทของโดเมนของคุณ ให้ย้ายหรืออัปโหลดเนื้อหาทั้งหมดของไดเร็กทอรี WordPress ที่คลายซิปลงในไดเร็กทอรีรากของเว็บเซิร์ฟเวอร์ของคุณ
5. หากคุณต้องการให้มีการติดตั้ง WordPress ของคุณในไดเรกทอรีย่อยบนเว็บไซต์ของคุณ ให้สร้างไดเร็กทอรีบล็อกบนเซิร์ฟเวอร์ของคุณและอัปโหลดเนื้อหาของแพ็คเกจ WordPress ที่คลายซิปไปยังไดเร็กทอรีผ่าน FTP
6. เรียกใช้สคริปต์การติดตั้ง WordPress โดยเข้าถึง URL ในเว็บเบราว์เซอร์

แค่นั้นแหละ! ตอนนี้ควรติดตั้ง WordPress แล้ว

ติดตั้ง Elementor

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

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

มีสองวิธีในการติดตั้งปลั๊กอิน Elementor ขั้นตอนการติดตั้งอธิบายไว้ด้านล่าง

ผ่านเว็บไซต์ Elementor

• ขั้นแรกไปที่ elementor.com แล้วคลิก ดาวน์โหลด
• ในแดชบอร์ดของ WordPress คลิก Plugins > Add New
• คลิก อัปโหลดปลั๊กอิน และเลือกไฟล์ที่คุณดาวน์โหลดสำหรับ Elementor

ผ่านแดชบอร์ด WordPress

• จากแดชบอร์ด ให้คลิก ปลั๊กอิน > เพิ่มใหม่
• ในช่องค้นหา ให้ป้อน Elementor แล้วเลือกตัวสร้างหน้า Elementor เพื่อติดตั้ง
• หลังการติดตั้ง คลิก เปิดใช้งาน

นี่คือทั้งหมดที่คุณต้องทำเพื่อติดตั้งตัวสร้างเพจ Elementor คุณสามารถติดตามวิดีโอด้านล่างเพื่อทราบข้อมูลเพิ่มเติมเกี่ยวกับขั้นตอนการติดตั้ง

ติดตั้ง WidgetKit

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

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

ติดตั้ง WidgetKit ผ่านแดชบอร์ด WordPress

• จาก แดชบอร์ด ให้คลิก ปลั๊กอิน > เพิ่มใหม่
• ป้อน WidgetKit ในช่อง ค้นหา และเลือก WidgetKit สำหรับ Elementor เพื่อติดตั้ง
• หลังจากติดตั้งสำเร็จ ให้คลิก เปิดใช้งาน

WidgetKit พร้อมใช้งานกับ Elementor แล้ว หากคุณมีความสับสนใด ๆ เพียงทำตามวิดีโอ สิ่งนี้จะช่วยคุณเกี่ยวกับวิธีการใช้ WidgetKit

แปลง PSD ของคุณเป็น WordPress

ส่วนการติดตั้งเสร็จเรียบร้อยแล้ว ตอนนี้ได้เวลาแปลง PSD เป็น WordPress Elementor และ WidgetKit มีผู้ให้บริการ PSD มากมายสำหรับ WordPress ที่กำลังให้ PSD กับ WordPress รวมถึงการแปลง PSD เป็น Joomla อย่างไรก็ตาม; คุณสามารถออกแบบวิธีที่คุณต้องการได้ ในที่นี้ เราจะแสดงวิธีพื้นฐานในการแปลง PSD เป็น WordPress

นอกจากนี้ คุณยังสามารถเลือกธีมและเทมเพลตสำเร็จรูปของเราได้จากคอลเลกชั่น WordPress Themes & Plugins ที่มีให้เลือกมากมาย

พยายามทำตามลำดับขณะออกแบบเค้าโครงจาก PSD สิ่งนี้จะช่วยคุณได้มาก

สร้างเพจใหม่

สิ่งแรกที่คุณต้องทำคือสร้างหน้าใหม่จากแดชบอร์ด WordPress จากด้านซ้ายบนของแดชบอร์ด WordPress คลิก Pages > Add New

จากนั้นคลิกแก้ไขด้วย Elementor เพื่อเข้าสู่ Elementor Page Builder คุณจะเห็นแผง Elementor ดังที่แสดงด้านล่าง

สร้างเพจของคุณ จากไฟล์ PSD

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

เพิ่มส่วนหัว

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

เพิ่มส่วนฮีโร่

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

สำหรับตัวเลือกตัวนับที่นี่ เราใช้องค์ประกอบ WidgetKit Countdown ผลลัพธ์และตัวเลือกการแก้ไขอยู่ด้านล่าง

เพิ่มส่วนภายใน

ถึงเวลาออกแบบส่วนด้านในแล้ว ที่นี่เราใช้องค์ประกอบ Elementor เพื่อเพิ่มพื้นหลังและข้อความระหว่างสองคอลัมน์

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

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

ในส่วนนี้ เราเพียงแค่เพิ่มไอคอนสุ่มจาก PSD และให้พาดหัวข่าว

เราไม่สามารถทำทุกอย่างด้วย Elementor ในกรณีเช่นนี้เราจะทำอย่างไร? เราใช้ addon จากธีมที่แตกต่างกันหรือสร้างส่วนเสริมของเราเอง นี่เป็นเรื่องปกติในขณะที่ออกแบบธีม PSD เป็น WordPress ที่นี่เราใช้ Schedule Addon จาก Eventia Theme

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

สำหรับส่วนท้ายที่นี่ เราใช้ Theme Eventia โดย Themexpert ที่มีอยู่เหมือนที่เราทำก่อนส่วนหัว ที่นี่เราได้รับไอคอนไซต์โซเชียลหลายอันและปุ่มสมัครรับข้อมูล

ดูตัวอย่างและเผยแพร่เพจของคุณ

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

คำสุดท้าย

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