วิธีเน้นโมดูล Hovered Blurb โดยการเบลอส่วนอื่นด้วย Divi

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

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงโมดูลสำหรับประกาศ Hovered Blurb ฟรี

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

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

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

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

ดาวน์โหลด

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

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

เพิ่มมาตราใหม่

สีพื้นหลัง

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

• พื้นหลัง Coor: #eaeaea

ระยะห่าง

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

• อัตรากำไรขั้นต้น: 2vw
• ระยะขอบล่าง: 2vw
• ระยะขอบซ้าย: 2vw
• ระยะขอบขวา: 2vw
• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ชายแดน

ตั้งค่าส่วนให้สมบูรณ์โดยเพิ่มรัศมีเส้นขอบ

• ทุกมุม: 20px

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

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

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

ขนาด

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

• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 90%
• ความกว้างสูงสุด: 1580px
• ความสูงขั้นต่ำ: 500px (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)

องค์ประกอบหลัก

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

align-items: center;

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

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

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

เลือกไอคอน

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

พื้นหลังไล่ระดับโฮเวอร์

จากนั้น ใช้พื้นหลังแบบไล่ระดับสีเมื่อวางเมาส์เหนือเท่านั้น

• สี 1: #ffffff
• สี 2: #0f1bff
• ประเภทการไล่ระดับสี: เชิงเส้น
• ตำแหน่งเริ่มต้น: 20%
• ตำแหน่งสุดท้าย: 20%

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

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าไอคอนดังนี้:

• สีไอคอน: #ffffff
• ไอคอนวงกลม: ใช่
• สีวงกลม: #ffffff
• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• การจัดตำแหน่งรูปภาพ/ไอคอน: ซ้าย

การตั้งค่าไอคอนโฮเวอร์

เปลี่ยนสีไอคอนต่างๆ เมื่อวางเมาส์เหนือ

• สีไอคอน: #0f1bff
• สีวงกลม: #f7f7f7

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

ดำเนินการต่อโดยแก้ไขการตั้งค่าข้อความชื่อเรื่อง

• แบบอักษรของชื่อ: Source Sans Pro
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่

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

เปลี่ยนสีข้อความชื่อเรื่องเมื่อวางเมาส์เหนือ

• สีข้อความของชื่อเรื่อง: #ffffff

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

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

• แบบอักษรของร่างกาย: เปิด Sans
• ความสูงของเส้นร่างกาย: 2em

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

ใช้สีข้อความโฮเวอร์สีขาว

• สีข้อความ: #ffffff

ระยะห่าง

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

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

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

เรากำลังใช้เงากล่องด้วย

• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -20px
• เงาสี: rgba(255,255,255,0.18)

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

เปลี่ยนสีเงาเมื่อโฮเวอร์

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

CSS Class

และเพื่อให้เกิดเอฟเฟกต์เบลอ เราจะต้องกำหนดคลาส CSS ให้กับโมดูล Blurb ต่อมาในโพสต์ เราจะใช้คลาส CSS นี้ในโค้ด JQuery

• คลาส CSS: blurb-item

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

เมื่อคุณสร้าง Blurb Module ในคอลัมน์ 1 เสร็จแล้ว คุณสามารถโคลนได้สองครั้งแล้ววางสำเนาในคอลัมน์ที่เหลือของแถว

โคลนทั้งแถว

คุณสามารถโคลนแถวได้มากเท่าที่ต้องการ ขึ้นอยู่กับจำนวนโมดูล Blurb ที่คุณต้องการแสดงบนเพจของคุณ

ปรับแต่งโมดูล Blurb เป็นรายบุคคล

แน่นอน คุณจะต้องแก้ไขเนื้อหาแต่ละรายการของโมดูล Blurb

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

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

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 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);
}

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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