คุณต้องการสร้างส่วนสมาชิกในทีมด้วย Elementor ?
คุณมาถูกที่แล้ว วันนี้เราจะแสดงวิธีสร้างส่วนสมาชิกในทีมที่ยอดเยี่ยมด้วย Builder Elementor.
เพื่อให้บทช่วยสอนนี้สมบูรณ์ คุณจะต้องมี Elementor รุ่นโปร, เพราะพวกเรา ใช้โค้ด CSS ที่กำหนดเอง ซึ่งเป็นไปได้เฉพาะกับเวอร์ชันโปรเท่านั้นElementor. หากคุณยังไม่ได้ดำเนินการให้อัปเดต
และเพื่อให้เข้าใจถึงสิ่งที่เรากำลังพูดถึงในบทช่วยสอนนี้ เราขอเชิญคุณชมวิดีโอต่อไปนี้:
ในการเริ่มต้น ให้สร้างเพจและแก้ไขด้วย Elementor
จากนั้นแทรกโครงสร้างที่มี 3 คอลัมน์ในคอลัมน์หลัง จากนั้นในแผง ใต้แท็บ เนื้อหาตั้งค่าความสูงเป็นความสูงขั้นต่ำ และเลือก VH ความสูงขั้นต่ำ จากนั้นตั้งค่าแถบเลื่อนเป็น 100
เลือกคอลัมน์กลางเพื่อแก้ไขและไปที่แท็บขั้นสูง มาตั้งค่าระยะขอบภายในทั้งหมดเป็น 30
มาแทรกวิดเจ็ต Inner Section ในคอลัมน์นี้ จากนั้นลบหนึ่งในคอลัมน์ที่อยู่ใน Inner Section จากนั้นลบในแผงใต้แท็บ เนื้อหามาตั้งค่าความสูงเป็น Min Height และแถบเลื่อนเป็น 450px กัน
บนการจัดแนวแนวตั้ง เลือก Bas และ ล้น เลือก หน้ากาก.
ในแท็บ สไตล์ เปลี่ยนพื้นหลังเป็น คลาสสิก และเลือกรูปภาพจากห้องสมุดของคุณ
อ่านคำแนะนำของเราเกี่ยวกับ: วิธีสร้างการ์ดผลิตภัณฑ์ด้วย Elementor
เกี่ยวกับ ตำแหน่ง เลือก เหนือกว่าศูนย์กลาง, ไฟล์แนบ sur เลื่อน, พูดอีกครั้ง sur ไม่ซ้ำ et ขนาด sur ปิดบัง
ในขอบเขตกำหนด พรมแดน sur 12.
มาเพิ่มเอฟเฟกต์เงากันเถอะ ใน Shade of box มาปรับเปลี่ยนกันเถอะ แนวตั้ง sur 22, เบลอ sur 40 et diffuser sur -10.
มาเพิ่ม . กันเถอะ วิดเจ็ตชื่อเรื่อง ในส่วนภายในและตั้งชื่อให้กับสมาชิกของเราและ ศูนย์ วิดเจ็ต
อ่าน: วิธีเปลี่ยนส่วนหัวในการเลื่อนหน้าด้วย Elementor
ในแท็บ สไตล์, มาปรับเปลี่ยนกันเถอะ สีข้อความ และ วิชาการพิมพ์ เลือก 22 สำหรับขนาดตัวอักษรและ 500 สำหรับ จาระบี, การแปลง sur ตัวพิมพ์ใหญ่ et ระยะห่างตัวอักษร sur 1.2
จากนั้นมาทำซ้ำ วิดเจ็ตชื่อเรื่อง และแก้ไขชื่อเรื่องของวิดเจ็ตที่สองและในการพิมพ์เลือก 15 สำหรับขนาดตัวอักษรและ 500 สำหรับความกว้าง, การแปลงบน defaut และเว้นวรรคตัวอักษรบน 1.2
ไปที่แท็บกัน สูง และกำหนด มาร์จิ้นสูงสุด sur -15. มาเพิ่มวิดเจ็ตไอคอนโซเชียลมีเดียให้กับส่วนด้านในของเรากันเถอะ
ไปที่แท็บกัน สไตล์เปลี่ยนสีเป็น กำหนดเอง ทำให้สีหลักโปร่งใส และตั้งค่าระยะขอบด้านในเป็น 0.30
ในแท็บ สูง, กำหนดระยะขอบ สูงที่ -15 และต่ำที่ 20
จากนั้นเลือกคอลัมน์ของ Inner Section เพื่อแก้ไขและในแท็บ สไตล์ เลือกประเภท คลาสสิก แล้วมาจับสีกัน #FFFFFF28.
อ่าน: วิธีเลื่อนดูภาพพอร์ตโฟลิโอขนาดยาวด้วย Elementor
จากนั้นเลือกคอลัมน์ของ Inner Section เพื่อแก้ไขและในแท็บ สูง ในสนาม คลาส CSS, มาคว้า ข้อมูลสมาชิก
จากนั้นเลือก ส่วนภายใน จากนั้นในแท็บ สูง ในสนาม CSS ที่กำหนดเอง, วางรหัสต่อไปนี้:
/ * เอฟเฟกต์แก้ว CSS * /
ตัวเลือก {
–ความสูง: 150px;
–ด้านล่าง: -150px;
ล้น: ซ่อน! สำคัญ;
}
ตัวเลือก .member-info {
ความสูง: var (–height);
ตำแหน่ง: สัมบูรณ์
ตัวกรองฉากหลัง: เบลอ (15px);
ด้านล่าง: 0;
การเปลี่ยนแปลง: .5s เข้าออกง่าย;
}
หลังจากโค้ด CSS แรก ให้วางสิ่งต่อไปนี้:
/ * CSS เพื่อซ่อนหรือแสดงเมื่อวางเมาส์เหนือ * /
ตัวเลือก .member-info {
ด้านล่าง: var (–ด้านล่าง);
}
ตัวเลือก: เลื่อน .member-info {
ด้านล่าง: 0px;
}
เมื่อคุณวางเมาส์เหนือรูปภาพ ข้อมูลสมาชิกจะปรากฏขึ้น
ทำซ้ำคอลัมน์ 2 ครั้งและลบคอลัมน์ว่างอื่น ๆ
จากนั้นเลือกส่วนด้านในและเปลี่ยนภาพพื้นหลังเป็นภาพของสมาชิกในทีมอีกคน เปลี่ยนชื่อและอาชีพของพวกเขา ทำเช่นเดียวกันกับคอลัมน์อื่น
ดูตัวอย่างงานของคุณบนแท็บเล็ตและมือถือพร้อมทั้งปรับปรุงระยะขอบและอื่น ๆ เพื่อการรับชมที่ดียิ่งขึ้น
และนั่นคือวิธีที่คุณสามารถสร้างส่วนสมาชิกในทีมที่ยอดเยี่ยมได้
รับ Elementor Pro ทันที!
สรุป
ดังนั้น ! เพียงเท่านี้สำหรับบทช่วยสอนนี้ที่จะแสดงวิธีสร้างส่วนสมาชิกในทีม หากคุณมีข้อกังวลใด ๆ เกี่ยวกับวิธีการเดินทางไปที่นั่นแจ้งให้เราทราบใน ความเห็น.
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
