ข้ามไปยังเนื้อหาหลัก

วิธีเพิ่มประสิทธิภาพเค้าโครงเว็บไซต์ของคุณด้วย Elementor

Divi: ธีม WordPress ที่ใช้ง่ายที่สุด

Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

ต้องการทราบวิธีเพิ่มประสิทธิภาพการจัดวางเว็บไซต์ของคุณด้วย Elementor หรือไม่?

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

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

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

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

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

บทที่ 1: แนวทางปฏิบัติที่ดีที่สุดสำหรับการเพิ่มประสิทธิภาพเค้าโครง

ตัวตรวจสอบประสิทธิภาพเว็บไซต์

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

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

เราจะครอบคลุมหัวข้อต่อไปนี้:

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

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

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

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

เพิ่มประสิทธิภาพการจัดวางเว็บไซต์ของคุณด้วย Elementor

การทดสอบการปฏิบัติที่ไม่ดี

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

ขั้นตอนที่ 1: ยืนยันเว็บไซต์ของคุณในหน้าต่างที่ไม่ระบุตัวตน

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

ขั้นตอนที่ 2: ตรวจสอบว่าคุณใช้เส้นทาง URL โดยตรง

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

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

ขั้นตอนที่ 1: ทดสอบผลการปฏิบัติงาน

ตัวตรวจสอบประสิทธิภาพการทดสอบองค์ประกอบ

คุณอาจเคยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome มาก่อน

หากไม่เป็นเช่นนั้น เพื่อตรวจสอบและแสดงเนื้อหา HTML และ CSS ของเพจของคุณ:

  • คลิกขวาที่ใดก็ได้บนหน้าของคุณแล้วคลิกเลือก “ตรวจสอบ” คุณจะเห็นแท็บหลายแท็บที่คุณสามารถอ่าน HTML และ CSS ของคุณ ค้นหาข้อผิดพลาด รับผลลัพธ์ SEO และเรียกใช้การทดสอบต่างๆ
  • เลือกแท็บเครือข่ายแล้วกดปุ่ม cmd หรือ ctrl + R เพื่อโหลดผลลัพธ์

อย่างที่คุณเห็น เค้าโครงปัจจุบันของเราใช้เวลา 2,88 วินาทีในการโหลดและดำเนินการ 81 คำขอ

ขั้นตอนที่ 2: ดูผลลัพธ์ประสิทธิภาพ

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

สิ่งนี้จะให้ข้อมูลเพิ่มเติมเกี่ยวกับประสิทธิภาพปัจจุบันของเพจ

  • เลือก “สร้างรายงาน” หลังจากนั้นสักครู่ รายงานของคุณจะปรากฏขึ้น

ขณะนี้เราได้รับคะแนนประสิทธิภาพที่ 73/100 ซึ่งเราสามารถดำเนินการได้อย่างแน่นอน

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

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

การเพิ่มประสิทธิภาพองค์ประกอบของหน้า

ขั้นตอนที่ 1: ปรับส่วนหัวให้เหมาะสม

มาเริ่มกันที่ ส่วนหัว.

ดังที่คุณเห็นในการออกแบบนี้ ส่วนหัวถูกสร้างขึ้นด้วยสามคอลัมน์

ในคอลัมน์แรก โลโก้ของเราประกอบด้วยสองวิดเจ็ต:

  1. Un วิดเจ็ตรูปภาพ ซึ่งแสดงไฟล์ภาพ .png ของโลโก้ของเรา
  2. วิดเจ็ตชื่อเรื่อง

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

คอลัมน์ที่สามประกอบด้วย:

  1. วิดเจ็ตส่วนภายใน (ซึ่งควบคุมตำแหน่งของวิดเจ็ตไอคอน)
  2. รายละเอียดการติดต่อของเราสำหรับ Header

มาดูกันว่าเราสามารถลดจำนวนส่วน วิดเจ็ต และส่วนได้อย่างไร

