วิธีจัดรูปแบบไอคอน Blurb เพื่อเน้นการออกแบบสำหรับเนื้อหาใน Divi

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

ในบทช่วยสอนนี้ ฉันจะแสดงให้คุณเห็นถึงวิธีจัดรูปแบบไอคอนการนำเสนอเพื่อเน้นการออกแบบสำหรับเนื้อหาของคุณใน Divi

มาดำน้ำกันเถอะ!

แอบมอง

ต่อไปนี้คือตัวอย่างบางส่วนของการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดตัวอย่างเค้าโครงสำหรับบทช่วยสอนนี้

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

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

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

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

ดาวน์โหลด

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

เริ่มต้นสร้างการออกแบบตั้งแต่เริ่มต้น

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

ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
ความกว้างของรางน้ำแบบกำหนดเอง: 1

สิ่งนี้จะกำจัดระยะขอบที่กำหนดเองระหว่างโมดูล

การสร้างโมดูลข้อความ

ถัดไปเพิ่มโมดูลข้อความภายในแถว

อัปเดตโมดูลข้อความด้วยข้อความตัวเติมต่อไปนี้:

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>

การจัดรูปแบบโมดูลข้อความ

อัปเดตการตั้งค่าโมดูลข้อความที่เหลือดังนี้:

สีพื้นหลัง: #ffffff

