วิธีเพิ่มวิวพอร์ตมือถือของ Divi ให้สูงสุดโดยใช้ Rotated Copy

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

ไปกันเถอะ

ดูตัวอย่าง

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

ดาวน์โหลดเค้าโครงวิวพอร์ตมือถือสูงสุดฟรี

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

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

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

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

ดาวน์โหลด

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

มาเริ่มสร้างใหม่กันเถอะ!

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

ระยะห่าง

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

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

เพิ่มแถว #1

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 100%
• ความกว้างสูงสุด: 50% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
• การจัดแนวแถว: ซ้าย

ระยะห่าง

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

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

องค์ประกอบหลัก CSS

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

display: flex;

คอลัมน์ 1 การตั้งค่า

แอนิเมชั่น

จากนั้น เราจะเปิดการตั้งค่าคอลัมน์ 1 และเพิ่มภาพเคลื่อนไหวต่อไปนี้

• สไตล์แอนิเมชั่น: Fade

องค์ประกอบหลัก CSS

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

width: 40% !important;

การตั้งค่าคอลัมน์ 2

แอนิเมชั่น

ต่อไป เราจะเปิดการตั้งค่าคอลัมน์ 2 และใช้ภาพเคลื่อนไหวต่อไปนี้:

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 200ms

องค์ประกอบหลัก CSS

เรากำลังรักษาขนาดของคอลัมน์ในขนาดหน้าจอที่เล็กลงโดยการเพิ่มโค้ด CSS ต่อไปนี้:

width: 60% !important;

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

อัพโหลดภาพ

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

ขนาด

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

• บังคับเต็มความกว้าง: ใช่

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

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

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

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

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

• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• หัวข้อ 2 น้ำหนักแบบอักษร: เบา
• การจัดแนวข้อความส่วนหัวที่ 2: กึ่งกลาง (แท็บเล็ตและโทรศัพท์เท่านั้น)
• หัวเรื่อง 2 สีข้อความ: #000000
• หัวเรื่อง 2 ขนาดข้อความ: 3vw (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: -3px

ขนาด

ต่อไป เราจะแก้ไขความกว้างในการตั้งค่าการปรับขนาด

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

แปลงร่างหมุน

ในการหมุนโมดูลของเราในขนาดหน้าจอที่เล็กลง เราจะใช้การตั้งค่าการหมุนของการแปลง

• ซ้าย: 270deg (แท็บเล็ตและโทรศัพท์เท่านั้น)

ตำแหน่ง

เรากำลังเปลี่ยนตำแหน่งโมดูลให้แตกต่างไปตามขนาดหน้าจอต่างๆ

• ตำแหน่ง: Absolute
• ตำแหน่ง: Bottom Center (เดสก์ท็อป), Center (แท็บเล็ตและโทรศัพท์)
• ออฟเซ็ตแนวตั้ง: 50px

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 1

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

เส้น

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

• สีของเส้น: #000000

ขนาด

แก้ไขการตั้งค่าการปรับขนาดด้วย

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

ตำแหน่ง

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยจัดตำแหน่งโมดูลใหม่ตามลำดับ:

• ตำแหน่ง: Absolute
• ที่ตั้ง: กลางขวา

เพิ่มแถว #2

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

ในแถวถัดไป ใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

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

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

ระยะห่าง

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

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

องค์ประกอบหลัก CSS

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

display: flex;

คอลัมน์ 1 การตั้งค่า

พื้นหลังไล่โทนสี

ต่อไป เราจะเปิดการตั้งค่าคอลัมน์ 1 และเราจะใช้พื้นหลังแบบไล่ระดับสี

• สี 1: #1a9970
• สี 2: #000000
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 153deg

แอนิเมชั่น

เรากำลังใช้ภาพเคลื่อนไหวที่ล่าช้าในคอลัมน์นี้ด้วย

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 400ms

องค์ประกอบหลัก CSS

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

width: 25% !important;

ทัศนวิสัย

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

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

การตั้งค่าคอลัมน์ 2

สีพื้นหลัง

ไปที่การตั้งค่าคอลัมน์ 2 ใช้สีพื้นหลังต่อไปนี้:

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

แอนิเมชั่น

ใช้แอนิเมชั่นที่ล่าช้าด้วย

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 600ms

องค์ประกอบหลัก CSS

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

width: 75% !important;

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

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

ถึงเวลาเพิ่มโมดูล เพิ่มโมดูลข้อความลงในคอลัมน์ 2 พร้อมเนื้อหาคำอธิบายที่คุณเลือก

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

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

• แบบอักษรข้อความ: เปิด Sans
• ขนาดตัวอักษร: 15px (เดสก์ท็อป), 14px (แท็บเล็ต), 13px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.4em

ขนาด

จากนั้น เราจะเปลี่ยนการตั้งค่าการปรับขนาด

• ความกว้าง: 80%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 15%
• แผ่นรองด้านล่าง: 15%

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 2

เพิ่มสำเนา

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

การจัดตำแหน่ง

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

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

การตั้งค่าปุ่ม

สไตล์ปุ่มถัดไป

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

• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• แสดงไอคอนปุ่ม: ใช่
• ตำแหน่งไอคอนปุ่ม: ซ้าย
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: ไม่

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 2%
• แผ่นรองด้านล่าง: 2%
• ช่องว่างภายในด้านซ้าย: 10%
• ช่องว่างภายในด้านขวา: 10%

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

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

ในคอลัมน์ 1 โมดูลเดียวที่เราต้องการคือโมดูลข้อความ เพิ่มเนื้อหาต่อไปนี้ลงในกล่องเนื้อหา: '— 01'

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: บาง
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 50px (เดสก์ท็อป), 40px (แท็บเล็ต), 35px (โทรศัพท์)
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ขนาด

เพิ่มความกว้างของโมดูลต่อไป

• ความกว้าง: 150%

แปลงแปล

จากนั้นไปที่การตั้งค่าการแปลงและเปลี่ยนตำแหน่งโมดูลโดยแก้ไขการตั้งค่าการแปลงการแปลง:

• ด้านล่าง: -50% (แท็บเล็ตและโทรศัพท์เท่านั้น)

แปลงร่างหมุน

เรากำลังหมุนโมดูลด้วยขนาดหน้าจอที่เล็กลงเช่นกัน

• ซ้าย: 270deg (แท็บเล็ตและโทรศัพท์เท่านั้น)

ตำแหน่ง

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

• ตำแหน่ง: Absolute
• ที่ตั้ง: Center

ส่วนโคลนเพื่อนำมาใช้ใหม่

เมื่อคุณทำส่วนแรกเสร็จแล้ว คุณสามารถโคลนได้มากเท่าที่คุณต้องการ

เปลี่ยนการคัดลอกและลิงก์ทั้งหมด

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

เปลี่ยนภาพ

พร้อมภาพพอร์ตเทรตแล้วเสร็จ!

ดูตัวอย่าง

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

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

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

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