ขั้นตอนที่ 2: สร้างส่วนหัวใหม่

ออกแบบบ้านฮีโร่

คอลัมน์ 1:

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

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

  • กำหนดขนาดของรูปภาพภายในวิดเจ็ต

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

ในตัวอย่างที่เรากำลังทำงานร่วมกัน ให้แก้ปัญหานี้โดยไปที่แท็บ Style และตั้งค่าความกว้างของรูปภาพเป็น 200px

คอลัมน์ 2

กลับไปที่แผงวิดเจ็ต:

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับการจัดสไตล์โดยรวม:

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

แบบอักษรสากล:

สามารถทำได้โดยใช้ฟังก์ชัน Global Fonts:

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

จากนั้นคุณสามารถใช้สไตล์นี้กับทุกวิดเจ็ตที่คุณสร้าง

สีสากล:

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

คุณสามารถใช้วิธีเดียวกันนี้กับสีโดยรวมของคุณ:

  • คลิกที่ "ทั่วโลก"
  • วางเมาส์เหนือตัวเลือกสีแล้วคลิก
  • เลือกสีและชี้ไปที่ไอคอนบวก
  • คลิกที่ "สากล" >> เลือก "เงินต้น"

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

ก่อนที่เราจะดำเนินการต่อกับส่วนหัว ให้ตั้งค่าช่องว่างภายในแนวตั้งเป็นศูนย์

ขั้นตอนที่ 3: แก้ไขส่วนหัว

คอลัมน์ 3

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

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

เพื่อแก้ไขปัญหานี้:

  • เลือกวิดเจ็ตโลโก้เว็บไซต์ >> แท็บ 'ขั้นสูง'
  • เลือก "การวางตำแหน่ง" และตั้งค่าความกว้างเป็น "อินไลน์"

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

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

การกำหนดตำแหน่งของคอลัมน์ด้วยองค์ประกอบแบบอินไลน์

  • เลือกคอลัมน์ >> ไปที่แท็บ "เค้าโครง"
  • ใน "แนวตั้ง" เลือก "ด้านล่าง"
  • "ในแนวนอน" เลือก "ช่องว่างระหว่าง"

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

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

เราสามารถแก้ปัญหานี้ได้โดยการปรับระยะขอบ:

  • เลือกวิดเจ็ตเมนูการนำทาง >> แท็บ "ขั้นสูง"
  • เลิกจัดกลุ่มระยะขอบและลบระยะห่างด้วยค่าลบ

ขั้นตอนที่ 4: ทำให้ส่วนหัวตอบสนอง

ตอนนี้เรามาดูกันว่าเว็บไซต์ของเราในเวอร์ชันปัจจุบันเป็นอย่างไรบนอุปกรณ์มือถือ

แนวทางปฏิบัติที่ดีที่สุดสำหรับการตอบสนองต่ออุปกรณ์เคลื่อนที่:

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

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

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

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

การตั้งค่าความกว้างที่กำหนดเองสำหรับแท็บเล็ต

  • คลิกที่ 'เมนูนำทาง' >> แท็บ 'ขั้นสูง'
  • เลือก "การวางตำแหน่ง" >> ตั้งค่าความกว้างเป็น "กำหนดเอง"
  • เลือก "%" >> ให้วิดเจ็ตมีความกว้างเท่ากัน (เป็นเปอร์เซ็นต์) ของพื้นที่ว่างรอบๆ
  • คลิกที่แท็บ "เนื้อหา" >> "สลับการจัดแนว" >> เลือก "ขวา"

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

ตอนนี้ มาปรับแต่งเมนูสลับกันให้เสร็จ

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

ตอนนี้เรามาดูกันว่าสิ่งที่ดูเหมือนบนหน้าจอมือถือเป็นอย่างไร

การกำหนดความกว้างที่กำหนดเองสำหรับมือถือ

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

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

เพื่อแก้ไขปัญหานี้:

