[ad_1]
Let 's go
การสำรวจ
ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพท์ของหน้าจอขนาดต่างๆ กันก่อน
สำนัก
ตอบสนอง
ดาวน์โหลดเค้าโครงฟรี
เพื่อให้ได้เลย์เอาต์ฟรี คุณจะต้องดาวน์โหลดก่อนโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่อผู้รับจดหมาย Divi Daily ของเราโดยใช้ ฟอร์ม ด้านล่าง. ในฐานะสมาชิกใหม่ คุณจะได้รับสิทธิประโยชน์จาก Divi มากยิ่งขึ้นและชุด Divi Layout ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อนี้แล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม
มาเริ่มสร้างใหม่กันเถอะ!
เพิ่มส่วนตัวยึดตำแหน่ง 2x
เพิ่มหัวข้อใหม่
เริ่มต้นด้วยการเพิ่มส่วนตัวยึดตำแหน่งในหน้าที่คุณกำลังทำงานอยู่
ปรับขนาด
เปิดการตั้งค่าส่วนและเปลี่ยนความสูงในการตั้งค่าการปรับขนาด
ส่วนโคลน
โคลนส่วนหนึ่งครั้ง ซึ่งจะทำให้คุณมีตัวยึดตำแหน่งสองส่วนในหน้าของคุณ ส่วนตัวยึดตำแหน่งเหล่านี้จะช่วยให้คุณเห็นผลสุดท้ายหลังจากผ่านบทช่วยสอน บนเว็บไซต์ที่ใช้งานจริง ส่วนตัวยึดตำแหน่งจะถูกแทนที่ด้วยส่วนปกติที่คุณใช้ตลอดทั้งหน้า
เพิ่มส่วนใหม่ระหว่างส่วนตัวยึดตำแหน่ง
เมื่อส่วนตัวยึดอยู่ในตำแหน่งแล้ว ให้เพิ่มส่วนใหม่ระหว่างส่วนของตัวยึด
สีพื้นหลัง
เปิดการตั้งค่าส่วนและใช้สีพื้นหลังสีขาว
- สีพื้นหลัง: #ffffff
การเว้นวรรค
สลับไปที่แท็บการออกแบบส่วนและเปลี่ยนค่าการเติมด้านบนและด้านล่างตามลำดับ:
- ช่องว่างภายในด้านบน: 10vh
- ช่องว่างภายใน: 10vh
แอดไลน์#1
โครงสร้างคอลัมน์
ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถว ไปที่การตั้งค่าการปรับขนาด และเปลี่ยนค่าความกว้างและความกว้างสูงสุด
- ความกว้าง: 100%
- ความกว้างสูงสุด: 100%
เพิ่มโมดูลข้อความในคอลัมน์
เพิ่มสำเนา
โมดูลเดียวที่เราต้องการสำหรับบรรทัดนี้คือโมดูลข้อความ เพิ่มสำเนาที่คุณเลือก
การตั้งค่าข้อความ
สลับไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความตามลำดับ:
- แบบอักษรของข้อความ: มอนต์เซอร์รัต
- น้ำหนักแบบอักษรของข้อความ: Ultra Bold
- รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
- สีข้อความ: # fff2ea
- ขนาดตัวอักษร: 11vw
- ความสูงของบรรทัดข้อความ: 1 em
- การจัดตำแหน่งข้อความ: Center
แอดไลน์#2
โครงสร้างคอลัมน์
เพิ่มแถวอื่นในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลใด ๆ ให้เปิดการตั้งค่าแถวและเปลี่ยนการตั้งค่าการปรับขนาดดังนี้:
- ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 2
- ความกว้าง: 90%
- การจัดแนวเส้น: Center
เพิ่มโมดูลรูปภาพลงในคอลัมน์
อัพโหลดภาพ
เพิ่มโมดูลรูปภาพในคอลัมน์แถว อัปโหลดรูปภาพที่คุณเลือก
การวางแนว
สลับไปที่แท็บการออกแบบโมดูลและเปลี่ยนการจัดแนวรูปภาพตามลำดับ:
ปรับขนาด
จากนั้นไปที่การตั้งค่าการปรับขนาดและบังคับให้โมดูลเต็มความกว้าง
เพิ่มโมดูลปุ่มในคอลัมน์
เพิ่มสำเนา
โมดูลถัดไปและโมดูลสุดท้ายที่เราจะเพิ่มลงในคอลัมน์คือโมดูลปุ่ม ใช้สำเนาที่คุณเลือก
การจัดตำแหน่งปุ่ม
ไปที่แท็บออกแบบแล้วเปลี่ยนการจัดตำแหน่งปุ่ม
การตั้งค่าปุ่ม
จากนั้นจัดรูปแบบปุ่มดังนี้:
- ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
- ขนาดข้อความของปุ่ม: 16px
- สีข้อความของปุ่ม: # 000000
- สีพื้นหลังของปุ่ม: #ffffff
- ความกว้างของเส้นขอบของปุ่ม: 0px
- ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
- แบบอักษรของปุ่ม: มอนต์เซอร์รัต
- น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
- รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่
การเว้นวรรค
ใช้ค่าช่องว่างภายในที่กำหนดเองในการตั้งค่าการเว้นวรรค
- ช่องว่างภายในด้านบน: 20px
- ช่องว่างภายในด้านล่าง: 20px
- ช่องว่างภายในด้านซ้าย: 5%
- ช่องว่างภายในด้านขวา: 5%
เพิ่มตำแหน่งที่แน่นอนให้กับบรรทัด 1
เมื่อคุณทำแถวที่สองเสร็จแล้ว ให้กลับไปที่แถว # 1 เปิดการตั้งค่าแถวไปที่แท็บขั้นสูงและทำให้ส่วนสมบูรณ์ โดยการทำเช่นนี้ บรรทัดและโมดูลข้อความภายในจะถูกวางไว้ด้านล่างบรรทัดที่มีโมดูลรูปภาพ
- ตำแหน่ง: Absolute
- ที่ตั้ง: Center
โคลนแถว n ° 1 และวางสำเนาไว้ใต้แถว n ° 2
เพื่อให้โมดูลข้อความปรากฏเหนือรูปภาพ เราจำเป็นต้องมีแถวอื่นที่มีค่าดัชนี z สูงกว่า โคลนแถวแรกและวางสำเนาไว้ใต้แถวที่สอง
ใช้เอฟเฟกต์กับแถว 3
เพิ่มดัชนี Z
เปิดแถวที่ซ้ำกันและเปลี่ยนดัชนี z ในแท็บขั้นสูง
เปลี่ยนสีข้อความ
เปิดโมดูลข้อความในแถวและเปลี่ยนสีข้อความ
ใช้โหมดผสมผสานกับเส้น
จากนั้นเปิดการตั้งค่าแถวและเปลี่ยนโหมดผสมผสานในการตั้งค่าตัวกรอง
ใช้เอฟเฟกต์การเลื่อนบนโมดูลข้อความในแถว # 3
เพิ่มเอฟเฟกต์เฟดอินและเฟดออก
ทำบทแนะนำให้เสร็จสิ้นโดยเปิดพ็อดข้อความอีกครั้ง ไปที่เอฟเฟกต์การเลื่อน และเปิดเอฟเฟกต์เฟดอินและเฟดออก แค่นั้นแหละ!
- เปิดใช้งานเฟดอินและเฟดออก: ใช่
- ความทึบเริ่มต้น: 0%
- ความทึบปานกลาง: 0% (ถึง 26%)
- ความทึบขั้นสุดท้าย: 100% (ที่ 28%)
- ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: กลางองค์ประกอบ
การสำรวจ
ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ
สำนัก
ตอบสนอง
คิดสุดท้าย
ในบทความนี้ เราได้แสดงวิธีการสร้างสรรค์ด้วยเอฟเฟกต์การเลื่อนในตัวของ Divi โดยเฉพาะอย่างยิ่ง เราได้แสดงให้คุณเห็นถึงวิธีการสับเปลี่ยนสำเนาการเลื่อน ตอนแรกสำเนาดูเหมือนจะอยู่ใต้ภาพ หลังจากเลื่อน สำเนาจะปรากฏเหนือรูปภาพและรวมเข้ากับรูปภาพ คุณยังสามารถดาวน์โหลดไฟล์ JSON ได้ฟรี! หากคุณมีคำถามหรือข้อเสนอแนะโปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง
หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Divi และรับ Divi freebies เพิ่มเติม อย่าลืมสมัครสมาชิกของเรา จดหมายข่าว ทางอีเมลและถึงเรา ช่อง YouTube เพื่อให้คุณเป็นหนึ่งในคนกลุ่มแรกๆ ที่รู้จักและใช้ประโยชน์จากเนื้อหาฟรีนี้เสมอ
[ad_2]
