ต้องการทราบวิธีการใส่โมดูล Blurb จาก Divi เน้นในขณะที่เบลอคนอื่น?
ไม่ว่าจะเป็น เว็บไซต์เว็บ คุณกำลังสร้าง มีโอกาสที่บางครั้งคุณจะต้องการดูรายการบริการต่างๆ ด่าน และอื่นๆ
วิธีที่ง่ายที่สุดวิธีหนึ่งในการสร้างรายการในลักษณะที่น่าสนใจคือการใช้โมดูล Blurb จาก Divi. โมดูล Blurb ช่วยให้คุณสามารถจัดโครงสร้างได้อย่างสวยงาม เนื้อหา จากรายการพร้อมมอบความเป็นไปได้ในการออกแบบที่ไม่สิ้นสุด
ในบทช่วยสอนนี้ เราจะก้าวไปอีกขั้นและแสดงวิธีเน้นโมดูล Blurb เมื่อวางเมาส์เหนือและเบลอส่วนอื่นๆ ที่คุณแสดง เป็นวิธีที่ยอดเยี่ยมในการเน้นโมดูล Blurb ทีละโมดูล โดยไม่ปล่อยให้โมดูล Blurb อื่นรบกวนผู้อ่าน
Let 's go
การสำรวจ
ก่อนดำดิ่งสู่บทช่วยสอนนี้ มาดูผลลัพท์ของหน้าจอขนาดต่างๆ กันก่อน
คอมพิวเตอร์ตั้งโต๊ะ
เวอร์ชั่นมือถือ
มาเริ่มออกแบบกับ Divi
เพิ่มหัวข้อใหม่
สีพื้นหลัง
เริ่มต้นด้วยการเพิ่มส่วนปกติในหน้าใหม่หรือหน้าที่คุณกำลังทำงานอยู่
คุณยังสามารถปรึกษา: Divi: วิธีสร้างส่วนสมาชิกในทีมเป็นภาพหมุน
เปิดการตั้งค่าส่วนและเปลี่ยนสีพื้นหลัง
- ความเป็นมา: #eaeaea
การเว้นวรรค
เพิ่มค่าการเว้นวรรคด้วย
- ระยะขอบ (บน ล่าง ซ้ายและขวา): 2vw
- ช่องว่างภายใน (บนและล่าง): 0px
ชายแดน
ตั้งค่าส่วนให้สมบูรณ์โดยเพิ่มรัศมีเส้นขอบ
- มุมโค้งมน: 20px
เพิ่มบรรทัดใหม่
โครงสร้างของคอลัมน์
ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
การกำหนดขนาด
โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าบรรทัดและเปลี่ยนการตั้งค่าการปรับขนาด
- ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
- ความกว้าง: 90%
- ความกว้างสูงสุด: 1px
- ความสูงขั้นต่ำ: 500px (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)
CSS ที่กำหนดเอง (องค์ประกอบหลัก)
จัดตำแหน่ง เนื้อหา ของคอลัมน์โดยการเพิ่มโค้ด CSS หนึ่งบรรทัดลงในองค์ประกอบหลักของแถว
align-items: center;
เพิ่มโมดูล Blurb ไปยังคอลัมน์ 1
เพิ่มเนื้อหา
โมดูลเดียวที่เราใช้ตลอดบทช่วยสอนนี้คือโมดูล Blurb
อย่างไรก็ตาม คุณสามารถแทนที่โมดูลนี้ด้วยโมดูลใดก็ได้ที่คุณเลือก ตราบใดที่คุณเพิ่มคลาส CSS ซึ่งเราจะแชร์ในขั้นตอนต่อไป
เพิ่มโมดูล Blurb แรกลงในคอลัมน์ 1 และแทรกไฟล์ เนื้อหา เดจาด Choix
เลือกไอคอน
จากนั้นเลือกไอคอน
- ใช้ไอคอน : ใช่
- ไอคอน: ดูภาพหน้าจอ
การไล่ระดับสีพื้นหลัง (โฮเวอร์)
จากนั้นใช้การไล่ระดับสีพื้นหลังเมื่อวางเมาส์เหนือเท่านั้น
- ไล่ระดับหยุด
- 20%: #ffffff
- 80%: #0f1bff
- ประเภทการไล่ระดับสี: เชิงเส้น
การตั้งค่าไอคอน (เดสก์ท็อป)
เปลี่ยนเป็นแท็บ ออกแบบ ของโมดูลและเปลี่ยนการตั้งค่าไอคอนดังนี้:
- สีไอคอน: #ffffff
- รูปภาพ/ไอคอน มุมโค้งมน: 50px
- ความกว้างของเส้นขอบรูปภาพ/ไอคอน: 5px
- สีเส้นขอบ: #ffffff
- ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
- การจัดตำแหน่งรูปภาพ/ไอคอน: ซ้าย
การตั้งค่าไอคอนโฮเวอร์
เปลี่ยนสีไอคอนต่างๆ เมื่อวางเมาส์เหนือ
- สีไอคอน (โฮเวอร์): #0f1bff
- สีพื้นหลังของรูปภาพ/ไอคอน (โฮเวอร์): #f7f7f7
การตั้งค่าข้อความหัวข้อ
ดำเนินการต่อโดยเปลี่ยนการตั้งค่าข้อความชื่อเรื่อง
- แบบอักษรของชื่อ: Source Sans Pro
- น้ำหนักแบบอักษร: ตัวหนา
- รูปแบบตัวอักษรของชื่อเรื่อง: TT (ตัวพิมพ์ใหญ่)
วางเมาส์เหนือการตั้งค่าข้อความ
เปลี่ยนสีข้อความชื่อเรื่องเมื่อวางเมาส์เหนือ
- สีข้อความของชื่อเรื่อง: #ffffff
คำอธิบาย การตั้งค่าข้อความ (เดสก์ท็อป)
ถัดไปคือการตั้งค่าข้อความเนื้อหา
- แบบอักษรของร่างกาย: เปิด Sans
- ความสูงของเส้นร่างกาย: 2em
วางเมาส์เหนือการตั้งค่าข้อความคำอธิบาย
ใช้สีข้อความเมื่อวางเมาส์เหนือ
- สีข้อความเนื้อหา (โฮเวอร์): #ffffff
การเว้นวรรค
ถัดไป ไปที่การตั้งค่าการเว้นวรรคและเพิ่มค่าช่องว่างภายในที่กำหนดเอง
- ช่องว่างภายใน (บน ล่าง ซ้ายและขวา): 50px
กล่องเงา (เดสก์ท็อป)
เรายังใช้เงากล่อง
- ความชัดเจนของกล่องเงาเบลอ: 80px
- ความแรงของการกระจายเงาของกล่อง: -20px
- เงาสี: rgba(255,255,255,0.18)
กล่องเงา (โฮเวอร์)
เปลี่ยนสีของเงาโฮเวอร์
- เงาสี: rgba(0,0,0,0.18)
ชั้น CSS
และเพื่อให้เกิดเอฟเฟกต์เบลอ เราจะต้องกำหนดคลาส CSS ให้กับโมดูล Blurb ของเรา ต่อไปในบทความ เราจะใช้คลาส CSS นี้ในโค้ด JQuery
- คลาส CSS: blurb-item
โคลนโมดูล Blurb สองครั้งแล้ววางสำเนาในคอลัมน์ที่เหลือ
เมื่อคุณสร้างโมดูล Blurb ในคอลัมน์ 1 เสร็จแล้ว คุณสามารถโคลนได้สองครั้งแล้ววางรายการซ้ำในคอลัมน์ที่เหลือของแถว
โคลนทั้งแถว
คุณสามารถโคลนแถวได้มากเท่าที่ต้องการ ขึ้นอยู่กับจำนวนโมดูล Blurb ที่คุณต้องการแสดงบนเพจของคุณ
ปรับแต่งโมดูล Blurb ทีละรายการ
แน่นอน คุณจะต้องแก้ไขเนื้อหาแต่ละรายการของโมดูล Blurb แต่ละโมดูล
เพิ่มบรรทัดใหม่
โครงสร้างของคอลัมน์
เพิ่มแถวอื่นในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
การเว้นวรรค
เปิดการตั้งค่าบรรทัดและลบช่องว่างด้านบนและด้านล่างทั้งหมดตามค่าเริ่มต้น ซึ่งจะช่วยลดพื้นที่ว่างในแถวนี้
- ช่องว่างภายใน (บนและล่าง): 0px
เพิ่มโมดูลโค้ดลงในคอลัมน์
แทรกโค้ด JQuery และ CSS
เพิ่มโมดูลโค้ดลงในคอลัมน์แถวและแทรกโค้ด JQuery และ CSS เพื่อให้เอฟเฟกต์เกิดขึ้น
อย่าลืมใส่โค้ด JQuery ระหว่างแท็กสคริปต์และโค้ด CSS ระหว่างแท็กสไตล์ดังที่คุณเห็นในหน้าจอการพิมพ์ด้านล่าง
jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
});
});.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
การสำรวจ
ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ
คอมพิวเตอร์ตั้งโต๊ะ
เวอร์ชั่นมือถือ
ดาวน์โหลด DIVI ทันที!!!
สรุป
ในบทความนี้ เราได้แสดงวิธีการสร้างสรรค์ด้วยโมดูล Blurb ที่คุณแชร์บน เว็บไซต์เว็บ.
โดยเฉพาะอย่างยิ่ง เราได้แสดงให้คุณเห็นถึงวิธีการเน้นโมดูล Blurb เมื่อวางเมาส์เหนือด้วยการเบลอส่วนอื่นๆ ที่คุณแสดง
เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการต่อไปของคุณ Divi. หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ
อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
