การใช้ตัวเลือกการแปลงของ Divi เพื่อสร้างเนื้อหาส่วนที่ขยายบน Hover

เผยแพร่แล้ว: 2019-04-21

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

ขยายเนื้อหาส่วน

มือถือ

ขยายเนื้อหาส่วน

มาเริ่มสร้างใหม่กันเถอะ!

เพิ่มมาตรา #1

ระยะห่าง

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

  • ช่องว่างภายในด้านบน: 0px
  • ช่องว่างภายในด้านล่าง: 0px

ขยายเนื้อหาส่วน

เพิ่มแถวใหม่

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

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

ขยายเนื้อหาส่วน

ขนาด

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

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

ระยะห่าง

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

  • ช่องว่างภายในด้านบน: 0px
  • ช่องว่างภายในด้านล่าง: 0px

ขยายเนื้อหาส่วน

เพิ่มโมดูลตัวแบ่ง

ทัศนวิสัย

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

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

ขยายเนื้อหาส่วน

สี

จากนั้นไปที่แท็บออกแบบและเปลี่ยนสีของตัวแบ่งเป็นสีดำ

  • สี: #000000

ขยายเนื้อหาส่วน

ขนาด

แก้ไขค่าการปรับขนาดด้วย

  • ตัวแบ่งน้ำหนัก: 1px
  • ส่วนสูง: 0px

ขยายเนื้อหาส่วน

ระยะห่าง

และเพิ่มความยาวของตัวแบ่งโดยเพิ่มระยะขอบซ้ายและขวาที่เป็นลบ

  • ระยะขอบซ้าย: -135vw (เดสก์ท็อป), -300vw (แท็บเล็ต), -340vw (โทรศัพท์)
  • ระยะขอบขวา: -135vw (เดสก์ท็อป), -300vw (แท็บเล็ต), -340vw (โทรศัพท์)

ขยายเนื้อหาส่วน

เพิ่มส่วน #2

สีพื้นหลัง

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

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

ขยายเนื้อหาส่วน

ระยะห่าง

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

  • ช่องว่างภายในด้านบน: 5vw
  • แผ่นรองด้านล่าง: 5vw

ขยายเนื้อหาส่วน

เส้นขอบเริ่มต้น

เพิ่มเส้นขอบให้กับส่วนด้วย

  • ความกว้างของเส้นขอบ: 1px
  • สีเส้นขอบ: #000000

ขยายเนื้อหาส่วน

โฮเวอร์ชายแดน

และลบความกว้างของเส้นขอบเมื่อโฮเวอร์

  • ความกว้างของเส้นขอบ: 0px

ขยายเนื้อหาส่วน

ค่าเริ่มต้นกล่องเงา

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

  • ความแรงของกล่องเงาเบลอ: 80px
  • เงาสี: rgba(0,0,0,0)

ขยายเนื้อหาส่วน

เงากล่องเลื่อน

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

  • เงาสี: rgba(0,0,0,0.13)

ขยายเนื้อหาส่วน

เพิ่มแถว #1

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

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

ขยายเนื้อหาส่วน

ขนาด

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

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

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

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

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! โมดูลแรกที่เราต้องการคือโมดูลข้อความที่มีเนื้อหา H2 บางส่วน

ขยายเนื้อหาส่วน

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

ไปที่แท็บการออกแบบและแก้ไขการตั้งค่าข้อความ H2 ตามที่คุณต้องการ

  • แบบอักษรของหัวเรื่อง 2: Abril Fatface
  • การจัดแนวข้อความหัวเรื่อง 2: Center
  • หัวเรื่อง 2 สีข้อความ: #000000
  • หัวเรื่อง 2 ขนาดข้อความ: 7vw

ขยายเนื้อหาส่วน

ระยะห่าง

เพิ่มค่าระยะขอบที่กำหนดเองด้วย

  • ขอบล่าง: 5vw
  • ระยะขอบซ้าย: 5vw
  • ระยะขอบขวา: 5vw

ขยายเนื้อหาส่วน

เพิ่มโมดูลตัวแบ่ง

ทัศนวิสัย

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

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

ขยายเนื้อหาส่วน

สี

จากนั้นไปที่แท็บออกแบบและเปลี่ยนสีตัวแบ่งเป็นสีดำ

  • สี: #000000

ขยายเนื้อหาส่วน

เพิ่มแถว #2

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

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

ขยายเนื้อหาส่วน

ขนาด

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

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

ระยะห่าง

เรายังย่อขนาดของแถวลงเล็กน้อยด้วยการเพิ่มช่องว่างภายในด้านซ้ายและขวาแบบกำหนดเองในการตั้งค่าระยะห่าง

  • ช่องว่างภายในด้านซ้าย: 10vw
  • ช่องว่างภายในด้านขวา: 10vw

