วิธีสร้างกล่องแจ้งเตือน Divi สำหรับการอัปเดต COVID-19 (ดาวน์โหลดฟรี)

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

วันนี้ เรากำลังแจกเค้าโครงส่วนกล่องการแจ้งเตือน Divi ฟรี (พร้อมรหัส/ฟังก์ชันที่จำเป็นทั้งหมด) เพื่อให้คุณเพิ่มในหน้าหรือเทมเพลต Divi ของคุณ

ไม่ต้องกังวล เราจะแสดงให้คุณเห็นถึงวิธีการสร้างตั้งแต่เริ่มต้นและวิธีใช้งาน

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

แอบมอง

ต่อไปนี้คือภาพรวมอย่างรวดเร็วของกล่องการแจ้งเตือนและวิธีการใช้งาน

ดาวน์โหลดเค้าโครงส่วนกล่องการแจ้งเตือน Divi ฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

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

ดูวิธีเพิ่มเค้าโครงส่วนกล่องการแจ้งเตือนที่ด้านล่างของโพสต์ในเพจหรือเทมเพลต

ไปกวดวิชากันเถอะ

ส่วนที่ 1: การเพิ่มเค้าโครงส่วนใหม่ให้กับ Divi Library

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

เพิ่มเค้าโครง

ในการเริ่มต้น ให้ไปที่ Divi > Divi Library

คลิกปุ่ม "เพิ่มใหม่" เพื่อเพิ่มเค้าโครงใหม่ลงในไลบรารี

ในป๊อปอัปเพิ่มเลย์เอาต์ใหม่ ให้ตั้งชื่อเลย์เอาต์ (เช่น "ส่วนประกาศ") และเลือกประเภทเลย์เอาต์ "ส่วน"

จากนั้นคลิกส่ง

ส่วนที่ 2: การออกแบบเค้าโครงส่วนกล่องแจ้งเตือน

สร้างที่ส่วนหน้า

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

พื้นหลังของส่วนและช่องว่างภายใน

เปิดการตั้งค่าส่วน และอัปเดตพื้นหลังและช่องว่างภายในดังนี้:

• พื้นหลังไล่ระดับสีซ้าย:
• พื้นหลังไล่ระดับสีขวา:
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

ส่วน CSS ID

กล่องการแจ้งเตือนจะต้องมี CSS/JQuery ที่กำหนดเองเพื่อให้มีฟังก์ชันที่คลิกได้เพื่อปิดกล่อง/ส่วน เพิ่มรหัส CSS ต่อไปนี้ในส่วนเพื่อให้เราสามารถกำหนดเป้าหมายด้วยรหัสได้ในภายหลัง

• CSS ID: ประกาศส่วน

เพิ่มแถวและความกว้างของแถว

เพิ่มแถวหนึ่งคอลัมน์ในส่วน

จากนั้นอัปเดตการตั้งค่าแถวด้วยความกว้างสูงสุดดังนี้:

• ความกว้างสูงสุด: 700px

เพิ่มโมดูลข้อความสำหรับข้อความแจ้งเตือน

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

เนื้อหาข้อความ

อัปเดตเนื้อหาเนื้อหาด้วยข้อความที่จำเป็นสำหรับการแจ้งเตือนดังนี้:

<h2>COVID-19 Notice</h2>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

การออกแบบข้อความ

ใต้แท็บออกแบบ ให้อัปเดตสไตล์ข้อความดังนี้:

• แบบอักษรของข้อความ: ห้องโดยสาร
• ขนาดข้อความ: 18px
• การจัดตำแหน่งข้อความ: center
• ขนาดข้อความของหัวเรื่อง 2: 46px (เดสก์ท็อป), 38px (แท็บเล็ต), 28px (โทรศัพท์)
• ส่วนหัว 2 ความสูงของบรรทัด: 1.3em

เพิ่มแถวสองคอลัมน์

ใต้แถวที่มีโมดูลข้อความ ให้เพิ่มแถวใหม่สองคอลัมน์ (1/2 – 1/2)

ความกว้างของแถว

อัปเดตแถวด้วยความกว้างสูงสุดต่อไปนี้:

• ความกว้างสูงสุด: 600px

