วิธีสร้างเมนู Blurb บน Hover/Click for Your Page ด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

โหมดโฮเวอร์

เดสก์ทอป

มือถือ

คลิก Modus

เดสก์ทอป

มือถือ

1. สร้างหน้าเปล่า & อัปโหลดหน้า Landing Page เที่ยวชมสถานที่

เพิ่มหน้าเปล่าใหม่ & เปิดใช้งาน Divi Builder

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

อัพโหลดหน้าแลนดิ้งเพจ

เมื่อคุณเปิดใช้งาน Divi Builder แล้ว ให้อัปโหลดเค้าโครงหน้า Landing Page ของ Sightseeing Layout Pack

2. เพิ่มส่วนปกติใหม่ที่ด้านล่างของหน้า

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

สีพื้นหลัง

เปิดการตั้งค่าส่วนและเพิ่มสีพื้นหลังสีขาวโปร่งใสเล็กน้อย

• สีพื้นหลัง: rgba(255,255,255,0.98)

ระยะห่าง

ไปที่แท็บการออกแบบและลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดของส่วน

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

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

เพิ่มเงาของกล่องในส่วนถัดไป

• ความชัดเจนของเงากล่อง: 18px
• สีเงา: #383838

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

และเปลี่ยนความแรงของกล่องเงาเบลอเมื่อวางเมาส์ไว้

• ความชัดเจนของกล่องเงาเบลอ: 1000px

ซ่อนส่วนล้น & เพิ่มดัชนี Z

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

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน
• ดัชนี Z: 9999

3. ตรวจสอบให้แน่ใจว่าเนื้อหาเมนูส่วนทั้งหมดถูกสร้างขึ้นโดยใช้ Vw & พอดีกับความสูงของวิวพอร์ต 100 ในทุกขนาดหน้าจอ

เพิ่มแถว #1

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

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

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

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มสัญลักษณ์

ดำเนินการต่อโดยเพิ่มโมดูลข้อความลงในคอลัมน์ของแถว เพิ่มสัญลักษณ์ '=' ลงในช่องเนื้อหาหรือใช้สัญลักษณ์อื่นๆ ตามที่คุณต้องการ

สีพื้นหลัง

เปลี่ยนสีพื้นหลังของโมดูลต่อไป

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

การตั้งค่าข้อความ

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

• แบบอักษรข้อความ: เปิด Sans
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1em

ระยะห่าง

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

• ด้านบน: 2.5vw (เดสก์ท็อป), 3.5vw (แท็บเล็ต), 5vw (โทรศัพท์)
• Padding ด้านล่าง: 2.5vw (เดสก์ท็อป), 3.5vw (แท็บเล็ต), 5vw (โทรศัพท์)

เพิ่มแถว #2

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

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

• ด้านบน: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
• Padding ด้านล่าง: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)

แสดง

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

display: flex;

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

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

ได้เวลาเริ่มเพิ่มรายการเมนูแล้ว! เพิ่มโมดูล Blurb ใหม่ในคอลัมน์แรกของแถวและป้อนเนื้อหาที่คุณต้องการ

เลือกไอคอน

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

เพิ่มลิงค์

และใส่ลิงค์เพจที่ตรงกับรายการเมนู

• URL ลิงค์ชื่อเรื่อง: #

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

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

• ไอคอนสี: #ff3314
• ตำแหน่งไอคอน: Top
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 2vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)

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

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

• แบบอักษรของชื่อเรื่อง: PT Serif
• รูปแบบตัวอักษรของชื่อเรื่อง: ขีดเส้นใต้
• ชื่อเรื่อง ขีดเส้นใต้สี: #ff3314
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• ขนาดข้อความชื่อเรื่อง: 1.8vw (เดสก์ท็อป), 2.3vw (แท็บเล็ต), 3.3vw (โทรศัพท์)

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

จากนั้น เปลี่ยนการตั้งค่าข้อความเนื้อหา

