คุณต้องการที่จะทราบวิธีการปรับแต่งโมดูล "จับเวลาถอยหลัง" ของ Divi ด้วย GIF?
ในบทช่วยสอนวันนี้ เราจะแสดงวิธีใช้วิดีโอพื้นหลังแบบเต็มหน้าจอในหลักสูตรของคุณ “นาฬิกาจับเวลาถอยหลัง”. สามารถใช้เพื่อ "สร้างความสงสัย" ได้อย่างสนุกสนานและโดดเด่น
ขอเริ่มต้น!
การสำรวจ
ก่อนดำดิ่งสู่บทช่วยสอนนี้ มาดูผลลัพธ์ที่เราต้องการบรรลุกันก่อน
การออกแบบนับถอยหลังด้วย Divi
การเตรียมองค์ประกอบการออกแบบ
การนับถอยหลังที่เราจะออกแบบใช้วิดีโอในพื้นหลัง มีสถานที่มากมายให้ค้นหาวิดีโอสต็อกฟรีหรือพรีเมียม แต่สำหรับบทช่วยสอนนี้ เราจะใช้ประโยชน์จากคลิปวิดีโอฟรีจาก videezy.
นี่คือลิงค์โดยตรงไปยังวิดีโอที่เราจะใช้: อนุภาคบิน.
ออกแบบการใช้งานด้วย Divi
คุณสามารถใช้หน้าที่มีอยู่ แต่เพื่อความง่าย เราจะดำเนินการในหน้าใหม่
ดังนั้นให้สร้างหน้าใหม่และเพิ่มแถวที่มีโครงสร้างคอลัมน์ต่อไปนี้
ใส่โมดูล " จับเวลาถอยหลัง ».
การปรับพารามิเตอร์โมดูล
ขั้นแรก เลือกวันที่จนกว่าจะนับถอยหลัง จากนั้นแก้ไข:
- ใช้สีพื้นหลัง: NO
ตอนนี้คลิกที่แท็บ "ออกแบบ" และเปลี่ยนการตั้งค่าด้านล่าง
- ขนาดตัวอักษร: 85px
- ขนาดข้อความป้ายกำกับ: 15px
ข้อสังเกต : มันจะดูเหมือนไม่มีการนับถอยหลังเลยเพราะเราลบสีพื้นหลังออก เมื่อเราเพิ่มวิดีโอพื้นหลังตามคำแนะนำด้านล่าง เราจะสามารถเห็นการนับถอยหลังได้
การตั้งค่าพารามิเตอร์มาตรา
ตอนนี้เราจำเป็นต้องทำการเปลี่ยนแปลงเล็กน้อยในส่วนนี้ วางเมาส์เหนือส่วนและเปิดการตั้งค่า
ในแท็บ คอนเทนต์, ไปที่การตั้งค่า " พื้นหลัง วีดีโอ »แล้วก็ พื้นหลัง วีดีโอ MP4.
คลิกที่ « เพิ่มพื้นหลัง วีดีโอ » และเพิ่มวิดีโอที่เราดาวน์โหลดไว้ก่อนหน้านี้จาก videezy. ตอนนี้คุณควรเห็นวิดีโอพื้นหลังเล่นอยู่หลังการนับถอยหลังของเรา
ตอนนี้เราจำเป็นต้องทำการปรับเพียงเล็กน้อยในแท็บ ระดับสูง พารามิเตอร์โมดูลส่วน เพิ่ม CSS ที่กำหนดเองด้านล่างใน องค์ประกอบหลัก.
height: 100vh; 
นี่คือสิ่งที่คุณควรเห็น
เพิ่ม CSS . ที่กำหนดเอง
สิ่งสุดท้ายที่เราต้องทำคือเพิ่ม CSS ที่กำหนดเองเพื่อนำเราไปตลอดทาง
ดังนั้น เปิดการตั้งค่าโมดูล คลิกที่แท็บ "ขั้นสูง" และเพิ่มคลาส CSS
- คลาส CSS: กำหนดเองนับถอยหลัง-5
เมื่อเพิ่มคลาสที่กำหนดเองแล้ว เราก็พร้อมที่จะเพิ่ม CSS ที่กำหนดเองแล้ว
ในการดำเนินการนี้ ให้ไปที่การตั้งค่าหน้า
ไปที่แท็บ ระดับสูง และเพิ่ม CSS ที่กำหนดเองด้านล่าง
.custom-countdown-5.et_pb_countdown_timer .sep {
display: none;
}
.custom-countdown-5.et_pb_countdown_timer .section.values {
border-left: 1px solid #808080;
}
.custom-countdown-5 .days {
border-left: none !important;
margin-right: 16px;
}
จากนั้นบันทึกการเปลี่ยนแปลงของคุณและชื่นชมการสร้างสรรค์ของคุณ!
โบนัส: การปรับแต่งเพิ่มเติม
เราสามารถรวมการไล่ระดับสีแบบเคลื่อนไหวเข้ากับวิดีโอพื้นหลังเพื่อให้ดูมีเอกลักษณ์ยิ่งขึ้น เพียงเพิ่ม CSS ด้านล่าง (หลัง CSS ด้านบน)
.et_pb_section:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-o-animation: colorcycle 20s ease infinite;
-moz-animation:
colorcycle 20s ease infinite;
-webkit-animation: colorcycle 20s ease infinite; animation: colorcycle 20s ease infinite;
background: linear-gradient(270deg, #a253e0, #f15b4f, #2ea3f2);
background-size: 600% 600%;
}
@-webkit-keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.et_pb_section_video_bg { opacity: .9; }ซึ่งจะมีลักษณะดังนี้:
ดาวน์โหลด DIVI ทันที!!!
สรุป
เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการต่อไปของคุณ Divi. หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ
ดูคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
