วิธีการออกแบบเมนูร้านอาหารเหนียวโดยใช้ Divi

Rifat Oct 20, 2021

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

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

เหลือบของการออกแบบขั้นสุดท้ายของเรา

มาดูผลลัพธ์สุดท้ายของการออกแบบของเราในวันนี้กัน

มุมมองเดสก์ท็อป

ดูบนมือถือ

การสร้างโครงสร้างองค์ประกอบ

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

สีพื้นหลัง

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

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย
  • สีพื้นหลัง: rgba(255,252,244,0.6)

ภาพพื้นหลัง

ตอนนี้ใช้ภาพรูปแบบเป็นพื้นหลัง มีรูปภาพรูปแบบมากมายที่ Google ดังนั้นให้เลือกตัวเลือกใดตัวเลือกหนึ่งของคุณ

  • ขนาดภาพพื้นหลัง: ขนาดจริง
  • ตำแหน่งภาพพื้นหลัง: กึ่งกลางด้านบน
  • ทำซ้ำภาพพื้นหลัง: ทำซ้ำ X (แนวนอน)

ระยะห่าง

เปลี่ยนค่าระยะห่าง

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

การเพิ่มแถวใหม่

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

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

ตอนนี้เลือกโครงสร้างคอลัมน์ต่อไปนี้

ขนาด

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

  • ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
  • ความกว้างของรางน้ำ: 1
  • ความกว้าง: เดสก์ท็อปและแท็บเล็ต: 80%, โทรศัพท์: 95%
  • ความกว้างสูงสุด: 1580px
  • การจัดแนวแถว: กึ่งกลาง

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

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

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

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

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

  • หัวเรื่อง 3 แบบอักษร: Karla
  • ส่วนหัว 3 น้ำหนักแบบอักษร: ตัวหนา
  • หัวเรื่อง 3 ขนาดข้อความ: เดสก์ท็อปและแท็บเล็ต: 45px โทรศัพท์: 35px
  • หัวเรื่อง 3 ระยะห่างตัวอักษร: -2px
  • ส่วนหัว 3 ความสูงของบรรทัด: 1.2em

ระยะห่าง

มาเพิ่มแผ่นรองด้านบนและด้านล่างกัน

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

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

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

เพิ่มโมดูลข้อความใต้โมดูลก่อนหน้าและเพิ่มคำบางคำจากตัวเลือกของคุณ

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

เปลี่ยนการตั้งค่าโมดูล

  • แบบอักษรข้อความ: Crimson Pro
  • สีข้อความ: #3a3a3a
  • ขนาดตัวอักษร: 32px

ระยะห่าง

เสร็จสิ้นการตั้งค่าโมดูลโดยเปลี่ยนค่าระยะห่าง

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

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัพโหลดรูปภาพ

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

ขนาด

เพิ่มความกว้างสูงสุดจากการตั้งค่าการปรับขนาด

ระยะห่าง

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

  • ขอบล่าง: แท็บเล็ต: 80px โทรศัพท์: 50px
  • ช่องว่างภายในด้านซ้าย: 5%
  • ช่องว่างภายในด้านขวา: 5%

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

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

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

สีพื้นหลัง

เพิ่มสีพื้นหลังสีขาวจากแท็บเนื้อหา

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

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

ตอนนี้ย้ายไปที่ส่วนการออกแบบและเปลี่ยนค่าต่อไปนี้

  • แบบอักษรของชื่อเรื่อง: Karla
  • น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
  • ชื่อข้อความสี: #3a3a3a
  • ขนาดข้อความของชื่อเรื่อง: เดสก์ท็อป: 40px, แท็บเล็ต: 35px และโทรศัพท์: 30px
  • ระยะห่างของตัวอักษรชื่อเรื่อง: -2px
  • ความสูงของบรรทัดชื่อเรื่อง: 1.2em

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

แก้ไขการตั้งค่าข้อความเนื้อหาตามที่กล่าวไว้ด้านล่าง

  • แบบอักษรของชื่อเรื่อง: Karla
  • ชื่อข้อความสี: #3a3a3a
  • ขนาดข้อความของชื่อเรื่อง: เดสก์ท็อป: 18px, แท็บเล็ต: 25px และโทรศัพท์: 20px
  • ระยะห่างของตัวอักษรชื่อเรื่อง: -0.5px
  • ความสูงของบรรทัดชื่อเรื่อง: 2em

ขนาด

ตอนนี้ปรับเปลี่ยนขนาด

  • ความกว้างของเนื้อหา: 100%

ระยะห่าง

ย้ายไปยังการตั้งค่าระยะห่างและแก้ไขค่าตามนั้น

  • ขอบล่าง: 30px
  • ช่องว่างภายในด้านบน: 40px
  • ช่องว่างภายในด้านล่าง: 40px
  • ช่องว่างภายในด้านซ้าย: 8%
  • ช่องว่างภายในด้านขวา: เดสก์ท็อป: 25% แท็บเล็ตและโทรศัพท์: 8%

ชายแดน

ถึงเวลาที่จะใช้การตั้งค่าเส้นขอบ

  • ความกว้างของเส้นขอบด้านซ้าย: 3px
  • สีขอบซ้าย: #000000

กล่องเงา

เรากำลังใช้กล่องเงาเช่นกัน

  • ความแรงของกล่องเงาเบลอ: 20px
  • เงาสี: rgba(0,0,0,0.05)

หัวข้อประกาศ CSS

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

margin-bottom: 20px;

โคลน Blurb โมดูล

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

แล้วเปลี่ยนเนื้อหาภายในรายการ

ใช้เอฟเฟกต์ติดหนึบ

โมดูลข้อความ 1 ในคอลัมน์ 1

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

ทำให้โมดูลติดหนึบ

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

  • ตำแหน่งติดหนึบ: Stick to Top
  • ขีด จำกัด ปักหมุดด้านล่าง: แถว
  • Offset ล้อมรอบ Sticky Elements: ใช่
  • รูปแบบเริ่มต้นของการเปลี่ยนและรูปแบบติดหนึบ: ใช่

แบบติดหนึบสำหรับโมดูล

สีพื้นหลัง

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

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

สีข้อความ

จากนั้น เปลี่ยนสีข้อความ H3 แบบติดหนึบเป็นสีขาว

  • ปักหมุดหัวเรื่อง 3 สีข้อความ: #ffffff

ระยะห่าง

และสรุปรูปแบบการติดหนึบโดยการเพิ่มค่า Sticky Padding ที่ตอบสนองต่อไปนี้:

  • Padding ซ้ายเหนียว: 5%
  • ปักหมุดด้านขวา: 5%

โคลนทั้งแถวเพื่อนำกลับมาใช้ใหม่

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

เปลี่ยนเนื้อหาทั้งหมดสำหรับแถวที่สอง

ตรวจสอบให้แน่ใจว่าคุณได้แก้ไขเนื้อหาสำหรับแถววินาที

ผลสุดท้าย

การออกแบบขั้นสุดท้ายของเราจึงเป็นแบบนี้

มุมมองเดสก์ท็อป

ดูบนมือถือ

บทสรุป

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

Divi WordPress Theme