Elementor Cloud: วิธีสร้างเว็บไซต์ใน 3 นาที

Elementor Cloud: วิธีสร้างเว็บไซต์ใน 3 นาที

ในบทช่วยสอน WordPress นี้ เรียนรู้วิธีสร้างเว็บไซต์ด้วย Elementor ในเวลาเพียง 3 นาทีด้วย Elementor Cloud ซึ่งเป็นโซลูชันอัตโนมัติเพื่อสร้าง บล็อก WordPress พร้อม Elementor สำหรับบล็อกเกอร์มือใหม่และผู้เชี่ยวชาญหรือเว็บมาสเตอร์

หากคุณต้องการติดตามวิดีโอแนะนำ ให้คลิกที่ปุ่มด้านบนวิดีโอต่อไปนี้:

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

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

แต่ก่อนที่เราจะเชิญคุณมาค้นพบ วิธีการติดตั้ง Elementor บน WordPress หรือ วิธีการติดตั้ง (เพิ่ม) ปลั๊กอินบน WordPress

สร้างเว็บไซต์ WordPress ด้วย Elementor

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

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

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

สิ่งแรกสุดคือไปที่หน้า Elementor และไปที่ด้านล่างของหน้าและค้นหาลิงก์ Elementor Cloud

สร้างเว็บไซต์ด้วย Elementor Cloud

คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าใหม่ เลื่อนลงและค้นหาส่วน ไม่มีนางฟ้าที่ซ่อนอยู่ คลิกขวาที่ปุ่ม ซื้อเลย ดังภาพด้านล่าง

สร้างเว็บไซต์ด้วย Elementor

หน้าการชำระเงินจะเปิดขึ้นและคุณจะได้รับแจ้งให้ป้อนอีเมลของคุณ เมื่อเข้าไปแล้วให้คลิกที่ปุ่ม สร้างบัญชี

การสร้างบัญชีคลาวด์ Elementor

จากนั้นในหน้าถัดไป ให้ป้อนประเทศ รัฐ ที่อยู่ รหัสไปรษณีย์ และอื่นๆ จากนั้นคลิกที่ปุ่ม ต่อ

หลังจากนั้น เลือกวิธีการชำระเงิน คุณสามารถเลือกระหว่างบัตรเครดิตหรือ PayPal เราเลือกวิธีการ บัตรเครดิต/เดบิต หรือ PayPal.

คลิกที่ปุ่ม PayPal สีเหลืองทางด้านขวาของหน้าจอ

Un ป๊อปอัพ จะเปิดขึ้นและคุณจะได้รับแจ้งให้ป้อนข้อมูลเข้าสู่ระบบ PayPal และตรวจสอบความถูกต้อง

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

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

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

คลิกที่ เตรียมพร้อม เหมือนในภาพด้านล่าง

คลิก Open WP Dashboard เพื่อเปิดแดชบอร์ดของคุณ

ในป๊อปอัปต้อนรับใหม่ ให้คลิกปุ่ม ใช้ชุดเว็บไซต์

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

สร้างบล็อก WordPress ด้วย Elementor

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

สร้างบล็อก WordPress ด้วย Elementor

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

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

หลังจากคลิกที่ สมัคร Kitป๊อปอัปการยืนยันจะถามคุณว่าคุณต้องการติดตั้งโมเดลทั้งหมดหรือเพียงไม่กี่หน้า คุณสามารถคลิก ใช้ทั้งหมด ou ปรับแต่ง เพื่อปรับแต่งตัวเลือกของคุณ

ข้อมูลสรุปการเลือกของคุณจะถูกนำเสนอ คลิกที่ ต่อไป

สร้างบล็อก WordPress ด้วย Elementor

สุดท้ายคลิกที่ กลับไปที่แดชบอร์ด เพื่อกลับไปที่แดชบอร์ดเว็บไซต์ของคุณ

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

และที่นี่คุณเพิ่งสร้างเว็บไซต์ของคุณบน WordPress ด้วย Elementor Cloud

สิ่งที่คุณต้องทำคือปรับแต่งตามที่คุณต้องการ สำหรับสิ่งนี้ เราขอเสนอ a Elementor Tutorial Bundle ที่เราขอเชิญคุณมาค้นพบ

เมื่อคุณทำตามคำแนะนำนี้เสร็จแล้ว คุณอาจต้องการดูคำแนะนำและบทช่วยสอนอื่นๆ ของเราสำหรับหน้าที่เฉพาะเจาะจงมากขึ้น

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

รับ Elementor Pro ทันที!

สรุป