• แบบอักษรของร่างกาย: Lato
• การจัดตำแหน่งข้อความเนื้อหา: กึ่งกลาง
• สีข้อความ: #c6c6c6
• ขนาดตัวอักษร: 0.9vw (เดสก์ท็อป), 1.7vw (แท็บเล็ต), 2.1vw (โทรศัพท์)
• ความสูงของเส้นร่างกาย: 1.8em

ขนาด

และเปลี่ยนความกว้างของโมดูลตามขนาดหน้าจอต่างๆ โดยใช้ค่าต่อไปนี้

• ความกว้าง: 60% (เดสก์ท็อป), 65% (แท็บเล็ต), 80% (โทรศัพท์)

แอนิเมชั่น

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

• แอนิเมชั่นไอคอน: ไม่มีแอนิเมชั่น

โคลนโมดูล Blurb & วางซ้ำในคอลัมน์ 2

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

เปลี่ยนสำเนา

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนสำเนา

เปลี่ยนไอคอน

พร้อมกับไอค่อน

เปลี่ยนลิงค์

และลิงค์เพจที่ตรงกับรายการเมนูใหม่

โคลนแถวสองครั้ง

เมื่อคุณสร้าง Blurb Modules ทั้งสองในแถวเสร็จแล้ว คุณสามารถโคลนทั้งแถวได้สองครั้ง

เปลี่ยนการคัดลอก ไอคอน และลิงก์สำหรับแต่ละ Blurb Duplicate ทีละรายการ

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

4. ทำให้ส่วนเหนียว

ค่าเริ่มต้น

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

position: fixed;
top: 0;

โฮเวอร์ (สำคัญ!)

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

position: fixed;

5. เลือกวิธีการ: A) เมนูบนโฮเวอร์หรือ B) เมนูเมื่อคลิก

A) เมนูบน Hover

การปรับขนาดมาตราเริ่มต้น

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

• ความกว้าง: 8vw (เดสก์ท็อป), 12vw (แท็บเล็ต), 20vw (โทรศัพท์)
• ความสูง: 7.4vw (เดสก์ท็อป), 12vw (แท็บเล็ต), 16vw (โทรศัพท์)

เลื่อนขนาดมาตรา

แก้ไขค่าบนโฮเวอร์เพื่อสร้างเมนูขยาย

• ความกว้าง: 80%
• ส่วนสูง: 100vh

B) เมนูบน Click

เพิ่มคลาส CSS ให้กับโมดูลข้อความ

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

• CSS Class: fullwidth-open

เพิ่มคลาส CSS ให้กับ Section

เปิดการตั้งค่าส่วนถัดไปและเพิ่มคลาส CSS อื่น

• CSS Class: การแปลงที่ราบรื่น

ขนาดมาตรา

เรากำลังแก้ไขความกว้างและความสูงของส่วนของเราต่อไป

• ความกว้าง: 8vw (เดสก์ท็อป), 12vw (แท็บเล็ต), 20vw (โทรศัพท์)
• ความสูง: 7.4vw (เดสก์ท็อป), 12vw (แท็บเล็ต), 16vw (โทรศัพท์)

เพิ่มรหัสไปยังเพจ

เพิ่มแถวใหม่ที่ด้านล่างของส่วน

ในการสร้างเอฟเฟกต์การสลับ เราจำเป็นต้องมีโค้ด JQuery และ CSS เล็กน้อย เริ่มต้นด้วยการเพิ่ม Code Module ลงในแถวใหม่ที่ด้านล่างของส่วนของคุณ

เพิ่มโมดูลโค้ดในส่วน & แทรก JQuery Toggle Code

คัดลอกบรรทัดต่อไปนี้ของรหัส JQuery และวางลงในกล่องรหัส:

<script>
jQuery(function($){
$(".fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});

});
</script>

เพิ่มโค้ด CSS ที่กำหนดเองในการตั้งค่าเพจ

สุดท้ายแต่ไม่ท้ายสุด เปิดการตั้งค่าหน้าถัดไปและเพิ่มโค้ด CSS ต่อไปนี้:

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

ดูตัวอย่าง

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

โหมดโฮเวอร์

เดสก์ทอป

มือถือ

คลิก Modus

เดสก์ทอป

มือถือ

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

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

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