ตำแหน่งของเมนูนำทาง

  • คลิกที่ "เมนูนำทาง" >> แท็บ "ขั้นสูง"
  • เลือก "การจัดตำแหน่ง" >> ตั้งค่าความกว้างเป็น "กำหนดเอง"
  • เลือก "%" >> ให้วิดเจ็ตมีความกว้าง 30% เพื่อให้พอดีกับโลโก้ของเรา

ตำแหน่งของรายการไอคอน

  • คลิกที่ "รายการไอคอน" >> '' ขั้นสูง 'tab
  • เลือก "กรอก" >> ยกเลิกการจัดกลุ่มค่า
  • เพิ่มช่องว่างภายใน 12px ไปที่ "TOP"

คุณเชื่อได้ไหม

เดิมส่วนหัวของเราใช้ 2 ส่วน 12 วิดเจ็ตและ 10 คอลัมน์ ตอนนี้ส่วนหัวของเราใช้ 1 ส่วน 3 วิดเจ็ตและ 1 คอลัมน์.

และผลลัพธ์ก็เหมือนเดิม!

ขั้นตอนที่ 5: ปรับส่วนฮีโร่ให้เหมาะสม

ไปที่ส่วนถัดไปของเว็บไซต์ของเรา: ส่วนฮีโร่

แนวทางปฏิบัติที่ดีที่สุดสำหรับส่วนฮีโร่:

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

การควบคุมตำแหน่งของวิดเจ็ตในคอลัมน์

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

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

มาดูกันว่าเราจะสร้างการออกแบบเดียวกันกับส่วนเดียวได้อย่างไร:

  • ลบคอลัมน์พิเศษทางด้านขวาของข้อความ
  • ถอดสเปเซอร์ออก

ในการวางตำแหน่งข้อความฮีโร่ของเราในตำแหน่งที่เราต้องการ เราจะใช้ตัวเลือกการจัดตำแหน่งคอลัมน์:

  • เลือกคอลัมน์
  • ตั้งค่า "การจัดแนวแนวตั้ง" เป็น "กลาง"
  • ไปที่แท็บ "ขั้นสูง"
  • เลือก "กรอก" >> ยกเลิกการจัดกลุ่มค่า
  • ตั้งค่า Padding ด้านขวาเป็น 50%
  • เลือกส่วน
  • เลือก "ความสูงขั้นต่ำ" >> ตั้งค่าเป็น 80

แก้ไขคอนทราสต์ระหว่างข้อความและพื้นหลัง

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

มีหลายวิธีในการปรับปรุงความชัดเจนของส่วนที่มีพื้นหลังเป็นภาพสี (ตามที่เราเห็นในเทมเพลตนี้):

คุณกำลังมองหาธีมและปลั๊กอิน WordPress ที่ดีที่สุดหรือไม่?

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

  • คลิกที่ส่วนหัวของคุณ
  • ไปที่แท็บ "สไตล์" >> เลือก "เงาข้อความ"

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

อีกวิธีในการทำให้ข้อความของคุณชัดเจนขึ้นคือการใช้การซ้อนทับ

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

ขั้นตอนที่ 6: เพิ่มประสิทธิภาพส่วนด้วยกล่องไอคอน

ออกแบบกล่องไอคอนบ้าน

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

มาดูกันว่าเราจะทำให้ส่วนนี้ง่ายขึ้นเพื่อปรับปรุงประสิทธิภาพได้อย่างไร

เนื้อหาของพื้นที่ไอคอน

  • เลือกปุ่ม »วิดเจ็ตกล่องไอคอน« ในเมนูวิดเจ็ตแล้วลากลงในคอลัมน์
  • เลือก "กล่องไอคอน"
  • ชี้ไปที่ภาพไอคอน
  • เลือก "ดาวน์โหลด SVG" **
  • ใส่ไอคอนที่กำหนดเองของคุณ

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

  • พิมพ์ "ชื่อเรื่อง" ของคุณ
  • พิมพ์ "คำอธิบาย" ของคุณ
  • เลือก "สไตล์" >> เลือกสีโดยรวม
  • เลือก "ขนาด" แล้วลากแถบไปยังขนาดที่คุณต้องการ
  • เลือก "Padding" แล้วลากแถบไปที่หมายเลขที่คุณเลือก