ดังนั้น ! เพียงเท่านี้บทความนี้จะแสดงวิธีสร้างเว็บไซต์ด้วย Elementor ใน 3 นาที หากคุณมีข้อกังวลใด ๆ เกี่ยวกับวิธีการเดินทางไปที่นั่น แจ้งให้เราทราบภายใน ความเห็น.

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

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

...

Elementor: วิธีเพิ่มเอฟเฟกต์เสียงของปุ่ม

Elementor: วิธีเพิ่มเอฟเฟกต์เสียงของปุ่ม

ต้องการทราบวิธีเพิ่มเอฟเฟกต์เสียงของปุ่มใน Elementor หรือไม่ ค้นหาในบทความนี้

คุณเห็น 2 ปุ่มนี้หรือไม่?

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

วิธีเพิ่มเอฟเฟกต์เสียงให้กับปุ่มใน Elementor

ขั้นตอนที่ 1: สร้างปุ่ม

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

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

ในการอัปโหลดไฟล์เสียงไปยังไลบรารีสื่อ WordPress ให้ไปที่แดชบอร์ด WordPress และคลิก สื่อ -> เพิ่ม. คุณสามารถลากและวางไฟล์หรือคลิก เลือกไฟล์ เพื่ออัปโหลด

เอฟเฟกต์เสียงปุ่มบน Elementor

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

เอฟเฟกต์เสียงปุ่มบน Elementor

ขั้นตอนที่ 3: เพิ่มโค้ด HTML ต่อไปนี้

ในการสร้างเสียงจากปุ่ม เราจำเป็นต้องใช้โค้ด HTML ต่อไปนี้

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  //Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends
});
</script>

เพิ่มวิดเจ็ต HTML ในพื้นที่ผ้าใบและวางโค้ดในบล็อก โค้ด HTML.

ใช้ลิงก์เอฟเฟกต์เสียงของคุณเพื่อแทนที่ เสียง-เอฟเฟกต์-URL ในแถลงการณ์

var audio1 = new Audio('Sound-Effect-URL')

เลือกคลาส CSS สำหรับปุ่มและแก้ไขรหัสของคลาส CSS คลาสของปุ่ม

$(".button-class").mousedown

หลังจากแก้ไขโค้ดแล้วจะเป็นแบบนี้

เอฟเฟกต์เสียงปุ่มบน Elementor

ขั้นตอนที่ 4: เพิ่มคลาส CSS ให้กับปุ่ม

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

เอฟเฟกต์เสียงปุ่มบน Elementor

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

เพิ่มปุ่มเพิ่มเติมพร้อมเอฟเฟกต์เสียง

สร้างปุ่มหรือคัดลอกปุ่มที่มีอยู่

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

เอฟเฟกต์เสียงปุ่มบน Elementor

คัดลอกโค้ดบางส่วนและปรับตัวแปรและชื่อคลาส CSS ของปุ่มที่สอง

มาคัดลอกบางส่วนของโค้ด HTML ก่อนหน้านี้ที่เรียกใช้เอฟเฟกต์เสียงกัน นี่คือรหัสด้านล่าง

//Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends

หลังจากคัดลอกโค้ดแล้ว ให้วางที่ด้านล่าง โดย เสียง 1 สิ้นสุด. แก้ไขตัวแปร เสียง 1 และโค้ดทั้งหมดที่ใช้ตัวแปร เสียง 1 บนรหัสที่สร้างขึ้นใหม่ใน เสียง 2.

ดูเพิ่มเติม: Elementor: วิธีสร้างการ์ดเอฟเฟกต์จากพอร์ตโฟลิโอ

จากนั้นแทนที่ URL เอฟเฟกต์เสียงหากคุณใช้เอฟเฟกต์เสียงใหม่สำหรับปุ่มใหม่และเปลี่ยนรหัส คลาสปุ่ม ในคลาส CSS ปุ่มที่สร้างขึ้นใหม่ของคุณ

รหัสสุดท้ายจะมีลักษณะเหมือนภาพต่อไปนี้

เอฟเฟกต์เสียงปุ่มบน Elementor

แทนที่ชื่อคลาส CSS ของปุ่ม

เอฟเฟกต์เสียงปุ่มบน Elementor

ปุ่มที่สร้างขึ้นใหม่ของคุณจะมีเสียงประกอบเมื่อคลิก คุณสามารถสร้างได้มากเท่าที่คุณต้องการ

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

อ่าน: Elementor: วิธีโยกย้ายเว็บไซต์ WordPress

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

รับ Elementor Pro ทันที!

สรุป

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

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

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

...

Elementor: วิธีสร้างปุ่มลอยตัวด้วยดัชนี Z

Elementor: วิธีสร้างปุ่มลอยตัวด้วยดัชนี Z

คุณต้องการสร้างปุ่มลอยด้วยดัชนี Z บน Elementor หรือไม่?

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

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

