วิธีสร้างเลย์เอาต์แบบเต็มหน้าจอด้วยการสลับเฉพาะใน Divi

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

สลับเปิด

สลับปิด

มือถือ

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ JSON ไปที่ Divi Builder

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

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

ส่วนที่ 1: การสร้างเค้าโครงหน้าจอแยกที่มีสองส่วน

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

ส่วนที่ 1 การตั้งค่า

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

พื้นหลัง

• เพิ่มภาพพื้นหลัง
• ไล่สีพื้นหลังซ้ายสี: #ffffff
• พื้นหลังไล่ระดับสีซ้าย: rgba(255,255,255,0.45)

ขนาดและระยะห่าง

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

• ความกว้าง: 50% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
• ความสูงขั้นต่ำ: 900px (เดสก์ท็อป) ไม่มี (แท็บเล็ตและโทรศัพท์)
• ความสูง: 100vh (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

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

• สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
• ตัวแบ่งสีด้านบน: #333333
• ความสูงของตัวแบ่งด้านบน: 50vh (เดสก์ท็อป), 10vh (แท็บเล็ตและโทรศัพท์)
• ตัวแบ่งแนวนอนด้านบนซ้ำ: 0.5x (เดสก์ท็อป), 1x (แท็บเล็ตและโทรศัพท์)
• การจัดเรียงตัวแบ่งด้านบน: ใต้เนื้อหาส่วน

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

• สไตล์ตัวแบ่งด้านล่าง: ดูภาพหน้าจอ
• ตัวแบ่งสีด้านล่าง: #02c39a
• ความสูงของตัวแบ่งด้านล่าง: 50vh (เดสก์ท็อป), 30vh (แท็บเล็ตและโทรศัพท์)
• ตัวแบ่งแนวนอน ทำซ้ำแนวนอน: 0.5x (เดสก์ท็อป), 1x (แท็บเล็ตและโทรศัพท์)
• การจัดเรียงตัวแบ่งด้านล่าง: ใต้เนื้อหาส่วน

มาตรา 2

ซ้ำส่วนที่1

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

จากนั้นอัปเดตการตั้งค่าดังนี้:

ตำแหน่ง

• ตำแหน่ง: Absolute (เดสก์ท็อป) ญาติ (แท็บเล็ตและโทรศัพท์)
• ตำแหน่ง: บนขวา
• ดัชนี Z: 10

พื้นหลัง

• สีพื้นหลัง: none/white

อัปเดตตัวแบ่งยอดนิยม

• สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
• ตัวแบ่งสีด้านบน: #02c39a
• ตัวแบ่งแนวนอนด้านบนซ้ำ: 1x
• พลิกตัวแบ่งด้านบน: แนวตั้ง

ตัวแบ่งควรอยู่ในแนวเดียวกับส่วนหัวด้านบนที่อยู่ติดกันในส่วนที่ 1

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

• สไตล์ตัวแบ่งด้านล่าง: ดูภาพหน้าจอ
• ตัวแบ่งสีด้านล่าง: #f0f3bd
• ตัวแบ่งด้านล่าง ทำซ้ำแนวนอน: 1x
• พลิกตัวแบ่งด้านล่าง: แนวตั้ง

ส่วนที่ 2: ส่วนที่ 1 ชื่อและเมนู

เมื่อเลย์เอาต์สองส่วนพร้อมแล้ว เราสามารถเริ่มเพิ่มเนื้อหาลงในแต่ละส่วนได้

การสร้างชื่อเรื่อง

ในการเริ่มต้น เราจะสร้างชื่อเรื่องขนาดใหญ่ในส่วนด้านซ้าย

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

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

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

โมดูลข้อความ

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

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

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

<h1>Divi <br />Web <br />Design</h1>

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

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

• แบบอักษรของหัวเรื่อง: Poppins
• น้ำหนักตัวอักษรของหัวเรื่อง: ตัวหนา
• การจัดตำแหน่งข้อความหัวเรื่อง: ขวา
• ขนาดข้อความหัวเรื่อง: 10vw
• ความสูงของบรรทัดหัวเรื่อง: 1.2em
• ช่องว่างภายใน: 5% เหลือ

การสร้างเมนู

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

นี่คือวิธีการทำ ...

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

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

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

จากนั้นอัปเดตการตั้งค่าแถวต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง
• ตำแหน่ง: Absolute (เดสก์ท็อป), ญาติ (แท็บเล็ตและโทรศัพท์)
• ตำแหน่ง: ล่างซ้าย
• ดัชนี Z: 3

โมดูล Blurb

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

เนื้อหานำเสนอ

จากนั้นอัปเดตเนื้อหาการนำเสนอดังนี้:

• ชื่อเรื่อง: ธุรกิจ
• ไอคอน: อาคาร

จัดแต่งทรงผม Blurb

จากนั้นอัปเดตการตั้งค่าการออกแบบดังนี้:

• ไอคอนสี: #333333
• ขนาดตัวอักษรของไอคอน: 40px
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• ขนาดข้อความชื่อเรื่อง: 12px

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ใน Blurb Image

margin-bottom: 10px;

คอลัมน์ซ้ำ

ตอนนี้ เรามีไอคอนที่ออกแบบในคอลัมน์ที่หนึ่งแล้ว เราสามารถเร่งการสร้างและออกแบบไอคอนอีก 5 ไอคอนโดยทำซ้ำทั้งคอลัมน์ 5 ครั้ง

อัปเดตเนื้อหาสำหรับ Blurbs

เมื่อสร้างทั้ง 6 คอลัมน์/ไอคอนแล้ว ให้กลับไปอัปเดตชื่อ ไอคอน และ URL สำหรับแต่ละคำประกาศ

ส่วนที่ 3 ส่วนที่ 2 สลับ

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

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

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

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

ความสูงของคอลัมน์

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

height: 100%;

โมดูลสลับด้านบน

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

สลับเนื้อหา

จากนั้นอัปเดตเนื้อหาสลับด้วยชื่อ "Divi" และวางเนื้อหาต่อไปนี้ในเนื้อหา:

Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here.

<a href="#">| Learn More ></a>

สลับการออกแบบ

อัปเดตการออกแบบสลับดังนี้:

• ไอคอนสี: #333333
• ขนาดตัวอักษรของไอคอน: 40px
• เปิดสลับสีพื้นหลัง: โปร่งใส
• ปิดสลับสีพื้นหลัง: โปร่งใส
• เปิดชื่อสีข้อความ: #333333
• ชื่อข้อความสี: #333333
• แบบอักษรของชื่อเรื่อง: Poppins
• น้ำหนักแบบอักษรของชื่อเรื่อง: Ultra Light
• ขนาดข้อความชื่อเรื่อง: 40px
• สีข้อความ: #333333
• ลิงก์น้ำหนักแบบอักษร: #333333
• ลิงก์น้ำหนักแบบอักษร: ตัวหนา
• รูปแบบตัวอักษรของลิงก์: TT
• ลิงค์สีข้อความ: #333333
• ระยะห่างระหว่างตัวอักษรของลิงก์: 3px (เดสก์ท็อป), 5px (โฮเวอร์)

สลับขนาดและตำแหน่ง

• ความกว้าง: 50% (เดสก์ท็อป), 80% (แท็บเล็ตและโทรศัพท์)
• ความกว้างสูงสุด: 400px
• ความกว้างของเส้นขอบ: 0px
• สลับไอคอน CSS ที่กำหนดเอง:

  left:-60px;

• ตำแหน่ง: Absolute (เดสก์ท็อป), ญาติ (แท็บเล็ตและโทรศัพท์)
• ออฟเซ็ตแนวตั้ง: 22%
• ออฟเซ็ตแนวนอน: 50%
• ดัชนี Z: 2

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

โมดูลสลับด้านล่าง

ซ้ำ Top Toggle

หากต้องการสร้างปุ่มสลับด้านล่าง ให้ทำซ้ำปุ่มสลับที่เพิ่งสร้างขึ้น

อัพเดทตำแหน่ง

จากนั้นเปิดการตั้งค่าสลับที่ซ้ำกันโดยใช้กล่องเลเยอร์และอัปเดตออฟเซ็ตตำแหน่งดังนี้:

• ออฟเซ็ตแนวตั้ง: 70%

โมดูลสลับกลาง

สลับด้านล่างที่ซ้ำกัน

หากต้องการสร้างปุ่มสลับกลาง ให้สลับปุ่มสลับด้านล่างซ้ำ

อัพเดทตำแหน่ง

จากนั้นอัปเดตสิ่งต่อไปนี้:

• ที่ตั้ง: Left Center
• ออฟเซ็ตแนวนอน: 19px

อัพเดทขนาด

• ความกว้าง: 95%
• ความกว้างสูงสุด: 500px

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

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

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

display:flex;
align-items:center;

เส้นแบ่ง

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

โมดูลตัวแบ่งด้านบน

ในการสร้างเส้นแบ่งด้านบน ให้เพิ่มโมดูลตัวแบ่งใหม่ใต้ปุ่มสลับด้านบน

การออกแบบตัวแบ่ง

จากนั้นอัปเดตการตั้งค่าการออกแบบตัวแบ่งดังนี้:

• สีเส้น: #333333
• ตำแหน่งเส้น: กึ่งกลางแนวตั้ง
• น้ำหนักตัวแบ่ง: 2px
• ความกว้าง: 50%
• แปลงแกนแปล Y: 29px
• แปลงแกน X แปล: -12px
• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขวา
• ระยะเวลาของแอนิเมชั่น: 2000ms
• ความเข้มของแอนิเมชั่น: 10%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

การมองเห็นและตำแหน่งของตัวแบ่ง

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

• ปิดใช้งานเมื่อ: โทรศัพท์และเดสก์ท็อป
• ตำแหน่ง: Absolute
• ออฟเซ็ตแนวตั้ง: 22%
• ดัชนี Z: 1

โมดูลตัวแบ่งด้านล่าง

โมดูลตัวแบ่งด้านบนที่ซ้ำกัน

ในการสร้างตัวแบ่งด้านล่าง ให้ทำซ้ำโมดูลตัวแบ่งด้านบน

อัพเดทตำแหน่ง

จากนั้นอัปเดตออฟเซ็ตตำแหน่งเพื่อให้สอดคล้องกับการสลับด้านล่าง:

• ออฟเซ็ตแนวตั้ง: 70%

ผลสุดท้าย

เมื่อเสร็จแล้ว ตรวจสอบผลลัพธ์สุดท้ายบนหน้าสด

สลับเปิด

สลับปิด

มือถือ

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

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

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

ไชโย!