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

โดย แบลร์ Jersyer | Juin 10, 2020 | Divi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ย้ายโลโก้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

padding-ด้านล่าง: 0px

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

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

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

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

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

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

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

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

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

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

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

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

ผลสุดท้าย

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

คิดสุดท้าย

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

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

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

โดย แบลร์ Jersyer | Juin 9, 2020 | Divi

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

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

Let 's go

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

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

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

เพิ่มส่วน # 1

การเว้นวรรค

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

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

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

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

• ขอบบน: 200px
• ขอบล่าง: 200px

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

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

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

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

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

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

การเว้นวรรค

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

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

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

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

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

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

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

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

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

ความชัดเจน

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

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

ออนไลน์

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

• สีของเส้น: # 000000

ปรับขนาด

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

• น้ำหนัก Divider: 3px
• ความกว้าง: 28%

การเว้นวรรค

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

• ขอบบน: 10px

เพิ่มส่วน # 2

การเว้นวรรค

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

• การเสริมด้านบน: 0px

ล้น

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

• ล้นแนวนอน: ซ่อน
• แนวตั้งล้น: ซ่อน

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

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

• การเสริมด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

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

สีพื้นหลัง

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

• สีพื้นหลัง: # f7f7f7

การเว้นวรรค

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

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

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

การเว้นวรรค

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

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

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

ความชัดเจน

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

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

ออนไลน์

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

• สีของเส้น: # 000000

ปรับขนาด

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

• น้ำหนัก Divider: 3px
• ความกว้าง: 50%

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

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

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

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

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

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

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

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

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

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

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

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

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

เพิ่มสำเนา

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

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

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

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

• แบบอักษรของปุ่ม: รายไตรมาส
• น้ำหนักแบบอักษรของปุ่ม: หนา

การเว้นวรรค

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

• การเสริมด้านบน: 50px
• ช่องว่างภายในด้านล่าง: 50px
• ช่องว่างด้านซ้าย: 100px
• ช่องว่างภายในขวา: 100px

ตำแหน่ง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ผลสุดท้าย

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

คิดสุดท้าย

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

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

โดย แบลร์ Jersyer | Juin 9, 2020 | Divi

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

สาธิต

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

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

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

การเว้นวรรค

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

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

ล้น

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

• ล้นแนวนอน: ซ่อน
• แนวตั้งล้น: ซ่อน

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

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

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

ปรับขนาด

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

• ความกว้าง: 90%
• ความกว้างสูงสุด: 1580px

การเว้นวรรค

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

• การเสริมด้านบน: 100px
• ช่องว่างภายในด้านล่าง: 100px

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

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

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

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

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

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

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

ความชัดเจน

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

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

ออนไลน์

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

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

ปรับขนาด

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

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

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

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

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

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

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

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

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

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

ภาพพื้นหลัง

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

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งของภาพพื้นหลัง: ตรงกลาง

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

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

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

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

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

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

ลบภาพ

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

ภาพพื้นหลัง

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

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งของภาพพื้นหลัง: ตรงกลาง

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

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

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

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

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

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

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

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

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

การเว้นวรรค

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

• padding บน: 70%
• ช่องว่างภายในที่ต่ำกว่า: 10%
• ช่องว่างด้านซ้าย: 10%
• แพ็ดดิงขวา: 10%

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

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

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

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

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

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

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

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

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

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

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

การสำรวจ

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

สำนัก

คิดสุดท้าย

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

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

โดย แบลร์ Jersyer | Juin 8, 2020 | Divi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

สรุป

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

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

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

โดย แบลร์ Jersyer | Juin 8, 2020 | Divi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• ป้ายชื่อฟิลด์: ชื่อผลประโยชน์ 1
• ประเภทฟิลด์: ข้อความ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แก้ไขส่วน # 1

สีพื้นหลัง

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

• สีพื้นหลัง: # 000000

การเว้นวรรค

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

• Padding ยอดนิยม: 10px
• ช่องว่างภายในด้านล่าง: 10px

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

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

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

การเว้นวรรค

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

• ใช้รางน้ำส่วนบุคคล: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 90%
• ความกว้างสูงสุด: 100%

การเว้นวรรค

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

• มาร์จิ้นภายในสูง: 0px
• มาร์จิ้นภายในต่ำ: 0px

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

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

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

• สินค้า: สินค้านี้

พื้นหลังสี

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

• สีพื้นหลัง: rgba (0,0,0,0)

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

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

• แบบอักษรข้อความ: Karla

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

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