ใน Elementor มีสองวิธีในการสร้างปุ่มการทำงานแบบลอยตัว ซึ่งมีดังนี้:

  • โดยการตั้งค่า Z-Index
  • โดยการสร้างหน้าต่างป๊อปอัป -Popup-

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

แต่ก่อนอื่น ให้ค้นหาว่า: วิธีการติดตั้ง Elementor บน WordPress

วิธีสร้างปุ่มการดำเนินการลอยตัวใน Elementor

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

กับ Elementor Proคุณยังสามารถเข้าถึงคุณสมบัติ CSS ที่กำหนดเองซึ่งเราจะใช้ในบทช่วยสอนนี้

ไปที่ตัวแก้ไข Elementor ของคุณ คุณสามารถแก้ไขเนื้อหาที่มีอยู่ของคุณ (หน้า บทความ ฯลฯ...) หรือสร้างใหม่ ในบทช่วยสอนนี้ เราจะปรับเปลี่ยนหน้า

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

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

สร้างปุ่มลอยตัวด้วยดัชนี Z

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

ไปที่แท็บ สูง. ในพารามิเตอร์ เค้าโครง, กำหนดความกว้าง บนอินไลน์ (รถยนต์) กำหนด ตำแหน่งบน Fixed, ชุด แนวนอน บน ขวา และปรับมัน décalage ตามที่ต้องการ

สร้างปุ่มลอยตัวด้วยดัชนี Z

ต่อไป เราจะกำหนดสิ่งสำคัญในวิธีนี้ ในสนาม Z-ดัชนี, ใส่หมายเลข 9999 มันจะทำให้ปุ่มอยู่ข้างหน้าเสมอ (ลอย)

สร้างปุ่มลอยตัวด้วยดัชนี Z

ตอนนี้ได้เวลาหมุนปุ่มการทำงานแบบลอยตัว อยู่ใต้แท็บเสมอ สูง, เข้าถึง คลาส css จากบล็อก แบบ, แล้วเขียน rotate ข้างใน.

ดูเพิ่มเติม: Elementor: แนะนำตัวสร้างหน้า WordPress ที่ดีที่สุด

หลังจากนั้นไปที่บล็อก CSS ที่กำหนดเอง จากนั้นวางโค้ดต่อไปนี้ลงในช่อง:

.rotate.rotate
{transform: rotate(90deg);}

คุณจะเห็นว่าปุ่มเพิ่งหมุน แต่มีช่องว่างแปลก ๆ ระหว่างด้านข้างของหน้าจอ มาแก้ไขโดยการปรับค่า décalage ที่ -92

สร้างปุ่มลอยตัวด้วยดัชนี Z

สุดท้าย เราจะทำการสัมผัสครั้งสุดท้ายสำหรับปุ่มการทำงานแบบลอยตัวนี้ เข้าบล็อก หม้อแปลงไฟฟ้า, เลือกเลย ภาพรวม เข้าถึงตัวเลือก ออฟเซ็ต และตั้งค่าแต่ละตัวเลือกเป็น 7.

สร้างปุ่มลอยตัวด้วยดัชนี Z

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

อ่าน: Elementor: วิธีโยกย้ายเว็บไซต์ WordPress

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

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

รับ Elementor Pro ทันที!

สรุป

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

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

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

...

Elementor: วิธีโยกย้ายเว็บไซต์ WordPress ด้วยตนเอง

Elementor: วิธีโยกย้ายเว็บไซต์ WordPress ด้วยตนเอง

ในบทช่วยสอน: วิธีการโยกย้ายเว็บไซต์ WordPress ด้วยตนเองด้วย Elementor เราได้แสดงให้เห็นแล้ว วิธีที่คุณสามารถโยกย้ายเว็บไซต์โดยใช้ปลั๊กอิน WordPress Duplicator.

แม้ว่าปลั๊กอิน WordPress นี้จะทำให้สิ่งต่างๆง่ายขึ้น แต่บางคนอาจต้องควบคุมกระบวนการด้วยตัวเองโดยการจัดการโค้ด

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

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

ขั้นตอนที่ 0: บางส่วนที่ต้องสังเกตเบื้องต้น

ก่อนเริ่มบทช่วยสอนนี้คุณจะต้อง:

  • สำรองข้อมูลเว็บไซต์ของคุณ
  • มีข้อมูลรับรอง FTP ของโฮสต์ของเว็บไซต์ที่มีอยู่และข้อมูลรับรองที่คุณต้องการย้ายเว็บไซต์ของคุณ

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

ต่อไปนี่คือวิธีการโยกย้าย WordPress ด้วยตนเอง

ขั้นตอนที่ 1: ย้ายไฟล์ไปยังเซิร์ฟเวอร์ใหม่

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

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

