แถวคือการจัดเรียงคอลัมน์ต่างๆ ที่สามารถวางไว้ในส่วนต่างๆ ได้ เช่นเดียวกับโมดูล แถวมีการตั้งค่าต่างๆ ที่สามารถเข้าถึงได้โดยคลิกไอคอนการตั้งค่าที่ด้านบนซ้ายของแถว ในบทช่วยสอนนี้ เราจะพูดถึงคุณสมบัติบางอย่างและวิธีการใช้คุณลักษณะเหล่านี้เพื่อสร้างเค้าโครงที่ไม่เหมือนใคร โดยเฉพาะการตั้งค่าเส้นสามารถใช้เพื่อเพิ่มความหลากหลายของรูปแบบที่สร้างด้วย Divi Builder เพราะมันสร้างโครงสร้างที่โมดูลของคุณโฮสต์อยู่
การตั้งค่าเนื้อหา
สีพื้นหลัง
สามารถใช้ภาพพื้นหลังกับทั้งแถว โดยค่าเริ่มต้นเส้นจะมีสีพื้นหลังโปร่งใส
ภาพพื้นหลัง
สามารถใช้ภาพพื้นหลังกับทั้งแถว
วิดีโอพื้นหลัง MP4
les วิดีโอ พื้นหลังสามารถนำไปใช้กับเส้นได้ หากคุณต้องการใช้วิดีโอพื้นหลัง คุณต้องอัปโหลดวิดีโอ MP4 และ WEBM แล้วป้อน วิดีโอ ici
วิดีโอพื้นหลังของเว็บ
les วิดีโอ พื้นหลังสามารถนำไปใช้กับเส้นได้ หากคุณต้องการใช้วิดีโอพื้นหลัง คุณต้องดาวน์โหลดวิดีโอ MP4 และ WEBM แล้วป้อนวิดีโอที่นี่
ความกว้างของวิดีโอพื้นหลัง
เมื่ออัปโหลดวิดีโอของคุณแล้วคุณต้องป้อนความกว้างของวิดีโอที่นี่ ต้องเท่ากับความกว้างจริงของวิดีโอมิฉะนั้นตำแหน่งของพื้นหลังจะไม่ถูกต้อง
ความสูงของวิดีโอพื้นหลัง
เมื่ออัปโหลดวิดีโอของคุณแล้วคุณจะต้องป้อนความสูงของวิดีโอที่นี่ ต้องเท่ากับความสูงจริงของวิดีโอมิฉะนั้นตำแหน่งพื้นหลังจะไม่ถูกต้อง
หยุดวิดีโอชั่วคราว
หากคุณต้องการให้วิดีโอหยุดชั่วคราวเมื่อคลิกให้เปิดใช้งานตัวเลือกนี้
สีพื้นหลังของคอลัมน์
สำหรับแต่ละคอลัมน์ในแถวคุณสามารถกำหนดสีพื้นหลังที่ไม่ซ้ำกันได้
ภาพพื้นหลังคอลัมน์
สำหรับแต่ละคอลัมน์ในแถวคุณสามารถกำหนดภาพพื้นหลังที่ไม่ซ้ำกันได้
ป้ายกำกับผู้ดูแลระบบ
สิ่งนี้จะเปลี่ยนป้ายกำกับโมดูลในตัวสร้างเพื่อให้ระบุได้ง่าย เมื่อใช้มุมมอง WireFrame ใน Visual Builder ป้ายกำกับเหล่านี้จะปรากฏในบล็อกโมดูลของอินเทอร์เฟซ Divi ผู้สร้าง
พารามิเตอร์การออกแบบ
ใช้เอฟเฟกต์พารัลแลกซ์
หากคุณต้องการใช้เอฟเฟกต์พารัลแลกซ์สำหรับภาพพื้นหลังของเส้นคุณสามารถเปิดใช้งานได้ที่นี่จากนั้นเลือกวิธีพารัลแลกซ์ที่คุณต้องการ
ผลของ parallax คอลัมน์
ที่นี่คุณสามารถเลือกได้ว่าจะใช้เอฟเฟกต์พารัลแลกซ์สำหรับภาพพื้นหลังของคอลัมน์ใดคอลัมน์หนึ่งในแถวของคุณหรือไม่
ทำให้เส้นนี้มีความกว้างเต็ม
หากเปิดใช้งานตัวเลือกนี้เส้นจะขยายเต็มความกว้างของหน้าต่างเบราว์เซอร์ (คล้ายกับส่วนความกว้างเต็ม) นี่เป็นวิธีที่ยอดเยี่ยมในการสร้างเค้าโครงคอลัมน์แบบเต็มความกว้างที่ยอดเยี่ยม
ใช้ความกว้างที่กำหนดเอง
คุณยังสามารถกำหนดความกว้างที่กำหนดเองให้กับเส้น ตัวอย่างเช่นหากคุณต้องการเพิ่มรูปแบบลงในฟีดเพจและทำให้หนึ่งแถวใหญ่กว่าแถวที่เหลือคุณสามารถป้อนค่าความกว้างที่กำหนดเองได้ที่นี่
ใช้ความกว้างของรางน้ำที่กำหนดเอง
ความกว้างของรางน้ำกำหนดระยะห่างระหว่างคอลัมน์ รางน้ำมี 4 ขนาด เริ่มต้นที่ 0 คำนิยาม การตั้งค่าความกว้างของรางน้ำเป็น 1 จะทำให้ไม่มีช่องว่างระหว่างคอลัมน์ เมื่อรวมกับตัวเลือกเต็มความกว้าง จะสามารถสร้างเอฟเฟกต์คล้ายกับโมดูลพอร์ตโฟลิโอเต็มหน้าจอ
ปรับความสูงของคอลัมน์ให้เท่ากัน
นี่เป็นตัวเลือกที่ยอดเยี่ยมซึ่งมีประโยชน์อย่างยิ่งเมื่อคุณใช้สีพื้นหลังกับแต่ละคอลัมน์ การเปิดใช้งานตัวเลือกนี้บังคับให้คอลัมน์ทั้งหมดในแถวมีค่าความสูงเท่ากัน
ช่องว่างภายในที่กำหนดเอง
ถ้าคุณต้องการปรับเติมบรรทัดคุณสามารถทำได้ที่นี่
มาร์จิ้นที่กำหนดเอง
ถ้าคุณต้องการปรับเส้นขอบของเส้นคุณสามารถทำได้ที่นี่
การเสริมคอลัมน์ที่กำหนดเอง
หากคุณต้องการปรับช่องว่างภายในของคอลัมน์เฉพาะในแถวของคุณคุณสามารถทำได้ที่นี่
ระยะขอบคอลัมน์ที่กำหนดเอง
หากคุณต้องการปรับระยะขอบของคอลัมน์เฉพาะในแถวของคุณคุณสามารถทำได้ที่นี่
การตั้งค่าขั้นสูง
รหัส CSS
คุณสามารถกำหนด CSS ID ให้กับแถวได้หากคุณต้องการกำหนดเป้าหมายในสไตล์ชีตหรือด้วยลิงก์จุดยึด
ชั้น CSS
คุณสามารถกำหนดคลาส CSS ให้กับบรรทัดหากคุณต้องการกำหนดเป้าหมายในสไตล์ชีตของคุณ
รหัสคอลัมน์ CSS
คุณสามารถกำหนด CSS ID ให้กับคอลัมน์เฉพาะในแถวของคุณได้หากคุณต้องการกำหนดเป้าหมายในสไตล์ชีทของคุณหรือด้วยลิงก์จุดยึด
คอลัมน์คลาส CSS
คุณสามารถกำหนดคลาส CSS ให้กับคอลัมน์ที่ระบุในแถวของคุณหากคุณต้องการกำหนดเป้าหมายในสไตล์ชีตของคุณ
ก่อนที่
รายการ CSS ที่นี่เพื่อใช้: ก่อน div สายหลัก
องค์ประกอบหลัก
รายการ CSS ที่นี่เพื่อใช้กับ div สายหลัก
Après
รายการ CSS ที่นี่เพื่อใช้: หลังจาก div สายหลัก
คอลัมน์ด้านหน้า
ป้อน CSS ที่นี่เพื่อใช้: ก่อน div คอลัมน์ที่ระบุ
องค์ประกอบคอลัมน์หลัก
ป้อน CSS ที่นี่เพื่อใช้กับคอลัมน์ div ที่ระบุ
คอลัมน์หลัง
รายการ CSS ที่นี่เพื่อใช้: หลังจากคอลัมน์ div ที่ระบุ
ความชัดเจน
ตัวเลือกนี้ช่วยให้คุณควบคุมอุปกรณ์ที่โมดูลไลน์ของคุณปรากฏ คุณสามารถเลือกที่จะปิดใช้งานโมดูลของคุณบนแท็บเล็ตสมาร์ทโฟนหรือเดสก์ท็อปทีละเครื่อง สิ่งนี้มีประโยชน์หากคุณต้องการใช้โมดูลที่แตกต่างกันบนอุปกรณ์ต่างๆหรือหากคุณต้องการลดความซับซ้อนของการออกแบบอุปกรณ์เคลื่อนที่โดยการกำจัดองค์ประกอบบางอย่างออกจากหน้า
การจัดทำบทแนะนำ
ตอนนี้เราได้ผ่านการตั้งค่าทั้งหมดแล้วเรามาทดสอบกันเล็กน้อยเพื่อแสดงให้คุณเห็นว่าอะไรเป็นไปได้บ้างเมื่อใช้การตั้งค่าแต่ละอย่างอย่างสร้างสรรค์ ในตัวอย่างนี้ฉันจะกล่าวถึงการตั้งค่าแถวเต็มหน้าจอเพื่อเป็นการแนะนำ ตัวเลือกในการสร้างแถว "เต็มหน้าจอ" เป็นหนึ่งในตัวเลือกที่หลากหลายที่สุดของชุดนี้ การดำเนินการนี้จะขยายความกว้างของเส้นไปที่ขอบของเบราว์เซอร์เช่นส่วนเต็มหน้าจอ (หรือเต็มความกว้าง) อย่างไรก็ตามไม่เหมือนกับส่วนเต็มความกว้างแถว FullWidth สามารถมีโครงสร้างคอลัมน์และสามารถมีโมดูลใด ๆ ก็ได้! ในตัวอย่างด้านล่างฉันได้สร้างแถว 4 คอลัมน์และเพิ่มรูปภาพสี่เหลี่ยมจัตุรัสในแต่ละคอลัมน์ จากนั้นฉันเปิดใช้งาน "Make this line full width" เพื่อขยายเส้นไปที่ขอบของหน้าต่างเบราว์เซอร์
จากนั้นฉันก็ลดขนาด "รางน้ำ" เป็น "1" เพื่อลบระยะห่างระหว่างคอลัมน์ในแถว
ในที่สุดฉันก็ลบช่องว่างด้านบนและด้านล่างบรรทัดโดยเปลี่ยนค่าด้านบนและด้านล่างด้วยตัวเลือก "Custom Fill" เป็น "0"
ผลลัพธ์ที่ได้คือการแปลงแถวที่สมบูรณ์โดยเปลี่ยนแถวปกติของรูปภาพ 4 คอลัมน์ให้เป็นแกลเลอรีภาพแบบเต็มความกว้างและมีเลือดออกซึ่งดูสวยงามเมื่อเทียบกับส่วนสีเขียวด้านล่าง เอฟเฟกต์เดียวกันนี้สามารถสร้างได้โดยใช้สีพื้นหลังคอลัมน์แบบกำหนดเองและม็อดตามข้อความ ความเป็นไปได้ไร้ขีด จำกัด !