• ใช้ปุ่มกำหนดลักษณะเองสำหรับ: ใช่
• ขนาดข้อความของปุ่ม: 20px
• สีข้อความของปุ่ม: # 000000
• พื้นหลังของปุ่ม: # ffd623
• ความกว้างเส้นขอบของปุ่ม: 0px
• ปุ่มขอบโค้งมน: 0px

• แบบอักษรของปุ่ม: Oswald
• รูปแบบตัวอักษรของปุ่ม: Shift

• มาร์จิ้นภายในสูง: 20px
• มาร์จิ้นภายในต่ำ: 20px
• ระยะขอบภายในด้านซ้าย: 50px
• มาร์จิ้นภายในขวา: 50px

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

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

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

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

การเว้นวรรค

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

• Padding ยอดนิยม: 150px

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

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

• Padding ยอดนิยม: 0px

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

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

Desktop:

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

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

จอแสดงผล: บล็อก

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

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

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

• สินค้า: สินค้านี้

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

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

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

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

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

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

• สินค้า: สินค้านี้

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

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

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

การเว้นวรรค

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

• ขอบซ้าย: 5%
• ระยะขอบขวา: 5%

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

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

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

• สินค้า: สินค้านี้
• คำอธิบายประเภท: คำอธิบายสั้น ๆ

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

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

• ขอบบน: 50px
• ขอบล่าง: 100px
• ขอบซ้าย: 5%
• ระยะขอบขวา: 5%

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

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

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

• หัวข้อ: ชื่อเรื่องประโยชน์ 1
• ร่างกาย: คำอธิบายประโยชน์ 1

ลงรูปตนเอง

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

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

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

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

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

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

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

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

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

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

ปรับขนาด

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

• ความกว้างของภาพ: 25%
• ความกว้าง: 49%

การเว้นวรรค

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

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

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

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

จอแสดงผล: อินไลน์บล็อก

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

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

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

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

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

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

• หัวข้อ: หัวข้อการให้บริการ (2,3 หรือ 4)
• ร่างกาย: คำอธิบายของข้อดี (2,3 หรือ 4)

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

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

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

• ความกว้างชายแดนด้านขวา: 1px
• สีเส้นขอบด้านขวา: # ffd623

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

• ความกว้างชายแดนด้านล่าง: 1px
• สีขอบด้านล่าง: # 000000

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

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

• ความกว้างชายแดนด้านล่าง: 1px
• สีขอบด้านล่าง: # 000000

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

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

• ความกว้างชายแดนด้านขวา: 1px
• สีเส้นขอบด้านขวา: # ffd623

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

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

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

• สินค้า: สินค้านี้

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

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

• สีพื้นหลังของช่อง: #ffffff
• สีข้อความของฟิลด์: # 000000

• เขตข้อมูลโค้งมน: 0px (ทุกมุม)
• ความกว้างของเส้นขอบเขตล่าง: 1px
• สีของเส้นขอบด้านล่างของฟิลด์: # 000000

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

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

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

• แบบอักษรของปุ่ม: Oswald
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

• การเสริมด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px
• ช่องว่างด้านซ้าย: 50px
• ช่องว่างภายในขวา: 50px

การเว้นวรรค

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

• ขอบบน: 100px
• ขอบซ้าย: 5%

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

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

การสำรวจ

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

คิดสุดท้าย

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

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

โดย แบลร์ Jersyer | Juin 1, 2020 | Divi

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

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

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

ขอเริ่มต้น!

การสำรวจ

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

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

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

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

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

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

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

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

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

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

เนื้อหา

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

ความคิด

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

• ไอคอนสี: # 666666
• จัดแนวรูปภาพ / ไอคอน: ซ้าย
• ขนาดตัวอักษรของไอคอน: 22 พิกเซล

• ความกว้าง: 50px
• การจัดตำแหน่งของโมดูล: ศูนย์
• ความสูง: 25px

• มาร์จิ้น: 0px ต่ำ
• มุมโค้งมน: 4px
• ความกว้างชายแดน: 2px
• สีเส้นขอบ: # 666666

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

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

สำคัญมาก;

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

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

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

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

เนื่องจากข้อความองค์ประกอบหลอกของโพสต์สืบทอดรูปแบบข้อความเนื้อหาเราจึงสามารถเพิ่มรูปแบบข้อความเนื้อหาโดยใช้ตัวเลือก 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ทุกส่วน

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

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

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

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

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

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

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

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

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

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

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

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

คิดสุดท้าย

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