ขั้นตอนที่ 2: ส่งออกฐานข้อมูล

ถัดไปคุณต้องส่งออกฐานข้อมูลเว็บไซต์ที่มีอยู่

แม้ว่าคุณจะสามารถทำได้ด้วยตนเองผ่าน phpMyAdmin แต่วิธีที่ง่ายกว่าคือไฟล์ โยกย้ายปลั๊กอิน WordPress DB ฟรี.

นอกเหนือจากการส่งออกฐานข้อมูลของคุณอย่างง่ายดายแล้ว WP Migrate DB ยังจัดการข้อมูลที่เป็นอนุกรมและช่วยให้คุณสามารถเรียกใช้การค้นหาและแทนที่เส้นทาง URL เพื่อให้แน่ใจว่าทุกอย่างทำงานได้ดีหากคุณเปลี่ยนชื่อโดเมน .

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

เลือกปุ่มตัวเลือก ส่งออกไฟล์ ( ควรเลือกโดยค่าเริ่มต้น).

หากคุณเปลี่ยนชื่อโดเมนคุณยังสามารถใช้คุณสมบัตินี้ได้ ค้นหา / แทนที่ เพื่อแทนที่ URL ฐานข้อมูลของคุณด้วยชื่อโดเมนใหม่ของคุณ

จากนั้นคลิกที่ ส่งออก เพื่อดาวน์โหลดสำเนาฐานข้อมูลของคุณ:

วิธีการย้ายตัวติดตั้งองค์ประกอบ wordpress ของเว็บไซต์ 7

ขั้นตอนที่ 3: สร้างฐานข้อมูล MySQL ใหม่

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

เก็บข้อมูลนี้ไว้เป็นประโยชน์เพราะคุณจะต้องใช้

ขั้นตอนที่ 4: นำเข้าฐานข้อมูล

เปิด phpMyAdmin ที่โฮสต์เว็บใหม่และ:

  • ค้นหาฐานข้อมูลที่คุณเพิ่งสร้างในขั้นตอนที่ 3 โดยใช้แถบด้านข้างทางด้านซ้าย
  • คลิกที่แท็บ นำเข้า
  • เลือกไฟล์ฐานข้อมูลที่คุณดาวน์โหลดด้วย WP Migrate DB ในขั้นตอนที่ 2
  • คลิกที่ Go

วิธีการย้ายตัวติดตั้งองค์ประกอบ wordpress ของเว็บไซต์ 8

ขั้นตอนที่ 5: แก้ไขไฟล์ wp-config.php

ณ จุดนี้ไฟล์และฐานข้อมูลของเว็บไซต์ของคุณควรอยู่ในตำแหน่งใหม่

ตอนนี้คุณต้องแจ้งให้เว็บไซต์ของคุณใช้ฐานข้อมูลใหม่ที่คุณสร้างขึ้นในขั้นตอนที่ 3

โดยแก้ไขไฟล์ WP-config.php บนเว็บไซต์ที่ย้ายข้อมูลและป้อนข้อมูลฐานข้อมูลใหม่ของคุณ:

โยกย้ายเว็บไซต์ WordPress Elementor ด้วยตนเอง

ขั้นตอนที่ 6: ค้นหาและแทนที่ URL ในเนื้อหา Elementor (หากเปลี่ยนโดเมน)

หากคุณกำลังเปลี่ยนชื่อโดเมนให้ไปที่ Elementor →เครื่องมือ. จากนั้นคลิกที่แท็บ แทนที่ URL และใช้เครื่องมือเพื่ออัปเดต URL ของเนื้อหา Elementor ของคุณ:

ขั้นตอนที่ 7: สร้าง CSS ของ Elementor ใหม่

หลังจากอัปเดต URL สำหรับเนื้อหา Elementor ของคุณแล้วให้ไปที่ Elementor →เครื่องมือ และคลิกที่ปุ่ม สร้างไฟล์ใหม่ เพื่อบังคับให้ Elementor สร้าง CSS ใหม่:

โยกย้ายเว็บไซต์ WordPress Elementor ด้วยตนเอง

คุณมีคำถามเพิ่มเติมเกี่ยวกับวิธีการโยกย้าย WordPress หรือไม่?

และสรุปคำแนะนำของเราเกี่ยวกับวิธีการย้าย WordPress รวมถึงเนื้อหา Elementor ของคุณ

รับ Elementor Pro ทันที!

สรุป

หากคุณมีคำถามเกี่ยวกับวิธีย้ายเว็บไซต์ที่คุณสร้างด้วย WordPress และ Elementor Pro ไปยังโฮสต์เว็บและ / หรือชื่อโดเมนใหม่อย่างปลอดภัย? แจ้งให้เราทราบใน ความเห็น.

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

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

