Divi: วิธีใช้เอฟเฟกต์เงาและโฮเวอร์เพื่อสร้างเนื้อหาแบบโต้ตอบ

คุณต้องการใช้เอฟเฟกต์เงาและโฮเวอร์ใน .หรือไม่ Divi เพื่อสร้าง เนื้อหา โต้ตอบและโดดเด่นของคุณ เว็บไซต์เว็บ ?

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

เราจะแสดงวิธีการสร้าง เนื้อหา โต้ตอบเมื่อสร้างเว็บไซต์ด้วย Divi.

Let 's go!

การสำรวจ

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

คอมพิวเตอร์ตั้งโต๊ะ

โทรศัพท์มือถือ

มาเริ่มการรับรู้กับ Divi กันเถอะ!

ดูสิ่งนี้ด้วย: Divi: วิธีสร้างเมนูล้อหมุนบนโฮเวอร์l

เพิ่มหัวข้อใหม่

สีพื้นหลัง

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

• ความเป็นมา: #03006d

การเว้นวรรค

จากนั้นไปที่การตั้งค่าการเว้นวรรคส่วนและเปลี่ยนแปลงดังนี้:

• ช่องว่างภายใน (บนและล่าง): 50px

เพิ่มบรรทัดใหม่

โครงสร้างของคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้

ปรับขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%

การเว้นวรรค

มาเปลี่ยนการตั้งค่าระยะห่างต่อไปนี้ด้วย:

• Padding (ขวา): 9vw (เดสก์ท็อป), 5vw (แท็บเล็ตและโทรศัพท์)
• Padding (ขวา): 5vw (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เพิ่มเนื้อหา

เมื่อคุณแก้ไขการตั้งค่าแถวเสร็จแล้ว ให้เพิ่มโมดูลข้อความแรกในคอลัมน์ 1

เพิ่มอักขระตัวแรกเป็นข้อความย่อหน้า จากนั้น เนื้อหา ที่คุณต้องการให้ปรากฏเป็นข้อความรายการ

การตั้งค่าข้อความ (เดสก์ท็อป)

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

• น้ำหนักแบบอักษร: Ultra Bold
• สีข้อความ: #03006d
• ขนาดตัวอักษร: 27vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ความสูงของสาย: 1,1 em

• ข้อความเงา: ดูการจับภาพ
• ความแรงของเงาเบลอ: 0,01em
• สีเงา: #ffffff
• การจัดตำแหน่งข้อความ: ซ้าย

เลื่อนการตั้งค่าข้อความ

ในการสร้างเอฟเฟกต์โฮเวอร์ที่ดี เราจะต้องเปลี่ยนการตั้งค่าข้อความย่อหน้าโฮเวอร์เหล่านี้

• สีข้อความ(โฮเวอร์): #ffffff
• สีเงา(โฮเวอร์) : rgba(255,255,255,0)

การตั้งค่ารายการ (เดสก์ท็อป)

ดำเนินการต่อโดยไปที่การตั้งค่ารายชื่อ

• น้ำหนักแบบอักษร: เบา
• รายการสีข้อความ: #ffffff
• ขนาดรายการข้อความ: 0px (เดสก์ท็อป), 18px (แท็บเล็ตและโทรศัพท์)

• ตำแหน่งสไตล์: วงกลม
• ตำแหน่งสไตล์รายการที่ไม่เรียงลำดับ: ภายนอก
• เยื้องรายการที่ไม่เรียงลำดับ: 0px

รายการการตั้งค่าข้อความเมื่อวางเมาส์เหนือ (โฮเวอร์)

เราต้องการให้ข้อความรายการปรากฏบนโฮเวอร์ นี่คือเหตุผลที่เราจะเปลี่ยนขนาดของข้อความเมื่อวางเมาส์เหนือ

• ขนาดข้อความรายการที่ไม่เรียงลำดับ (โฮเวอร์): 18px

การเว้นวรรค

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

• ระยะขอบ (ล่าง): 50px (แท็บเล็ตและโทรศัพท์)
• Margin (ขวา): -4vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

โคลนโมดูลข้อความ 4 ครั้ง และวางซ้ำในคอลัมน์ที่เหลือ

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

เปลี่ยนโมดูลข้อความในคอลัมน์ 2

แก้ไขเนื้อหา

เปิดรายการที่ซ้ำกันในคอลัมน์ 2 และแก้ไขเนื้อหา

เปลี่ยนระยะห่าง

ถัดไป ไปที่การตั้งค่าระยะห่างและเปลี่ยนค่าระยะขอบที่กำหนดเอง

• ระยะขอบ (ล่าง): 50px (แท็บเล็ตและโทรศัพท์)
• Margin (ซ้ายและขวา): -2vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบขวา: -2vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

เปลี่ยนโมดูลข้อความในคอลัมน์ 3

แก้ไขเนื้อหา

เปลี่ยนเนื้อหาของรายการที่ซ้ำกันในคอลัมน์ 3 ด้วย

เปลี่ยนระยะห่าง

ด้วยการตั้งค่าระยะห่างในแท็บการออกแบบ

• ระยะขอบ (ซ้าย): 2,5 vw
• ระยะขอบ (ขวา): 1,5 vw

แก้ไขโมดูลข้อความในคอลัมน์ 4

แก้ไขเนื้อหา

ดำเนินการต่อโดยเปิดการตั้งค่าโมดูลข้อความในคอลัมน์ 4 และแก้ไขเนื้อหาที่นั่นด้วย

เปลี่ยนระยะห่าง

จากนั้นไปที่แท็บออกแบบและแก้ไขค่าระยะขอบที่กำหนดเองในการตั้งค่าระยะห่าง

• มาร์จิ้น (ซ้าย): -6vw
• มาร์จิ้น (ขวา): 2vw

แก้ไขโมดูลข้อความในคอลัมน์ 5

เนื้อหา

หลีกทางให้ซ้ำครั้งสุดท้าย แก้ไขเนื้อหาในพื้นที่เนื้อหา

เปลี่ยนระยะห่าง

ด้วยการตั้งค่าระยะห่างแบบกำหนดเอง

• มาร์จิ้น (ซ้าย): -7vw
• มาร์จิ้น (ขวา): 3vw

การสำรวจ

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

อ่าน: Divi : วิธีปรับแต่งรถเข็นและไอคอนค้นหาของโมดูล "เมนูเต็มความกว้าง"

สำนัก

โทรศัพท์มือถือ

ดาวน์โหลด DIVI ทันที!!!

สรุป

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

บทความนี้เป็นตัวอย่างของวิธีที่คุณสามารถสร้างเนื้อหาโฮเวอร์แบบโต้ตอบได้

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

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...