วิธีสร้างตัวอย่าง Layout Pack ของ ET ด้วยเอฟเฟกต์ Fan-Out Hover ใน Divi

หนึ่งในคุณสมบัติเจ๋ง ๆ ของการออกแบบเว็บไซต์ใหม่ของ elegantthemes.com คือการแสดงตัวอย่างแพ็คเลย์เอาต์ที่สร้างไว้ล่วงหน้าบนหน้าผลิตภัณฑ์ Divi สิ่งที่ทำให้การออกแบบนี้มีเอกลักษณ์เฉพาะตัวคือแต่ละแพ็กเลย์เอาต์มีภาพสามภาพแยกกันที่กระจายออกไปเมื่อวางเมาส์เหนือ

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

มาเริ่มกันเลย.

แอบมอง

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

เลย์เอาต์สามคอลัมน์บนเดสก์ท็อปจะปรับเป็นหนึ่งคอลัมน์บนแท็บเล็ตและโทรศัพท์

ดาวน์โหลด Layout Pack Preview Fan-Out Hover Effects Layout ฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

สมัครสมาชิกช่อง Youtube ของเรา

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องมีการตั้งค่าต่อไปนี้:

1. ธีม Divi ติดตั้งและใช้งานอยู่
2. หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นบนตัวสร้างส่วนหน้า (ภาพ) ของ Divi
3. สามภาพที่จะใช้สำหรับเนื้อหาจำลอง รูปภาพควรมีขนาดประมาณ 250px x 375px เพื่อผลลัพธ์ที่ดีที่สุด เนื่องจากสิ่งเหล่านี้เป็นการแสดงตัวอย่างหน้าเว็บ คุณสามารถสร้างภาพหน้าจอของคุณเองสำหรับการออกแบบหน้าใดก็ได้ แล้วครอบตัด/ปรับขนาดรูปภาพแต่ละภาพตามนั้น

หลังจากนั้น คุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มสร้างแท็บโฮเวอร์ใน Divi

การสร้างตัวอย่าง Layout Pack ของ ET ใหม่ด้วยเอฟเฟกต์ Fan-Out Hover ใน Divi

การสร้างส่วนและแถว

สร้างส่วนปกติใหม่ด้วยแถวสามคอลัมน์

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

• ความกว้างของรางน้ำ: 2
• ความกว้าง: 90%
• ความกว้างสูงสุด: 1120px (เดสก์ท็อป), 400px (แท็บเล็ต)

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

• คอลัมน์ 1 ช่องว่างภายใน: 20% ด้านล่าง
• คอลัมน์ 2 ช่องว่างภายใน: 20% ด้านล่าง
• คอลัมน์ 3 ช่องว่างภายใน: 20% ด้านล่าง

กำลังเพิ่มรูปภาพ 1

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

จากนั้นอัปโหลดรูปภาพไปยังโมดูลรูปภาพ (ควรมีขนาดประมาณ 250px x 375px)

จากนั้นอัปเดตการตั้งค่าการออกแบบดังนี้:

• การจัดตำแหน่งภาพ: center
• ความกว้าง: 220px
• ล้นแนวตั้ง: ซ่อน
• ดัชนี Z: 4

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

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

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

กำลังเพิ่มรูปภาพ2

หากต้องการสร้างรูปภาพที่สอง ให้เพิ่มโมดูลรูปภาพใหม่ด้านล่างโมดูลรูปภาพแรกในคอลัมน์ 1 จากนั้นอัปโหลดรูปภาพใหม่ (250X350) ไปยังโมดูล

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

ในการดำเนินการนี้ ให้อัปเดตสิ่งต่อไปนี้:

• ความกว้าง: 180px
• ล้นแนวตั้ง: ซ่อน

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

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

กำลังเพิ่มรูปภาพ 3

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

เราทำซ้ำรูปภาพเพราะเราต้องการนำการตั้งค่าส่วนใหญ่ที่เราใช้สำหรับรูปภาพ 2 มาใช้ ความแตกต่างเพียงอย่างเดียว (นอกเหนือจากรูปภาพใหม่) คือเราต้องวางตำแหน่งรูปภาพไปทางขวาแทนที่จะเป็นด้านซ้าย

เปิดรูปภาพที่ซ้ำกัน (ภาพที่ 3) และอัปเดตโมดูลรูปภาพด้วยรูปภาพใหม่ (250 × 375)