...

Elementor: แนะนำตัวสร้างหน้า WordPress ที่ดีที่สุด

Elementor: แนะนำตัวสร้างหน้า WordPress ที่ดีที่สุด

ต้องการค้นหาการนำเสนอของ WordPress Page Builder ที่ดีที่สุด: Elementor หรือไม่?

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

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

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

Elementor ได้รับการให้ความสำคัญกับเมื่อเร็ว ๆ นี้ ล่าผลิตภัณฑ์ และดึงดูดความสนใจของผู้ใช้ WordPress จำนวนมากในกลุ่ม Facebook

คุณอาจสงสัยว่า Elementor จัดการกับจำนวนมากได้อย่างไร สร้างหน้า ที่มีอยู่แล้ว

ข้อได้เปรียบด้านความเร็ว

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

ดูเพิ่มเติม: วิธีการสร้าง Portfolio Effect Card ด้วย Elementor

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

DragDropDesign อินเตอร์เฟซปลั๊กอิน

ข้อได้เปรียบของ Open Source

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

รุ่นฟรีจะพร้อมใช้งานในเร็ว ๆ นี้ แต่รุ่นฟรีจะยังอนุญาตให้ผู้ใช้สร้างเพจมืออาชีพ

ดูเพิ่มเติม: วิธีเปลี่ยนรูปภาพเมื่อวางเมาส์เหนือข้อความด้วย Elementor 

หลังจากเปิดตัว มีวิดเจ็ตมากกว่า 6 รายการ คุณสามารถวางใจได้: ตัวเว้นวรรค กล่องไอคอน กล่องรูปภาพ แกลเลอรีกริด แกลเลอรีรูปภาพ และแกลเลอรีภาพหมุน

ชุมชนได้รับประโยชน์

ชุมชน WordPress มีบทบาทสำคัญในการพัฒนา Elementor โครงการอยู่ใน GitHub และนักพัฒนาสามารถช่วยปรับปรุงได้

ดูการสอนของเราด้วย วิธีปรับแต่งธีม WordPress ด้วย Elementor

นอกจากนี้ยังได้รับการแปลเป็นหลายภาษารวมทั้งญี่ปุ่นเยอรมันและฮิบรู เป็นหนึ่งเดียว " สร้างหน้า »เข้ากันได้กับผ้าอ้อม RTL (ขวาไปซ้าย) ชุมชนกำลังเติบโตตามกาลเวลาซึ่งมีแนวโน้มอย่างมากสำหรับอนาคตของปลั๊กอิน

วิวัฒนาการของปลั๊กอิน

Elementor ถูกดาวน์โหลดมากกว่า 10.000 ครั้ง มันได้รับการให้ความสำคัญในจดหมายข่าว Product Hunt และได้รับคะแนนโหวตที่ยอดเยี่ยมแล้วมากกว่า 700 คุณสมบัติใหม่จะถูกเพิ่มทุกสัปดาห์

ขั้นแรก

หลังจากติดตั้งปลั๊กอินคุณจะสังเกตเห็นเมนูใหม่บนแผงควบคุม “ ธาตุ”.

เมนู elementor WordPress

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

ตัวอย่างเช่นหากคุณต้องการกำหนดรูปแบบการเผยแพร่ที่กำหนดเองที่จะใช้ปลั๊กอินคุณจะต้องทำการปรับเปลี่ยนบางอย่าง

อ่านคำแนะนำของเราเกี่ยวกับ วิธีเปลี่ยนภาพที่คลิกปุ่มด้วย Elementor

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

บรรณาธิการสร้างหน้า WordPress

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

กวดวิชา Elementor

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

รับ Elementor Pro ทันที!

สรุป

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

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

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

...

Elementor: วิธีปรับแต่งธีม WordPress

Elementor: วิธีปรับแต่งธีม WordPress

คุณต้องการค้นหาวิธีปรับแต่งธีม WordPress ด้วยปลั๊กอิน Elementor หรือไม่?

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

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

โชคดีกับ Elementor, กระบวนการนี้กลายเป็นเรื่องง่ายมากดังนั้นคุณอาจต้องการตรวจสอบ

แต่ก่อนอื่นมาค้นพบด้วยกัน วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ.

จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่

ธีม WordPress คืออะไร

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

ธีม WordPress ครอบคลุมทุกสิ่งที่มีผลต่อการออกแบบเว็บไซต์ตั้งแต่ส่วนหัวและส่วนท้ายไปจนถึงโทนสีเค้าโครงและอื่น ๆ