เพิ่มปุ่ม CTA

กล่องการแจ้งเตือนนี้จะมีปุ่ม CTA “เรียนรู้เพิ่มเติม” ทางด้านซ้ายซึ่งสามารถใช้เพื่อเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าอื่นที่มีข้อมูลเพิ่มเติม

ในการสร้างปุ่ม ให้เพิ่มโมดูลปุ่มใหม่ในคอลัมน์ 1

เนื้อหาปุ่ม

อัปเดตข้อความของปุ่มด้วย “เรียนรู้เพิ่มเติม” และเพิ่ม URL ลิงก์ของปุ่มเพื่อเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าอื่นเพื่อดูข้อมูลเพิ่มเติม

การออกแบบปุ่ม

อัปเดตตัวเลือกการออกแบบต่อไปนี้:

• การจัดตำแหน่งปุ่ม: ศูนย์
• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #f6ae55
• ความกว้างของขอบปุ่ม: 0px
• แบบอักษรของปุ่ม: ห้องโดยสาร
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา

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

display: block !important;

เพิ่มปุ่มปิด

ในคอลัมน์ทางขวาของช่องแจ้งเตือนนี้ เราจะมีข้อความ “รับทราบ!” ปุ่มที่ยุบ/ปิดกล่องแจ้งเตือนไม่ให้มองเห็น สำหรับปุ่มนี้ เราจะเก็บการออกแบบส่วนใหญ่ของปุ่มก่อนหน้าไว้ ยกเว้นสีพื้นหลังและข้อความ นอกจากนี้เรายังจะต้องให้รหัส CSS แก่ปุ่มนี้เพื่อกำหนดเป้าหมายด้วยรหัสในภายหลัง

คัดลอกและวางปุ่มไปที่คอลัมน์ขวา

หากต้องการเริ่มต้นการออกแบบปุ่ม ให้คัดลอกปุ่มในคอลัมน์ 1 แล้ววางลงในคอลัมน์ 2

เนื้อหา

อัปเดตข้อความปุ่ม

• ข้อความปุ่ม: รับทราบ!

ออกแบบ

จากนั้นอัปเดตสีข้อความของปุ่มและสีพื้นหลังดังนี้:

• ปุ่มข้อความสี: #121212
• สีพื้นหลังของปุ่ม: rgba (255,255,255,0.4)

ปุ่ม CSS Class

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

• CSS Class: แจ้งให้ทราบอย่างใกล้ชิด

การสร้างไอคอนปิดกล่องการแจ้งเตือน (“x”)

เพิ่มแถว

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

การตั้งค่าแถว

จากนั้นอัปเดตความกว้างของแถวและช่องว่างภายในดังนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

เพิ่มโมดูล/ไอคอน Blurb

ภายในแถว เพิ่มโมดูลการนำเสนอใหม่

เนื้อหา

จากนั้นลบเนื้อหาจำลองในหัวข้อและเนื้อหา เลือกเพื่อใช้ไอคอน "x" สำหรับการนำเสนอ

การตั้งค่า Blurb สำหรับไอคอนปิด

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• สีไอคอน: #ffffff
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 40px
• ความกว้าง: 40px
• ส่วนสูง: 40px

ตำแหน่งไอคอน

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

• ตำแหน่ง: Absolute
• ตำแหน่ง: บนขวา
• ออฟเซ็ตแนวตั้ง: 20px
• ออฟเซ็ตแนวนอน: 20px

ประกาศ/ไอคอน CSS Class

ตอนนี้เพิ่มคลาส CSS เดียวกันกับคำประกาศที่คุณทำสำหรับ "เข้าใจแล้ว!" ปุ่มปิด (จะใช้ทั้งคู่เพื่อปิดกล่องแจ้งเตือน)

• CSS Class: แจ้งให้ทราบอย่างใกล้ชิด

เพิ่มรหัสที่กำหนดเอง

สำหรับกล่องการแจ้งเตือนนี้ เราจะเพิ่ม CSS/Javascript แบบกำหนดเองเพื่อทำสิ่งต่อไปนี้:

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

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

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

