Divi: วิธีสร้างส่วนสมาชิกในทีมเป็นภาพหมุน

คุณต้องการให้สมาชิกในทีมของคุณถูกนำเสนอในรูปแบบของม้าหมุนด้วย Divi ?

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

หากคุณกำลังมองหาวิธีทำให้ส่วนของสมาชิกในทีมเคลื่อนไหวได้ใน scroll คุณจะชอบบทช่วยสอนนี้ 

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

Let 's go

การสำรวจ

ก่อนดำดิ่งสู่บทช่วยสอน มาดูผลลัพท์ของหน้าจอขนาดต่างๆ กันก่อน

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

เวอร์ชั่นมือถือ

มาเริ่มออกแบบกับ Divi

อ่าน: Divi: วิธีเปิดเผยเนื้อหาเมื่อวางเมาส์เหนือตัวแบ่งส่วน

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

นักเวทย์ภายใน

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

• ช่องว่างภายใน (บนและล่าง): 200px (เดสก์ท็อป), 100px (แท็บเล็ตและโทรศัพท์)

ความชัดเจน

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

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

แอดไลน์ #1

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

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

ความกว้าง

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

• ความกว้าง: 90%
• ความกว้างสูงสุด: 1px

การเว้นวรรค

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

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

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

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

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

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

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

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

เพิ่มโมดูล "ตัวแบ่ง" ลงในคอลัมน์

ความชัดเจน

จากนั้นเพิ่มโมดูล divider. ตรวจสอบให้แน่ใจว่าเปิดใช้งานตัวเลือก "แสดงตัวแบ่ง"

• แสดงตัวแบ่ง: ใช่

ออนไลน์

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

• สีเส้น: #edf000
• สไตล์: ของแข็ง
• ตำแหน่งสาย: Top

การกำหนดขนาด

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

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

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

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

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

การกำหนดขนาด

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

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

ระยะห่าง (แท็บเล็ตและโทรศัพท์เท่านั้น)

ถัดไป เพิ่มช่องว่างภายในด้านซ้ายและขวาเฉพาะในขนาดหน้าจอขนาดเล็กเท่านั้น

• Padding (ซ้ายและขวา): 5% (แท็บเล็ตและโทรศัพท์เท่านั้น)

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

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

พื้นหลังไล่โทนสี

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

• หยุดไล่ระดับ (25%): rgba(255,255,255,0)
• หยุดไล่ระดับ (86%): rgba(0,0,0,0.84)
• ประเภท: เชิงเส้น
• สี่เหลี่ยมไล่ระดับสีเหนือภาพพื้นหลัง : ใช่

ภาพพื้นหลัง

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

• ขนาดภาพพื้นหลัง : ปก
• ตำแหน่งภาพพื้นหลัง: กึ่งกลาง

เพิ่ม CSS ที่กำหนดเอง (เฉพาะแท็บเล็ต)

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

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

width: 100% !important;
margin: 50px 0px 50px 0px !important;

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

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

ในการแบ่งปันข้อมูลสมาชิกในทีม เราจะใช้โมดูล คน. 

เพิ่มโมดูลบุคคลแรกในคอลัมน์ 1 และใช้ เนื้อหา เดจาด Choix

ลบภาพ

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

ภาพพื้นหลัง

ต่อไป เราจะเพิ่มภาพซ้อนทับเป็นภาพพื้นหลังสำหรับโมดูล

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: center

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

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

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

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

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

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

การตั้งค่าข้อความของสมาชิกในทีม

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

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

การเว้นวรรค

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

• ช่องว่างภายใน: 70% (บน), 10% (ล่าง, ซ้ายและขวา)

โคลนโมดูล "บุคคล" สี่ครั้ง

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

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

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

อย่าลืมเปลี่ยนด้วย เนื้อหา.

เปลี่ยนแถวเป็นวงล้อเลื่อนอัตโนมัติ

ดูเพิ่มเติม: Divi: วิธีสร้างตารางคอลัมน์ของเหลวบนโฮเวอร์

เปลี่ยนขนาดแถว #2

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

• ความกว้าง: 180%
• ความกว้างสูงสุด: 220% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

เพิ่มการเคลื่อนไหวในแนวนอนให้กับเส้น 2

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

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

การสำรวจ

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

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

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

มุมมองมือถือ

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

สรุป

ในบทความนี้ เราได้แสดงให้คุณเห็นถึงวิธีการสร้างสรรค์ด้วยเอฟเฟกต์การเลื่อนในตัวของ Divi. 

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

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

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

อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

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

...