มีธีมให้เลือกมากมาย ทั้งแบบฟรีและแบบพรีเมียม ซึ่งเข้ากับอุตสาหกรรมแทบทุกประเภท เช่น เว็บไซต์ถ่ายภาพ, เว็บไซต์สโมสรยิม, เว็บไซต์ร้านทำผม, เว็บไซต์กฎหมายและอื่น ๆ

ทำไมต้องปรับแต่งธีม WordPress

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

คุณนึกภาพออกไหมว่า Amazon, eBay หรือ Google คือสิ่งที่พวกเขาเป็นโดยไม่มีการออกแบบที่เป็นเอกลักษณ์

ไม่แน่นอนและนั่นเป็นเหตุผลหนึ่งที่เราต้องการปรับแต่งธีม WordPress เราต้องการทำให้เป็นเอกลักษณ์และปรับให้เข้ากับข้อความของ บริษัท ของเรา

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

วิธีปรับแต่งธีม WordPress

มีหลายวิธีในการปรับแต่งธีม WordPress

  1. ด้วยตนเองผ่านเครื่องมือปรับแต่ง WordPress
  2. พร้อมรหัส
  3. ด้วย Elementor

วิธีปรับแต่งธีม WordPress ด้วยตนเอง

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

ก่อนที่เราจะเจาะลึกลงไปในพื้นที่นี้เราอยากจะชี้ให้เห็นว่าเมื่อคุณปรับแต่งธีม WordPress ที่มีอยู่คุณควรใช้ ธีมลูกไม่ใช่ธีมหลัก.

ธีมลูกของ WordPress

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

เครื่องมือปรับแต่งธีม WordPress

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

คุณสมบัติหลักที่คุณสามารถปรับเปลี่ยนได้ด้วย Customizer นี้มีดังนี้:

การเพิ่มชื่อเว็บไซต์โลโก้และไอคอน

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

การเปลี่ยนสีของธีม WordPress

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

เพิ่มเมนูการนำทาง

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

วิธีปรับแต่งธีม WordPress ด้วยโค้ด

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

ที่นี่คุณจะสามารถเข้าถึงไฟล์เช่น style.css, function.phpและนี่คือสถานการณ์ที่คุณจะต้องมีธีมลูกเพื่อที่คุณจะได้ไม่ทำลายเว็บไซต์ของคุณ

อีกวิธีหนึ่งในการปรับแต่งธีมของคุณด้วยการเข้ารหัสคือการอัปโหลดไฟล์โดยใช้โซลูชัน FTP กระบวนการนี้เกี่ยวข้องกับการสร้างข้อมูลรับรอง FTP ผ่านผู้ให้บริการโฮสติ้งของคุณดาวน์โหลดและติดตั้งโซลูชัน FTP (เช่น FileZilla) เข้าสู่ระบบบัญชีของคุณและแก้ไขไฟล์ของคุณจากนั้นคุณจะอัปโหลดผ่านทางเดียวกัน โซลูชัน FTP

ค้นหาคำแนะนำของเรา วิธีติดตั้ง WordPress ด้วย FileZilla

เราไม่แนะนำตัวเลือกนี้เว้นแต่คุณจะคุ้นเคยกับการเขียนโค้ด

ปรับแต่งธีม WordPress ได้อย่างง่ายดายด้วย Elementor

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

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

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

ปรับแต่งส่วนหัวและส่วนท้าย

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

ด้วย Elementor มันง่ายมาก

1. สร้างเทมเพลตส่วนหัว

ก่อนอื่นให้กำหนดค่าเทมเพลตส่วนหัวใหม่ โดยไปที่ Elementor> เทมเพลตของฉัน

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 1

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 2

คุณยังสามารถเข้าถึงหน้าจอนี้ได้โดยคลิกที่แท็บ Header จากหน้าจอก่อนหน้าจากนั้นกดปุ่มสีเขียวขนาดใหญ่ที่ปรากฏขึ้น

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

มันจะพาคุณมาที่นี่

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 4

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

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 5

มิฉะนั้นหากคุณต้องการเริ่มต้นใหม่เพียงแค่ปิดหน้าต่างโดยคลิก X ที่มุมขวาบน

2. เปลี่ยนการออกแบบส่วนหัวพื้นฐาน

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 6

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

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 7