จากนั้นอัปเดต CSS ที่กำหนดเองโดยเปลี่ยนคุณสมบัติตำแหน่ง left เป็นคุณสมบัติตำแหน่งที่ right ไม่จำเป็นต้องเปลี่ยนแปลง CSS อื่นๆ

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

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

ดีมาก

นี่คือผลลัพธ์สุดท้ายจนถึงตอนนี้

การออกแบบนั้นสวยงามจริงๆ อย่างที่มันเป็น แต่มาเพิ่มระดับด้วยเอฟเฟกต์โฮเวอร์แบบกระจายออก

การเพิ่มเอฟเฟกต์ Fan-Out Hover CSS

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

1. เพิ่มระยะเวลาการเปลี่ยนภาพให้แต่ละภาพเพื่อการเปลี่ยนที่ราบรื่นเมื่อวางเมาส์เหนือ
2. ปรับภาพที่ 1 ให้มีความกว้าง 180px และสูง 240px ซึ่งจะทำให้คอนเทนเนอร์รูปภาพสูงขึ้นและแคบลงเพื่อแสดงรูปภาพมากขึ้น
3. ปรับภาพที่ 2 และ 3 ให้มีความกว้าง 160px และสูง 220px สิ่งนี้จะทำให้รูปภาพสูงขึ้นและแคบลงเพื่อแสดงรูปภาพมากขึ้น
4. ปรับภาพที่ 2 เพื่อหมุนทวนเข็มนาฬิกา 5 องศาแล้วเลื่อนไปทางซ้ายเล็กน้อย เราสามารถทำได้โดยเพิ่มค่า -5 องศาให้กับคุณสมบัติ transform:rotate และปรับค่าของคุณสมบัติตำแหน่ง left เป็น 0
5. ปรับ Image 3 เพื่อหมุน 5 องศาตามเข็มนาฬิกาและเลื่อนไปทางขวาเล็กน้อย เราสามารถทำได้โดยการเพิ่มค่า 5 องศาให้กับคุณสมบัติ transform:rotate และปรับค่าของคุณสมบัติตำแหน่งที่ right เป็น 0

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

เปิดการตั้งค่าแถวและเพิ่มคลาส CSS ต่อไปนี้

• CSS Class: fan-out-images

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

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

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

เมื่อคุณทำเสร็จแล้ว ตรวจสอบผลลัพธ์สุดท้าย

ผลสุดท้าย

เอฟเฟกต์ Hover เสริม: หมุนรูปภาพ 1 และ 2 แยกกันบน Hover

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

นี่คือวิธีที่คุณทำ

นำคุณสมบัติการแปลงออกจากการตั้งค่าหน้า CSS ที่กำหนดเอง

ขั้นแรก คุณต้องนำ CSS แบบกำหนดเองสองบรรทัดที่หมุนรูปภาพออกเมื่อวางเมาส์เหนือคอลัมน์ เปิด CSS ที่กำหนดเองของการตั้งค่าหน้าและนำสิ่งต่อไปนี้ออก:

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

การเพิ่มคุณสมบัติการแปลงบนโฮเวอร์สำหรับรูปภาพ 2

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

• เปลี่ยนแกนหมุน Z (โฮเวอร์): -5deg
• แปลงแกนแปล X (โฮเวอร์): -20px

การเพิ่มคุณสมบัติการแปลงบนโฮเวอร์สำหรับรูปภาพ 3

จากนั้นอัปเดตการตั้งค่าโมดูลรูปภาพสำหรับรูปภาพ 3 เพื่อเพิ่มคุณสมบัติการหมุนการแปลง

• เปลี่ยนแกนหมุน Z (โฮเวอร์): 5deg
• เปลี่ยนแกนแปล X (โฮเวอร์): 20px

ตอนนี้ตรวจสอบผลลัพธ์สุดท้าย

ผลสุดท้าย

การเพิ่มลิงค์ไปยังรูปภาพ

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

การเพิ่มตัวอย่าง Layout Pack ใหม่ให้กับคอลัมน์อื่นๆ

เพื่อให้การออกแบบเสร็จสิ้น เราสามารถคัดลอกภาพสามภาพในคอลัมน์ 1 และวางลงในคอลัมน์ 2 และคอลัมน์ 3

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

แค่นั้นแหละ!

การออกแบบขั้นสุดท้าย

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

เลย์เอาต์สามคอลัมน์บนเดสก์ท็อปจะปรับเป็นหนึ่งคอลัมน์บนแท็บเล็ตและโทรศัพท์

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!