วิธีการเพิ่มชื่อไซต์แบบไดนามิกและสโลแกนไปยังส่วนหัว Divi สากล

วิธีการเพิ่มชื่อไซต์แบบไดนามิกและสโลแกนไปยังส่วนหัว Divi สากล

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

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

ผลลัพธ์ที่เป็นไปได้

นี่คือตัวอย่างของการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

เทมเพลตส่วนหัวโกลบอลชื่อเรื่องไซต์แบบไดนามิก 6

สังเกตชื่อไซต์และสโลแกนที่ตรงกลางด้านบนของส่วนหัวซึ่งแสดงแบบไดนามิก

ตัวอย่างการปรับเปลี่ยนชื่อ Divi

ดาวน์โหลดฟรี

เข้าร่วม Divi Newlsetter แล้วเราจะส่งสำเนาของ Ultimate Divi Landing Page Layout Pack ให้คุณพร้อมกับแหล่งข้อมูลคำแนะนำและเคล็ดลับ Divi ที่น่าทึ่งและฟรี ทำตามแล้วคุณจะเป็น Divi master ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้วเพียงป้อนที่อยู่อีเมลของคุณด้านล่างและคลิกดาวน์โหลดเพื่อเข้าถึงแพ็คเลย์เอาท์DOWNLOAD

ในการนำเข้าเทมเพลตไปที่ Divi> ตัวสร้างธีม

คลิกไอคอนการพกพาที่ด้านบนขวาของหน้า

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

จากนั้นคลิกที่ปุ่มนำเข้า

เลือกเทมเพลต Divi

เมื่อเสร็จสิ้นเทมเพลตส่วนหัวโดยรวมจะพร้อมใช้งานใน Divi Theme Builder

แก้ไขส่วนหัว Divi ส่วนกลาง

ในสิ่งต่อไปนี้เราจะไปยังการออกแบบ

ชื่อของเว็บไซต์และสโลแกนบน WordPress

ทุกไซต์ WordPress มีชื่อไซต์และสโลแกน ชื่อไซต์โดยพื้นฐานแล้วคือชื่อของไซต์และสโลแกนเป็นวลีสั้น ๆ ที่มักอธิบายว่ามันคืออะไร

ไม่ใช่เรื่องแปลกที่จะเพิ่มชื่อไซต์เมื่อติดตั้ง WordPress และลืมมันไป

ปรับแต่งชื่อ Divi

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

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

หรือคุณสามารถใช้เส้นทางอื่นโดยใช้เครื่องมือปรับแต่งธีมเพื่ออัปเดตชื่อไซต์ภายใต้การตั้งค่าทั่วไป

ปรับแต่งเอกลักษณ์ของ wordpress

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

วิธีเพิ่มชื่อไซต์แบบไดนามิกและสโลแกนไปยังส่วนหัวร่วมใน Divi

การนำเข้าเทมเพลตส่วนหัวส่วนกลางที่ออกแบบไว้ล่วงหน้า

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

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

จากนั้นไปที่ Divi> Theme Builder

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

การนำเข้าแบบจำลอง Divi

เมื่อเพิ่มเทมเพลตลงในตัวสร้างธีมแล้วให้ลบเทมเพลตส่วนท้ายแล้วคลิกเพื่อแก้ไขส่วนหัวโดยรวม

ลบเทมเพลตออกจากส่วนท้าย

การเพิ่มชื่อไซต์แบบไดนามิกและสโลแกนในส่วนหัว

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

ย้ายโลโก้

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

เพิ่มโมดูลคำกระตุ้นการตัดสินใจเพื่อแสดงชื่อไซต์และสโลแกน

จากนั้นเพิ่มโมดูลการเรียกร้องให้ดำเนินการใหม่ที่คอลัมน์กลางของแถวบนสุด (ที่โลโก้อยู่)

ปรับแต่งคำกระตุ้นการตัดสินใจ

เราจะใช้โมดูลคำกระตุ้นการตัดสินใจเพื่อแสดงชื่อไซต์และสโลแกน

แต่ก่อนที่คุณจะเริ่มเพิ่มเนื้อหาก่อนอื่นให้เลือก NO เพื่อใช้สีพื้นหลัง

กำหนดค่าคำกระตุ้นการตัดสินใจ

เพิ่มชื่อไซต์แบบไดนามิก

ภายใต้การตั้งค่าเนื้อหาวางเมาส์เหนือช่องป้อนชื่อเรื่องแล้วคลิกไอคอน "ใช้เนื้อหาแบบไดนามิก" จากนั้นเลือก "ชื่อไซต์" จากรายการ

เพิ่มสโลแกนไซต์แบบไดนามิก

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

เพิ่มสโลแกนเว็บไซต์ Divi

เพิ่มลิงก์หน้าแรกแบบไดนามิก

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

เพิ่มลิงค์ไปยังโฮมเพจ

ออกแบบชื่อไซต์และข้อความสโลแกน

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

ข้ามไปที่แท็บออกแบบและอัปเดตสิ่งต่อไปนี้:

  • แบบอักษรของชื่อเรื่อง: Heebo
  • น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
  • ลักษณะแบบอักษรของชื่อเรื่อง: TT
  • ขนาดตัวอักษรหัวเรื่อง: 32px (เดสก์ท็อป), 24px (แท็บเล็ตและโทรศัพท์)
  • เว้นวรรคตัวอักษรชื่อเรื่อง: 0.3em
  • แบบอักษร: Roboto
  • รูปแบบตัวอักษร: ตัวเอียง
  • สีตัวอักษร:
  • ขนาดตัวอักษร: 13px
  • ระยะห่างระหว่างตัวอักษร: 0.1em
  • ความสูงของลำตัว: 1em
ปรับแต่งแบบอักษรของชื่อ Divi

เพื่อช่วยในการรวมศูนย์เอา padding เริ่มต้นไว้ด้านล่างเนื้อความโดยเพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงในโปรโมชั่น

padding-ด้านล่าง: 0px
เพิ่มรหัส Divi css ที่กำหนดเอง

การปรับการออกแบบเพิ่มเติม

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

แนวตั้งตรงกลางคอลัมน์ / เนื้อหา

ตอนนี้แถวบนสุดคือ“ Equalize Column Heights” active ซึ่งใช้คุณสมบัติ flex เราสามารถใช้ประโยชน์จากสิ่งนี้ได้โดยเพิ่มส่วนย่อย css ขนาดเล็กเพื่อให้แน่ใจว่าคอลัมน์ทั้งหมดยังคงอยู่กึ่งกลางแนวตั้งภายในแถว หากต้องการทำสิ่งนี้ให้เปิดการตั้งค่าสำหรับแถวบนสุดและเพิ่ม CSS ต่อไปนี้ในองค์ประกอบหลัก:

จัดเรียงรายการ: กึ่งกลาง;

การอัพเดตคอลัมน์ด้วยปุ่ม

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

ปรับแต่งปุ่มผู้ติดต่อ Divi

การอัปเดตพื้นหลังปุ่ม

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

  • พื้นหลังไล่ระดับสีด้านซ้าย: #ffffff
  • สีไล่ระดับสีพื้นหลังด้านขวา: # 1dbf73
  • ทิศทางการไล่ระดับสี: 135deg
  • ตำแหน่งเริ่มต้น: 10%
  • ตำแหน่งสุดท้าย: 0%
ปรับแต่งพื้นหลังของปุ่ม Divi

การเพิ่มตัวละครทั้งก่อนและหลังสโลแกน

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

แสดงสโลแกน Divi

ผลสุดท้าย

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

ผลสุดท้าย divi

คิดสุดท้าย

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

ที่มา: ธีมที่สง่างาม

วิธีการสร้างการเปลี่ยนแปลงอย่างราบรื่นด้วยเอฟเฟกต์เลื่อนบน Divi

วิธีการสร้างการเปลี่ยนแปลงอย่างราบรื่นด้วยเอฟเฟกต์เลื่อนบน Divi

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

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

Let 's go