นี่คือสิ่งที่คุณสามารถควบคุมได้ในเมนูต่างๆ:

  • แบบ - ควบคุมความกว้างของส่วนขนาดของช่องว่างระหว่างคอลัมน์ความสูงคอลัมน์แนวตั้งและการวางตำแหน่งเนื้อหาแท็ก HTML ที่กำหนดและโครงสร้างทั่วไป
  • สไตล์ - คุณสามารถเปลี่ยนสีพื้นหลังได้ที่นี่รวมถึงไฟล์ เอฟเฟกต์โฮเวอร์แม้ เพิ่มรูปภาพหรือวิดีโอ หากคุณต้องการให้เพิ่มเอฟเฟกต์การซ้อนทับเส้นขอบและตัวแบ่งตลอดจนเปลี่ยนการตั้งค่าตัวอักษร
  • avanced - ส่วนนี้ช่วยให้คุณสามารถเพิ่มแอตทริบิวต์ CSS เช่น margin และ z index ภาพเคลื่อนไหว ID และคลาส นอกจากนี้ยังช่วยให้คุณสามารถทำให้ส่วนเหนียวและควบคุมการตั้งค่าตอบสนองรวมทั้งเพิ่มบางส่วน CSS ที่กำหนดเอง.

ทั้งหมดข้างต้นค่อนข้างอธิบายตัวเองได้และคุณจะได้รับสิ่งที่ต้องการอย่างรวดเร็ว

3. ปรับแต่งองค์ประกอบส่วนหัว

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 8
ในกรณีของโลโก้จะมีตัวเลือกดังต่อไปนี้:

  • เนื้อหา - เปลี่ยนขนาดภาพการจัดตำแหน่งและสถานที่ที่เชื่อมโยง
  • สไตล์ - ควบคุมความกว้างและความสูงเพิ่มเอฟเฟกต์ CSS และเอฟเฟกต์โฮเวอร์รวมถึงเส้นขอบและเงาหากคุณต้องการ
  • avanced - ที่นี่คุณจะพบตัวเลือกเดียวกับส่วนหัว

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

4. เพิ่มรายการ

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

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

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

ในกรณีเช่นนี้ ให้วางเมาส์เหนือส่วนหัวและใช้เครื่องหมายบวก –+- เพื่อเพิ่มส่วนด้านบน

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 10

คลิกที่ปุ่มสีม่วงเพื่อเลือกการออกแบบสามคอลัมน์

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 11

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 12

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 13

คุณสามารถทำกระบวนการเดียวกันกับองค์ประกอบส่วนหัวอื่น ๆ และแน่นอนกับองค์ประกอบอื่น ๆ ทั้งหมดที่รวมอยู่ใน Elementor

ปรับแต่งเทมเพลตโพสต์ที่ไม่ซ้ำใคร

ใน Elementor คุณยังสามารถปรับแต่งเทมเพลตโพสต์เดียวได้ วิธีการมีดังนี้

1. สร้างโมเดลใหม่

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 14

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

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

2. กำหนดค่าการแสดงตัวอย่าง

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 15

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

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

3. มาสร้างส่วนด้านบน 

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

ขั้นตอนแรกคือคลิกที่ป้าย + และสร้างส่วนคอลัมน์เดียว

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

จากนั้นลากวิดเจ็ตชื่อโพสต์ไปยังส่วนใหม่

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 18

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 19

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

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 20

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

ใต้ชื่อโพสต์เราจะแทรกไฟล์ โพสต์ ข้อมูล วิดเจ็ต เพื่อดูข้อมูลเมตาของโพสต์

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 21

นี่คือการตั้งค่าที่ฉันใช้:

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 22

นอกจากนี้ฉันใช้ตัวเลือกการจัดแต่งทรงผมเพื่อทำให้การออกแบบพอดีกับส่วนที่เหลือของหน้า ตรวจสอบให้แน่ใจว่าคุณทำเช่นเดียวกัน

4. ตั้งค่าเนื้อหาโพสต์

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

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 23

โดยพื้นฐานแล้วฉันไม่ได้เปลี่ยนการตั้งค่าใด ๆ เพียงแค่ปล่อยให้ทุกอย่างเป็นอยู่

ถึงเวลาโพสต์เนื้อหาแล้ว ที่นี่คุณมีบล็อกที่เกี่ยวข้องเช่นกัน

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

นอกเหนือจากนั้นนั่นคือทั้งหมด ไม่ต้องทำงานมากเกินไปเพื่อที่เราจะได้ไปยังส่วนสุดท้าย

5. กำหนดค่าส่วนท้าย

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 25

หลังจากนั้นวางวิดเจ็ต กล่องผู้เขียน ในส่วนด้านซ้าย

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 26

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

หลังจากนั้นก็ถึงเวลาเพิ่มบล็อกปุ่มแชร์ทางด้านขวา

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 27

คุณสามารถดูการตั้งค่าของฉันในภาพหน้าจอด้านบน

หลังจากนั้นสิ่งที่เหลือคือการสร้างส่วนขึ้นมาอีกหนึ่งคอลัมน์แล้วลากและวางวิดเจ็ตโพสต์ความคิดเห็นลงในนั้น

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 28