ขั้นตอนที่ 8: ปรับส่วน "บริการ" ให้เหมาะสม

บริการออกแบบบ้าน

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

มาสร้างการออกแบบเดียวกันในส่วนใหม่ แต่มีเพียงคอลัมน์เดียว

  • สร้างส่วนใหม่ด้วยคอลัมน์
  • ใน "Layout" >> ตั้งค่า "Content Width" เป็น "Full Width"
  • เลือก "กล่องรูปภาพวิดเจ็ต" ในแผงวิดเจ็ตแล้วลากลงในคอลัมน์

(เราจะสามารถรวมเนื้อหาทั้งหมดของส่วนนี้ไว้ในวิดเจ็ตนี้ได้)

  • พิมพ์ชื่อเรื่อง
  • พิมพ์คำอธิบาย

สำหรับรูปภาพ เราจะเก็บการออกแบบปัจจุบันที่เราใช้สำหรับรูปภาพของเรา

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

ตอนนี้ส่วนบริการมีการออกแบบเหมือนกัน แต่มีเนื้อหาน้อยลง

ขั้นตอนที่ 9: เพิ่มประสิทธิภาพส่วนคำกระตุ้นการตัดสินใจ

แนวทางปฏิบัติที่ดีที่สุดสำหรับลิงก์ CTA:

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

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

ส่วนต่อไปนี้เป็นการเรียกร้องให้ดำเนินการสำหรับบริการของเรา

ปัจจุบันส่วนนี้มีสองคอลัมน์ซึ่งประกอบด้วย:

  1. ภาพพื้นหลังที่มีตัวเว้นวรรค
  2. สองส่วนหัว ส่วนภายใน ตัวแก้ไขข้อความ และปุ่ม

มาสร้างการออกแบบเดียวกันในส่วนใหม่ แต่มีเพียงคอลัมน์เดียว

  • ไปที่แท็บ "Layout" >> ตั้งค่า "Content Width" เป็น "Full Width"
  • ไปที่แท็บ "ขั้นสูง" >> ลบการเติมเพิ่มเติม
  • เลือก "Call To Action Widget" ในแผงวิดเจ็ตแล้วลากลงในคอลัมน์
  • ตั้งค่า "ตำแหน่งรูปภาพ" เป็น "ซ้าย"
  • เลือกรูปภาพของคุณจากไลบรารีสื่อ
  • ขยายส่วน "เนื้อหา"
  • พิมพ์ส่วนหัว
  • พิมพ์คำอธิบาย
  • พิมพ์ข้อความปุ่ม
  • ไปที่แท็บ "สไตล์"
  • เพิ่ม "Padding" ระหว่างองค์ประกอบ
  • ปรับความกว้างของภาพ
  • ขยายส่วน "เนื้อหา"
  • เลือกแบบอักษรสากลสำหรับชื่อของคุณ
  • เพิ่มช่องว่างระหว่างคำอธิบายและปุ่ม
  • เลือกสีสากลที่เหมาะสมสำหรับแต่ละทรัพยากร
  • ขยายส่วน "ปุ่ม"
  • กำหนดขนาดเป็น "ใหญ่"
  • ปรับแต่งตามความต้องการของคุณ เช่น สีพื้นหลังและรัศมีเส้นขอบ

จนถึงตอนนี้เป็นส่วน 2 คอลัมน์พร้อมวิดเจ็ต 6 รายการ ตอนนี้เป็นส่วน 1 คอลัมน์ที่มีเพียง 1 วิดเจ็ต!

ขั้นตอนที่ 10: ปรับภาพหมุนให้เหมาะสม