ขยายเนื้อหาส่วน

แสดง

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

display: flex;

ขยายเนื้อหาส่วน

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

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

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

ขยายเนื้อหาส่วน

เลือกไอคอน

เลือกไอคอนถัดไป

ขยายเนื้อหาส่วน

การตั้งค่าไอคอน

จากนั้นไปที่แท็บออกแบบและเปลี่ยนสีไอคอน

  • ไอคอนสี: #000000

ขยายเนื้อหาส่วน

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

ไปที่การตั้งค่าข้อความชื่อและเปลี่ยนการตั้งค่าตามที่คุณต้องการ

  • แบบอักษรของชื่อเรื่อง: Abril Fatface
  • การจัดตำแหน่งข้อความชื่อเรื่อง: Center
  • ชื่อข้อความสี: #000000
  • ขนาดข้อความชื่อเรื่อง: 1.5vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3.5vw (โทรศัพท์)
  • ความสูงของบรรทัดหัวเรื่อง: 2em

ขยายเนื้อหาส่วน

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

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

  • แบบอักษรของร่างกาย: เปิด Sans
  • การจัดตำแหน่งข้อความเนื้อหา: กึ่งกลาง
  • สีข้อความ: #666666
  • ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 1.5vw (แท็บเล็ต), 2vw (โทรศัพท์)
  • ความสูงของเส้นร่างกาย: 2em

ขยายเนื้อหาส่วน

ระยะห่าง

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

  • ระยะขอบซ้าย: 2vw
  • ระยะขอบขวา: 2vw

ขยายเนื้อหาส่วน

โคลนโมดูล Blurb สองครั้ง & วางในคอลัมน์ที่เหลือ

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

ขยายเนื้อหาส่วน

เพิ่มแถว #3

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

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

ขยายเนื้อหาส่วน

ขนาด

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

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

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

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

โมดูลเดียวที่เราต้องการที่นี่คือโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

ขยายเนื้อหาส่วน

การจัดตำแหน่ง

จากนั้นไปที่แท็บออกแบบและเปลี่ยนการจัดตำแหน่งปุ่ม

  • การจัดตำแหน่งปุ่ม: กึ่งกลาง

ขยายเนื้อหาส่วน

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

เปลี่ยนการตั้งค่าปุ่มถัดไป

  • ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
  • ขนาดข้อความของปุ่ม: 1.5vw (เดสก์ท็อป), 2.5vw (แท็บเล็ตและโทรศัพท์)
  • สีข้อความของปุ่ม: #000000
  • ความกว้างของขอบปุ่ม: 1px
  • สีเส้นขอบของปุ่ม: #000000
  • รัศมีเส้นขอบของปุ่ม: 1px
  • แบบอักษรของปุ่ม: เปิด Sans
  • น้ำหนักแบบอักษร: Ultra Bold

ขยายเนื้อหาส่วน

ขยายเนื้อหาส่วน

ระยะห่าง

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

  • ขอบบน: 5vw
  • ช่องว่างภายในด้านบน: 2vw
  • แผ่นรองด้านล่าง: 2vw
  • ช่องว่างภายในด้านซ้าย: 10vw
  • ช่องว่างภายในด้านขวา: 10vw

ขยายเนื้อหาส่วน

เพิ่มการตั้งค่าการแปลงไปยังส่วน #2

เพิ่มมาตราส่วนการแปลงเริ่มต้นในส่วน #2

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

  • ด้านล่าง: 60% (เดสก์ท็อป), 90% (แท็บเล็ตและโทรศัพท์)
  • ขวา: 60% (เดสก์ท็อป), 90% (แท็บเล็ตและโทรศัพท์)

ขยายเนื้อหาส่วน

โฮเวอร์แปลงมาตราส่วนเป็นมาตรา #2

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

  • ด้านล่าง: 90%
  • ขวา: 90%

ขยายเนื้อหาส่วน

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

จากนั้นโคลนส่วนที่สองสองครั้ง (หรือมากที่สุดเท่าที่คุณต้องการ)

ขยายเนื้อหาส่วน

เพิ่ม Transform Rotate เป็นโมดูลตัวแบ่งในส่วน #1

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

  • ซ้าย: 90deg

ขยายเนื้อหาส่วน

ดาวน์โหลดเค้าโครงส่วนขยายได้ฟรี

หากต้องการวางเค้าโครงส่วนที่ขยายออก คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

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

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

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

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

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

ขยายเนื้อหาส่วน

มือถือ

ขยายเนื้อหาส่วน

ความคิดสุดท้าย

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