(อย่างไรก็ตามหากคุณมีปัญหาในการค้นหาวิดเจ็ตเหล่านี้ให้ใช้ฟังก์ชันการค้นหา)

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 29

ทำการปรับเปลี่ยนส่วนความคิดเห็นที่คุณคิดว่าจำเป็น (ฉันปล่อยไว้ตามที่เป็นอยู่) และคุณก็พร้อมที่จะโพสต์ นี่คือการออกแบบที่เสร็จสมบูรณ์:

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 30

ปรับแต่งเทมเพลตที่เก็บถาวร

1. กำหนดค่าเทมเพลตเก็บถาวร WordPress ของคุณ

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 31

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

2. กำหนดชื่อของไฟล์เก็บถาวร

บล็อกแรกที่ฉันต้องการพูดถึงคือชื่อที่เก็บถาวร ชื่อที่เก็บถาวร.

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 32

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 33

ที่นี่ คุณสามารถเปิดใช้งานและปิดใช้งานได้ว่าจะให้ Elementor แสดงประเภทไฟล์เก็บถาวรบนหน้าเว็บหรือไม่ เช่นเดียวกับส่วนที่ระบุว่า Author: ด้านล่าง สิ่งนี้เกิดขึ้นผ่านปุ่มภายใต้ รวมบริบท

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

3. ใช้บล็อกสิ่งพิมพ์ที่เก็บถาวร

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

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 34

ลองมาดูตัวเลือกที่ให้คุณปรับแต่งเพจเก็บถาวรของคุณ:

  • ผิว - เลือกแสดงโพสต์ของคุณในรูปแบบคลาสสิกหรือแบบการ์ด
  • คอลัมน์ - กำหนดจำนวนคอลัมน์ที่จะแสดงโพสต์ของคุณ
  • แสดงภาพ - เปิดใช้งานภาพเด่นบนหน้าเก็บถาวร
  • การก่ออิฐ – แสดงรายการเป็นแบบก่ออิฐหรือไม่
  • ขนาดรูปภาพ - ขนาดของรูปภาพ Elementor ควรใช้ในหน้าที่เก็บถาวร
  • ชื่อหนังสือ - คุณต้องการแสดงชื่อโพสต์หรือไม่?
  • แท็ก HTML ชื่อเรื่อง - ถ้าเป็นเช่นนั้นควรใส่แท็ก HTML ใดไว้รอบ ๆ
  • สิ่งที่สกัดมา - รวมข้อความที่ตัดตอนมาจากโพสต์ของคุณหรือแสดงเฉพาะชื่อเรื่อง
  • ความยาวที่ตัดตอนมา - กำหนดความยาวของสารสกัด
  • เมตาดาต้า - กำหนดข้อมูลเมตาของโพสต์ที่มีให้สำหรับผู้เยี่ยมชม
  • ตัวคั่นระหว่าง - สัญลักษณ์ตัวคั่นระหว่างข้อมูลเมตาดาต้า
  • อ่านเพิ่มเติม - รวมลิงก์ "อ่านเพิ่มเติม" ใช่หรือไม่?
  • สัญลักษณ์ - ช่วยให้คุณสามารถเพิ่มข้อมูลเพิ่มเติมในโพสต์เช่นหมวดหมู่และแท็ก
  • ป้าย Taxonomy - คุณสามารถตัดสินใจได้ว่าจะรวมข้อมูลใดไว้ที่นี่
  • รูปโพรไฟล์ – ด้วยสิ่งนี้ คุณสามารถเปลี่ยนรูปโปรไฟล์ของผู้เขียนบทความได้

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

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

4. ควบคุมจำนวนสิ่งพิมพ์ต่อที่เก็บถาวร

บันทึกย่อเกี่ยวกับเทมเพลตการเก็บถาวร ในการเปลี่ยนจำนวนโพสต์ที่ปรากฏในที่เก็บถาวร (หรือในหน้าบล็อกของคุณ) คุณต้องทำใน WordPress ภายใต้ การตั้งค่า> การอ่าน 

วิธีปรับแต่งเทมเพลตส่วนหัวขององค์ประกอบธีมเวิร์ดเพรส 35

ที่นี่เพียงป้อนจำนวนโพสต์ที่คุณต้องการให้ผู้เยี่ยมชมเห็น

ส่วนบุคคล สะดวก ธีม WordPress พร้อม Elementor

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

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

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

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

รับ Elementor Pro ทันที!

สรุป

นั่นไง ! บทความนี้จะแสดงวิธีปรับแต่งธีม WordPress ด้วย Page Builder Elementor สำหรับบทความนี้ หากคุณมีข้อกังวลใด ๆ เกี่ยวกับวิธีการเดินทางไปที่นั่น แจ้งให้เราทราบภายใน ความเห็น.

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

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

...