เมื่อสร้างหน้าเกี่ยวกับ คุณอาจต้องการแนะนำสมาชิกในทีมของคุณที่นั่นด้วย โดยการทำเช่นนั้น คุณอนุญาตให้ ผู้เข้าชม โต้ตอบกับผู้ที่อยู่เบื้องหลังธุรกิจของคุณ หากคุณกำลังมองหาวิธีทำให้ส่วนของสมาชิกในทีมเคลื่อนไหวเมื่อเลื่อนดู คุณอาจพบว่าบทช่วยสอนนี้มีประโยชน์ เรากำลังจะสร้างม้าหมุนของสมาชิกในทีมแบบเลื่อนอัตโนมัติซึ่งจะเคลื่อนที่เมื่อคุณ ผู้เข้าชม เลื่อนหน้า
สาธิต
ก่อนที่เราจะดำน้ำในบทช่วยสอนเรามาดูผลลัพธ์ของขนาดหน้าจอที่แตกต่างกัน
จุดเริ่มต้นของความคิด
เพิ่มหัวข้อใหม่
การเว้นวรรค
เริ่มต้นด้วยการเพิ่มส่วนปกติใหม่ในหน้าที่คุณกำลังดำเนินการ เปิดการตั้งค่าส่วนและเพิ่มช่องว่างภายในที่กำหนดเองบนหน้าจอขนาดต่างๆ
- ช่องว่างภายในบน: 200px (โต๊ะทำงาน), 100px (แท็บเล็ตและโทรศัพท์)
- ช่องว่างด้านล่าง: 200px (โต๊ะทำงาน), 100px (แท็บเล็ตและโทรศัพท์)
ล้น
เพื่อให้แน่ใจว่าไม่มีแถบเลื่อนแนวนอนปรากฏในการออกแบบของเราเราจะซ่อนส่วนที่ล้นในแท็บขั้นสูง
- ล้นแนวนอน: ซ่อน
- แนวตั้งล้น: ซ่อน
เพิ่มบรรทัด # 1
โครงสร้างคอลัมน์
เพิ่มบรรทัดใหม่ไปยังส่วนต่อไปโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลใด ๆ ให้เปิดการตั้งค่าแถวสลับไปที่แท็บออกแบบและเปลี่ยนความกว้างและความกว้างสูงสุดในการตั้งค่าการปรับขนาด
- ความกว้าง: 90%
- ความกว้างสูงสุด: 1580px
การเว้นวรรค
เรายังเพิ่มช่องว่างภายในและล่างที่กำหนดเอง
- การเสริมด้านบน: 100px
- ช่องว่างภายในด้านล่าง: 100px
เพิ่มโมดูลข้อความในคอลัมน์
เพิ่มเนื้อหา H2
ถึงเวลาเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความแรก ใส่มัน เนื้อหา H2 ที่คุณเลือก
การตั้งค่าข้อความ H2
ไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความ H2 ดังนี้:
- ชื่อแบบอักษร 2: ทรายดูด
- ชื่อแบบอักษร 2: ตัวหนากึ่ง
- สีข้อความของรายการ 2: # 000000
- ส่วนหัว 2 ขนาดตัวอักษร: 70px (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
เพิ่มโมดูลการแยกลงในคอลัมน์
ความชัดเจน
จากนั้นเพิ่มโมดูลแยก ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก“ แสดงตัวคั่น”
- แสดงตัวแยก: ใช่
ออนไลน์
จากนั้นทำการเปลี่ยนแปลงการตั้งค่าบรรทัด
- สีของเส้น: # edf000
- สไตล์ไลน์: ทึบ
- ตำแหน่งสาย: ด้านบน
ปรับขนาด
และดำเนินการพารามิเตอร์โมดูลให้สมบูรณ์โดยแก้ไขพารามิเตอร์การวัดขนาดตาม:
- น้ำหนัก Divider: 20px
- ความกว้าง: 11%
- การจัดตำแหน่งของโมดูล: left
- ความสูง: 20px
เพิ่มบรรทัด # 2
โครงสร้างคอลัมน์
ไปยังแถวถัดไป! ใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลเพิ่มเติมให้เปิดพารามิเตอร์ line และแก้ไขพารามิเตอร์การปรับขนาดดังนี้:
- ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 2
- ความกว้าง: 100%
- ความกว้างสูงสุด: 100%
การเว้นวรรค
จากนั้นเพิ่มการขยายด้านซ้ายและขวาบนหน้าจอขนาดเล็กเท่านั้น
- การขยายด้านซ้าย: 5% (แท็บเล็ตและโทรศัพท์เท่านั้น)
- แพ็ดดิงขวา: 5% (แท็บเล็ตและโทรศัพท์เท่านั้น)
พารามิเตอร์คอลัมน์ (5x)
ตอนนี้ในสามขั้นตอนถัดไปของบทช่วยสอนนี้เราจะทำการเปลี่ยนแปลงบางอย่างกับคอลัมน์ ใช้สามขั้นตอนกับแต่ละคอลัมน์ในแถวของคุณ
พื้นหลังไล่ระดับสี
ขั้นแรกให้เพิ่มพื้นหลังไล่ระดับในแต่ละคอลัมน์
- สี 1: rgba (255,255,255,0)
- สี 2: rgba (0,0,0,0,84)
- ประเภทการไล่ระดับสี: เชิงเส้น
- ตำแหน่งเริ่มต้น: 25%
- ตำแหน่งสุดท้าย: 86%
- วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่
ภาพพื้นหลัง
จากนั้นอัปโหลดภาพพื้นหลังที่คุณเลือก ภาพพื้นหลังนี้แสดงถึงสมาชิกในทีมแต่ละคนดังนั้นให้ใช้ภาพที่แตกต่างกันสำหรับแต่ละคอลัมน์
- ขนาดภาพพื้นหลัง: ปก
- ตำแหน่งของภาพพื้นหลัง: ตรงกลาง
องค์ประกอบหลัก
ตั้งค่าคอลัมน์ให้สมบูรณ์โดยการเพิ่ม CSS ที่กำหนดเองในองค์ประกอบแท็บเล็ตหลักของแต่ละคอลัมน์ บรรทัดของโค้ด CSS เหล่านี้จะช่วยให้เราวางคอลัมน์ไว้ด้านล่างอีกคอลัมน์หนึ่งบนแท็บเล็ตแทนที่จะมีสองคอลัมน์อยู่เคียงข้างกัน
ความกว้าง: สำคัญ 100% ระยะขอบ: 50px 0px 50px 0px สำคัญ!
เพิ่มโมดูลบุคคลลงในคอลัมน์
เพิ่มเนื้อหา
เพื่อแบ่งปันข้อมูลเกี่ยวกับสมาชิกในทีม เราจะใช้โมดูลบุคคล เพิ่มโมดูลบุคคลแรกในคอลัมน์ 1 และใช้ เนื้อหา เดจาด Choix
ลบภาพ
จากนั้นลบภาพ เราใช้ภาพพื้นหลังของคอลัมน์แทน
ภาพพื้นหลัง
จากนั้นเราจะเพิ่มภาพซ้อนทับเป็นภาพพื้นหลังของโมดูล คุณสามารถค้นหาสิ่งที่เราใช้อยู่ได้โดยดาวน์โหลดโฟลเดอร์ที่จุดเริ่มต้นของบทช่วยสอนนี้
- ขนาดภาพพื้นหลัง: ปก
- ตำแหน่งของภาพพื้นหลัง: ตรงกลาง
การตั้งค่าข้อความหัวข้อ
ไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความหัวเรื่องดังนี้:
- ระดับชื่อเรื่อง: H3
- แบบอักษรของชื่อเรื่อง: ทรายดูด
- น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
- สีข้อความชื่อ: #ffffff
- ขนาดตัวอักษรชื่อเรื่อง: 230%
การตั้งค่าข้อความร่างกาย
เปลี่ยนการตั้งค่าเนื้อความด้วย
- Body Font: เปิด Sans
- สีข้อความ: #ffffff
- ความสูงของลำตัว: 2,2 em
การตั้งค่าข้อความตำแหน่ง
จากนั้นทำการเปลี่ยนแปลงการตั้งค่าข้อความตำแหน่ง
- ตำแหน่งตัวอักษร: เปิด Sans
- สีข้อความของตำแหน่ง: # edf000
การเว้นวรรค
และดำเนินการตั้งค่าโมดูลให้สมบูรณ์โดยการเพิ่มค่าช่องว่างที่กำหนดเองให้กับการตั้งค่าระยะห่าง
- padding บน: 70%
- ช่องว่างภายในที่ต่ำกว่า: 10%
- ช่องว่างด้านซ้าย: 10%
- แพ็ดดิงขวา: 10%
ทำซ้ำโมดูลบุคคล 4 ครั้ง
เมื่อคุณเสร็จสิ้นโมดูลบุคคลคุณสามารถโคลนโมดูลทั้งหมดสี่ครั้ง
วางรายการที่ซ้ำกันในคอลัมน์ที่เหลือ
วางโมดูลที่ซ้ำกันในสี่คอลัมน์ที่เหลือของแถว อย่าลืมเปลี่ยนด้วย เนื้อหา.
เปลี่ยน Row ให้เป็น Auto Scroll Carousel
เปลี่ยนขนาดของบรรทัด # 2
ตอนนี้ในการเปลี่ยนแถวนี้ให้เป็นภาพหมุนของสมาชิกในทีมที่เลื่อนอัตโนมัติเราจำเป็นต้องเปิดการตั้งค่าแถวอีกครั้งและเปลี่ยนความกว้างและความกว้างสูงสุดในการตั้งค่าการปรับขนาด
- ความกว้าง: 180%
- ความกว้างสูงสุด: 220% (โต๊ะทำงาน), 100% (แท็บเล็ตและโทรศัพท์)
เพิ่มการเคลื่อนไหวแนวนอนของบรรทัด # 2
ทำการตั้งค่าเส้นให้สมบูรณ์โดยเพิ่มการเคลื่อนไหวในแนวนอนให้กับการตั้งค่าเอฟเฟกต์การเลื่อนในแท็บขั้นสูงเท่านี้ก็เสร็จสิ้น!
- เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
- เริ่มการชดเชย:
- สำนักงาน: 2,5
- แท็บเล็ตและโทรศัพท์: 0
- ค่าชดเชยเฉลี่ย: 0 (ที่ 40%)
- ส่วนท้ายชดเชย:
- สำนักงาน: -25 (ที่ 62%)
- แท็บเล็ตและโทรศัพท์: 0
- ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
การสำรวจ
ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ
สำนัก
คิดสุดท้าย
ในบทช่วยสอนนี้ เราได้แสดงให้คุณเห็นถึงวิธีการสร้างสรรค์ด้วยเอฟเฟกต์การเลื่อนในตัวของ Divi. โดยเฉพาะเราได้สร้างภาพหมุนสมาชิกในทีมที่เลื่อนอัตโนมัติที่สวยงามขึ้นมาใหม่ เมื่อ ผู้เข้าชม เลื่อนหน้านั้น ส่วนอื่นของภาพหมุนจะปรากฏขึ้น