การเพิ่มประสิทธิภาพภาพหมุน

การออกแบบปัจจุบันของส่วนภาพหมุนของเรามีข้อผิดพลาดทั่วไปเกี่ยวกับวิธีแสดงภาพหลายภาพ

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

มาสำรวจวิธีที่ง่ายกว่าที่จะเพิ่มประสิทธิภาพเว็บไซต์ของคุณด้วย

  • สร้างส่วนใหม่ที่มี 1 คอลัมน์
  • ไปที่แท็บ "Layout" >> ตั้งค่า "Content Width" เป็น "Full Width"
  • เลือกปุ่ม »วิดเจ็ตภาพหมุน« จากแผงวิดเจ็ตแล้วลากลงในคอลัมน์
  • เพิ่มรูปภาพที่ต้องการจากไลบรารีสื่อ
  • ไปที่แท็บ "เนื้อหา"
  • ตั้งค่า "ขนาดรูปภาพ" เป็น "ปานกลาง - 300 x 300"
  • ปรับ "สไลด์ที่จะแสดง", "สไลด์เพื่อเลื่อน" และ "การนำทาง" ตามความต้องการของคุณ
  • ไปที่แท็บ "สไตล์"
  • ตั้งค่า "การจัดแนวแนวตั้ง" เป็น "กึ่งกลาง"
  • ปรับแต่ง "ระยะห่าง"
  • ไปที่แท็บ "ขั้นสูง"
  • เติมสารที่จำเป็น

สิ่งที่ครั้งหนึ่งเคยเป็นส่วน 5 คอลัมน์ ตอนนี้เหลือเพียง 1 คอลัมน์เท่านั้น

ไปที่ส่วนถัดไปซึ่งเราสามารถเพิ่มประสิทธิภาพวิดีโอบนเว็บไซต์ของเราได้

ขั้นตอนที่ 11: เพิ่มประสิทธิภาพส่วนวิดีโอ

แนวทางปฏิบัติที่ดีที่สุดสำหรับเนื้อหาวิดีโอ:

  • ใช้ Lazy Load ทุกครั้งที่ทำได้ เพื่อปรับปรุงเวลาในการโหลดเว็บไซต์ของคุณ

จะเกิดอะไรขึ้นเมื่อเราใช้ตัวเลือก “Lazy Load”

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

สิ่งที่เราจะทำตอนนี้คือเปลี่ยนวิธีที่เราใช้ Video Widget เพื่อไม่ให้หน้าเว็บของเราเร็วขึ้นหรือประสิทธิภาพของเว็บไซต์ช้าลง

  • เลือก "วิดเจ็ตวิดีโอ"
  • ไปที่แท็บ "สไตล์"
  • เลือก "ขี้เกียจโหลด"

ขั้นตอนที่ 12: ปรับส่วนท้ายให้เหมาะสมและอัปเดตอยู่เสมอ

การเพิ่มประสิทธิภาพส่วนท้ายขององค์ประกอบ

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

มาดูวิธีการปรับส่วนท้ายให้เหมาะสมและดูแลให้ทันสมัยอยู่เสมอ

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

