วิธีออกแบบเลย์เอาต์แบบเต็มหน้าจอแบบกำหนดเองใน Divi

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

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

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

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของเค้าโครงหน้าแบบเต็มหน้าจอขั้นสุดท้ายที่เราจะสร้างในบทช่วยสอนนี้

สังเกตว่าความสูงของหน้าปรับความสูงของหน้าต่างเบราว์เซอร์อย่างไรเพื่อให้ทุกอย่างเข้าที่

สิ่งที่คุณต้องการ

สำหรับบทช่วยสอนนี้ สิ่งที่คุณต้องมีคือ Divi ฉันจะใช้ชุด Fitness Gym Layout ซึ่งสามารถเข้าถึงได้จาก Divi Builder

สมัครสมาชิกช่อง Youtube ของเรา

วิธีสร้างหน้าเต็มหน้าจอแบบกำหนดเองใน Divi

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

อธิบายแนวคิดพื้นฐาน

ในหน้าใหม่ เลือกเทมเพลตหน้าว่าง การดำเนินการนี้จะหยุดไม่ให้ส่วนหัวหลักและแถบส่วนท้ายด้านล่างแสดงบนหน้า (ฉันจะแสดงวิธีรวมไว้ในภายหลัง)

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

ถัดไป เพิ่มโมดูลจับเวลาถอยหลัง (หรือโมดูลใดๆ) ลงในแถวคอลัมน์เดียว

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

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

min-height: 100vh;
display: flex;
flex-direction: column;

การตั้งค่าความสูงขั้นต่ำของส่วนของคุณเป็น 100vh (100% ของความสูงของวิวพอร์ต) จะช่วยให้มั่นใจได้ว่าส่วนของคุณจะครอบคลุมหน้าต่างเบราว์เซอร์แบบเต็ม (หรือวิวพอร์ต) คุณสมบัติ “display:flex” เป็นวิธีที่ง่ายและรวดเร็วในการจัดกึ่งกลางเนื้อหาในส่วนของคุณในแนวตั้ง

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

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

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

รวมส่วนหัวและส่วนท้ายไว้ในหน้าเต็มหน้าจอของคุณ

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

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

min-height: calc(100vh - 133px);
display: flex;
flex-direction: column;

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

132px ขึ้นอยู่กับความสูงเริ่มต้นของส่วนหัวทั้งหมด (80px) และความสูงเริ่มต้นของแถบส่วนท้ายด้านล่าง (53px)

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

การสร้างการออกแบบแบบเต็มหน้าจอแบบเต็มหน้าจอ

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

เมื่อเลย์เอาต์โหลดเข้าสู่ตัวสร้างแล้ว ให้คลิกปุ่มเพื่อสร้างที่ส่วนหน้า (The Visual Builder) และคุณพร้อมที่จะเริ่มต้น

การสร้างส่วนใหม่

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

การเพิ่มโมดูลให้กับคอลัมน์ของคุณ

ใช้ Multiselect (กด ctrl/cmd ค้างไว้แล้วคลิก) เลือกโมดูลทั้งหมดในสองแถวแรกในส่วนแรกของเค้าโครง แล้วลากไปยังคอลัมน์แรกของส่วนใหม่ที่ด้านบนของหน้า

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

ข้อความจะถูกซ่อนเนื่องจากพื้นหลังสีขาว แต่เราจะเปลี่ยนสีพื้นหลังในภายหลัง

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

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

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

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

เปิดการตั้งค่าแถวและเริ่มต้นด้วยการเพิ่มสีพื้นหลังให้กับคอลัมน์ 2:

คอลัมน์ 2 สีพื้นหลัง: #2a2e40

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

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

การปรับแต่งการตั้งค่ามาตรา

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

สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
ตัวแบ่งสีด้านบน: #2a2e40
ความสูงของตัวแบ่งด้านบน: 8vw
ตัวแบ่งแนวนอนด้านบนซ้ำ: 0.8x
ตัวแบ่งด้านบน: แนวตั้งและแนวนอน

ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

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

ลบส่วนที่เหลือของเลย์เอาต์ที่สร้างไว้ล่วงหน้า

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

ตอนนี้เราพร้อมที่จะเริ่มปรับแต่งหน้าของเราให้เต็มหน้าจอแล้ว

การเพิ่ม CSS แบบกำหนดเองเพื่อทำให้หน้าเต็มหน้าจอ

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

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

@media (min-width: 980px){

/*If CSS IDs are added, this makes the element the same height as the browser window taking into account the header and the bottom footer bar*/
  #fullsection, #fullslide .et_pb_slide {
    height: calc(100vh - 133px);
  }
/*This centers the content of the section when the CSS ID is applied*/
  #fullsection { 
    display: flex;
    flex-direction:column;
    overflow: hidden;
  }
/*This makes the bottom footer bar fullwidth to match the fullwidth header if applied*/
  #footer-bottom .container {
    width: 100%;
    max-width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
}

