โดย เกตัน Divi , บทแนะนำ Divi
คุณต้องการทราบวิธีการเปิดเผยเนื้อหาเมื่อวางเมาส์เหนือตัวแบ่งส่วนใน Divi หรือไม่?
ตัวแบ่งส่วนยังคงเป็นองค์ประกอบการออกแบบ Divi ที่ได้รับความนิยม มีตัวแบ่งหลายสไตล์ให้เลือกพร้อมตัวเลือกที่มีประโยชน์ ซึ่งทำให้ง่ายต่อการเพิ่มทรานซิชันและพื้นหลังที่ไม่ซ้ำกันให้กับเพจของคุณ
ในบทช่วยสอนนี้ เราจะใช้ตัวแบ่งส่วนแตกต่างกันเล็กน้อย Divi ให้คุณปรับความสูงและเลย์เอาต์ของตัวแบ่งแต่ละส่วนได้ ซึ่งช่วยให้เราสามารถวางตำแหน่งตัวคั่นเหนือบางพื้นที่หรือเนื้อหาส่วน
ด้วยการใช้ตัวเลือกโฮเวอร์สำหรับความสูงของตัวแยก เราสามารถเพิ่มเอฟเฟกต์โฮเวอร์เฉพาะที่เปิดเผยเนื้อหาที่ซ่อนอยู่บางส่วน วิธีนี้ใช้ได้ผลดีในการดึงดูดความสนใจไปยังคำกระตุ้นการตัดสินใจหรือปุ่มที่คุณต้องการให้ผู้เข้าชมคลิก
การสำรวจ
สร้างหน้าใหม่ด้วย Divi Builder
จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่
ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder
จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน )
หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi
การออกแบบเอฟเฟกต์โฮเวอร์ตัวแบ่งส่วนใน Divi
การสร้างส่วนและบรรทัด
สร้างส่วนปกติด้วยแถวสองคอลัมน์
ก่อนเพิ่มโมดูล ให้เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:
การไล่สีพื้นหลัง (ซ้าย): #73ba57
เพิ่มชื่อหัวข้อ
ในการเพิ่มชื่อส่วน ให้สร้างโมดูลข้อความและแทรกข้อความต่อไปนี้:
<h2>The Juice</h2>ถัดไป ปรับปรุงการออกแบบดังนี้:
แบบอักษร: Lato
ระยะขอบที่กำหนดเองและดัชนี z จะทำให้ข้อความอยู่หลังรูปภาพที่เราจะเพิ่มในขั้นตอนต่อไป
ใส่รูปภาพ
ใต้โมดูลข้อความที่มีชื่อเรื่องในคอลัมน์ 1 ให้เพิ่มโมดูลรูปภาพ จากนั้นอัปโหลดภาพที่มีพื้นหลังโปร่งใส เราใช้รูปภาพจากชุดเลย์เอาต์ ร้านน้ำผลไม้ 240 พิกเซลคูณ 300 พิกเซล
การปรับการจัดตำแหน่งภาพให้อยู่ตรงกลาง
เพิ่มโมดูล "Call To Action" ในคอลัมน์ 2
ในคอลัมน์ 2 เพิ่มโมดูลการเรียกร้องให้ดำเนินการ
เพิ่ม URL ลิงก์ของปุ่มเพื่อให้แน่ใจว่าปุ่มจะแสดงขึ้น
พื้นหลัง CTA และการจัดรูปแบบข้อความชื่อ
ถัดไป อัปเดตการตั้งค่าการออกแบบต่อไปนี้:
ความเป็นมา: #ffffff
ปรับแต่งปุ่ม CTA
ปรับปรุงการออกแบบปุ่มดังนี้:
ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่ สีข้อความของปุ่ม: #ffffff สีพื้นหลังของปุ่ม: #73ba57 ความกว้างของเส้นขอบ: 0px กำหนดเส้นขอบโมดูล CTA เอง
จากนั้นเพิ่มเส้นขอบสำหรับเฟรมโมดูลดังนี้:
ความกว้างของเส้นขอบ: 10px
เพิ่มเอฟเฟกต์โฮเวอร์ไปยังตัวแยกเพื่อแสดงโมดูล "คำกระตุ้นการตัดสินใจ"
ตอนนี้ได้เวลาเพิ่มเอฟเฟกต์โฮเวอร์ไปที่ตัวแบ่งส่วนเพื่อแสดงโมดูล "การเรียกร้องให้ดำเนินการ" ในการทำเช่นนี้ เราต้องสร้างตัวแบ่งส่วนของเราก่อน
อ่าน: Divi: วิธีเปิดเผยเนื้อหาเมื่อวางเมาส์เหนือแท็บ
การเพิ่มตัวคั่นด้านบน
เปิดพารามิเตอร์ส่วนและตัวคั่นด้านบนด้วยพารามิเตอร์ต่อไปนี้
สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
โปรดทราบว่าความสูงของตัวคั่นเริ่มต้นด้วยความสูงเริ่มต้น 70% จากนั้นเปลี่ยนเป็นความสูง 0% เมื่อวางเมาส์เหนือ
เพิ่มตัวแบ่งด้านล่าง
จากนั้นเพิ่มตัวคั่นล่างที่คล้ายกับส่วนที่มีพารามิเตอร์ต่อไปนี้
สไตล์ตัวแบ่งด้านล่าง: ดูภาพหน้าจอ ตัวแบ่งสีด้านล่าง: #73ba57 ความสูงของตัวแบ่ง: 70% (ค่าเริ่มต้น), 0% (โฮเวอร์) ตัวคั่นพลิก: แนวนอน การจัดเรียง: ด้านบนของเนื้อหาส่วน ตัวแบ่งด้านล่างนี้เริ่มต้นด้วยความสูง 70% ซึ่งลดลงเหลือ 0% เมื่อโฮเวอร์ อย่างไรก็ตาม เนื่องจากตัวเลือกการจัดเรียงตัวแยกถูกตั้งค่าไว้เหนือเนื้อหา ตัวแยกส่วนจะซ่อนส่วนล่างของโมดูล "การเรียกร้องให้ดำเนินการ" ในคอลัมน์ 1 จากนั้นเมื่อวางเมาส์เหนือ โมดูลที่เหลือจะถูกเปิดเผย
ตรวจสอบผลลัพธ์จนถึงตอนนี้
เพิ่มเอฟเฟกต์โฮเวอร์กล่องเงาสำหรับการเปลี่ยนและการออกแบบที่ไม่เหมือนใคร
สำหรับการเปลี่ยนภาพและการออกแบบที่ไม่เหมือนใครบนโฮเวอร์ เราสามารถเพิ่มเอฟเฟกต์กล่องเงาที่จะเกิดขึ้นพร้อมกันกับเอฟเฟกต์โฮเวอร์ตัวแยก เมื่อต้องการทำเช่นนี้ เพิ่มเงาของกล่องต่อไปนี้ในส่วน
กล่องเงา: ดูภาพหน้าจอ ตำแหน่งแนวนอน: 0px ตำแหน่งแนวตั้ง: 0px ความแรงของการกระจายเงาของกล่อง: 0px (ค่าเริ่มต้น), 150px (โฮเวอร์) สีเงา: #73ba57 ชะลอระยะเวลาของการเปลี่ยนแปลง
สำหรับขั้นตอนสุดท้ายขอชะลอระยะเวลาของการเปลี่ยนแปลง
ระยะเวลาการเปลี่ยนภาพ: 700ms
ผลสุดท้าย
เมื่อเราได้ผ่านขั้นตอนทั้งหมดแล้ว เรามาดูผลลัพธ์สุดท้ายกัน
สรุป
เราหวังว่าบทความนี้จะเป็นแรงบันดาลใจให้คุณสร้างเอฟเฟกต์โฮเวอร์ตัวแบ่งส่วนที่ไม่เหมือนใครเพื่อเปิดเผยเนื้อหา
อันที่จริง การปรับตัวแยกโฮเวอร์อาจเป็นองค์ประกอบการออกแบบที่ยอดเยี่ยมด้วยตัวมันเอง นอกจากนี้ การออกแบบตัวอย่างควรช่วยให้คุณเริ่มต้นการสำรวจและการออกแบบของคุณเอง
เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการ Divi ครั้งต่อไปของคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น
ปรึกษาได้นะคะ ทรัพยากรของเรา การสร้างบล็อก WordPress Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ
...
โดย เกตัน Divi , บทแนะนำ Divi
คุณต้องการให้มีเนื้อหาที่แสดงตัวเองเมื่อวางเมาส์เหนือแท็บมุมที่ขยายได้ใน Divi หรือไม่?
การค้นพบวิธีใหม่ๆ ที่สร้างสรรค์ในการโต้ตอบกับผู้ใช้โดยใช้เอฟเฟกต์โฮเวอร์นั้นเป็นเรื่องสนุกเสมอ วิธีที่ยอดเยี่ยมในการทำเช่นนี้คือการเปิดเผยเนื้อหาบนโฮเวอร์โดยใช้แท็บมุมที่ขยายได้ ซึ่งช่วยให้ผู้ใช้สามารถวางเมาส์เหนือแท็บที่มุมของคอลัมน์หรือรูปภาพเพื่อขยายการซ้อนทับด้วยเนื้อหาที่เป็นประโยชน์เพิ่มเติมสำหรับผู้ใช้
ในบทช่วยสอนนี้ เราจะสร้างเลย์เอาต์ Divi ที่ไม่เหมือนใครซึ่งจะเปิดเผยเนื้อหาบนโฮเวอร์โดยใช้แท็บมุมที่ขยายได้ อันที่จริง เราจะแสดงวิธีออกแบบแท็บมุมที่ขยายได้สำหรับมุมทั้งสี่ของคอลัมน์ใน Divi
ขอเริ่มต้น!
การสำรวจ
ต่อไปนี้คือภาพรวมคร่าวๆ ของเลย์เอาต์ของแท็บมุมที่ขยายได้ที่เราจะสร้างร่วมกัน สังเกตว่าเอฟเฟกต์และเนื้อหาโฮเวอร์สมมาตรอย่างสวยงามเพียงใด
สร้างหน้าใหม่ด้วย Divi Builder
จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่
ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder
จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน )
หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi
การสร้างเค้าโครงการวางซ้อนเนื้อหาที่ขยายได้ใน Divi
การออกแบบตัวปรับมุมที่ขยายได้จากตำแหน่งล่างขวา
ในการเริ่มต้น ให้เพิ่มแถวสองคอลัมน์ในส่วนปกติ
ก่อนเพิ่มโมดูล ให้อัปเดตพารามิเตอร์บรรทัดดังนี้:
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่ ความกว้างของรางน้ำ: 4 สำหรับองค์ประกอบแรกที่แสดงนี้ เราจะสร้างภาพพื้นหลังของคอลัมน์ซึ่งจะมีแท็บมุม (โดยใช้โมดูล การประกาศแจ้งความ ) ที่ด้านล่างขวาของคอลัมน์ซึ่งขยายและครอบคลุมทั้งคอลัมน์/รูปภาพเมื่อวางเมาส์เหนือ
อ่านคู่มือของเราได้ที่ Divi: วิธีสร้างตารางคอลัมน์ของเหลวบนโฮเวอร์
เริ่มต้นด้วยการเพิ่มโมดูล Blurb
เพิ่มโมดูล Blurb ลงในคอลัมน์ 1
การตั้งค่าคอลัมน์ 1
เมื่อนำเสนอเรียบร้อยแล้ว ให้เปิดการตั้งค่าแถว อัปเดตสิ่งต่อไปนี้:
ภาพพื้นหลัง [แทรกรูปภาพ] ขนาดภาพพื้นหลัง : ขนาดจริง หมายเหตุ: สำหรับตัวอย่างนี้ เรากำลังใช้ภาพเบียร์พื้นหลังโปร่งใสที่นำมาจากแพ็คเลย์เอาต์ « โรงเบียร์ “. พวกมันมีขนาด 128 พิกเซลคูณ 359 พิกเซล ดังนั้นเราจึงใช้ขนาดภาพจริง
เส้นขอบของคอลัมน์ 1
มุมโค้งมน: 10px ล่างขวา ความกว้างของเส้นขอบ (ขวาและล่าง): 2px สีเส้นขอบ (ขวาและล่าง): #e94558 CSS ที่กำหนดเองและโอเวอร์โฟลว์
ใต้แท็บขั้นสูง เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:
height: 400px;ตัวเลือกแบบเลื่อนลง 'ทัศนวิสัย' และทำการเปลี่ยนแปลงดังต่อไปนี้:
แนวนอนล้น: ซ่อน ล้นแนวตั้ง: ซ่อน เพิ่มเนื้อหาไปยังโมดูล Blurb
ตอนนี้เราพร้อมที่จะเริ่มปรับแต่งโมดูล Blurb ในคอลัมน์ 1 แล้ว เปิดการตั้งค่าโมดูลและอัปเดตสิ่งต่อไปนี้:
ชื่อเรื่อง: Mango IPA ร่างกาย : <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p>รูปภาพ: เพิ่มรูปภาพเดียวกันกับที่ใช้สำหรับพื้นหลังของคอลัมน์ การปรับแต่งโมดูล Blurb
กำหนดสีพื้นหลังโฮเวอร์ให้การนำเสนอดังนี้:
พื้นหลัง (เดสก์ท็อป): โปร่งใส เดสก์ท็อป (โฮเวอร์): rgba (255,255,255,0.9) ภายใต้แท็บ ออกแบบ , ปรับปรุงสิ่งต่อไปนี้:
ตำแหน่งรูปภาพ/ไอคอน: ขวา แบบอักษรของชื่อเรื่อง: Oswald น้ำหนักแบบอักษร: กึ่งหนา รูปแบบตัวอักษร: TT ขนาดตัวอักษร: 40px สีข้อความ (เดสก์ท็อป): clear สีข้อความ (โฮเวอร์): #121212 ความกว้างของรูปภาพ/ไอคอน: 100px (เดสก์ท็อป), 64px (โทรศัพท์) ความกว้างของเนื้อหา: 100% ส่วนสูง: 100% Padding (เดสก์ท็อป): 15% (บนและล่าง), 8% (ซ้ายและขวา) Padding (โฮเวอร์): 8% (บน ล่าง ซ้ายและขวา) มุมโค้งมน (เดสก์ท็อป): 20px บนซ้าย มุมโค้งมน (โฮเวอร์): 10px บนซ้าย ความกว้างของเส้นขอบ (บนและซ้าย): 4px (เดสก์ท็อป), 2px (โฮเวอร์) สีเส้นขอบ (บนและซ้าย): #e94558 ตัวเลือกการแปลง (เดสก์ท็อป)
มาตราส่วนการแปลง (X และ Y): 50% อ่านคู่มือของเราได้ที่: Divi: วิธีสร้างส่วนท้ายที่ติดหนึบด้วยเอฟเฟกต์ "เปิดเผย"
กำเนิดการแปลง: ล่างและขวา ตัวเลือกการแปลง (โฮเวอร์)
มาตราส่วนการแปลง (Y และ X) (โฮเวอร์): 100% แปลงแปล (Y และ X) (โฮเวอร์): 0% ในการพลิกรูปภาพเด่นทางด้านขวา ให้เพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงในพื้นที่ เนื้อหานำเสนอ :
direction: rtlหมายเหตุ: “rtl” ย่อมาจาก "จากขวาไปซ้าย" ซึ่งจะเปลี่ยนลำดับเริ่มต้นของเนื้อหา (จากซ้ายไปขวา)
ผล
มาดูผลลัพธ์สุดท้ายของแท็บมุมของเราที่ขยายจากตำแหน่งด้านล่างขวา สังเกตว่าจะขยายเพื่อเติมทั้งคอลัมน์เมื่อวางเมาส์เหนือได้อย่างไร
การออกแบบตัวปรับมุมที่ขยายได้จากตำแหน่งล่างซ้าย
คอลัมน์ซ้ำ
ในการสร้างแท็บมุมที่ขยายจากตำแหน่งล่างซ้าย เราสามารถเปิดการออกแบบใหม่ได้โดยการทำซ้ำทั้งคอลัมน์ เปิดการตั้งค่าแถวและคอลัมน์ที่ซ้ำกัน 1 จากนั้นลบคอลัมน์พิเศษออกเพื่อให้คุณมีเพียงสองคอลัมน์ที่ซ้ำกันเท่านั้น
อัพเดตการตั้งค่าคอลัมน์ 2
ถัดไป เปิดการตั้งค่าคอลัมน์ 2 และอัปเดตสิ่งต่อไปนี้:
มุมโค้งมน: 10 px ล่างซ้าย ความกว้างของเส้นขอบ (ขวา): 0px ความกว้างของเส้นขอบ (ซ้าย): 2px สี: #e94558 อัพเดตพารามิเตอร์ของโมดูล Blurb
ถัดไป อัปเดตการตั้งค่า Blurb ดังนี้:
การจัดตำแหน่งข้อความ: right มุมโค้งมน (เดสก์ท็อป): 20px บนขวา มุมโค้งมน (โฮเวอร์): 10px บนขวา ความกว้างของเส้นขอบด้านซ้าย: 0px ความกว้างของขอบขวา: 4px (เดสก์ท็อป), 2px (โฮเวอร์) สีขอบขวา: #e94558 Transform Translate (แกน X) (เดสก์ท็อป): -30% Transform Origin (เดสก์ท็อป): ล่างซ้าย จากนั้นตรวจสอบให้แน่ใจว่าได้ลบ CSS ที่กำหนดเองในพื้นที่เนื้อหา Blurb
ผล
นี่คือผลลัพธ์ สังเกตว่าอันนี้สมมาตรกับอันแรกและขยายจากตำแหน่งล่างซ้ายของคอลัมน์
การออกแบบตัวปรับมุมที่ขยายได้จากตำแหน่งบนขวา
ตอนนี้เราพร้อมแล้วที่จะเริ่มการออกแบบตุ้มปี่มุมขยายสองส่วนสุดท้ายของเรา ในการเริ่มต้น ให้ทำซ้ำทั้งแถวที่มีคำประกาศที่เราออกแบบไว้แล้ว
อัพเดตการตั้งค่าคอลัมน์ 1
จากนั้นเปิดการตั้งค่าสำหรับแถวที่ซ้ำกัน จากนั้นเปิดการตั้งค่าสำหรับคอลัมน์ 1 และอัปเดตรายการต่อไปนี้
มุมโค้งมน: 10px บนขวา ความกว้างขอบล่าง: 0px ความกว้างขอบด้านบน: 2px สีขอบบน: #e94558 อัพเดตพารามิเตอร์ของโมดูล Blurb
ถัดไป เปิดการตั้งค่าโมดูล Blurb และอัปเดตสิ่งต่อไปนี้:
มุมโค้งมน (เดสก์ท็อป): 20px ล่างซ้าย มุมโค้งมน (โฮเวอร์): 10px ล่างซ้าย ความกว้างขอบด้านบน: 0px ความกว้างขอบด้านล่าง: 4px (เดสก์ท็อป), 2px (โฮเวอร์) ความกว้างขอบล่าง: #e94558 Transform Translate (แกน Y) (เดสก์ท็อป): -50% กำเนิดการแปลง: บนขวา CSS ที่กำหนดเอง
ตอนนี้เราสามารถเห็นเฉพาะส่วนล่างซ้ายของโมดูลการนำเสนอซึ่งไม่แสดงชื่อของเราเหมือนกับการนำเสนออีกสองรายการในแถวด้านบน เพื่อแสดงชื่อเรื่องในแท็บ เราจำเป็นต้องเปลี่ยนตำแหน่งหัวเรื่องไปที่ด้านล่างซ้ายของการนำเสนอด้วย CSS ที่กำหนดเอง
เพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงในพื้นที่ หัวข้อประกาศ :
position: absolute;
bottom: 0;
left: 15px;จากนั้นเพิ่ม CSS ต่อไปนี้ลงในพื้นที่เนื้อหา เนื้อหานำเสนอ :
direction: rtl;
height: 100%;การออกแบบตัวปรับมุมที่ขยายได้จากตำแหน่งบนซ้าย
สำหรับเอฟเฟกต์การวางเมาส์เหนือแท็บมุมที่สี่และสุดท้าย เราจะจัดตำแหน่งไว้ที่มุมซ้ายบนเพื่อให้การออกแบบสมมาตรของเลย์เอาต์กริดทั้งหมดสมบูรณ์
อัพเดตการตั้งค่าคอลัมน์ 2
ภายใต้การตั้งค่าแถว เปิดการตั้งค่าคอลัมน์ 2 และอัปเดตต่อไปนี้:
ขอบมุม: 10 px บนซ้าย ความกว้างขอบล่าง: 0px ความกว้างขอบด้านบน: 2px สีขอบบน: #e94558 อัพเดตพารามิเตอร์ของโมดูล Blurb
ถัดไป เปิดการตั้งค่าข้อความโมดูล Blurb ในคอลัมน์ 2 และอัปเดตสิ่งต่อไปนี้:
มุมโค้งมน (เดสก์ท็อป): 20px ด้านล่างขวา มุมโค้งมน (โฮเวอร์): 10px ล่างขวา ความกว้างขอบด้านบน: 0px ความกว้างขอบด้านล่าง: 4px (เดสก์ท็อป), 2px (โฮเวอร์) สีขอบล่าง: #e94558 จากนั้นอัปเดตตัวเลือกการแปลง:
Transform Translate (แกน Y) (เดสก์ท็อป): -50% กำเนิดการแปลง: บนซ้าย CSS ที่กำหนดเอง
จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงในพื้นที่ หัวข้อประกาศ :
position: absolute;
bottom: 0%;
right: 0%;เพิ่ม CSS ต่อไปนี้ในกล่อง เนื้อหานำเสนอ :
height: 100%;เสร็จสิ้นการออกแบบเลย์เอาต์
ส่วนสีพื้นหลัง
เพิ่มสีพื้นหลังของส่วนดังนี้:
เพิ่มหัวข้อ
ในการสร้างหัวเรื่อง ให้เพิ่มบรรทัดลงในคอลัมน์ที่อยู่ตรงกลางของสองบรรทัด
จากนั้นเพิ่มโมดูลข้อความ
เพิ่มเนื้อหา: "ตามฤดูกาล"
จากนั้นอัปเดตการตั้งค่าต่อไปนี้:
แบบอักษร: Merriweather น้ำหนักแบบอักษร: ตัวหนา สไตล์: TT การจัดตำแหน่งข้อความ: กึ่งกลาง สีข้อความ: #999999 ขนาด: 50px (เดสก์ท็อป), 30px (แท็บเล็ต), 24px (โทรศัพท์) ระยะห่างระหว่างตัวอักษร: 1em ช่องว่างภายใน (ซ้าย): 50px (เดสก์ท็อป), 30px (แท็บเล็ต), 24px (โทรศัพท์) ผลสุดท้าย
ตรวจสอบผลลัพธ์สุดท้ายของการจัดวางด้วยแท็บมุมที่ขยายออก
และนี่คือการออกแบบบนมือถือ
สรุป
แท็บมุมที่แสดงในบทช่วยสอนนี้จะใช้ได้กับเนื้อหาทุกประเภทที่คุณต้องการแสดงบนเว็บไซต์ Divi ของคุณอย่างแน่นอน
คุณไม่จำเป็นต้องใช้ทั้งสี่มุม ตัวอย่างเช่น คุณสามารถสร้างเค้าโครงตารางสำหรับรูปภาพโดยใช้เฉพาะแท็บมุมขวาบนเพื่อแสดงเนื้อหาเมื่อวางเมาส์เหนือ
เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการ Divi ครั้งต่อไปของคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น
ปรึกษาได้นะคะ ทรัพยากรของเรา การสร้างบล็อก WordPress Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ
...
โดย เกตัน Divi , บทแนะนำ Divi
คุณต้องการสร้างตารางด้วย Divi ที่ลื่นไหลเมื่อวางเมาส์ไว้หรือไม่?
หากคุณรักการสร้างเว็บไซต์โดยคำนึงถึงการโต้ตอบกับผู้ใช้ คุณจะต้องชอบบทแนะนำนี้
วันนี้เราจะแสดงวิธีสร้างตารางโปร่งใสซึ่งมีการแสดงภาพพื้นหลังทันทีที่มีผู้วางเมาส์เหนือองค์ประกอบใดองค์ประกอบหนึ่ง การออกแบบในขั้นต้นเรียบง่ายและสะอาดตา ส่งผลให้ประสบการณ์การโฉบที่ดี
ในบทช่วยสอนนี้ เราจะแนะนำคุณตลอดกระบวนการสร้างทีละขั้นตอน
Let 's go
การสำรวจ
ก่อนดำดิ่งสู่บทช่วยสอน มาดูผลลัพท์ของหน้าจอขนาดต่างๆ กันก่อน
สำนัก
ตอบสนอง
มาเริ่มกระบวนการสร้างใน Divi . กันเถอะ
เพิ่มส่วนใหม่
สีพื้นหลัง
เพิ่มส่วนใหม่ในหน้าที่คุณกำลังทำงานอยู่
ดูเพิ่มเติม: Divi: วิธีสร้างส่วนท้ายที่กำหนดเอง
ขั้นแรกให้เปิดการตั้งค่าส่วนและใช้สีพื้นหลังสีขาว
แอดไลน์ #1
โครงสร้างของคอลัมน์
ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลใด ๆ เปิดการตั้งค่าบรรทัดไปที่แท็บ ออกแบบ , ดึงตัวเลือกลง การกำหนดขนาด และแก้ไขพารามิเตอร์การปรับขนาดดังนี้:
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่ รางน้ำ : 1 ความกว้าง: 100% ความกว้างสูงสุด: 100% การเว้นวรรค
จากนั้นดึงตัวเลือกลง การเว้นวรรค และเปลี่ยนการตั้งค่าต่อไปนี้:
ช่องว่างภายใน (บนและล่าง): 0px ชายแดน
ในตัวเลือกเส้นขอบ ให้ทำการเปลี่ยนแปลงต่อไปนี้ด้วย:
รูปแบบเส้นขอบ (บนและล่าง): 1px สีเส้นขอบ (บนและล่าง): #d3d3d3 การตั้งค่าคอลัมน์ 1
โฮเวอร์พื้นหลัง
ต่อไป มาปรับแต่งการตั้งค่าสำหรับคอลัมน์ 1 กัน ใช้การเติมไล่ระดับกับโฮเวอร์
สี 1: rgba(255,255,255,0) สี 2: #000000 ประเภทการไล่ระดับสี: เชิงเส้น ตำแหน่งสี 1: 30% วางการไล่ระดับสีเหนือภาพไล่ระดับ: ใช่ ภาพพื้นหลังบนโฮเวอร์
อัปโหลดภาพพื้นหลังที่จะปรากฏเมื่อวางเมาส์เหนือ
ขนาดภาพพื้นหลัง : ปก ตำแหน่งภาพพื้นหลัง: กึ่งกลาง ชั้น CSS
และตั้งค่าคอลัมน์ให้สมบูรณ์โดยกำหนดคลาส CSS ต่อไปนี้ใน tab ระดับสูง :
CSS Class: โฮเวอร์คอลัมน์ เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 1
เพิ่มข้อความขนาด H3 (หัวเรื่อง 3)
ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความแรกในคอลัมน์ 1 แทรกข้อความที่คุณเลือก
การตั้งค่าข้อความ H3
จากนั้นสลับไปที่แท็บ ออกแบบ ของโมดูลและแก้ไขพารามิเตอร์ข้อความ H3 ดังต่อไปนี้:
แบบอักษร: Oswald น้ำหนักแบบอักษร น้ำหนักแบบอักษร: เบาพิเศษ ส่วนหัว 3 รูปแบบตัวอักษร: TT สีข้อความ: #0a0a0a หัวเรื่อง 3 ขนาดข้อความ:เดสก์ท็อป: 3vw แท็บเล็ต: 7vw โทรศัพท์: 14vw หัวเรื่อง 3 ระยะห่างตัวอักษร: -2px ปรับขนาด
เปลี่ยนความกว้างของขนาดหน้าจอต่างๆ ในการตั้งค่าขนาด
ความกว้าง:เดสก์ท็อป: 44% เม็ด: 48% โทรศัพท์: 50% การเว้นวรรค
ลองเปลี่ยนพารามิเตอร์ต่อไปนี้ในตัวเลือก การเว้นวรรค .
มาร์จิ้น (ล่าง): 25vh Padding (บนและล่าง): 5% ช่องว่างภายใน (ซ้ายและขวา): 4% ชายแดน
ต่อไป เราจะเพิ่มเส้นขอบทางด้านขวาและด้านล่าง
ความกว้างของเส้นขอบ (ขวาและล่าง): 1px สีเส้นขอบ (ขวาและล่าง): #d3d3d3 ชั้น CSS
และเราจะทำการตั้งค่าโมดูลให้สมบูรณ์ด้วยการกำหนดคลาส CSS ต่อไปนี้ให้กับโมดูล Text:
CSS Class: โฮเวอร์-ชื่อเรื่อง เพิ่มโมดูลข้อความ #2 ลงในคอลัมน์ 1
เพิ่มเนื้อหา
เพิ่มโมดูลข้อความอื่นด้านล่างโมดูลก่อนหน้าพร้อมเนื้อหาคำอธิบายที่คุณเลือก
การตั้งค่าข้อความ
เปลี่ยนเป็นแท็บ ออกแบบ ของโมดูลและแก้ไขพารามิเตอร์ข้อความตามลำดับ:
แบบอักษรของข้อความ : Karla สีข้อความ: #ffffff ขนาด :เดสก์ท็อป: 0,8 vw แท็บเล็ต: 2vw โทรศัพท์: 3.6vw ความสูงของสาย: 2,2 em การเว้นวรรค
ใช้ค่าระยะขอบแบบกำหนดเองด้วย
แผ่นรอง (ด้านล่าง): 10% ช่องว่างภายใน (ซ้ายและขวา): 9% ชั้น CSS
และกรอกพารามิเตอร์โมดูลโดยใช้คลาส CSS ต่อไปนี้สำหรับโมดูล:
เพิ่มโมดูล "ปุ่ม" ลงในคอลัมน์ 1
เพิ่มคำอธิบาย
โมดูลถัดไปและโมดูลสุดท้ายที่เราต้องการคือโมดูล ปุ่ม . ป้อนคำอธิบายที่คุณเลือก
การตั้งค่าปุ่ม
แก้ไขพารามิเตอร์โมดูลดังนี้:
ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่ ขนาดข้อความของปุ่ม:เดสก์ท็อป: 1vw แท็บเล็ต: 2,5 vw โทรศัพท์: 4vw ความกว้างของขอบปุ่ม: 0px รัศมีเส้นขอบ: 0px แบบอักษรของปุ่ม: Karla แสดงไอคอนปุ่ม : ใช่ ตำแหน่งไอคอนปุ่ม: ขวา แสดงเฉพาะไอคอนบนปุ่ม: NO การเว้นวรรค
เพิ่มค่าระยะห่างที่กำหนดเอง
มาร์จิ้น (ล่าง): 8% มาร์จิ้น (ซ้ายและขวา): 9% แผ่นรอง (ด้านล่าง): 5% แพ็ดดิ้ง (ขวา): 20% กล่องเงา
ถัดไป ใช้เงาของกล่อง
ตำแหน่งแนวนอนของกล่องเงา: 0px ตำแหน่งแนวตั้งเงาของกล่อง: 2px สีเงา : #000000 ชั้น CSS
และทำการตั้งค่าโมดูลให้สมบูรณ์โดยกำหนดคลาส CSS ต่อไปนี้ให้กับปุ่ม:
ใช้คอลัมน์ 1 . ซ้ำ
ลบคอลัมน์ 2, 3 และ 4
ตอนนี้เราได้สร้างคอลัมน์แรกแล้ว เราสามารถนำกลับมาใช้ใหม่ได้ สิ่งแรกที่เราจะทำคือลบคอลัมน์ว่างออกจากแถวของเรา
โคลนคอลัมน์ 1 สามครั้ง
เราจะนำคอลัมน์ 1 กลับมาใช้ใหม่โดยการโคลนสามครั้ง
เปลี่ยนภาพพื้นหลังบนโฮเวอร์ของคอลัมน์ที่ซ้ำกัน
จากนั้นเปลี่ยนภาพพื้นหลังของคอลัมน์ที่ซ้ำกันในแต่ละคอลัมน์ที่ซ้ำกัน
แก้ไขเนื้อหาที่ซ้ำกัน
เปลี่ยนเนื้อหาโมดูลในแต่ละคอลัมน์ที่ซ้ำกัน
เส้นขอบคอลัมน์ที่ไม่ซ้ำ
คอลัมน์ 1
เราจะต้องใช้การตั้งค่าเส้นขอบที่ไม่ซ้ำกับแต่ละคอลัมน์ โดยเริ่มจากคอลัมน์ที่ 1
ความกว้างของเส้นขอบ (ขวา):เดสก์ท็อป: 1px แท็บเล็ต: 1px โทรศัพท์: 0px สี (ขวา): #d3d3d3 ความกว้างของเส้นขอบ (ด้านล่าง):เดสก์ท็อป: 0px แท็บเล็ต: 1px โทรศัพท์: 1px สีเส้นขอบ (ล่าง): #d3d3d3 คอลัมน์ 2
ต่อไปเรามีคอลัมน์ 2
ความกว้างของเส้นขอบ (ขวา):
เดสก์ท็อป: 1px แท็บเล็ต: 1px โทรศัพท์: 0px สี (ขวา): #d3d3d3Border Width (ด้านล่าง):
เดสก์ท็อป: 0px แท็บเล็ต: 1px โทรศัพท์: 1px สีเส้นขอบ (ล่าง): #d3d3d3
คอลัมน์ 3
และเราจะใช้การตั้งค่าเส้นขอบต่อไปนี้สำหรับคอลัมน์ 3:
ความกว้างของเส้นขอบ (ขวา):เดสก์ท็อป: 1px แท็บเล็ต: 1px โทรศัพท์: 0px สี (ขวา): #d3d3d3 ความกว้างของเส้นขอบ (ด้านล่าง):เดสก์ท็อป: 0px แท็บเล็ต: 1px โทรศัพท์: 1px สีเส้นขอบ (ล่าง): #d3d3d3 เพิ่ม CSS ที่กำหนดเองให้กับการตั้งค่าเพจ
เปิดการตั้งค่าหน้า
เมื่อการออกแบบทั้งหมดเข้าที่แล้ว สิ่งที่เหลืออยู่คือการเพิ่มโค้ด CSS ที่กำหนดเองเพื่อช่วยกระตุ้นเอฟเฟกต์โฮเวอร์บนโมดูล ในการดำเนินการนี้ ให้เปิดการตั้งค่าหน้า
อ่านคู่มือของเราได้ที่: Divi: วิธีสร้างส่วนท้ายที่ติดหนึบด้วยเอฟเฟกต์ "เปิดเผย"
เพิ่มโค้ด CSS
และคัดลอกและวางโค้ด CSS ต่อไปนี้:
.hover-column:hover .hover-title {
background-color: #000000;
}
.hover-column:hover .hover-title h3 {
color: white !important;
}
.hover-button {
color: black;
}
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
.hover-column:hover::before {
opacity: 0;
}การสำรวจ
ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ
สำนัก
ตอบสนอง
สรุป
ในบทความนี้ เราแสดงวิธีสร้างการออกแบบโฮเวอร์ที่สวยงาม
โดยเฉพาะอย่างยิ่ง เราได้สร้างตารางคอลัมน์ที่เริ่มต้นอย่างเรียบง่ายและสะอาดตา ทันทีที่ผู้เยี่ยมชมวางเมาส์เหนือองค์ประกอบกริดใด ๆ ภาพพื้นหลังจะถูกเปิดเผยและรูปแบบของโมดูลจะเปลี่ยนไป
ปรึกษาได้นะคะ ทรัพยากรของเรา การสร้างบล็อก WordPress Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ
...
โดย เกตัน Divi , บทแนะนำ Divi
คุณต้องการสร้างส่วนหัวด้านทั่วโลกด้วย Divi หรือไม่?
ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างส่วนหัวที่หมุนเวียนทั่วโลกซึ่งปรากฏทางด้านซ้ายของหน้าและโพสต์ของคุณ สีพื้นหลังของส่วนหัวมีความโปร่งใส ทำให้สามารถแสดงเนื้อหาของหน้า/โพสต์ได้
เราทำให้แน่ใจว่าส่วนหัวส่วนกลางจะคงอยู่ทางด้านซ้ายในขณะที่เลื่อน และเรายังทำให้เมนูเป็นเวอร์ชันที่เหมาะกับอุปกรณ์พกพาอีกด้วย
ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างการออกแบบใหม่ตั้งแต่ต้น!
Let 's go
การสำรวจ
ก่อนดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์ที่เราต้องการบรรลุโดยเร็วก่อน
ไปที่ตัวสร้างธีมของ Divi และเริ่มสร้างส่วนหัวส่วนกลาง
จากแดชบอร์ด WordPress ให้ไปที่ Divi > ตัวสร้างธีม
คลิกที่ “เพิ่มส่วนหัวทั่วโลก”
เลือก “สร้างส่วนหัวระดับโลก” .
เริ่มสร้างส่วนหัวด้านโกลบอล
เพิ่มหัวข้อใหม่
สีพื้นหลัง
เมื่ออยู่ในเครื่องมือแก้ไขเทมเพลต คุณสามารถเปิดส่วนที่มีอยู่แล้วและเปลี่ยนสีพื้นหลังของหน้าจอขนาดต่างๆ ได้
สีพื้นหลัง: rgba(0,0,0,0) (เดสก์ท็อป), #FFFFFF (แท็บเล็ตและโทรศัพท์) ปรับขนาด
ไปที่แท็บ ออกแบบ , ดึงตัวเลือกลง การกำหนดขนาด แล้วเปลี่ยนพารามิเตอร์การปรับขนาดส่วน
ความกว้าง: 5vw (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์) ความสูงขั้นต่ำ: 100 vw (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์) การเว้นวรรค
จากนั้นดึงตัวเลือกการเว้นวรรคและเปลี่ยนการตั้งค่าดังนี้:
กล่องเงา
จากนั้นไปที่ กล่องเงา และเพิ่มเงากล่องแบบกำหนดเองบนหน้าจอขนาดต่างๆ
ตำแหน่งแนวนอนของกล่องเงา: 32px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์) ความชัดเจนของเงากล่อง: 49px ความแรงของการแพร่กระจาย: 0px (เดสก์ท็อป), 19px (แท็บเล็ตและโทรศัพท์) เงาสี: rgba(0,0,0,0.12) การเพิ่ม CSS ที่กำหนดเอง
นอกจากนี้ เรายังจะตรวจสอบให้แน่ใจว่าส่วนหัวด้านข้างส่วนกลางคงอยู่ทางด้านซ้ายโดยการเพิ่มโค้ด CSS สองสามบรรทัดลงในองค์ประกอบส่วนหลัก
position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;เมื่อวางเมาส์เหนือส่วน
อย่าลืมเพิ่มบรรทัดของโค้ด CSS เหล่านี้ในองค์ประกอบหลักโดยวางเมาส์เหนือส่วนนั้น
position: fixed;
top: 0;การมองเห็นเริ่มต้น
จากนั้นเพิ่มดัชนี z ในพารามิเตอร์ตำแหน่ง
เลื่อนระดับการมองเห็น
ตรวจสอบให้แน่ใจว่าใช้ค่าเดียวกันเมื่อวางเมาส์เหนือ
เพิ่มบรรทัดใหม่
โครงสร้างของคอลัมน์
เมื่อคุณตั้งค่าส่วนเสร็จแล้ว ให้ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าบรรทัดและเปลี่ยนการตั้งค่าการปรับขนาด
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่ ความกว้างของรางน้ำ: 1 การเว้นวรรค
ลบระยะขอบเริ่มต้นทั้งหมดด้วย
ช่องว่างภายใน (บนและล่าง): 0px พารามิเตอร์คอลัมน์
เพิ่ม CSS ที่กำหนดเอง (แท็บเล็ตและโทรศัพท์)
บนแท็บเล็ตและโทรศัพท์ เราเลือกใช้จอแสดงผลที่ต่างไปจากเดิมอย่างสิ้นเชิง เราจะวางโมดูลที่แตกต่างกันสามโมดูลไว้ติดกัน ในการดำเนินการนี้ เราจะต้องเพิ่มโค้ด CSS บางส่วน
เปิดการตั้งค่าคอลัมน์ไปที่แท็บ ระดับสูง และแทรกโค้ด CSS บรรทัดต่อไปนี้ลงในช่องว่าง องค์ประกอบหลัก สำหรับแท็บเล็ตและโทรศัพท์:
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;เพิ่มโมดูลรูปภาพลงในคอลัมน์
โลโก้ดาวน์โหลด
ได้เวลาเริ่มเพิ่มโมดูลแล้ว! โมดูลแรกที่เราต้องการคือโมดูลรูปภาพ อัปโหลดไฟล์ภาพโลโก้กึ่งโปร่งใสที่คุณเลือก
ปรับขนาด
จากนั้นไปที่แท็บ ออกแบบ และเปลี่ยนความกว้างของหน้าจอขนาดต่างๆ
ความกว้าง: 4 vw (เดสก์ท็อป), 12 vw (แท็บเล็ต), 16 vw (โทรศัพท์) ขนาดของการเปลี่ยนแปลง
เพิ่มขนาดของโมดูลโดยเปลี่ยนการตั้งค่ามาตราส่วนการแปลงในภายหลัง
ขวา: 170% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์) ต่ำ: 170% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์) “แปล แปล”
และดันโมดูลไปทางขวาโดยแก้ไขพารามิเตอร์ต่อไปนี้
ด้านล่าง: 1vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์) เพิ่มโมดูลเมนูลงในคอลัมน์
เลือกเมนูที่จะเพิ่ม
โมดูลต่อไปที่เราต้องการคือโมดูลเมนู เลือกเมนูที่ต้องการ
ลบสีพื้นหลัง
จากนั้นลบสีพื้นหลังออกจากโมดูล
อารมณ์
จากนั้นไปที่แท็บ ออกแบบ และเปลี่ยนการตั้งค่าเค้าโครง
สไตล์: กึ่งกลาง ทิศทางของเมนูแบบเลื่อนลง: ลงด้านล่าง การตั้งค่าข้อความเมนู
เปลี่ยนการตั้งค่าข้อความเมนูด้วย
สีของลิงค์ที่ใช้งาน: #cecece แบบอักษรของเมนู: มอนต์เซอร์รัต น้ำหนักแบบอักษรของเมนู: ตัวหนา สีข้อความ: #000000 ขนาดข้อความเมนู: 0,9 vw (เดสก์ท็อป), 2 vw (แท็บเล็ต), 2,5 vw (โทรศัพท์) ข้อความเมนูเมื่อโฮเวอร์
เปลี่ยนสีของข้อความเมนูเมื่อวางเมาส์เหนือ
สีข้อความของเมนู: #afafaf เมนูแบบเลื่อนลง
เรายังทำการเปลี่ยนแปลงบางอย่างกับการตั้งค่าเมนูแบบเลื่อนลง
สีของเมนูดร็อปดาวน์: #000000 สีข้อความของเมนูแบบเลื่อนลง: #000000 ไอคอน
จากนั้นเปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์
ไอคอนเมนูแฮมเบอร์เกอร์สี: #000000 การเว้นวรรค
และเพิ่มค่าระยะขอบที่กำหนดเองบนหน้าจอขนาดต่างๆ
Margin (บนและล่าง): 18 vw (เดสก์ท็อป), 0 vw (แท็บเล็ตและโทรศัพท์) Margin (ซ้ายและขวา): -13vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์) เปลี่ยนการหมุน
ตอนนี้ เพื่อสร้างเอฟเฟกต์การหมุน เราจะเล่นกับค่าการหมุนของการแปลงของโมดูล
ซ้าย: 270 องศา (เดสก์ท็อป), 0 องศา (แท็บเล็ตและโทรศัพท์) เพิ่มโมดูล “การติดตามโซเชียลมีเดีย” ลงในคอลัมน์
เพิ่มเครือข่ายสังคม
ไปที่โมดูล "การติดตามโซเชียลมีเดีย" ซึ่งเป็นโมดูลถัดไปและโมดูลสุดท้ายที่เราจำเป็นต้องใช้เพื่อทำให้ส่วนหัวที่เปลี่ยนทั่วโลกของเราสมบูรณ์ เพิ่มเครือข่ายโซเชียลที่คุณเลือก
รีเซ็ตสไตล์ไอคอนโซเชียลมีเดีย
ดำเนินการต่อโดยรีเซ็ตการตั้งค่าสำหรับเครือข่ายโซเชียลแต่ละรายการ วิธีนี้จะช่วยเรากำจัดสีพื้นหลังของพวกมัน
การวางแนว
จากนั้นสลับไปที่แท็บ ออกแบบ ของโมดูลและเปลี่ยนการจัดตำแหน่งของโมดูลตามขนาดหน้าจอต่างๆ
โมดูลการจัดตำแหน่ง: ซ้าย (เดสก์ท็อป), ขวา (แท็บเล็ตและโทรศัพท์) การตั้งค่าไอคอน
สุดท้าย เปลี่ยนการตั้งค่าไอคอนด้วย
ไอคอนสี: #000000 ใช้ขนาดไอคอนที่กำหนดเอง: ใช่ ขนาดตัวอักษรของไอคอน: 2,1 vw บันทึกการเปลี่ยนแปลงตัวสร้างและดูผลลัพธ์
เมื่อคุณทำโมดูลทั้งหมดเสร็จแล้ว คุณสามารถบันทึกเทมเพลต ออกจากเครื่องมือสร้างธีมของ Divi และดูผลลัพธ์บนเว็บไซต์ของคุณได้!
การสำรวจ
เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ครั้งสุดท้ายกัน
สำนัก
สรุป
ในบทความนี้ เราแสดงวิธีสร้างส่วนหัวส่วนกลางที่หมุนเวียน เว้นแต่คุณจะเลือกเป็นอย่างอื่น ส่วนหัวส่วนกลางที่เราสร้างขึ้นจะปรากฏบนโพสต์และหน้าทั้งหมดของคุณ
หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น
ดูเพิ่มเติม ทรัพยากรของเรา การสร้างบล็อก WordPress Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ
...
โดย เกตัน Divi , บทแนะนำ Divi
คุณต้องการทำให้ไอคอนโซเชียลมีเดียของคุณติดกับ Divi หรือไม่?
ด้วยตัวเลือก 'เหนียว' ในตัวของ Divi คุณสามารถออกแบบโมดูล 'การติดตามโซเชียลมีเดีย' ที่ติดหนึบ ซึ่งจะทำให้ไอคอนโซเชียลมีเดียเหล่านั้นอยู่ด้านหน้าและตรงกลางขณะที่ผู้ใช้เลื่อนหน้าลงมา
นอกจากนี้ ด้วยการเพิ่มสไตล์แบบกำหนดเองให้กับโมดูลในสถานะติดหนึบ เราสามารถสร้างช่วงการเปลี่ยนภาพการออกแบบที่ไม่ซ้ำใครเมื่อสลับไปยังสถานะติดหนึบขณะเลื่อน
ดังนั้น หากคุณกำลังมองหาการควบคุมการออกแบบปุ่มโซเชียลมีเดียอย่างสมบูรณ์ บทช่วยสอนนี้เหมาะสำหรับคุณ!
การสำรวจ
นี่คือภาพรวมโดยย่อของผลลัพธ์ที่เราจะได้รับในบทช่วยสอนนี้
สร้างหน้าใหม่ด้วย "Divi Builder"
จากแดชบอร์ด WordPress ให้ไปที่ “หน้า > เพิ่มใหม่”
ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก “ใช้ DiviBuilder”
สำหรับบทช่วยสอนนี้ เราจะใช้เค้าโครงที่กำหนดไว้ล่วงหน้า ในการดำเนินการนี้ ให้คลิกที่ “เรียกดูเค้าโครง”
ค้นหาและเลือกเค้าโครง "นักออกแบบด้านแฟชั่น"
เลือกเลย์เอาต์ “ลงจอด” จากนั้นคลิก “ใช้เลย์เอาต์นี้”
การออกแบบโมดูล "การติดตามโซเชียลมีเดีย" ใน Divi
การสร้างส่วน
เพิ่มส่วนปกติใหม่ให้กับเค้าโครง
จากนั้นย้ายส่วนใหม่ไปที่ด้านบนสุดของหน้า (หรือที่ใดก็ตามที่คุณต้องการเพิ่มลิงก์โซเชียลมีเดียของคุณ)
เปิดการตั้งค่าส่วนและอัปเดตสีพื้นหลังให้ตรงกับเค้าโครงดังนี้:
ภายใต้แท็บ ออกแบบ ขยายตัวเลือกการเว้นวรรคและแก้ไขพารามิเตอร์ต่อไปนี้:
ช่องว่างภายใน (บนและล่าง): 10px การสร้างเส้น
ภายในส่วน ให้เพิ่มแถวลงในคอลัมน์
เปิดการตั้งค่าบรรทัด ดึงตัวเลือกการเว้นวรรค และเปลี่ยนการตั้งค่าดังนี้:
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่ ความกว้างของรางน้ำ: 1 ความกว้าง: 100% ความกว้างสูงสุด: 100% ดำเนินการต่อโดยเลื่อนลงตัวเลือก การเว้นวรรค
ช่องว่างภายใน (บนและล่าง): 0px การสร้างโมดูล "การติดตามโซเชียลมีเดีย" ที่ติดหนึบ
เมื่อส่วนและบรรทัดอยู่ในตำแหน่งแล้ว ให้เพิ่มโมดูลใหม่ “โซเชียลมีเดียติดตาม” ที่เส้น
กำลังอัปเดตการตั้งค่าโมดูล
เปิดการตั้งค่าของโมดูล "การติดตามโซเชียลมีเดีย"
สิ่งแรกที่เราต้องทำคือเพิ่มตำแหน่งเหนียวให้กับโมดูล
ภายใต้แท็บ ระดับสูง , ดึงตัวเลือกลง ผลเลื่อน และอัปเดตสิ่งต่อไปนี้:
ตำแหน่งติดหนึบ: Stick to Top เมื่อตำแหน่งอยู่ในสถานะติดหนึบ คุณจะสามารถกำหนดเป้าหมายรูปแบบของโมดูลในสถานะติดหนึบ (เหมือนกับที่คุณสามารถทำได้สำหรับสถานะโฮเวอร์) สามารถทำได้โดยวางเมาส์เหนือตัวเลือกแล้วคลิกไอคอนหมุด
ภายใต้แท็บ ออกแบบ , ปรับปรุงสิ่งต่อไปนี้:
โมดูลการจัดตำแหน่ง: Center สีไอคอน: #000000 (เดสก์ท็อป), #ffffff (โฮเวอร์), #ffffff (เหนียว) ความกว้าง: 100% ความกว้างสูงสุด: 100% ช่องว่างภายใน: 20px (บน), 12px (ล่าง), 10px (ซ้ายและขวา) การตั้งค่าโซเชียลมีเดีย
เมื่อการตั้งค่าโมดูลพร้อมแล้ว เราก็เปลี่ยนความสนใจไปที่การจัดสไตล์ไอคอนโซเชียลมีเดียแต่ละรายการได้
ในการทำเช่นนี้ ก่อนอื่นเราจะปรับแต่งไอคอนโซเชียลเน็ตเวิร์ก จากนั้นเราจะคัดลอกเครือข่ายโซเชียลเพื่อสร้างเครือข่ายอื่น
คุณควรมีเครือข่ายโซเชียลสองเครือข่ายอยู่แล้วภายใต้แท็บเนื้อหาเริ่มต้น ลบหนึ่งรายการและคลิกเพื่อแก้ไขรายการที่เหลือ
เมื่ออยู่ในการตั้งค่าโซเชียลเน็ตเวิร์ก ให้เลือกโซเชียลเน็ตเวิร์กและอัปเดตสีพื้นหลังสำหรับเดสก์ท็อป โฮเวอร์ และสถานะติดหนึบ
เครือข่ายโซเชียล: TikTok (หรืออะไรก็ตาม) พื้นหลัง: โปร่งใส (เดสก์ท็อป), #fe2c55 (โฮเวอร์), #000000 (เหนียว) เล่ห์เหลี่ยม : สีพื้นหลังจะเปลี่ยนโดยอัตโนมัติเพื่อให้เข้ากับแบรนด์โซเชียลมีเดีย คุณสามารถคัดลอกสีนี้และเพิ่มเป็นสีพื้นหลังของสถานะโฮเวอร์สำหรับไอคอนได้ ซึ่งจะแสดงสีพื้นหลังเริ่มต้นของโซเชียลเน็ตเวิร์กเมื่อคุณวางเมาส์เหนือไอคอน
ตอนนี้คุณสามารถสลับระหว่างแท็บต่างๆ เพื่อดูสีพื้นหลังของทั้งสามสถานะ (เดสก์ท็อป โฮเวอร์ และติดหนึบ)
ต่อไป ให้ไอคอนเป็นรูปวงรีที่สวยงามและมีเส้นขอบเพื่อให้เข้ากับเค้าโครงได้ดียิ่งขึ้น ภายใต้แท็บ ออกแบบ , ปรับปรุงสิ่งต่อไปนี้:
มุมโค้งมน: 50% ความกว้างของเส้นขอบ: 1px สีของเส้นขอบ: #000000 (เดสก์ท็อป), โปร่งใส (โฮเวอร์) ปัจจุบันไอคอนมีรูปร่างเป็นวงกลม เพื่อให้ได้รูปทรงวงรีมากขึ้น เราจะเปลี่ยนการตั้งค่าระยะห่างดังนี้:
ระยะขอบ (ซ้ายและขวา): 15px (เดสก์ท็อป), 0px (เหนียว), 0px (โทรศัพท์) ช่องว่างภายใน (ซ้ายและขวา): 16px (เดสก์ท็อป), 14px (แท็บเล็ต), 0px (โทรศัพท์) เครือข่ายโซเชียลที่ซ้ำกัน
ตอนนี้เราออกแบบเครือข่ายโซเชียลแรกเสร็จแล้ว เราสามารถทำซ้ำไอคอนเพื่อสร้างผู้อื่นได้
ในการดำเนินการนี้ ให้เปิดการตั้งค่าโมดูล สื่อโซเชียลติดตาม และคลิกไอคอนที่ซ้ำกัน สำหรับตัวอย่างนี้ ให้สร้างเพิ่มอีก 4 รายการ
ตอนนี้ สิ่งที่เราต้องทำคืออัปเดตเครือข่ายโซเชียลใหม่แต่ละเครือข่าย เนื่องจากวิธีนี้จะเปลี่ยนสีพื้นหลัง คุณจะต้องอัปเดตสีพื้นหลังสำหรับแต่ละรายการด้วย
ในการดำเนินการนี้ ให้เปิดการตั้งค่าของโซเชียลเน็ตเวิร์กที่สองและอัปเดตสิ่งต่อไปนี้:
โซเชียลเน็ตเวิร์ก: Facebook พื้นหลัง: โปร่งใส (เดสก์ท็อป), #3b5998 (โฮเวอร์) ทำขั้นตอนเดิมต่อไปเพื่ออัปเดตเครือข่ายโซเชียลที่เหลือ
ผลสุดท้าย
ตอนนี้เรามาดูผลลัพธ์ที่ได้จากขนาดหน้าจอต่างๆกัน
สรุป
ปุ่มโซเชียลมีเดียมักเป็นคุณสมบัติหลักบนเว็บไซต์ พวกเขาเป็นหนึ่งในวิธีหลักในการเชื่อมต่อช่องทางโซเชียลมีเดียกับเว็บไซต์ นี่คือเหตุผลที่โมดูล “โซเชียลมีเดียติดตาม” ของ Divi มีไอคอนเครือข่ายและตัวเลือกการออกแบบทั้งหมดที่คุณต้องการเพื่อสร้างโซลูชันที่สมบูรณ์แบบสำหรับไซต์ของคุณ
เราหวังว่าบทช่วยสอนนี้จะเป็นประโยชน์กับคุณในโครงการ Divi ครั้งต่อไปของคุณ หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ Divi อย่าลังเลที่จะเยี่ยมชมแคตตาล็อกของเรา บทเรียน Divi ปรึกษาได้นะคะ วิธีสร้างหน้าบล็อกด้วยโมดูล Divi Blog
หากคุณมีคำถามหรือข้อเสนอแนะอย่าลังเลที่จะแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเรา , การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล .
แต่ในขณะเดียวกัน, แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ .
...
โดย เกตัน Divi , บทแนะนำ Divi
คุณต้องการเพิ่มเนื้อหาทีเซอร์ลงในแท็บเล็ตแบบเลื่อนบน Divi หรือไม่?
การเพิ่มเนื้อหาทีเซอร์ลงในเว็บไซต์ของคุณอาจเป็นกลยุทธ์ทางการตลาดที่มีประสิทธิภาพ ใช้งานได้ดีเป็นพิเศษสำหรับการโปรโมตสิ่งต่างๆ เช่น ebook คุณให้ตัวอย่างเนื้อหาแก่พวกเขาเพื่อให้พวกเขาต้องการมากขึ้น
ในบทช่วยสอนวันนี้ เราจะแสดงวิธีแสดงเนื้อหาทีเซอร์ในแท็บเล็ตแบบเลื่อนลงใน Divi
ในการทำเช่นนี้ เราจะใช้ประโยชน์จากตัวเลือกในตัวของ Divi เพื่อเปลี่ยนคอลัมน์ให้เป็นคอนเทนเนอร์ดรอปดาวน์ (ออกแบบให้ดูเหมือนแท็บเล็ต) ที่สามารถรวมเนื้อหาประเภทใดก็ได้ที่คุณต้องการ
คุณสามารถใช้เพื่อโปรโมตบทแรกของ ebook แสดงตัวอย่างการออกแบบจากพอร์ตโฟลิโอของคุณ หรือเนื้อหาประเภทอื่นๆ
ขอเริ่มต้น!
การสำรวจ
ต่อไปนี้คือภาพรวมคร่าวๆ ของแท็บเล็ตที่มีเนื้อหาแบบเลื่อนได้ที่เราจะสร้างในบทช่วยสอนนี้
สร้างหน้าใหม่ด้วย Divi Builder
ในแดชบอร์ด WordPress ให้ไปที่ “หน้า > เพิ่มใหม่”
ตั้งชื่อเรื่องที่เหมาะกับคุณ แล้วคลิก “ใช้ DiviBuilder”
จากนั้นคลิกที่ “เริ่มสร้าง”
การออกแบบแท็บเล็ตพร้อมเนื้อหาทีเซอร์แบบเลื่อนได้ใน Divi
การสร้างคอนเทนเนอร์แท็บเล็ตแบบเลื่อนลงด้วยคอลัมน์ Divi
เพิ่มแถว
ในการเริ่มต้น ให้สร้างแถวสองคอลัมน์ที่มีส่วนปกติ
การตั้งค่าคอลัมน์ 1
สีพื้นหลัง
เปิดการตั้งค่าคอลัมน์ 1 และเพิ่มพื้นหลังสีขาวลงในคอลัมน์
เส้นขอบและระยะขอบ
ไปที่แท็บ ออกแบบ ตัวเลือกแบบเลื่อนลง การเว้นวรรค และเปลี่ยนการตั้งค่าดังนี้:
ช่องว่างภายใน (บน ล่าง ซ้ายและขวา): 25px (บน ล่าง ซ้าย ขวา) จากนั้นดึงตัวเลือกลง ชายแดน และเปลี่ยนการตั้งค่าตามนี้:
มุมโค้งมน: 20px ความกว้างของเส้นขอบ: 30px สีเส้นขอบ: #000000 กล่องเงา
เพื่อให้การออกแบบแท็บเล็ตมีความลึก ให้ดึงตัวเลือกลง กล่องเงา และเพิ่มเงากล่องต่อไปนี้:
กล่องเงา: ดูภาพหน้าจอ Box Shadow (แนวนอนและแนวตั้ง) ตำแหน่ง: 5 px สีเงา : #555555 ความสูงและความกว้างของคอลัมน์ที่กำหนดเองด้วย CSS
กุญแจสำคัญในการทำให้เนื้อหาคอลัมน์เลื่อนได้คือการกำหนดความสูงที่กำหนดไว้ ซึ่งจะทำให้เนื้อหาล้นความสูงของคอลัมน์
เรายังต้องการให้อัตราส่วนกว้างยาวของแท็บเล็ตคงที่ ดังนั้นจึงควรกำหนดความกว้างสูงสุดของคอลัมน์ด้วย
หากต้องการกำหนดความสูงและความกว้างที่กำหนดเองให้กับคอลัมน์ ให้ไปที่แท็บ ระดับสูง และอัปเดตสิ่งต่อไปนี้:
ภายใต้ CSS ที่กำหนดเอง ให้เพิ่ม CSS ต่อไปนี้สำหรับการแสดงผลเดสก์ท็อป (องค์ประกอบหลัก):
height:650px;
max-width: 488px;จากนั้นเปิดใช้งานแท็บสำหรับจอแสดงผลอื่น และวาง CSS ที่กำหนดเองต่อไปนี้สำหรับหน้าจอโทรศัพท์ขององค์ประกอบหลัก:
max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;ล้นแนวตั้ง: scroll
ดังที่ได้กล่าวไว้ก่อนหน้านี้ ขณะนี้คอลัมน์มีความสูงที่กำหนดไว้ ซึ่งจะทำให้เนื้อหาของคอลัมน์ล้นในแนวตั้งอย่างหลีกเลี่ยงไม่ได้
เพื่อให้แน่ใจว่าสามารถดูเนื้อหาที่ล้นได้โดยการเลื่อนคอลัมน์ลง ให้ตั้งค่าตัวเลือกการมองเห็นล้นแนวตั้งเป็น “เลื่อน” . เมื่อต้องการทำเช่นนี้ ให้ขยายตัวเลือก แพ็กเกจ แท็บ ระดับสูง
เพิ่มเนื้อหาทีเซอร์ลงในคอลัมน์ดรอปดาวน์
ณ จุดนี้ คอลัมน์ (หรือชั้นวาง) พร้อมสำหรับเนื้อหา คุณสามารถใช้โมดูล Divi ในคอลัมน์นี้เพื่อสร้างเนื้อหาตัวอย่างของคุณ
ในตัวอย่างนี้ เรากำลังเพิ่มเนื้อหา ebook จำลอง ซึ่งจะประกอบด้วยโมดูล การประกาศแจ้งความ (เพื่อแสดงคำกระตุ้นการตัดสินใจเริ่มต้น) โมดูล ภาพ (เพื่อแสดงปกหนังสือ) และโมดูล ข้อความ (เพื่อแสดงบางส่วนของ ebook)
การเลื่อน CTA (คำกระตุ้นการตัดสินใจ) พร้อมพื้นหลังปกหนังสือ
รายการเนื้อหาทีเซอร์แรกที่เราจะเพิ่มคือโมดูล การประกาศแจ้งความ ซึ่งจะทำหน้าที่เป็นคำกระตุ้นการตัดสินใจ “เลื่อนเพื่อดูตัวอย่าง” .
เราจะใช้ไอคอนการนำเสนอ ชื่อเรื่อง และพื้นหลังที่มีปกหนังสือเป็นภาพพื้นหลังและซ้อนทับแบบไล่ระดับสี
ในคอลัมน์แท็บเล็ต เพิ่มโมดูล การประกาศแจ้งความ .
อัพเดทเนื้อหาดังนี้
ชื่อเรื่อง: เลื่อนเพื่ออ่านข้อความที่ตัดตอนมา ตัวเลือกแบบเลื่อนลง “รูปภาพและไอคอน”
ใช้ไอคอน: ใช่ ไอคอน: ดูภาพหน้าจอ จากนั้นดึงตัวเลือกลง พื้นหลัง และเพิ่มการไล่ระดับสี
สีด้านซ้าย: rbga(0,0,0,0,0.0) สีด้านขวา: #ffffff ตำแหน่งเริ่มต้น: 20% ตำแหน่งสุดท้าย: 85% สี่เหลี่ยมไล่ระดับสีเหนือภาพพื้นหลัง : ใช่ จากนั้นเพิ่มภาพปกหนังสือ เพื่อผลลัพธ์ที่ดีที่สุด ให้เพิ่มรูปภาพขนาดประมาณ 600px x 850px .
บนแท็บ ออกแบบ ให้อัปเดตสไตล์ต่อไปนี้สำหรับไอคอนและชื่อเรื่อง:
ไอคอนสี: #000000 ขนาดแบบอักษรของไอคอน: 80px (เดสก์ท็อปและแท็บเล็ต), 70px (โทรศัพท์) แบบอักษรของชื่อเรื่อง: Montserrat การจัดตำแหน่งข้อความชื่อเรื่อง: กึ่งกลาง สีข้อความ: #000000 จากนั้นเราสามารถย้ายไอคอนและชื่อลงคอลัมน์โดยเพิ่มระยะขอบด้านบน
หากต้องการกำหนดขนาดและเว้นวรรค ให้อัปเดตสิ่งต่อไปนี้:
ระยะขอบ: 25px (ด้านล่าง) ช่องว่างภายใน: 400px (เดสก์ท็อปและแท็บเล็ต), 270px (โทรศัพท์) ภาพของปกหนังสือ
เนื้อหาทีเซอร์ชิ้นต่อไปจะเป็นภาพปกหนังสือ ในการเพิ่มรูปภาพ เพียงเพิ่มโมดูลรูปภาพด้านล่างโมดูล Blurb
จากนั้นอัปโหลดภาพเดียวกันกับที่ใช้สำหรับพื้นหลังประกาศ
เนื้อหาของการแสดงตัวอย่างข้อความ
เนื้อหาทีเซอร์ชิ้นสุดท้ายของเราจะเป็นข้อความซึ่งจะรวมบทที่สมมติขึ้นบางส่วนจาก ebook ของเรา หากต้องการเพิ่มข้อความ ให้เพิ่มโมดูลข้อความใหม่ด้านล่างรูปภาพก่อนหน้า
จากนั้นวางโค้ด HTML ต่อไปนี้ลงในแท็บข้อความเนื้อหา:
<h3>Chapitre 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<h3>Chapitre 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
ภายใต้แท็บ ออกแบบ ให้อัปเดตสไตล์หัวเรื่องและระยะห่างดังนี้ (หัวเรื่อง 3):
แบบอักษร: มอนต์เซอร์รัต น้ำหนักแบบอักษร: Ultra Bold การจัดตำแหน่งข้อความ: กึ่งกลาง ความสูงของสาย: 1,3 em ช่องว่างภายใน: 10% (บนและล่าง) สัมผัสสุดท้ายเล็กน้อย
อัพเดตพารามิเตอร์บรรทัด
เมื่อเนื้อหาเข้าที่แล้ว เราจำเป็นต้องปรับเปลี่ยนแถวเพื่อให้การออกแบบตอบสนองได้ดียิ่งขึ้น เปิดการตั้งค่าบรรทัดและอัปเดตสิ่งต่อไปนี้:
ความกว้าง: 100% (เดสก์ท็อป), 90% (แท็บเล็ตและโทรศัพท์) ความกว้างสูงสุด: 1px (เดสก์ท็อป), 080px (แท็บเล็ตและโทรศัพท์) เพิ่มเนื้อหาเพิ่มเติมในคอลัมน์ 2
ณ จุดนี้ เราสามารถเพิ่มเนื้อหาเพิ่มเติมในคอลัมน์ 2 หากจำเป็น สำหรับตัวอย่างนี้ เราได้เพิ่มโมดูลข้อความและโมดูลปุ่ม และปรับแต่งให้คล้ายกับการออกแบบที่แสดงในชุดเค้าโครง ebook ของเรา
ผลสุดท้าย
ตอนนี้เรามาดูผลสุดท้าย
ตรวจสอบเนื้อหาแบบเลื่อนลงที่มีอยู่ในแท็บเล็ตแล็ปท็อป
และนี่คือลักษณะการออกแบบที่วางซ้อนกันบนหน้าจอแท็บเล็ตและโทรศัพท์
สรุป
บางทีสิ่งที่ดีที่สุดเกี่ยวกับการออกแบบแท็บเล็ตแบบเลื่อนนี้คือความเก่งกาจ เนื่องจากแท็บเล็ตเป็นคอลัมน์ Divi คุณจึงสามารถใช้โมดูล Divi จำนวนเท่าใดก็ได้ (ข้อความ รูปภาพ ปุ่ม) เพื่อออกแบบเนื้อหาที่คุณต้องการนำเสนอ
หวังว่านี่จะมีประโยชน์ในครั้งต่อไปที่คุณต้องนำเสนอเนื้อหาทีเซอร์บนเว็บไซต์ของคุณ
หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ Divi อย่าลังเลที่จะเยี่ยมชมแคตตาล็อกของเรา บทเรียน Divi ปรึกษาได้นะคะ วิธีสร้างหน้าบล็อกด้วยโมดูล Divi Blog
หากคุณมีคำถามหรือข้อเสนอแนะอย่าลังเลที่จะแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเรา , การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล .
แต่ในขณะเดียวกัน, แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ .
...