• หัวข้อ 2 แบบอักษร: Nunito
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• ส่วนหัว 2 รูปแบบตัวอักษร: TT
• หัวเรื่อง 2 สีข้อความ: #f24a5b
• ขนาดข้อความของหัวเรื่อง 2: 42px (เดสก์ท็อป), 32px (แท็บเล็ต), 22px (โทรศัพท์)
• หัวเรื่อง 2 ตัวอักษร Sp[acing: 16px
• ส่วนหัว 2 ความสูงของบรรทัด: 1.3em

• ความกว้าง: 500px (เดสก์ท็อป), 490px (แท็บเล็ต)
• การจัดตำแหน่งโมดูล: ศูนย์
• Custom Padding (เดสก์ท็อป): บน 40px, ล่าง 40px, ซ้าย 50px, 50px ขวา
• Custom Padding (โทรศัพท์): ซ้าย 20px, 20px ขวา
• ความกว้างของเส้นขอบ: 10px
• สีเส้นขอบ: #ffffff

เนื่องจากเราจะซ้อนทับโมดูลข้อความด้วยไอคอนการนำเสนอ เราจึงต้องตรวจสอบให้แน่ใจว่าโมดูลข้อความอยู่เหนือไอคอนในลำดับ z-space ในการดำเนินการนี้ เราต้องเพิ่มส่วนย่อยของ CSS ต่อไปนี้ลงในกล่อง CSS องค์ประกอบหลักของโมดูลข้อความก่อน:

position: relative;

จากนั้นตั้งค่าดัชนี z เป็น 1

ตอนนี้โมดูลข้อความนี้จะอยู่เหนือโมดูลที่ทับซ้อนกันซึ่งมีความสำคัญต่อการออกแบบ

การสร้างไอคอน Blurb

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

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

• สีไอคอน: #2ea3f2
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 100px
• ระยะขอบที่กำหนดเอง: ด้านล่าง 0px (ซึ่งจะลบระยะขอบด้านล่างเริ่มต้นระหว่างโมดูล ไม่จำเป็นหากคุณใช้ความกว้างของรางน้ำแถว 1)

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

CSS รูปภาพนำเสนอ:

margin-bottom: 0px

ทำซ้ำไอคอน Blurb

ก่อนที่เราจะเริ่มวางตำแหน่งการนำเสนอ เรามาทำสำเนาโมดูลการนำเสนอและลากสำเนาไว้ใต้โมดูลข้อความก่อน ตอนนี้คุณควรมีไอคอนประกาศด้านบนและด้านล่างโมดูลข้อความ

การวางตำแหน่งไอคอน Blurb โดยใช้ Transform Translate

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

การวางตำแหน่งไอคอน Blurb #1

ในการวางตำแหน่งไอคอนประกาศด้านบน ให้เปิดการตั้งค่าโมดูลประกาศและอัปเดตสิ่งต่อไปนี้:

• แปลงแกน X แปล (เดสก์ท็อป): -242px
• แปลงแกน Y แปล (เดสก์ท็อป): 50px
• แปลงแกน X แปล (โทรศัพท์): -170px

การวางตำแหน่งไอคอน Blurb #2

ก่อนที่เราจะวางตำแหน่งไอคอนการนำเสนอนี้ มาทำให้มันใหญ่ขึ้นหน่อย ในการดำเนินการนี้ ให้เปิดการตั้งค่าโมดูลการนำเสนอและเปลี่ยนขนาดแบบอักษรของไอคอนเป็น 150px

จากนั้นวางตำแหน่งไอคอนการนำเสนอโดยอัปเดตตัวเลือกการแปลงต่อไปนี้:

• แปลงแกน X แปล (เดสก์ท็อป): 242px
• แปลงแกน Y แปล (เดสก์ท็อป): -100px
• Transform Translate แกน X (โทรศัพท์): 190px

การสร้างแถวสองคอลัมน์

ในการสร้างคอลัมน์ถัดไป ให้ทำซ้ำแถวที่มีอยู่และเปลี่ยนเค้าโครงคอลัมน์ของแถวเป็นแบบสองคอลัมน์ (1/2 1/2)

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

จากนั้นลบไอคอนประกาศด้านล่างในคอลัมน์ที่หนึ่ง

การจัดแนวไอคอน Blurb ในคอลัมน์ 2

สำหรับไอคอน Blurb ในคอลัมน์ 2 เราจำเป็นต้องเลื่อนไอคอนด้านบนไปทางซ้าย และไอคอนด้านล่างไปทางขวา เราสามารถทำได้โดยการเปลี่ยนค่าแกน X ของ Transform Translate

เปิดการตั้งค่าโมดูลการนำเสนอสำหรับโมดูลการนำเสนอด้านบนในคอลัมน์ 2 และอัปเดตสิ่งต่อไปนี้:

• แปลงแกน X แปล (เดสก์ท็อป): 242px
• แปลงแกน X แปล (โทรศัพท์): 170px

โดยทั่วไปสิ่งที่คุณทำคือเปลี่ยนค่าเหล่านี้จากค่าลบเป็นค่าบวกเพื่อเลื่อนไปในทิศทางตรงกันข้ามตามแกน x

ถัดไป อัปเดตค่าการแปลการแปลงสำหรับโมดูลประกาศด้านล่างในคอลัมน์ 2 ดังนี้:

• แปลงแกน X แปล (เดสก์ท็อป): -242px
• Transform Translate แกน X (โทรศัพท์): -190px

อัปเดตรูปแบบโมดูลข้อความในแถวที่สอง

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

เปลี่ยนเนื้อหาส่วนหัว h2 เป็น "บริการ"

• หัวเรื่อง 2 ขนาดข้อความ: 28px (เดสก์ท็อป), 22px (แท็บเล็ต), 18px (โทรศัพท์)

บันทึกการตั้งค่า.

ตอนนี้เปิดโมดอลการตั้งค่าสำหรับโมดูลข้อความในคอลัมน์ 2 และอัปเดตสิ่งต่อไปนี้:

• การวางแนวข้อความ: ขวา

การปรับระยะห่างของเค้าโครง

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

• ระยะขอบที่กำหนดเอง: -100px ด้านล่าง

ผลสุดท้าย

ทีนี้มาดูผลลัพธ์สุดท้ายกัน

ลองใช้ไอคอนอื่น ๆ

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

ในป๊อปอัปค้นหาและแทนที่ ให้อัปเดตสิ่งต่อไปนี้:

• ภายใน: ส่วนนี้
• แทนที่ด้วย: [เลือกไอคอนใหม่]

หลังจากนั้นให้คลิกปุ่มแทนที่

สิ่งนี้จะเปลี่ยนการนำเสนอทั้งหมดในส่วนของคุณด้วยข้อความใหม่

ต่อไปนี้คือตัวอย่างบางส่วนของเลย์เอาต์ที่ใช้ไอคอนต่างๆ

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

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

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

ไชโย!