สำหรับผู้ที่ไม่คุ้นเคยกับ CSS ให้สังเกตว่าโค้ดถูกห่อด้วยคิวรีสื่อที่ใช้การจัดสไตล์เมื่อเบราว์เซอร์มีความกว้างอย่างน้อย 980px ในวงเล็บ ตัวอย่างแรกจะมี CSS ID ชื่อ "fullsection" ตามด้วย CSS ID ชื่อ "fullslide" CSS ID ทั้งสองนี้มีความสำคัญที่ต้องจำไว้ เนื่องจากเราจะต้องเพิ่มลงในส่วนและตัวเลื่อนของเรา เมื่อเราทำเสร็จแล้ว css “height: calce(100vh – 133px)” จะถูกนำไปใช้ทำให้ทั้งสองแบบเต็มหน้าจอ (ขยายความสูงเต็มที่ของหน้าต่างเบราว์เซอร์)

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

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

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

CSS ID: fullsection

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

CSS ID: fullslide

สัมผัสสุดท้าย

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

เพิ่มระยะห่างให้กับคอลัมน์ของเรา

เปิดการตั้งค่าแถวของคุณเพื่อเพิ่มช่องว่างที่ด้านบนของคอลัมน์ 1 และคอลัมน์ 2 ดังนี้:

คอลัมน์ที่ 1 Custom Padding: 12vh Top, 1vw Left, 1vw Right
คอลัมน์ที่ 2 Custom Padding: 12vh Top, 1vw Left, 1vw Right

สังเกตว่าฉันใช้หน่วยความยาว vh สำหรับค่าสูงสุดของฉัน ซึ่งจะทำให้ช่องว่างภายในปรับขนาดตามความสูงของวิวพอร์ต สร้างช่องว่างภายในเพิ่มเติมเมื่อหน้าต่างเบราว์เซอร์สูงขึ้น และสร้างช่องว่างภายในน้อยลงเมื่อเบราว์เซอร์สั้นลง ฉันใช้หน่วยความยาว vw (ความกว้างของวิวพอร์ต) สำหรับค่าช่องว่างภายในด้านซ้ายและขวาของฉัน เพื่อให้การขยายขนาดตามความกว้างของเบราว์เซอร์

เพิ่มหน่วยความยาว vh ให้กับข้อความขนาดใหญ่เพื่อเพิ่มพื้นที่การดูให้สูงสุด

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

เปิดการตั้งค่าของโมดูลข้อความที่ด้านบนของคอลัมน์ 1 และอัปเดตขนาดข้อความส่วนหัว h1 เป็น 7vh (ไม่ใช่ vw)

ถัดไป เปิดการตั้งค่าของโมดูลข้อความที่ด้านบนของคอลัมน์ 2 และอัปเดตขนาดข้อความของหัวเรื่อง 2 เป็น 6vh

อัปเดตการออกแบบตัวเลื่อน

หากต้องการปิดการออกแบบ คุณสามารถคัดลอกการออกแบบปุ่มของปุ่มในคอลัมน์ 2 และวางลงในลักษณะปุ่มของแถบเลื่อน ในการดำเนินการนี้ ให้เปิดการตั้งค่าปุ่มสำหรับปุ่มในคอลัมน์ 2 และคลิกขวาที่ประเภทตัวเลือกปุ่มแล้วคลิก "คัดลอกรูปแบบปุ่ม"

หลังจากนั้น ให้เปิดการตั้งค่าตัวเลื่อนแล้ววางลักษณะปุ่มลงในหมวดตัวเลือกปุ่มของตัวเลื่อน

คุณยังสามารถเพิ่มการซ้อนทับพื้นหลังให้กับแต่ละสไลด์ได้

การปรับแถบส่วนหัวและส่วนท้ายด้านล่าง

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

เนื่องจากเรากำลังแสดงแถบส่วนท้ายด้านล่างบนหน้าเต็มหน้าจอ เราจึงสามารถอัปเดตสีพื้นหลังของแถบด้านล่างให้เข้ากับการออกแบบได้ อยู่ในเครื่องมือปรับแต่งธีมและไปที่ส่วนท้าย > แถบด้านล่าง จากนั้นตั้งค่าสีพื้นหลังเป็น #2a2e40

จากนั้นเผยแพร่การเปลี่ยนแปลงของคุณ

ผลสุดท้าย

นี่คือการออกแบบขั้นสุดท้าย สังเกตว่าทุกอย่างลงตัวพอดีภายในหน้าต่างเบราว์เซอร์

และตรวจสอบหน้าตาเมื่อปรับเบราว์เซอร์เป็นขนาดต่างๆ

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

นี่มันบนแท็บเล็ตและสมาร์ทโฟน

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

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

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

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

ต่อไปนี้คือโพสต์อีกสองสามโพสต์ที่คุณอาจชอบในหัวข้อของหน้าเต็มหน้าจอ

• วิธีสร้างส่วนเต็มหน้าจอด้วยลิงก์เลื่อนบนและล่างด้วย Divi
• ออกแบบเลย์เอาต์ Divi แบบเต็มหน้าจอที่ไม่เหมือนใครด้วยปุ่มเลื่อนแบบเคลื่อนไหว
• และอื่น ๆ

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

ไชโย!