ผลลัพธ์ที่เป็นไปได้

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

การเปลี่ยนระหว่างส่วน divi

1 สร้างโครงสร้างขององค์ประกอบ

เพิ่มส่วน # 1

การเว้นวรรค

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

  • ช่องว่างภายในบน: 80px (เดสก์ท็อปและแท็บเล็ต), 0px (โทรศัพท์)
  • ช่องว่างภายในด้านล่าง: 80px
ส่วนพารามิเตอร์ Divi

เพิ่มบรรทัดใหม่

โครงสร้างคอลัมน์

เพิ่มแถวใหม่ต่อไปโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ปรับขนาด

โดยไม่ต้องเพิ่มโมดูลให้เปิดพารามิเตอร์บรรทัดและใช้การเปลี่ยนแปลงต่อไปนี้กับพารามิเตอร์การกำหนดขนาด:

  • ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
  • ความกว้างของรางน้ำ: 1
  • ความกว้าง: 90%
  • ความกว้างสูงสุด: 1580px
การกำหนดค่าระยะห่าง Divi

การเว้นวรรค

จากนั้นเพิ่มระยะขอบบนและล่างที่กำหนดเอง

  • ขอบบน: 200px
  • ขอบล่าง: 200px
การกำหนดค่าระยะห่างระหว่างบรรทัด Divi

เพิ่มโมดูลข้อความในคอลัมน์ 1

เพิ่มเนื้อหา H2

ถึงเวลาเพิ่มโมดูลโดยเริ่มจากโมดูลข้อความในคอลัมน์ 1 ป้อนเนื้อหา H2 ที่คุณต้องการ

บริการของเรานำเสนอโดยผู้เชี่ยวชาญในขณะนี้

การตั้งค่าข้อความ H2

ไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความ H2 ดังนี้:

  • ตำแหน่งตำรวจ 2: รายไตรมาส
  • ส่วนหัว 2 ขนาดตัวอักษร: 80px (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
  • ความสูงของบรรทัดที่ 2 ของหัว: 1.2em
หัวหน้ากองบังคับการตำรวจ

การเว้นวรรค

จากนั้นเพิ่มระยะขอบล่างบนแท็บเล็ตและโทรศัพท์

  • ระยะขอบล่าง: 50 พิกเซล (แท็บเล็ตและโทรศัพท์เท่านั้น)
การกำหนดค่าระยะห่างข้อความ Divi

เพิ่มโมดูลข้อความในคอลัมน์ 2

เพิ่มเนื้อหา

ไปที่คอลัมน์ที่สองกัน โมดูลแรกที่เราต้องการคือโมดูลข้อความที่มีเนื้อหาคำอธิบาย

กล่องข้อความ Divi เนื้อหา

การตั้งค่าข้อความ

สลับไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความตาม:

  • แบบอักษรของข้อความ: ห้องโดยสาร
  • รูปแบบตัวอักษรข้อความ: ตัวพิมพ์ใหญ่
  • สีข้อความ: # 000000
  • ขนาดตัวอักษร: 18px (เดสก์ท็อป), 15px (แท็บเล็ต), 13px (โทรศัพท์)
  • การเว้นวรรคตัวอักษร: 3px (เดสก์ท็อป), 1px (แท็บเล็ตและโทรศัพท์)
  • ความสูงของบรรทัดข้อความ: 3em
พารามิเตอร์ข้อความ Divi

เพิ่มโมดูลการแยกเข้ากับคอลัมน์ 2

ความชัดเจน

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

  • แสดงตัวแยก: ใช่
ตัวแบ่งที่มองเห็นได้

ออนไลน์

จากนั้นเปลี่ยนสีเส้นของโมดูล

  • สีของเส้น: # 000000
พื้นหลังสีแบ่ง

ปรับขนาด

จากนั้นทำการเปลี่ยนแปลงบางอย่างกับพารามิเตอร์การปรับขนาด

  • น้ำหนัก Divider: 3px
  • ความกว้าง: 28%
ขนาดตัวคั่น Divi

การเว้นวรรค

นอกจากนี้เรายังเพิ่มอัตรากำไรขั้นต้น

  • ขอบบน: 10px
ระยะห่างระหว่างโมดูลตัวคั่น Divi

เพิ่มส่วน # 2

การเว้นวรรค

ไปยังส่วนปกติถัดไป ลบช่องว่างด้านบนเริ่มต้นจากส่วน

  • การเสริมด้านบน: 0px
ส่วนที่ 2 ระยะห่างระหว่าง Divi

ล้น

ยังซ่อนโอเวอร์โฟลว์

  • ล้นแนวนอน: ซ่อน
  • แนวตั้งล้น: ซ่อน
ซ่อนโมดูล Divi มากเกินไป

เพิ่มบรรทัดใหม่

โครงสร้างคอลัมน์

เพิ่มแถวแรกต่อไปโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

เลือกเค้าโครง Divi

ปรับขนาด

โดยไม่ต้องเพิ่มโมดูลเพิ่มเติมให้เปิดพารามิเตอร์ line เข้าถึงพารามิเตอร์การกำหนดขนาดและทำการแก้ไขต่อไปนี้:

  • ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
  • ความกว้างของรางน้ำ: 1
  • ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
  • ความกว้าง: 90%
  • ความกว้างสูงสุด: 1580px
ส่วน Divi การกำหนดค่ารางน้ำ

การเว้นวรรค

จากนั้นลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดออก

  • การเสริมด้านบน: 0px
  • ช่องว่างภายในด้านล่าง: 0px
การตั้งค่าระยะห่างโมดูลบรรทัด Divi 1

การตั้งค่าคอลัมน์ 1

สีพื้นหลัง

จากนั้นเปิดการตั้งค่าสำหรับคอลัมน์ 1 และเปลี่ยนสีพื้นหลัง

  • สีพื้นหลัง: # f7f7f7
การกำหนดค่าพื้นหลังโมดูลบรรทัด Divi

การเว้นวรรค

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

  • ช่องว่างภายในบน: 200px (โต๊ะทำงาน), 100px (แท็บเล็ตและโทรศัพท์)
  • ช่องว่างด้านล่าง: 200px (โต๊ะทำงาน), 100px (แท็บเล็ตและโทรศัพท์)
  • ช่องว่างด้านซ้าย: 8%
  • แพ็ดดิงขวา: 8%
การตั้งค่าคอลัมน์โมดูลแถว

การตั้งค่าคอลัมน์ 2

การเว้นวรรค

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

  • ช่องว่างภายในสุด: 100px (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)
  • ช่องว่างภายในด้านล่าง: 200px
  • ช่องว่างด้านซ้าย: 150 พิกเซล (โต๊ะทำงาน), 0 พิกเซล (แท็บเล็ตและโทรศัพท์)
การตั้งค่าระยะห่างโมดูล Divi

เพิ่มโมดูลการแยกเข้ากับคอลัมน์ 1

ความชัดเจน

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

  • แสดงตัวแยก: ใช่
แสดงตัวคั่น divi 1

ออนไลน์

จากนั้นเปลี่ยนสีเส้นของโมดูล

  • สีของเส้น: # 000000
การตั้งค่าตัวคั่น Divi

ปรับขนาด

ทำการเปลี่ยนแปลงพารามิเตอร์การปรับขนาดด้วย

  • น้ำหนัก Divider: 3px
  • ความกว้าง: 50%
ขนาดตัวคั่น Divi

เพิ่มโมดูลข้อความในคอลัมน์ 1

เพิ่มเนื้อหา H3

โมดูลถัดไปที่เราต้องการในคอลัมน์ 1 คือโมดูลข้อความที่มีเนื้อหา H3

การตั้งค่าส่วนเนื้อหา Divi

การตั้งค่าข้อความ H3

เปลี่ยนไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความ H3:

  • ตำแหน่งตำรวจ 3: รายไตรมาส
  • สีข้อความของรายการ 3: # 000000
  • รายการ 3 ขนาดตัวอักษร: 50px (เดสก์ท็อป), 40px (แท็บเล็ต), 35px (โทรศัพท์)
  • ความสูงของบรรทัดที่ 3 ของหัว: 1.1em

เพิ่มโมดูลข้อความในคอลัมน์ 2

เพิ่มเนื้อหา

ในคอลัมน์ที่สองโมดูลแรกที่เราต้องการคือโมดูลข้อความที่มีเนื้อหาคำอธิบายบางอย่าง

การตั้งค่าโมดูลข้อความ Divi

การตั้งค่าข้อความ

เปลี่ยนการตั้งค่าข้อความของโมดูลดังนี้:

  • แบบอักษรของข้อความ: ห้องโดยสาร
  • รูปแบบตัวอักษรข้อความ: ตัวพิมพ์ใหญ่
  • ขนาดตัวอักษร: 18px (เดสก์ท็อป), 15px (แท็บเล็ต), 13px (โทรศัพท์)
  • การเว้นวรรคตัวอักษร: 3px (เดสก์ท็อป), 1px (แท็บเล็ตและโทรศัพท์)
  • ความสูงของบรรทัดข้อความ: 3em
การปรับแบบอักษรของ Divi text mold

เพิ่มโมดูลปุ่มไปยังคอลัมน์ 2

เพิ่มสำเนา

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

การตั้งค่าเนื้อหาโมดูลข้อความ

การตั้งค่าปุ่ม

จากนั้นจัดสไตล์ปุ่ม

  • ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
  • ขนาดข้อความของปุ่ม: 20 พิกเซล
  • สีข้อความปุ่ม: #ffffff
  • สีพื้นหลังของปุ่ม: # 000000
  • ความกว้างเส้นขอบของปุ่ม: 0px
การตั้งค่ารูปแบบปุ่ม Divi
  • แบบอักษรของปุ่ม: รายไตรมาส
  • น้ำหนักแบบอักษรของปุ่ม: หนา
การตั้งค่าสีปุ่ม Divi

การเว้นวรรค

เพิ่มช่องว่างภายในที่กำหนดเองด้วย

  • การเสริมด้านบน: 50px
  • ช่องว่างภายในด้านล่าง: 50px
  • ช่องว่างด้านซ้าย: 100px
  • ช่องว่างภายในขวา: 100px
การตั้งค่าระยะห่างของปุ่มโมดูล Divi

ตำแหน่ง

และย้ายตำแหน่งปุ่มตาม:

  • ตำแหน่ง: สัมบูรณ์
  • ที่ตั้ง: ด้านล่างซ้าย
การปรับตำแหน่งโมดูลปุ่ม Divi

โคลนบรรทัดได้บ่อยเท่าที่จำเป็น

เมื่อคุณเสร็จสิ้นทั้งบรรทัดและโมดูลทั้งหมดแล้วคุณสามารถโคลนทั้งบรรทัดได้สามครั้ง

โมดูล Divi โคลน

เปลี่ยนเนื้อหาทั้งหมด

ตรวจสอบให้แน่ใจว่าได้แก้ไขเนื้อหาทั้งหมดในบรรทัดที่ซ้ำกัน

แก้ไขเนื้อหาส่วน Divi

2. ใช้เอฟเฟกต์การเลื่อน

ผลการเลื่อนแถวแรก

การเคลื่อนไหวในแนวนอน

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

  • เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
  • เริ่มชดเชย: -5
  • ค่าชดเชยเฉลี่ย: 0 (ที่ 26%)
  • ออฟเซ็ตสิ้นสุด: 0
  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
ใช้เอฟเฟกต์การเลื่อน Divi

จางเข้าและออก

ใช้เอฟเฟกต์เฟดขาเข้าและขาออก

  • เปิดใช้งานจางหายไป: ใช่
  • ความทึบเริ่มแรก: 100%
  • ความทึบแสงเฉลี่ย: 100% (ที่ 50%)
  • สิ้นสุดความทึบ: 0% (ถึง 53%)
  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
กำหนดค่าส่วน Divi ของภาพเคลื่อนไหวจาง

ผลการเลื่อนแถวกลาง

การเคลื่อนไหวในแนวตั้ง

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

  • เปิดใช้งานการเคลื่อนไหวแนวตั้ง: ใช่
  • เริ่มชดเชย: -4
  • ค่าชดเชยเฉลี่ย: 0 (ที่ 26%)
  • ออฟเซ็ตสิ้นสุด: 0
  • เอฟเฟกต์ทริกเกอร์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
Divi เลื่อนการกำหนดค่า aniation

จางเข้าและออก

เปิดใช้งานเอฟเฟกต์จางหายเข้าและออก

  • เปิดใช้งานจางหายไป: ใช่
  • ความทึบเริ่มแรก: 0%
  • ความทึบแสงเฉลี่ย: 100% (จาก 27% ถึง 50%)
  • ส่วนท้ายชดเชย: 0 (ที่ 53%)
  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
ภาพเคลื่อนไหว Divi line จาง

เอฟเฟกต์การเลื่อนบรรทัดสุดท้าย

การเคลื่อนไหวในแนวตั้ง

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

  • เปิดใช้งานการเคลื่อนไหวแนวตั้ง: ใช่
  • เริ่มชดเชย: -4
  • ค่าชดเชยเฉลี่ย: 0 (ที่ 26%)
  • ออฟเซ็ตสิ้นสุด: 0
  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
อนิเมชั่นการเลื่อนโมดูลบรรทัด divi

จางเข้าและออก

ด้วยเอฟเฟกต์จางขาเข้าและขาออกและคุณทำเสร็จแล้ว!

  • เปิดใช้งานจางหายไป: ใช่
  • ความทึบเริ่มแรก: 0%
  • ความทึบแสงเฉลี่ย: 100% (จาก 27% ถึง 50%)
  • สิ้นสุดความทึบ: 100% (ถึง 53%)
  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
การตั้งค่าภาพเคลื่อนไหวลักษณะโมดูล Divi line

ผลสุดท้าย

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

การสาธิตขั้นสุดท้าย

คิดสุดท้าย

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

วิธีสร้างสมาชิกในทีมเลื่อนภาพหมุนด้วย Divi

วิธีสร้างสมาชิกในทีมเลื่อนภาพหมุนด้วย Divi

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

สาธิต

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

สมาชิกทีม Scroll Divi

จุดเริ่มต้นของความคิด

เพิ่มหัวข้อใหม่

การเว้นวรรค

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

  • ช่องว่างภายในบน: 200px (โต๊ะทำงาน), 100px (แท็บเล็ตและโทรศัพท์)
  • ช่องว่างด้านล่าง: 200px (โต๊ะทำงาน), 100px (แท็บเล็ตและโทรศัพท์)
การกำหนดค่าพารามิเตอร์

ล้น

เพื่อให้แน่ใจว่าไม่มีแถบเลื่อนแนวนอนปรากฏในการออกแบบของเราเราจะซ่อนส่วนที่ล้นในแท็บขั้นสูง

  • ล้นแนวนอน: ซ่อน
  • แนวตั้งล้น: ซ่อน
การกำหนดค่าล้น

เพิ่มบรรทัด # 1

โครงสร้างคอลัมน์

เพิ่มบรรทัดใหม่ไปยังส่วนต่อไปโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

เลือกเค้าโครง Divi

ปรับขนาด

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

  • ความกว้าง: 90%
  • ความกว้างสูงสุด: 1580px
พารามิเตอร์บรรทัด Divi

การเว้นวรรค

เรายังเพิ่มช่องว่างภายในและล่างที่กำหนดเอง

  • การเสริมด้านบน: 100px
  • ช่องว่างภายในด้านล่าง: 100px
การกำหนดค่า Divi ระยะห่างระหว่างบรรทัด

เพิ่มโมดูลข้อความในคอลัมน์

เพิ่มเนื้อหา H2

ถึงเวลาเพิ่มโมดูลโดยเริ่มจากโมดูลข้อความแรก ป้อนเนื้อหา H2 ที่คุณเลือก

พบกับทีม

การตั้งค่าข้อความ H2

ไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความ H2 ดังนี้:

  • ชื่อแบบอักษร 2: ทรายดูด
  • ชื่อแบบอักษร 2: ตัวหนากึ่ง
  • สีข้อความของรายการ 2: # 000000
  • ส่วนหัว 2 ขนาดตัวอักษร: 70px (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
ระยะห่างข้อความ Divi

เพิ่มโมดูลการแยกลงในคอลัมน์

ความชัดเจน

จากนั้นเพิ่มโมดูลแยก ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก“ แสดงตัวคั่น”

  • แสดงตัวแยก: ใช่
แสดงตัวคั่น Divi

ออนไลน์

จากนั้นทำการเปลี่ยนแปลงการตั้งค่าบรรทัด

  • สีของเส้น: # edf000
  • สไตล์ไลน์: ทึบ
  • ตำแหน่งสาย: ด้านบน
รูปแบบระยะห่าง Divi

ปรับขนาด

และดำเนินการพารามิเตอร์โมดูลให้สมบูรณ์โดยแก้ไขพารามิเตอร์การวัดขนาดตาม:

  • น้ำหนัก Divider: 20px
  • ความกว้าง: 11%
  • การจัดตำแหน่งของโมดูล: left
  • ความสูง: 20px
การปรับขนาดโมดูลสาย Divi

เพิ่มบรรทัด # 2

โครงสร้างคอลัมน์

ไปยังแถวถัดไป! ใช้โครงสร้างคอลัมน์ต่อไปนี้:

การกำหนดค่าคอลัมน์ Divi

ปรับขนาด

โดยไม่ต้องเพิ่มโมดูลเพิ่มเติมให้เปิดพารามิเตอร์ line และแก้ไขพารามิเตอร์การปรับขนาดดังนี้:

  • ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
  • ความกว้างของรางน้ำ: 2
  • ความกว้าง: 100%
  • ความกว้างสูงสุด: 100%
การกำหนดค่าความกว้างรางน้ำ

การเว้นวรรค

จากนั้นเพิ่มการขยายด้านซ้ายและขวาบนหน้าจอขนาดเล็กเท่านั้น

  • การขยายด้านซ้าย: 5% (แท็บเล็ตและโทรศัพท์เท่านั้น)
  • แพ็ดดิงขวา: 5% (แท็บเล็ตและโทรศัพท์เท่านั้น)
การกำหนดค่ารูปแบบระยะห่างระหว่างบรรทัด

พารามิเตอร์คอลัมน์ (5x)

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

การกำหนดค่าบรรทัดพารามิเตอร์ Divi

พื้นหลังไล่ระดับสี

ขั้นแรกให้เพิ่มพื้นหลังไล่ระดับในแต่ละคอลัมน์

  • สี 1: rgba (255,255,255,0)
  • สี 2: rgba (0,0,0,0,84)
  • ประเภทการไล่ระดับสี: เชิงเส้น
  • ตำแหน่งเริ่มต้น: 25%
  • ตำแหน่งสุดท้าย: 86%
  • วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่
การกำหนดค่าคอลัมน์ด้านหลัง Divi

ภาพพื้นหลัง

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

  • ขนาดภาพพื้นหลัง: ปก
  • ตำแหน่งของภาพพื้นหลัง: ตรงกลาง
เพิ่มภาพพื้นหลังของคอลัมน์ Divi

องค์ประกอบหลัก

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

ความกว้าง: สำคัญ 100% ระยะขอบ: 50px 0px 50px 0px สำคัญ!
คอลัมน์รหัส css divi

เพิ่มโมดูลบุคคลลงในคอลัมน์

เพิ่มเนื้อหา

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

ชื่อบุคคล divi

ลบภาพ

จากนั้นลบภาพ เราใช้ภาพพื้นหลังของคอลัมน์แทน

ลบภาพ Divi

ภาพพื้นหลัง

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

  • ขนาดภาพพื้นหลัง: ปก
  • ตำแหน่งของภาพพื้นหลัง: ตรงกลาง
การกำหนดค่าพื้นหลังโมดูลบุคคล

การตั้งค่าข้อความหัวข้อ

ไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความหัวเรื่องดังนี้:

  • ระดับชื่อเรื่อง: H3
  • แบบอักษรของชื่อเรื่อง: ทรายดูด
  • น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
  • สีข้อความชื่อ: #ffffff
  • ขนาดตัวอักษรชื่อเรื่อง: 230%
การปรับแต่งชื่อโมดูล Divi

การตั้งค่าข้อความร่างกาย

เปลี่ยนการตั้งค่าเนื้อความด้วย

  • Body Font: เปิด Sans
  • สีข้อความ: #ffffff
  • ความสูงของลำตัว: 2,2 em
การปรับแต่งร่างกาย Divi

การตั้งค่าข้อความตำแหน่ง

จากนั้นทำการเปลี่ยนแปลงการตั้งค่าข้อความตำแหน่ง

  • ตำแหน่งตัวอักษร: เปิด Sans
  • สีข้อความของตำแหน่ง: # edf000
ตำแหน่ง Divi

การเว้นวรรค

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

  • padding บน: 70%
  • ช่องว่างภายในที่ต่ำกว่า: 10%
  • ช่องว่างด้านซ้าย: 10%
  • แพ็ดดิงขวา: 10%
ระยะห่างระหว่างโมดูลคน Divi

ทำซ้ำโมดูลบุคคล 4 ครั้ง

เมื่อคุณเสร็จสิ้นโมดูลบุคคลคุณสามารถโคลนโมดูลทั้งหมดสี่ครั้ง

วางรายการที่ซ้ำกันในคอลัมน์ที่เหลือ

วางโมดูลที่ซ้ำกันในสี่คอลัมน์ที่เหลือของแถว อย่าลืมแก้ไขเนื้อหาด้วย

เปลี่ยน Row ให้เป็น Auto Scroll Carousel

เปลี่ยนขนาดของบรรทัด # 2

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

  • ความกว้าง: 180%
  • ความกว้างสูงสุด: 220% (โต๊ะทำงาน), 100% (แท็บเล็ตและโทรศัพท์)
ระยะห่างการปรับเปลี่ยนบรรทัด Divi

เพิ่มการเคลื่อนไหวแนวนอนของบรรทัด # 2

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

  • เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
  • เริ่มการชดเชย:
    • สำนักงาน: 2,5
    • แท็บเล็ตและโทรศัพท์: 0
  • ค่าชดเชยเฉลี่ย: 0 (ที่ 40%)
  • ส่วนท้ายชดเชย:
    • สำนักงาน: -25 (ที่ 62%)
    • แท็บเล็ตและโทรศัพท์: 0
  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
การกำหนดค่าภาพเคลื่อนไหวการเลื่อน Divi

การสำรวจ

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

สำนัก

สมาชิกทีม Scroll Divi

คิดสุดท้าย

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

วิธีเพิ่มไอคอนโซเชียลมีเดียเพิ่มเติมให้ Divi

วิธีเพิ่มไอคอนโซเชียลมีเดียเพิ่มเติมให้ Divi

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

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

วิธีเปิดใช้งานไอคอนสื่อโซเชียลเพิ่มเติมได้อย่างง่ายดายในส่วนท้ายของ Divi

วิธีที่ง่ายที่สุดในการเพิ่มไอคอนโซเชียลมีเดียให้กับไซต์ Divi ของคุณคือไปที่แผงควบคุม ตัวเลือกชุดรูปแบบ เปิดใช้งานตัวเลือกสำหรับ Facebook, Twitter, Instagram และ RSS จากนั้นสิ่งที่คุณต้องทำคือป้อน URL โปรไฟล์ของคุณในฟิลด์ เมื่อคุณทำเช่นนี้คุณจะเห็นลิงก์เหล่านี้ปรากฏเป็นลิงก์ไอคอนในส่วนท้ายของไซต์ของคุณ:

ไอคอนโซเชียล Divi

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

ตัวเลือกธีม Divi

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

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

Divi เวิร์ดเพรส

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

วิธีใช้ Divi Builder เพื่อเพิ่มเครื่องมือติดตามโซเชียลมีเดียในหน้าหรือเผยแพร่เนื้อหา

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

คุณสามารถใช้ Divi Builder เพื่อแทรกไอคอนโซเชียลมีเดียลงในเพจหรือโพสต์ของคุณได้โดยตรงโดยใช้ไฟล์ การติดตามสื่อโซเชียล .

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

การสร้างบทความ Divi

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

เค้าโครง Divi Gutenberg

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

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

การแทรกโมดูลติดตามบนโซเชียลมีเดีย

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

เพิ่มโมดูลโซเชียลเน็ตเวิร์กโซเชียล

จากนั้นเลือกหนึ่งรายการจากรายการแบบหล่นลง

เพิ่มเครือข่ายโซเชียลใหม่

เมื่อเลือกแล้วให้เพิ่ม URL ของโปรไฟล์ของคุณ คุณสามารถเลือกสีการไล่ระดับสีพื้นหลัง ฯลฯ ได้ เฉพาะสำหรับไอคอน

ปรับแต่งปุ่มโซเชียลเน็ตเวิร์ก

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

ปรับแต่งไอคอนโซเชียล

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

ติดตามเราปุ่ม Divi

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

ปุ่ม Divi ติดตามเรา

หลังจากนั้นไอคอนโซเชียลมีเดียของคุณจะปรากฏบนไซต์ของคุณ

การใช้ตัวสร้างธีม Divi เพื่อเพิ่มไอคอนโซเชียลมีเดีย

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

ในการเริ่มต้นด้วยตัวสร้างธีมให้ไปที่ Divi - ตัวสร้างธีม ในแดชบอร์ดของคุณ WordPress

ผู้สร้าง Divi

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

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

เพิ่มโมเดล Divi

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

เค้าโครง Divi

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

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

เลือกโมดูลโซเชียล

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

โซเชียลไอคอนโมดูลสื่อโมดูล

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

การปรากฏบน Divi พร้อมปุ่มแชร์

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

การย้ายโมดูลการแบ่งปันโซเชียล Divi

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

ไอคอนแถบด้านข้าง

การเพิ่มไอคอนโซเชียลมีเดียลงในส่วนหัวและส่วนท้ายด้วย Divi Theme Builder

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

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

เค้าโครง Divi ธีมส่วนบุคคล

คุณยังสามารถเพิ่มส่วนท้ายส่วนกลางซึ่งจะแทนที่ ทั้งหมด ส่วนท้ายอื่น ๆ ที่คุณสร้างขึ้น (สิ่งนี้ใช้กับเนื้อหาส่วนกลางและส่วนหัวด้วย) 

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

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

เพิ่มส่วนท้าย Divi ส่วนกลาง

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

สรุป

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

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

การสร้างตารางผลประโยชน์แบบไดนามิกสำหรับผลิตภัณฑ์ WooCommerce

การสร้างตารางผลประโยชน์แบบไดนามิกสำหรับผลิตภัณฑ์ WooCommerce

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

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

ผลลัพธ์ที่เป็นไปได้

ก่อนที่เราจะดำน้ำในบทช่วยสอนมาดูผลลัพธ์ของขนาดหน้าจอต่างๆกัน

Divi ผลลัพธ์ที่เป็นไปได้

1. ติดตั้งปลั๊กอิน ACF และปลั๊กอินกลุ่มประโยชน์ฟิลด์ผลิตภัณฑ์

ติดตั้งปลั๊กอินฟิลด์ที่กำหนดเองขั้นสูง

เพื่อแสดงประโยชน์ต่างๆของผลิตภัณฑ์ในแบ็กเอนด์ของผลิตภัณฑ์ของเราเราจะใช้ปลั๊กอิน Advanced Custom Fields ฟรี เข้าถึงไฟล์ แบ็กเอนด์ WordPress> ปลั๊กอิน> เพิ่มใหม่> ค้นหาปลั๊กอิน ACF> ติดตั้ง> เปิดใช้งาน .

ติดตั้งปลั๊กอินฟิลด์ที่กำหนดเองขั้นสูง

ไปที่ฟิลด์ที่กำหนดเองและเพิ่มกลุ่มของฟิลด์ใหม่

เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอิน ACF แล้วคุณจะสามารถเข้าถึงฟิลด์ที่กำหนดเองของคุณและเพิ่มกลุ่มของฟิลด์ใหม่

สร้างช่อง acf

การตั้งค่ากลุ่มฟิลด์

ตั้งชื่อให้กลุ่มฟิลด์ใหม่ของคุณและอนุญาตให้ปรากฏเฉพาะในหน้าผลิตภัณฑ์

  • "ประเภทข้อความ" เท่ากับ "ผลิตภัณฑ์"
เพิ่มกฎ

เพิ่มเขตข้อมูลแรก

ดำเนินการต่อโดยเพิ่มฟิลด์ใหม่สำหรับชื่อเรื่องประโยชน์ผลิตภัณฑ์แรกของคุณ

  • ป้ายชื่อฟิลด์: ชื่อผลประโยชน์ 1
  • ประเภทฟิลด์: ข้อความ
เพิ่มช่อง ac
การปรับแต่งฟิลด์ Divi

ทำซ้ำขั้นตอนสำหรับช่องที่เหลือ

ทำเช่นเดียวกันเพื่อประโยชน์อื่น ๆ ของผลิตภัณฑ์และคำอธิบายของผลิตภัณฑ์ ฟิลด์ทั้งหมดนี้ต้องใช้ประเภทฟิลด์ "ข้อความ" ที่กำหนดให้

  • ชื่อบริการ 1
  • คำอธิบายของผลประโยชน์ 1
  • ชื่อบริการ 2
  • คำอธิบายของผลประโยชน์ 2
  • ชื่อบริการ 3
  • คำอธิบายของผลประโยชน์ 3
  • ชื่อบริการ 4
  • คำอธิบายของผลประโยชน์ 4
กำหนดค่าช่อง acf

2. เพิ่มประโยชน์ให้กับผลิตภัณฑ์

เปิดหรือเพิ่มผลิตภัณฑ์ใหม่

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

การสร้างผลิตภัณฑ์ Divi

กรอกข้อมูลฟิลด์ประโยชน์ผลิตภัณฑ์

และเติมเต็มประโยชน์ของผลิตภัณฑ์

กรอกข้อมูลในช่องข้อดีของ Divi

3. สร้างเทมเพลตหน้าผลิตภัณฑ์ใน Divi Theme Builder

ไปที่ตัวสร้างธีม Divi และเพิ่มเทมเพลตใหม่

ถึงเวลาเริ่มต้นด้วย Divi! หากต้องการสร้างเทมเพลตใหม่ให้ไปที่ Divi Theme Builder แล้วคลิกที่ "เพิ่มเทมเพลตใหม่"

ตัวสร้างธีม Divi

ใช้เทมเพลตในทุกผลิตภัณฑ์

เราใช้เทมเพลตนี้กับผลิตภัณฑ์ทั้งหมด แต่อย่าลังเลที่จะเลือกผลิตภัณฑ์ที่มีหมวดหมู่หรือป้ายกำกับเฉพาะแทน

เพิ่มผลิตภัณฑ์ woocommerce ทั้งหมด

เข้าสู่ตัวแก้ไขเทมเพลตตัวแบบจำลอง

จากนั้นเข้าสู่ร่างกายของแบบจำลองโดยคลิกที่ "เพิ่มร่างกายที่กำหนดเอง" และเลือก "สร้างร่างกายที่กำหนดเอง"

การสร้างร่างกาย Divi

แก้ไขส่วน # 1

สีพื้นหลัง

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

  • สีพื้นหลัง: # 000000
การกำหนดค่าพื้นหลังส่วน Divi

การเว้นวรรค

ไปยังแท็บการออกแบบของส่วนและเพิ่มช่องว่างด้านบนและด้านล่างที่กำหนดเอง

  • Padding ยอดนิยม: 10px
  • ช่องว่างภายในด้านล่าง: 10px
การกำหนดค่าระยะห่างของส่วน Divi

เพิ่มบรรทัดใหม่

โครงสร้างคอลัมน์

มาดำเนินการต่อโดยเพิ่มบรรทัดใหม่ในส่วนที่มีโครงสร้างต่อไปนี้:

การกำหนดค่าโครงร่างโมดูลบรรทัด

การเว้นวรรค

โดยไม่ต้องเพิ่มม็อดใด ๆ ให้เปิดการตั้งค่าแถวและทำการปรับระยะห่าง

  • ใช้รางน้ำส่วนบุคคล: ใช่
  • ความกว้างของรางน้ำ: 1
  • ความกว้าง: 90%
  • ความกว้างสูงสุด: 100%
การตั้งค่าระยะห่างโมดูลบรรทัด

การเว้นวรรค

ลบระยะห่างภายในด้านบนและด้านล่างทั้งหมด

  • มาร์จิ้นภายในสูง: 0px
  • มาร์จิ้นภายในต่ำ: 0px
การตั้งค่าระยะห่างโมดูลบรรทัด Divi

เพิ่มโมดูล Woo Cart Notice ลงในคอลัมน์

เนื้อหาแบบไดนามิก

โมดูลเดียวที่เราต้องการในบรรทัดและส่วนนี้คือโมดูล Woo Cart Notice ตรวจสอบให้แน่ใจว่าได้เลือก "ผลิตภัณฑ์นี้" ในส่วนไดนามิก

  • สินค้า: สินค้านี้
การตั้งค่าโมดูลการแจ้งเตือนเกี่ยวกับรถเข็น woo

พื้นหลังสี

จากนั้นเปิดการตั้งค่าโมดูลและใช้พื้นหลังโปร่งใส

  • สีพื้นหลัง: rgba (0,0,0,0)
การตั้งค่า Divi โมดูลรถเข็น Woo

การตั้งค่าข้อความ

เปลี่ยนไปที่แท็บ "ออกแบบ" และเปลี่ยนแบบอักษรของข้อความ

  • แบบอักษรข้อความ: Karla
การตั้งค่าแบบอักษรโมดูล Divi

การตั้งค่าปุ่ม

เสร็จสิ้นการตั้งค่าปลั๊กอินโดยกำหนดการตั้งค่าสไตล์:

  • ใช้ปุ่มกำหนดลักษณะเองสำหรับ: ใช่
  • ขนาดข้อความของปุ่ม: 20px
  • สีข้อความของปุ่ม: # 000000
  • พื้นหลังของปุ่ม: # ffd623
  • ความกว้างเส้นขอบของปุ่ม: 0px
  • ปุ่มขอบโค้งมน: 0px
การตั้งค่าสีโมดูลแจ้งเตือนรถเข็น Woo
  • แบบอักษรของปุ่ม: Oswald
  • รูปแบบตัวอักษรของปุ่ม: Shift
การปรับการออกแบบสีโมดูลแจ้งเตือนรถเข็น Woo
  • มาร์จิ้นภายในสูง: 20px
  • มาร์จิ้นภายในต่ำ: 20px
  • ระยะขอบภายในด้านซ้าย: 50px
  • มาร์จิ้นภายในขวา: 50px
โมดูลการออกแบบการกำหนดค่าประกาศเกี่ยวกับรถเข็น

เพิ่มหัวข้อ # 2

พื้นหลังไล่ระดับสี

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

  • สี 1: # 000000
  • สี 2: #ffffff
  • ตำแหน่งเริ่มต้น:
    • เดสก์ท็อป: 30%
    • แท็บเล็ต: 57%
    • โทรศัพท์: 54%
  • ตำแหน่งสุดท้าย:
    • เดสก์ท็อป: 30%
    • แท็บเล็ต: 57%
    • โทรศัพท์: 54%
การปรับด้านหลังโมดูลสาย Divi

การเว้นวรรค

ไปที่แท็บออกแบบและเพิ่มระยะขอบภายในที่สูง

  • Padding ยอดนิยม: 150px
การกำหนดค่าระยะห่างโมดูลบรรทัด Divi

เพิ่มบรรทัดใหม่

โครงสร้างคอลัมน์

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

การกำหนดค่าสไตล์เส้น Divi

ปรับขนาด

เรายังไม่ได้เพิ่มม็อดใด ๆ เราจะเปิดการตั้งค่าและเปลี่ยนระยะห่างดังนี้:

  • ใช้รางที่กำหนดเอง: ใช่
  • พื้นที่รางน้ำ: 1
  • ความกว้าง: 95%
  • ความกว้างสูงสุด: 2560px
  • การจัดแถว: ศูนย์
โมดูล Divi การกำหนดค่ารางน้ำ

การเว้นวรรค

เราจะลบระยะขอบภายในสุดด้วยเช่นกัน

  • Padding ยอดนิยม: 0px
การกำหนดค่าระยะห่างโมดูล Divi

องค์ประกอบหลัก

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

Desktop:

จอแสดงผล: flex; align-items: center;

แท็บเล็ตและโทรศัพท์:

จอแสดงผล: บล็อก
การตั้งค่าสไตล์โมดูลสาย Divi

เพิ่มโมดูล Woo Image เข้ากับคอลัมน์ 1

เนื้อหาแบบไดนามิก

ถึงเวลาเพิ่มโมดูลเราจะเริ่มต้นด้วยโมดูล Woo Images ในคอลัมน์ 1 ตรวจสอบให้แน่ใจว่าได้เลือก "ผลิตภัณฑ์นี้" แล้ว

  • สินค้า: สินค้านี้
การตั้งค่าโมดูลรูปภาพผลิตภัณฑ์ Woocommerce

เอฟเฟกต์ภาพเคลื่อนไหวเลื่อนแนวตั้ง

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

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

เพิ่มโมดูลหัวเรื่อง Woo ไปยังคอลัมน์ 2

เนื้อหาแบบไดนามิก

ในคอลัมน์ 2 mod แรกที่เราต้องการคือ Woo title mod ตรวจสอบให้แน่ใจว่าได้เลือก "ผลิตภัณฑ์นี้" ในพื้นที่เนื้อหาไดนามิก

  • สินค้า: สินค้านี้
ประโยชน์ของผลิตภัณฑ์กริด

การตั้งค่าข้อความหัวข้อ

จากนั้นไปที่แท็บออกแบบและจัดรูปแบบข้อความหัวเรื่องดังนี้:

  • แบบอักษรของชื่อ: Oswald
  • รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่
  • สีข้อความของชื่อ: # ffd623
  • ขนาดตัวอักษรหัวเรื่อง: 80px
การปรับการออกแบบโมดูลหัวเรื่อง Divi

การเว้นวรรค

ทำให้โมดูลชื่อ Woo สมบูรณ์โดยการเพิ่มระยะขอบซ้ายและขวา

  • ขอบซ้าย: 5%
  • ระยะขอบขวา: 5%
การตั้งค่าโมดูลหัวเรื่อง Divi

เพิ่มโมดูลคำอธิบาย Woo ไปยังคอลัมน์ 2

เนื้อหาแบบไดนามิก

ไปที่โมดูลถัดไปซึ่งเป็นโมดูลคำอธิบาย Woo เราใช้เนื้อหาไดนามิกต่อไปนี้สำหรับสิ่งนี้:

  • สินค้า: สินค้านี้
  • คำอธิบายประเภท: คำอธิบายสั้น ๆ
การตั้งค่าโมดูลคำอธิบายผลิตภัณฑ์

การตั้งค่าข้อความ

สลับไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความตาม:

  • แบบอักษรข้อความ: Karla
  • สีข้อความ: #dbdbdb
  • ขนาดตัวอักษร: 17 px (เดสก์ท็อปและแท็บเล็ต), 15 px (โทรศัพท์)
  • ความสูงบรรทัดข้อความ: 1,9 em
คำอธิบายโมดูลการปรับสี

ปรับขนาด

จากนั้นเปลี่ยนความกว้างของหน้าจอขนาดต่างๆ

  • ความกว้าง: 59% (เดสก์ท็อป), 82% (แท็บเล็ตและโทรศัพท์)
การปรับความกว้างโมดูลสรุป Divi

การเว้นวรรค

ทำโมดูลคำอธิบาย Woo ให้สมบูรณ์โดยเพิ่มค่าระยะขอบที่กำหนดเองในการตั้งค่าระยะห่าง

  • ขอบบน: 50px
  • ขอบล่าง: 100px
  • ขอบซ้าย: 5%
  • ระยะขอบขวา: 5%
โมดูลรายละเอียดผลิตภัณฑ์ Divi

เพิ่มโมดูล Blurb ไปยังคอลัมน์ 2

เนื้อหาแบบไดนามิก

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

  • หัวข้อ: ชื่อเรื่องประโยชน์ 1
  • ร่างกาย: คำอธิบายประโยชน์ 1
การตั้งค่าข้อความโมดูลสรุป Divi

ลงรูปตนเอง

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

การกำหนดค่า Divi สรุปโมดูลรูปภาพ

การตั้งค่ารูปภาพ / ไอคอน

เลื่อนไปยังแท็บออกแบบของโมดูลและเปลี่ยนการตั้งค่าภาพ / ไอคอนดังนี้:

  • ตำแหน่งรูปภาพ / ไอคอน: ด้านบน
  • การจัดแนวภาพ / ไอคอน: ซ้าย
โมดูลปรับ Divi

การตั้งค่าข้อความหัวข้อ

เรากำลังแก้ไขการตั้งค่าข้อความชื่อเรื่องต่อไป

  • แบบอักษรของชื่อเรื่อง: Oswald
  • รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่
  • ขนาดตัวอักษรหัวเรื่อง: 25px
กำหนดค่าแบบอักษรโมดูลสรุป Divi

การตั้งค่าเนื้อความ

พร้อมกับการตั้งค่าข้อความร่างกาย

  • แบบอักษร: Karla
  • ขนาดตัวอักษร: 17 px (เดสก์ท็อปและแท็บเล็ต), 15 px (โทรศัพท์)
  • ความสูงของลำตัว: 1,9 em
กำหนดค่า div โมดูลข้อความสรุป i

ปรับขนาด

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

  • ความกว้างของภาพ: 25%
  • ความกว้าง: 49%
กำหนดค่าขนาดโมดูลสรุป Divi

การเว้นวรรค

นอกจากนี้เราจะเพิ่มช่องว่างรอบ ๆ โมดูล Blurb โดยใช้ค่าช่องว่างที่กำหนดเองบนหน้าจอขนาดต่างๆ

  • padding บน: 8%
  • ช่องว่างภายในที่ต่ำกว่า: 8%
  • ช่องว่างด้านซ้าย: 8% (เดสก์ท็อปและแท็บเล็ต) 2% (โทรศัพท์)
  • ช่องว่างภายในที่เหมาะสม: 8% (เดสก์ท็อปและแท็บเล็ต) 2% (โทรศัพท์)
กำหนดค่าระยะห่างโมดูลสรุป Divi

องค์ประกอบหลัก

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

จอแสดงผล: อินไลน์บล็อก
เพิ่มโมดูล divi รหัส css

โคลนโมดูลสรุป 3 ครั้ง

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

ชื่อผลิตภัณฑ์ส่วน divi

แก้ไขอิมเมจโมดูล Blurb

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

รูปภาพโมดูลสรุป Divi

แก้ไขเนื้อหาแบบไดนามิกของโมดูล Blurb

แก้ไขเนื้อหาแบบไดนามิกของแต่ละโมดูล Blurb ที่ซ้ำกันด้วย

  • หัวข้อ: หัวข้อการให้บริการ (2,3 หรือ 4)
  • ร่างกาย: คำอธิบายของข้อดี (2,3 หรือ 4)
กฎโมดูลสรุป Divi

เพิ่มเส้นขอบให้โมดูล Blurb แยกกัน

ประกาศแจ้งการตั้งค่าชายแดน 1

ตอนนี้เพื่อให้การออกแบบกริดของเราเสร็จสิ้นเราจะเพิ่มเส้นขอบให้กับโมดูล Blurb ในแต่ละระดับ เปิด Blurb mod แรกและใช้เส้นขอบตรง

  • ความกว้างชายแดนด้านขวา: 1px
  • สีเส้นขอบด้านขวา: # ffd623
โมดูลสรุป Divi การกำหนดค่าเส้นขอบโค้งมน

เพิ่มขอบด้านล่างให้กับโมดูล Blurb แรก

  • ความกว้างชายแดนด้านล่าง: 1px
  • สีขอบด้านล่าง: # 000000
กำหนดค่าระยะขอบล่างของ Divi
ประกาศแจ้งการตั้งค่าชายแดน 2

จากนั้นเปิดโมดูล Blurb ที่สองและใช้เส้นขอบด้านล่าง

  • ความกว้างชายแดนด้านล่าง: 1px
  • สีขอบด้านล่าง: # 000000
Divi สรุปโมดูลเส้นขอบการกำหนดค่า
ประกาศแจ้งการตั้งค่าชายแดน 3

ออกแบบกริดให้สมบูรณ์โดยการเพิ่มเส้นขอบตรงเข้ากับโมดูล Blurb ที่สาม

  • ความกว้างชายแดนด้านขวา: 1px
  • สีเส้นขอบด้านขวา: # ffd623
ประโยชน์ของผลิตภัณฑ์กริด

เพิ่ม Woo เพิ่มในตะกร้าโมดูลในคอลัมน์ 2

เนื้อหาแบบไดนามิก

โมดูลสุดท้ายที่เราต้องการในการออกแบบคือโมดูล Woo Add to Cart ตรวจสอบให้แน่ใจว่าได้เลือก "ผลิตภัณฑ์นี้" ในพื้นที่เนื้อหาไดนามิก

  • สินค้า: สินค้านี้
เพิ่มลงในการตั้งค่าโมดูลการ์ด Divi

การตั้งค่าฟิลด์

ไปที่แท็บออกแบบถัดไปและเปลี่ยนการตั้งค่าฟิลด์

  • สีพื้นหลังของช่อง: #ffffff
  • สีข้อความของฟิลด์: # 000000
กำหนดค่าโมดูลสีสไตล์เพิ่มในรถเข็น Divi
  • เขตข้อมูลโค้งมน: 0px (ทุกมุม)
  • ความกว้างของเส้นขอบเขตล่าง: 1px
  • สีของเส้นขอบด้านล่างของฟิลด์: # 000000
กำหนดค่าระยะห่างของส่วน Divi

การตั้งค่าปุ่ม

จากนั้นจัดสไตล์ปุ่มตาม:

  • ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
  • ขนาดข้อความของปุ่ม: 20 พิกเซล
  • สีข้อความของปุ่ม: # 000000
  • สีพื้นหลังของปุ่ม: # ffd623
  • ความกว้างเส้นขอบของปุ่ม: 0px
  • รัศมีเส้นขอบของปุ่ม: 0px
กำหนดค่าการออกแบบปุ่ม Divi
  • แบบอักษรของปุ่ม: Oswald
  • รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่
ปุ่มกำหนดค่า Divi
  • การเสริมด้านบน: 20px
  • ช่องว่างภายในด้านล่าง: 20px
  • ช่องว่างด้านซ้าย: 50px
  • ช่องว่างภายในขวา: 50px
กำหนดค่าขนาดโมดูล Divi

การเว้นวรรค

และทำพารามิเตอร์โมดูลให้สมบูรณ์โดยการเพิ่มค่ามาร์จิ้นที่กำหนดเอง

  • ขอบบน: 100px
  • ขอบซ้าย: 5%
กำหนดค่าระยะห่าง Divi

3. บันทึกการแก้ไขของตัวสร้างธีมและดูตัวอย่างผลลัพธ์

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

บันทึกการออกแบบ Divi
บันทึกการปรับเปลี่ยน Divi

การสำรวจ

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

ผลการสาธิต

คิดสุดท้าย

ในบทความนี้เราได้แสดงวิธีสร้างสรรค์ด้วยเทมเพลตหน้าผลิตภัณฑ์ Divi ถัดไปของคุณ โดยเฉพาะอย่างยิ่งเราได้แสดงวิธีรวมตารางผลประโยชน์ผลิตภัณฑ์แบบไดนามิกเพื่อเพิ่มสิทธิประโยชน์เพิ่มเติมให้กับหน้าผลิตภัณฑ์ของคุณ เราสร้างบทช่วยสอนนี้โดยใช้ Divi ร่วมกับปลั๊กอิน Advanced Custom Fields คุณยังสามารถดาวน์โหลดไฟล์ JSON ได้ฟรี! หากคุณมีคำถามหรือข้อเสนอแนะอย่าลังเลที่จะแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง

วิธีการใช้งานโหมดมืดบนไซต์ของคุณด้วย Divi

วิธีการใช้งานโหมดมืดบนไซต์ของคุณด้วย Divi

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

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

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

ขอเริ่มต้น!

การสำรวจ

นี่คือตัวอย่างของการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

นี่คือโหมดมืดที่กำหนดเองสลับที่เรากำลังจะสร้าง

สลับโหมดมืด

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

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

ส่วนที่ 1: การสร้างสวิตช์จากโหมดมืด

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

ในการเริ่มต้นให้เพิ่มแถวคอลัมน์หนึ่งแถวในส่วนเริ่มต้นเมื่อสร้างจากศูนย์โดยใช้ Divi ที่ส่วนหน้า

ส่วน Divi

เพิ่มโมดูลสรุป

ในการสร้างสลับที่กำหนดเองเราจะออกแบบโมดูล Blurb ด้วย CSS ที่กำหนดเอง

เพิ่มโมดูลข้อความการนำเสนอใหม่ลงในบรรทัด

เนื้อหา

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

โมดูลสรุป Divi

ความคิด

ไปที่การตั้งค่าการออกแบบและอัปเดตสิ่งต่อไปนี้:

  • ไอคอนสี: # 666666
  • จัดแนวรูปภาพ / ไอคอน: ซ้าย
  • ขนาดตัวอักษรของไอคอน: 22 พิกเซล
การกำหนดค่าไอคอน Divi
  • ความกว้าง: 50px
  • การจัดตำแหน่งของโมดูล: ศูนย์
  • ความสูง: 25px
การกำหนดค่าขนาด Divi
  • มาร์จิ้น: 0px ต่ำ
  • มุมโค้งมน: 4px
  • ความกว้างชายแดน: 2px
  • สีเส้นขอบ: # 666666
การกำหนดค่าเส้นขอบ Divi

CSS ที่กำหนดเอง

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

สำคัญมาก;

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบ After:

เนื้อหา: "light"; position: absolute; left: -35px; top: 0px;

สิ่งนี้จะเพิ่มฉลากไปยังโมดูล Blurb ซึ่งเราจะเปลี่ยนจาก "แสง" เป็น "มืด" เมื่อคลิก

ปุ่มสลับ Divi

การออกแบบตัวข้อความ

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

  • แบบอักษร: Roboto
  • สีข้อความ: # 666666
  • ขนาดตัวอักษร: 13px
  • ระยะห่างของตัวอักษรของร่างกาย: 1px
ปุ่มสลับแบบอักษร

การเพิ่มรหัสที่กำหนดเองด้วยโมดูลรหัส

ในการเพิ่มโค้ดที่จำเป็น (CSS / JQuery) เพื่อใช้งานสลับโหมดมืดเราจะใช้โมดูลโค้ด

สร้างโมดูลรหัสใหม่ภายใต้โมดูล Blurb ในคอลัมน์เดียวกัน

เพิ่มโมดูลรหัส

จากนั้นวางรหัสต่อไปนี้ในพื้นที่รหัส:

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

การเพิ่มคลาส CSS ที่กำหนดเอง

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

ประกาศคลาสโมดูล

เปิดการตั้งค่าโมดูล Blurb และเพิ่มคลาส CSS ที่กำหนดเองดังต่อไปนี้:

  • CSS class: et-dark-toggle
รหัส Divi css

ระดับความสามารถของโหมดมืด

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

ในการเริ่มต้นเราสามารถเพิ่มโหมดมืดในส่วนที่มีการสลับโหมดมืดของเรา

เปิดพารามิเตอร์ส่วนและเพิ่มคลาส CSS ต่อไปนี้:

  • CSS Class: สามารถเข้าโหมดได้
ส่วน Divi ตัวเลือก CSS

ส่วนที่ 2: การเพิ่มคุณสมบัติโหมดมืดให้กับหน้า Divi

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

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

จากนั้นเลือกเค้าโครงของหน้า Landing Page ของแอปบนอุปกรณ์เคลื่อนที่จากแท็บเค้าโครงที่กำหนดไว้ล่วงหน้า

ตรวจสอบว่าไม่ได้เลือกตัวเลือก“ แทนที่เนื้อหาที่มีอยู่” คุณไม่ต้องการล้างส่วนด้วยการสลับโหมดมืด

เลือกเค้าโครง Divi 1

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

  1. เราสามารถเพิ่มคลาส CSS ในแต่ละองค์ประกอบของหน้าทีละรายการ
  2. เราสามารถขยายคลาส CSS ไปยังองค์ประกอบต่างๆทั่วหน้า (ซึ่งจะเร็วกว่าการทำด้วยตนเอง) ตัวอย่างเช่นเราสามารถเปิดการตั้งค่าส่วนสำหรับส่วนบนสุดและขยายคลาส CSS สำหรับส่วนนั้นไปยังทุกส่วนของหน้า
  3. เราสามารถเพิ่มคลาส CSS ในค่าเริ่มต้นส่วนกลางขององค์ประกอบได้ สิ่งนี้จะนำคลาส CSS ไปใช้กับทุกองค์ประกอบทั่วทั้งไซต์โดยเพิ่มความสามารถในโหมดมืดทั่วทั้งไซต์ ตัวอย่างเช่นเราสามารถเปิดการตั้งค่าส่วนและคลิกไอคอนเริ่มต้นส่วนกลางเพื่อเปลี่ยนค่าเริ่มต้นของส่วนส่วนกลาง จากนั้นเราสามารถเพิ่มคลาส CSS และลงทะเบียนเป็นคลาส CSS สำหรับทุกส่วนของไซต์

การเพิ่มคลาส CSS ให้กับองค์ประกอบของหน้า

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

ทุกส่วน

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

  • CSS Class: สามารถเข้าโหมดได้

ส่วนพิเศษทั้งหมด

เพิ่มคลาส CSS ลงในค่าเริ่มต้นทั่วไปในส่วนเฉพาะ

เพิ่มในส่วนพิเศษทั้งหมด

โมดูลข้อความ

จากนั้นเปิดการตั้งค่าของโมดูลข้อความใดโมดูลหนึ่งบนเพจและเพิ่มคลาส CSS เดียวกันกับค่าเริ่มต้นของข้อความส่วนกลาง

เพิ่มลงในโมดูลข้อความ

ในการทดสอบผลลัพธ์ให้ไปที่หน้าสดและคลิกที่โหมดมืดสลับที่ด้านบนของหน้า

นี่คือสิ่งที่หน้าควรมีลักษณะในโหมดที่ชัดเจน

โหมดล้าง

และนี่คือสิ่งที่หน้าควรมีลักษณะในโหมดมืด

โหมดมืด

แหล่งข้อมูลเพิ่มเติม

นี่คือแหล่งข้อมูลอื่น ๆ ที่คุณอาจสนใจ

คิดสุดท้าย

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