ข้ามไปยังเนื้อหาหลัก

วิธีสร้างสมาชิกในทีมเลื่อนภาพหมุนด้วย Divi

Divi: ธีม WordPress ที่ใช้ง่ายที่สุด

Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

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

สาธิต

ก่อนที่เราจะดำน้ำในบทช่วยสอนเรามาดูผลลัพธ์ของขนาดหน้าจอที่แตกต่างกัน

สมาชิกทีม Scroll Divi

จุดเริ่มต้นของความคิด

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

การเว้นวรรค

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

  • ช่องว่างภายในบน: 200px (โต๊ะทำงาน), 100px (แท็บเล็ตและโทรศัพท์)
  • ช่องว่างด้านล่าง: 200px (โต๊ะทำงาน), 100px (แท็บเล็ตและโทรศัพท์)
การกำหนดค่าพารามิเตอร์

ล้น

เพื่อให้แน่ใจว่าไม่มีแถบเลื่อนแนวนอนปรากฏในการออกแบบของเราเราจะซ่อนส่วนที่ล้นในแท็บขั้นสูง

  • ล้นแนวนอน: ซ่อน
  • แนวตั้งล้น: ซ่อน
การกำหนดค่าล้น

เพิ่มบรรทัด # 1

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

เพิ่มบรรทัดใหม่ไปยังส่วนต่อไปโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

เลือกเค้าโครง Divi

ปรับขนาด

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

  • ความกว้าง: 90%
  • ความกว้างสูงสุด: 1580px
พารามิเตอร์บรรทัด Divi

การเว้นวรรค

เรายังเพิ่มช่องว่างภายในและล่างที่กำหนดเอง

  • การเสริมด้านบน: 100px
  • ช่องว่างภายในด้านล่าง: 100px
การกำหนดค่า Divi ระยะห่างระหว่างบรรทัด

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

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

ถึงเวลาเพิ่มโมดูลโดยเริ่มจากโมดูลข้อความแรก ป้อนเนื้อหา H2 ที่คุณเลือก

พบกับทีม

การตั้งค่าข้อความ H2

ไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความ H2 ดังนี้:

  • ชื่อแบบอักษร 2: ทรายดูด
  • ชื่อแบบอักษร 2: ตัวหนากึ่ง
  • สีข้อความของรายการ 2: # 000000
  • ส่วนหัว 2 ขนาดตัวอักษร: 70px (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
ระยะห่างข้อความ Divi

เพิ่มโมดูลการแยกลงในคอลัมน์

ความชัดเจน

จากนั้นเพิ่มโมดูลแยก ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก“ แสดงตัวคั่น”

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

Elementor ช่วยให้คุณสร้างการออกแบบเว็บไซต์ได้อย่างง่ายดายด้วยรูปลักษณ์แบบมืออาชีพ หยุดจ่ายเงินแพงสำหรับสิ่งที่คุณสามารถทำได้ด้วยตัวเอง [ฟรี]

  • แสดงตัวแยก: ใช่
แสดงตัวคั่น Divi

ออนไลน์

จากนั้นทำการเปลี่ยนแปลงการตั้งค่าบรรทัด

  • สีของเส้น: # edf000
  • สไตล์ไลน์: ทึบ
  • ตำแหน่งสาย: ด้านบน
รูปแบบระยะห่าง Divi

ปรับขนาด

และดำเนินการพารามิเตอร์โมดูลให้สมบูรณ์โดยแก้ไขพารามิเตอร์การวัดขนาดตาม:

  • น้ำหนัก Divider: 20px
  • ความกว้าง: 11%
  • การจัดตำแหน่งของโมดูล: left
  • ความสูง: 20px
การปรับขนาดโมดูลสาย Divi

เพิ่มบรรทัด # 2

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

ไปยังแถวถัดไป! ใช้โครงสร้างคอลัมน์ต่อไปนี้:

การกำหนดค่าคอลัมน์ Divi

ปรับขนาด

โดยไม่ต้องเพิ่มโมดูลเพิ่มเติมให้เปิดพารามิเตอร์ line และแก้ไขพารามิเตอร์การปรับขนาดดังนี้:

  • ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
  • ความกว้างของรางน้ำ: 2
  • ความกว้าง: 100%
  • ความกว้างสูงสุด: 100%
การกำหนดค่าความกว้างรางน้ำ

การเว้นวรรค

จากนั้นเพิ่มการขยายด้านซ้ายและขวาบนหน้าจอขนาดเล็กเท่านั้น

  • การขยายด้านซ้าย: 5% (แท็บเล็ตและโทรศัพท์เท่านั้น)
  • แพ็ดดิงขวา: 5% (แท็บเล็ตและโทรศัพท์เท่านั้น)
การกำหนดค่ารูปแบบระยะห่างระหว่างบรรทัด

พารามิเตอร์คอลัมน์ (5x)

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

การกำหนดค่าบรรทัดพารามิเตอร์ Divi

พื้นหลังไล่ระดับสี

ขั้นแรกให้เพิ่มพื้นหลังไล่ระดับในแต่ละคอลัมน์

  • สี 1: rgba (255,255,255,0)
  • สี 2: rgba (0,0,0,0,84)
  • ประเภทการไล่ระดับสี: เชิงเส้น
  • ตำแหน่งเริ่มต้น: 25%
  • ตำแหน่งสุดท้าย: 86%
  • วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่
การกำหนดค่าคอลัมน์ด้านหลัง Divi

ภาพพื้นหลัง

จากนั้นอัปโหลดภาพพื้นหลังที่คุณเลือก ภาพพื้นหลังนี้แสดงถึงสมาชิกในทีมแต่ละคนดังนั้นให้ใช้ภาพที่แตกต่างกันสำหรับแต่ละคอลัมน์

คุณกำลังมองหาธีมและปลั๊กอิน WordPress ที่ดีที่สุดหรือไม่?

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

  • ขนาดภาพพื้นหลัง: ปก
  • ตำแหน่งของภาพพื้นหลัง: ตรงกลาง
เพิ่มภาพพื้นหลังของคอลัมน์ Divi

องค์ประกอบหลัก

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

ความกว้าง: สำคัญ 100% ระยะขอบ: 50px 0px 50px 0px สำคัญ!
คอลัมน์รหัส css divi

เพิ่มโมดูลบุคคลลงในคอลัมน์

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

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

ชื่อบุคคล divi

ลบภาพ

จากนั้นลบภาพ เราใช้ภาพพื้นหลังของคอลัมน์แทน

ลบภาพ Divi

ภาพพื้นหลัง

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

  • ขนาดภาพพื้นหลัง: ปก
  • ตำแหน่งของภาพพื้นหลัง: ตรงกลาง
การกำหนดค่าพื้นหลังโมดูลบุคคล

การตั้งค่าข้อความหัวข้อ

ไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความหัวเรื่องดังนี้:

  • ระดับชื่อเรื่อง: H3
  • แบบอักษรของชื่อเรื่อง: ทรายดูด
  • น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
  • สีข้อความชื่อ: #ffffff
  • ขนาดตัวอักษรชื่อเรื่อง: 230%
การปรับแต่งชื่อโมดูล Divi

การตั้งค่าข้อความร่างกาย

เปลี่ยนการตั้งค่าเนื้อความด้วย

  • Body Font: เปิด Sans
  • สีข้อความ: #ffffff
  • ความสูงของลำตัว: 2,2 em
การปรับแต่งร่างกาย Divi

การตั้งค่าข้อความตำแหน่ง

จากนั้นทำการเปลี่ยนแปลงการตั้งค่าข้อความตำแหน่ง

  • ตำแหน่งตัวอักษร: เปิด Sans
  • สีข้อความของตำแหน่ง: # edf000
ตำแหน่ง Divi

การเว้นวรรค

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

  • padding บน: 70%
  • ช่องว่างภายในที่ต่ำกว่า: 10%
  • ช่องว่างด้านซ้าย: 10%
  • แพ็ดดิงขวา: 10%
ระยะห่างระหว่างโมดูลคน Divi

ทำซ้ำโมดูลบุคคล 4 ครั้ง

เมื่อคุณเสร็จสิ้นโมดูลบุคคลคุณสามารถโคลนโมดูลทั้งหมดสี่ครั้ง

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

วางโมดูลที่ซ้ำกันในสี่คอลัมน์ที่เหลือของแถว อย่าลืมแก้ไขเนื้อหาด้วย

สร้างร้านค้าออนไลน์ได้อย่างง่ายดาย

ดาวน์โหลดฟรี WooCommerce ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress [แนะนำ]

เปลี่ยน Row ให้เป็น Auto Scroll Carousel

เปลี่ยนขนาดของบรรทัด # 2

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

  • ความกว้าง: 180%
  • ความกว้างสูงสุด: 220% (โต๊ะทำงาน), 100% (แท็บเล็ตและโทรศัพท์)
ระยะห่างการปรับเปลี่ยนบรรทัด Divi

เพิ่มการเคลื่อนไหวแนวนอนของบรรทัด # 2

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

  • เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
  • เริ่มการชดเชย:
    • สำนักงาน: 2,5
    • แท็บเล็ตและโทรศัพท์: 0
  • ค่าชดเชยเฉลี่ย: 0 (ที่ 40%)
  • ส่วนท้ายชดเชย:
    • สำนักงาน: -25 (ที่ 62%)
    • แท็บเล็ตและโทรศัพท์: 0
  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
การกำหนดค่าภาพเคลื่อนไหวการเลื่อน Divi

การสำรวจ

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

สำนัก

สมาชิกทีม Scroll Divi

คิดสุดท้าย

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

บทความนี้ประกอบด้วยข้อคิดเห็น 0

แสดงความคิดเห็น

ที่อยู่อีเมล์ของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

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

กลับไปด้านบน