20 ส่วนหัว FlexBox สำหรับ Divi 5 (ดาวน์โหลดฟรี!)

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

ดูตัวอย่างและการสาธิตสด

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

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

ดูการสาธิตสด

ดาวน์โหลด 20 ส่วนหัว FlexBox สำหรับ Divi 5

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

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

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

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

การดาวน์โหลด

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

มีอะไรรวม (42 การส่งออก)

เมื่อคุณดาวน์โหลดและคลายซิปโฟลเดอร์แล้วคุณจะพบการส่งออกโครงร่างทั้งหมด 42 แบบที่จัดระเบียบอย่างเป็นระเบียบเป็นรุ่นเริ่มต้นและเป็นส่วนหัวของแต่ละบุคคลและเต็มรูปแบบ“ ทั้งหมดส่วนหัว”

ค่าเริ่มต้น - ส่วนหัวส่วนบุคคล (20) →ใช้สไตล์โลกของคุณ
ค่าเริ่มต้น - ส่วนหัวทั้งหมด (1) →แพ็คเต็มโดยใช้สไตล์ทั่วโลกของคุณ

PRESTYLED-ส่วนหัวของแต่ละบุคคล (20) →รวมถึงสไตล์อินไลน์สำหรับรูปลักษณ์ที่พร้อมทำทันที
PRESTYLED - ส่วนหัวทั้งหมด (1) →แพ็คเต็มพร้อมสไตล์อินไลน์ที่ใช้

วิธีการติดตั้งเลย์เอาต์

ให้โฟลเดอร์ดาวน์โหลดของคุณปิดเพื่อเริ่มการนำเข้าเว็บไซต์ Divi ของคุณ

1. การนำเข้าเลย์เอาต์ลงในห้องสมุด Divi

ไปที่ Divi → Divi Library

เมื่อมีให้คลิกปุ่มนำเข้าและส่งออกเพื่อติดตั้งไฟล์

ค้นหาไฟล์ส่วนหัวของ FlexBox (ทั้งหมด) และคลิกเพื่อนำเข้า

2. สร้างเทมเพลตส่วนหัวใหม่

ไปที่ Divi → Theme Builder

สร้างเทมเพลตส่วนหัวใหม่หรือเปิดอันที่มีอยู่

3. การอัปโหลดเค้าโครงส่วนหัว

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

เลือก เลย์เอาต์ที่บันทึกไว้

คลิกเค้าโครงส่วนหัวที่คุณต้องการเพิ่มลงในตัวสร้างธีม

คลิกที่ปุ่ม Layout นี้ เพื่อโหลดส่วนหัว

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

ค่าเริ่มต้นกับ Prestyled: คุณควรเลือกแบบไหน?

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

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

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

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

ปรับแต่งส่วนหัว

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

1. ปรับการตั้งค่า Flex

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

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

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

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

ในที่สุดการควบคุม การห่อเลย์เอา ต์ว่ารายการในคอนเทนเนอร์ Flex จะถูกบังคับให้ลงบนบรรทัดเดียวหรืออนุญาตให้ห่อเป็นหลายบรรทัดเมื่อเกินความกว้างของคอนเทนเนอร์ (หรือความสูงหากทิศทางการเลย์เอาต์ถูกตั้งค่าเป็นคอลัมน์)

2. แสดง/ซ่อนองค์ประกอบที่จุดพักต่าง ๆ

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

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

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

3. เพิ่มลิงค์ตามความจำเป็น

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

ขยายลิงค์ดรอปดาวน์และเพิ่มลิงก์ไปยังบัญชีโซเชียลมีเดียของคุณในฟิลด์ URL ลิงก์บัญชี

อย่าลืมบันทึกส่วนหัวของคุณก่อนที่จะออกจากตัวสร้างธีม

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

คลิก ช่องทำเครื่องหมายเมนูหลัก แล้วคลิก สร้างเมนู

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

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

ใช้ Divi 5 เพื่อสร้างส่วนหัวของคุณวันนี้

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