วิธีสร้างแถบส่วนท้ายมือถือแบบคงที่ด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

สร้างตัวอย่างใหม่ #1

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

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

ระยะห่าง

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

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

ทัศนวิสัย

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

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

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

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

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ระยะห่าง

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

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

CSS ที่กำหนดเอง

สุดท้ายนี้ เรากำลังเพิ่มบรรทัด CSS ที่กำหนดเองลงในแถว เส้นเหล่านี้จะช่วยเปลี่ยนแถวให้เป็นแถบส่วนท้ายคงที่

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

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

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

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! โมดูลแรกที่เราต้องการคือโมดูลข้อความในคอลัมน์ 1 เพิ่มเนื้อหาที่เลือก

สีพื้นหลัง

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

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

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

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

• แบบอักษรของข้อความ: Work Sans
• น้ำหนักแบบอักษรของข้อความ: เบา
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 16px
• ระยะห่างของตัวอักษรข้อความ: -1px

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองต่อไป

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

ชายแดน

และมุมโค้งมนด้วย

• ซ้ายบน: 10px
• ขวาบน: 10px

กล่องเงา

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

• ความแรงของกล่องเงาเบลอ: 80px

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

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

เพิ่มโมดูล Blurb ลงในคอลัมน์ที่สองและเพิ่มชื่อที่ต้องการ

เลือกไอคอน

ดำเนินการต่อโดยเลือกไอคอนสำหรับโมดูล Blurb

สีพื้นหลัง

เพิ่มสีพื้นหลังให้กับโมดูลด้วย

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

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

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

• สีไอคอน: #ffffff
• ตำแหน่งไอคอน: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 19px

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

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

• แบบอักษรของชื่อเรื่อง: Work Sans
• สีข้อความของชื่อเรื่อง: #ffffff
• ขนาดข้อความชื่อเรื่อง: 16px
• ระยะห่างของตัวอักษรชื่อเรื่อง: -1px

ระยะห่าง

เพิ่มช่องว่างภายในแบบกำหนดเองให้กับโมดูลด้วย

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

ชายแดน

และเพิ่ม '10px' ที่มุมซ้ายบนและมุมขวาบน

• ซ้ายบน: 10px
• ขวาบน: 10px

กล่องเงา

สุดท้ายแต่ไม่ท้ายสุด เพิ่มเงาของกล่องที่ละเอียดอ่อนให้กับโมดูล

• ความแรงของกล่องเงาเบลอ: 80px

สร้างตัวอย่างใหม่ #2

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

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

ระยะห่าง

เปิดการตั้งค่าส่วนและลบช่องว่างด้านบนและด้านล่างเริ่มต้น

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

ทัศนวิสัย

ซ่อนส่วนนี้บนเดสก์ท็อป (และแท็บเล็ตหากต้องการ)

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

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

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

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นของแถวด้วย

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

CSS ที่กำหนดเอง

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

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

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

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

ดำเนินการต่อโดยเพิ่มโมดูล Blurb ลงในคอลัมน์แรก เพิ่มชื่อที่เลือก

เลือกไอคอน

จากนั้นเลือกไอคอน

สีพื้นหลัง

เพิ่มสีพื้นหลังให้กับโมดูลถัดไป

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

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

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

• สีไอคอน: #ffffff
• ตำแหน่งไอคอน: Top
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 25px

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

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

• แบบอักษรของชื่อเรื่อง: Work Sans
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• สีข้อความของชื่อเรื่อง: #ffffff
• ระยะห่างของตัวอักษรชื่อเรื่อง: -1px

ระยะห่าง

และเพิ่มช่องว่างภายในด้านบนและด้านล่างเพื่อให้โมดูลมีพื้นที่หายใจ

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

ชายแดน

เรายังเพิ่ม '15px' ที่ขอบซ้ายบนของโมดูลด้วย

• ซ้ายบน: 15px

กล่องเงา

และเราจะทำโมดูลให้สมบูรณ์ด้วยเงากล่องที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 80px

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

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

เปลี่ยนสีพื้นหลังของซ้ำ #1

เปลี่ยนสีพื้นหลังของรายการที่ซ้ำกันครั้งแรก

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

เปลี่ยนการตั้งค่าระยะห่างของรายการซ้ำ #1

พร้อมกับการตั้งค่าระยะห่าง

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

เปลี่ยนขอบของซ้ำ #1

และมุมโค้งมนเช่นกัน

เปลี่ยนสีพื้นหลังของซ้ำ #2

เปลี่ยนสีพื้นหลังของรายการที่ซ้ำกันที่สองในคอลัมน์ที่สามด้วย

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

เปลี่ยนเส้นขอบของรายการซ้ำ #2

พร้อมกับมุมโค้งมน

• ขวาบน: 15px

สร้างตัวอย่างใหม่ #3

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

สู่ตัวอย่างต่อไปและสุดท้าย! เปิดหน้าใดหน้าหนึ่ง เลื่อนหน้าลงและเพิ่มส่วนใหม่

ตัวแบ่งด้านบน

เปิดการตั้งค่าส่วนและเพิ่มตัวแบ่งด้านบน

• ตัวแบ่งสี: #62de9d
• ความสูงของตัวแบ่ง: 110px

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดของส่วนด้วย

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

กล่องเงา

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

• ความแรงของกล่องเงาเบลอ: 80px

CSS ที่กำหนดเอง

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

position:fixed;
bottom:0px;
width: 100%;
z-index: 99;

ทัศนวิสัย

สุดท้ายนี้ ปิดใช้งานส่วนนี้บนเดสก์ท็อป (และแท็บเล็ตหากต้องการ)

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

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

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

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

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

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

CSS ที่กำหนดเอง

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

display: flex;

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

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

ตอนนี้เราสามารถเริ่มเพิ่มโมดูลได้แล้ว! เพิ่ม Blurb Module ในคอลัมน์แรกและตั้งชื่อ

เลือกไอคอน

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

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

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

• สีไอคอน: #ffffff
• ตำแหน่งไอคอน: Top
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 25px

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

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

• แบบอักษรของชื่อเรื่อง: Work Sans
• การวางแนวข้อความชื่อเรื่อง: Center
• ระยะห่างของตัวอักษรชื่อเรื่อง: -1px

Clone Blurb Module Twice & Place

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

เปลี่ยนสีไอคอนของรายการซ้ำ #1

อย่าลืมเปลี่ยนสีไอคอนของรายการที่ซ้ำกันซึ่งอยู่ในคอลัมน์ที่สอง

• ไอคอนสี: #000000

ดูตัวอย่าง

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

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

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