Divi: วิธีสร้างตารางคอลัมน์ของเหลวบนโฮเวอร์

คุณต้องการสร้างกริดด้วย Divi จะเป็นของเหลวเมื่อโฮเวอร์?

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

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

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

Let 's go

การสำรวจ

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

สำนัก

ตอบสนอง

มาเริ่มกระบวนการสร้างใน Divi . กันเถอะ

เพิ่มส่วนใหม่

สีพื้นหลัง

เพิ่มส่วนใหม่ในหน้าที่คุณกำลังทำงานอยู่ 

ดูเพิ่มเติม: Divi: วิธีสร้างส่วนท้ายที่กำหนดเอง

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

• ความเป็นมา: #ffffff

แอดไลน์ #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 ต่อไปนี้สำหรับโมดูล:

• CSS คลาส: hover-text

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

เพิ่มคำอธิบาย

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

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

แก้ไขพารามิเตอร์โมดูลดังนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 1vw
  • แท็บเล็ต: 2,5 vw
  • โทรศัพท์: 4vw
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบ: 0px

• แบบอักษรของปุ่ม: Karla
• แสดงไอคอนปุ่ม : ใช่
• ตำแหน่งไอคอนปุ่ม: ขวา
• แสดงเฉพาะไอคอนบนปุ่ม: NO

การเว้นวรรค

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

• มาร์จิ้น (ล่าง): 8%
• มาร์จิ้น (ซ้ายและขวา): 9%
• แผ่นรอง (ด้านล่าง): 5%
• แพ็ดดิ้ง (ขวา): 20%

กล่องเงา

ถัดไป ใช้เงาของกล่อง

• ตำแหน่งแนวนอนของกล่องเงา: 0px
• ตำแหน่งแนวตั้งเงาของกล่อง: 2px
• สีเงา : #000000

ชั้น CSS

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยกำหนดคลาส CSS ต่อไปนี้ให้กับปุ่ม:

• CSS Class: ปุ่มโฮเวอร์

ใช้คอลัมน์ 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;
}

การสำรวจ

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

สำนัก

ตอบสนอง

ดาวน์โหลด DIVI ทันที!!!

สรุป

ในบทความนี้ เราแสดงวิธีสร้างการออกแบบโฮเวอร์ที่สวยงาม 

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

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

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

...