<style>
  .close-notice {
    cursor: pointer;
  }
  #notice-section {
    display:none;
  }
  .et-fb-post-content #notice-section {
    display: block !important;
  }
</style>
<script>
function storageAvailable(type) {
  try {
      var storage = window[type],
          x = '__storage_test__';
      storage.setItem(x, x);
      storage.removeItem(x);
      return true;
  }
  catch(e) {
      return e instanceof DOMException && (
          // everything except Firefox
          e.code === 22 ||
          // Firefox
          e.code === 1014 ||
          // test name field too, because code might not be present
          // everything except Firefox
          e.name === 'QuotaExceededError' ||
          // Firefox
          e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
          // acknowledge QuotaExceededError only if there's something already stored
          storage.length !== 0;
  }
}
jQuery(document).ready(function($) {
  var storageAvailable = window.storageAvailable('sessionStorage');
  $(".close-notice").click(function() {
    $("#notice-section").slideUp();
    if (storageAvailable) {
      sessionStorage.setItem('etNoticeState','hidden'); 
    }    
  });
  if (storageAvailable) {
    if ('hidden' !== sessionStorage.getItem('etNoticeState')){
      $("#notice-section").show();
    }
  } else {
    $("#notice-section").show();
  }
});
</script>

เกี่ยวกับรหัส

ในแท็กสไตล์ คุณจะสังเกตเห็นว่าจริงๆ แล้วเรากำลังซ่อนกล่อง/ส่วนการแจ้งเตือนในตอนแรกด้วยสิ่งนี้...

#notice-section {display:none;} 

ด้วยวิธีนี้ เราจะสามารถตรวจสอบให้แน่ใจว่าเบราว์เซอร์มีที่เก็บข้อมูลที่เราจำเป็นต้องบันทึกรายการ

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

.et-fb-post-content #notice-section {display:none;} 

ฟังก์ชัน JS “storageAvailable(type)” จะตรวจสอบพื้นที่จัดเก็บของเบราว์เซอร์

ข้อมูลโค้ด jQuery ทำทุกอย่างที่จำเป็น...

• ปิดส่วน (#notice-section) เมื่อคลิกปุ่มและไอคอนที่มีคลาส "close-notice"
• หากเบราว์เซอร์มีพื้นที่เก็บข้อมูลเซสชัน การคลิกปุ่มใดปุ่มหนึ่งเพื่อปิดกล่องจะเป็นการซ่อนกล่องในช่วงเวลาที่เหลือของเซสชันเบราว์เซอร์ของผู้ใช้ ซึ่งจะคงอยู่ตราบเท่าที่เบราว์เซอร์เปิดอยู่

เมื่อเสร็จแล้ว ให้บันทึกเค้าโครงส่วน

การเพิ่มกล่องการแจ้งเตือน (เค้าโครงส่วน) ให้กับเพจ

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

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

ตรวจสอบให้แน่ใจว่าได้วางส่วนไว้ที่ด้านบนสุดของหน้า (หรือที่อื่นๆ ที่คุณต้องการ) และบันทึกหน้า

การเพิ่มกล่องการแจ้งเตือน (เค้าโครงส่วน) ให้กับเทมเพลตธีม Divi

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

หากต้องการเพิ่มลงในเทมเพลต ให้เปิด Divi Theme Builder

จากนั้นคลิกเพื่อแก้ไขพื้นที่เทมเพลตที่คุณต้องการเพิ่มเค้าโครงส่วนของกล่องการแจ้งเตือน

ในตัวแก้ไขเค้าโครงแม่แบบ คลิกเพื่อเพิ่มส่วนใหม่และเลือกเค้าโครงส่วนที่บันทึกไว้จากไลบรารี Divi

บันทึกเค้าโครงแม่แบบ

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

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายของกล่องการแจ้งเตือนบนหน้าสด

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

ฉันหวังว่ากล่องการแจ้งเตือน Divi นี้จะมีประโยชน์ มีการใช้งานที่ยอดเยี่ยมมากมายสำหรับสิ่งนี้ และแม้ว่าโลกจะยังรับมือกับโควิด-19 แต่เราหวังว่าจะได้รับการแจ้งเตือนเชิงบวกมากมายในอนาคตอันใกล้นี้

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

ไชโย!