วิธีใช้อินพุต CSS แบบกำหนดเองในตัวของ Divi สำหรับการแก้ไขที่ตอบสนองขั้นสูง

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

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

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

เบรกพอยต์ในตัวของ Divi สำหรับการแก้ไขที่ตอบสนอง

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

เบรกพอยต์ตอบสนองหลักสามจุดของ Divi สำหรับหน้าจอเดสก์ท็อป แท็บเล็ต และโทรศัพท์มีดังนี้:

• เดสก์ท็อป: 981px ขึ้นไป
• แท็บเล็ต: ระหว่าง 980px ถึง 768px
• มือถือ: 767px และต่ำกว่า

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

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

ทำความเข้าใจกับกล่องอินพุต CSS ที่กำหนดเองของ Divi

เมื่อคุณปรับแต่งองค์ประกอบ (ส่วน แถว หรือโมดูล) ภายในตัวสร้าง Divi แต่ละตัวเลือกการออกแบบจะสอดคล้อง (หรือเป้าหมาย) ส่วนเฉพาะขององค์ประกอบนั้น ตัวอย่างเช่น เมื่อแก้ไขโมดูลข้อความ คุณสามารถกำหนดเป้าหมายส่วนใดๆ ของโมดูลนั้นโดยใช้การตั้งค่าในตัว (เช่น แบบอักษรหัวเรื่อง 2 ช่องว่างภายในด้านซ้าย ฯลฯ...)

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

นี่คือภาพประกอบของกล่องอินพุต CSS แบบกำหนดเองต่างๆ ที่มีให้สำหรับโมดูลการเรียกร้องให้ดำเนินการ

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

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

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

วิธีเพิ่ม CSS ที่กำหนดเองให้กับเบรกพอยต์การออกแบบที่ตอบสนอง

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

ตอนนี้ สิ่งที่คุณต้องทำคือใช้แท็บต่างๆ เพื่อเพิ่ม CSS ให้กับจอแสดงผลอุปกรณ์ใดก็ได้จากทั้งหมดสามจอ (เดสก์ท็อป แท็บเล็ต และโทรศัพท์)

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

โปรดสังเกตว่าเมื่อคุณเลือกแท็บแท็บเล็ต โหมดมุมมอง Divi Builder จะเปลี่ยนไปเป็นโหมดมุมมองแท็บเล็ต (ความกว้าง 768px) เพื่อให้เห็นภาพว่าการออกแบบของคุณจะออกมาเป็นอย่างไรในแบบเรียลไทม์

อุปกรณ์ขนาดเล็กรับช่วง CSS ของอุปกรณ์ขนาดใหญ่โดยค่าเริ่มต้น

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

เหตุผลที่จอแสดงผลของโทรศัพท์สืบทอดการแสดงผลของแท็บเล็ตเป็นเพราะเบรกพอยต์จริง (คิวรีสื่อ) สำหรับการแสดงผลแท็บเล็ตที่ส่วนหลังถูกตั้งค่าเป็น “max-width: 980px;” ซึ่งหมายความว่ารหัสที่เพิ่มลงในแท็บเล็ตจะถูกนำไปใช้กับโทรศัพท์ด้วยเนื่องจากหน้าจอโทรศัพท์กว้างน้อยกว่า 980px ดังนั้น หากคุณต้องการใช้รูปแบบอื่นกับโทรศัพท์ คุณจะต้องเพิ่มโค้ดเพิ่มเติมลงในช่องป้อนแท็บโทรศัพท์

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

CSS ที่กำหนดเองนำไปใช้กับแบ็กเอนด์อะไรบ้าง

สมมติว่าเราเพิ่ม CSS ที่กำหนดเองให้กับแท็บที่ตอบสนองทั้งสามแท็บ (เดสก์ท็อป แท็บเล็ต และโทรศัพท์)

บนเดสก์ท็อป เราวางปุ่มไว้ที่ด้านล่างขวาของโมดูล

บนแท็บเล็ต เราแทนที่โค้ดเดสก์ท็อปและเพียงแค่ขยายปุ่มจนเต็มความกว้างของโมดูล

บนโทรศัพท์ เราแทนที่ CSS ของแท็บเล็ตและคืนการแสดงผลให้เป็นปกติ

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

เดสก์ทอป:

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

ยาเม็ด:

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

โทรศัพท์

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

CSS ถูกเก็บไว้ใน Divi อย่างไร

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

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

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

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

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

ประสบการณ์ของคุณเป็นอย่างไรกับอินพุต CSS ที่กำหนดเองของ Divi