ในการทำเช่นนี้เราจะดำเนินการดังนี้:

  • ลบวิดเจ็ตพิเศษ เหลือเพียงวิดเจ็ตชื่อ
  • เลือกวิดเจ็ตชื่อเรื่อง
  • คลิกที่สัญลักษณ์ "แท็กไดนามิก" ทางด้านขวาของฟิลด์ "ชื่อ" (เรียกอีกอย่างว่า "ปุ่มหลัก"
  • จากเมนูแบบเลื่อนลง เลือกรายการเมนู "วันที่และเวลาปัจจุบัน"
  • คลิกที่ไอคอนหลักของคีย์
  • คลิกที่แท็บ "รูปแบบวันที่" และเลือกรายการเมนู "กำหนดเอง"
  • ลบสิ่งที่อยู่ในฟิลด์ "รูปแบบที่กำหนดเอง" ในปัจจุบัน ยกเว้น "Y"
  • เลือกแท็บ "ขั้นสูง"
  • เน้นฟิลด์ "ไปข้างหน้า" และกดปุ่ม "ตัวเลือก" และ "G" ค้างไว้พร้อมกัน (หรือ "ควบคุม", alt "และ" C "พร้อมกัน) เพื่อพิมพ์สัญลักษณ์" © "
  • เพิ่มช่องว่างหลัง "©"
  • เลือกช่อง "หลัง"
  • พิมพ์ช่องว่างและเขียนข้อความที่คุณต้องการให้ปรากฏหลังปี เช่น "สงวนลิขสิทธิ์"

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

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

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

และนั่นคือทั้งหมด เลย์เอาต์ของคุณได้รับการปรับให้เหมาะสม!

การประเมินประสิทธิภาพของเว็บไซต์ใหม่

เราจะตรวจสอบผลลัพธ์ในหน้าต่าง DevTools (Inspector):

  • เลือกแท็บ "เครือข่าย":

มีการเปลี่ยนแปลงที่ดีและเป็นบวกที่นี่:

  • เว็บไซต์ใช้เวลาโหลด 568 มิลลิวินาที
  • เราไปจาก 81 คำขอเป็น46
  • เลือกแท็บ "Lighthouse" ซึ่งคุณจะเห็นว่าคะแนนประสิทธิภาพของเราเพิ่มขึ้นจาก 73 เป็น 98

โปรดทราบว่าเราได้เพิ่มประสิทธิภาพของเราโดยไม่ต้องใช้ปลั๊กอินของบุคคลที่สาม สิ่งที่ต้องทำคือการปรับแต่งง่ายๆ และแนวทางปฏิบัติที่ดีที่สุด

ขั้นตอนที่ 13: ทดสอบผลลัพธ์ด้วยเอฟเฟกต์การเคลื่อนไหว

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

ทำให้ส่วนหัวเป็นองค์ประกอบ "คงที่":

  • เลือกส่วนหัว
  • ไปที่แท็บ "ขั้นสูง"
  • ขยายแท็บ "เอฟเฟกต์การเคลื่อนไหว"
  • ตั้งค่าตัวเลือก "Sticky" เป็น "Top"

ทำให้ส่วนฮีโร่เป็นองค์ประกอบ "คงที่":

  • เลือกส่วนฮีโร่
  • ไปที่แท็บ "สไตล์"
  • เลือกรายการแบบเลื่อนลง "สิ่งที่แนบมา" และเลือก "แก้ไข"

ใช้ a แอนิเมชั่นทางเข้า สำหรับข้อความของฮีโร่ (ส่วนหัว):

  • เลือกวิดเจ็ตส่วนหัว
  • ไปที่แท็บ "ขั้นสูง"
  • ขยายแท็บ "เอฟเฟกต์การเคลื่อนไหว"
  • เลือก Input Animation และตั้งค่าเป็น "Fade In"

ใช้แอนิเมชั่นอินพุตสำหรับคำอธิบายข้อความของฮีโร่ (วิดเจ็ตตัวแก้ไขข้อความ):

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

ทำเช่นเดียวกันกับวิดเจ็ตที่ตามมา สำหรับเอฟเฟกต์ที่ละเอียดอ่อนเมื่อโหลดหน้าเว็บ

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

  • กลับไปที่หน้าต่าง "สารวัตร"
  • เลือกแท็บ "ประภาคาร"
  • คลิกที่ "สร้างรายงาน"

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

คุณเชื่อไหมว่าคะแนนประสิทธิภาพใหม่ของเรา

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

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

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

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

รับ Elementor Pro ทันที!

สรุป

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

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

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

...

บทความนี้ประกอบด้วยข้อคิดเห็น 0

แสดงความคิดเห็น

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

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

กลับไปด้านบน
0 หุ้น
หุ้น
ทวีต
Enregistrer