คุณต้องการเรียนรู้วิธีสร้างการ์ดที่มีเอฟเฟกต์ของพอร์ตโฟลิโอหรือไม่? ในบทช่วยสอนใหม่นี้ เราจะแสดงให้คุณเห็นว่าต้องทำอย่างไรกับ Elementor.
หากคุณไม่รู้ว่าเราจะพูดถึงเรื่องอะไรในวันนี้ เราขอเชิญคุณชมวิดีโอต่อไปนี้:
ถ้าอย่างนั้นเราก็กลับไปดูว่าทำไมเราถึงมาที่นี่
เพื่อให้บทช่วยสอนนี้สมบูรณ์ คุณจะต้อง Elementor เวอร์ชัน Proเนื่องจากเราจะใช้โค้ด CSS ที่กำหนดเองซึ่งรองรับโดย . เวอร์ชันนี้เท่านั้นElementor.
อ่าน: วิธีแสดงข้อความเหนือรูปภาพด้วย Elementor
มาสร้างส่วนใหม่ที่มีโครงสร้าง 3 คอลัมน์กัน จากนั้นในแผง เรามากำหนด การวางฟอร์ม sur ความสูงขั้นต่ำแล้วก็ ความสูงขั้นต่ำ คลิกเลย VH และตั้งค่าตัวเลื่อนไปที่ 100.
เลือกคอลัมน์กลางแล้ววางลงในคอลัมน์นี้ วิดเจ็ตส่วนภายใน. วิดเจ็ตส่วนภายในถูกกำหนดค่าด้วย 2 คอลัมน์โดยค่าเริ่มต้น ใต้ 2 คอลัมน์ ให้วางวิดเจ็ต ชื่อเรื่อง ที่มีชื่อเรื่องว่า ห้องอาหาร, เลือก H4 สำหรับแท็ก HTML และ ศูนย์ สำหรับการจัดตำแหน่ง
ในแท็บ สูง ของวิดเจ็ตชื่อ Let's enter 30 สำหรับ มาร์จิ้นสูงสุด
มาเลือกส่วนภายในของเราอีกครั้ง ในแผง มาแก้ไขมัน การวางฟอร์ม sur ความสูงขั้นต่ำ และ ความสูงขั้นต่ำ มาตั้งค่าเคอร์เซอร์เป็น 380. จากนั้นมาลบคอลัมน์ขวาหรือซ้ายของส่วนภายในกัน
ปล่อยมันไป วิดเจ็ตรูปภาพ ในส่วนภายในและแทรกรูปภาพจากห้องสมุดของเรา มาเลือกกัน ทั้งหมด สำหรับ ขนาดรูปภาพ et ศูนย์ สำหรับ การจัดตำแหน่ง
หมายเหตุ: หากคุณต้องการมีหน้าที่สมบูรณ์เหมือนของเรา เราขอเชิญคุณจับภาพหน้าเหล่านั้นด้วยความช่วยเหลือของส่วนขยาย Chrome GoFullPage แต่คุณสามารถใช้หน้าอื่นได้เช่นกัน
ค้นพบยัง: วิธีสร้างแกลเลอรีรูปภาพด้วย Elementor
จากนั้นในแท็บ สไตล์, คลิกที่ PX de ความกว้าง, มาตั้งค่าตัวเลื่อนเป็น 260 et les รังสีชายแดน sur 10
ต่อไป มาแก้ไข Box Shadow โดยเปลี่ยน Blur เป็น 40 และ Diffuse เป็น -10
ในแท็บขั้นสูงในส่วน การวางตำแหน่ง, เลือก แน่นอน สำหรับ ตำแหน่ง, การวางแนวแนวนอน sur เก้งก้างที่ décalage sur 0, L 'การวางแนวแนวตั้ง sur Bas.
มาทำซ้ำวิดเจ็ตรูปภาพของเราสองครั้ง พวกเขาทั้งหมดจะถูกซ้อนทับอย่างหลีกเลี่ยงไม่ได้ มาเปิดตัวนำทางกันเถอะ เพื่อให้เราสามารถเข้าถึงวิดเจ็ตอื่น ๆ ที่ซ่อนอยู่โดยอันแรก
มาแทนที่ภาพของวิดเจ็ตที่สองและในแท็บ สูง, มาปรับเปลี่ยนกันเถอะ ระยะขอบล่าง et เก้งก้าง โดยเข้าไป 30 แต่ละ. ตอนนี้คุณจะเห็นความล่าช้าเล็กน้อย
ทำเช่นเดียวกันกับ Image Widget ที่สาม แต่ใช้ระยะขอบของ 60 สำหรับระยะขอบด้านล่างและด้านซ้าย ตอนนี้คุณควรมีภาพรวมของวิดเจ็ตรูปภาพทั้ง 3 รายการแล้ว
มาเลือกวิดเจ็ตส่วนภายในของเรา ไปที่แท็บ สูง และในส่วน CSS ที่กำหนดเองคัดลอกและวางข้อมูลโค้ดต่อไปนี้:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}(หากคุณไม่มีส่วนนี้ แสดงว่าคุณไม่มีเวอร์ชัน Pro หากต้องการดำเนินการต่อ คุณต้องอัปเกรดเวอร์ชันของคุณ)
ตอนนี้หากคุณวางเมาส์เหนือแผนที่ของเรา คุณจะมีแอนิเมชั่นการซูม
มาเลือกวิดเจ็ตรูปภาพแรกของเรา (อันที่ต่ำที่สุด) และในแท็บ สูง, มาคว้า ภาพด้านหน้า สำหรับ คลาส CSS.
สำหรับวิดเจ็ตรูปภาพที่สอง ให้พิมพ์ กลาง img สำหรับคลาส CSS
สำหรับ Image Widget ที่สาม ให้พิมพ์ สุดท้าย img สำหรับคลาส CSS
ดูเพิ่มเติม: วิธีสร้างแกลเลอรีรูปภาพแบบแท็บด้วย Elementor
เมื่อวางเมาส์เหนือคอลัมน์ของเราแล้ว เราจะเห็นภาพเคลื่อนไหวอันงดงามของ เนื้อหา ของแผนกภายในของเรา
ให้แสดงเพจของเราในโหมดแท็บเล็ต เราจะเห็นว่าภาพจะไม่แสดงอย่างถูกต้อง
เลือกวิดเจ็ตรูปภาพแรกในแท็บสไตล์ มาปรับเปลี่ยนความกว้างโดยคลิกที่พีซีแล้วป้อน 150 เป็นความกว้าง ลองทำเช่นเดียวกันกับวิดเจ็ตรูปภาพอีก 2 รายการ
เรามาเลือกส่วนภายในของเราในส่วนนั้น เนื้อหา, มาปรับเปลี่ยน ความสูงขั้นต่ำ sur 225.
มาแสดงเพจของเราในโหมดสมาร์ทโฟนกันก่อน ซึ่งไม่มีปัญหาใดๆ แต่ถ้ามี ให้เลือกส่วนภายในของเราในส่วนนั้น เนื้อหาเรามาแก้ไขความสูงขั้นต่ำกันดีกว่า
ทีนี้ลองทำซ้ำคอลัมน์กลางของเราสองครั้ง จากนั้นลบคอลัมน์ว่างอีกสองคอลัมน์
มาแก้ไขชื่อเรื่องของคอลัมน์เหล่านี้แล้วเปลี่ยนภาพ
คุณจะต้องมีส่วนที่งดงามซึ่งนี่คือผลลัพธ์:
ไปแล้ว คุณเพิ่งทำภารกิจนี้ได้อย่างง่ายดาย
รับ Elementor Pro ทันที!
สรุป
นั่นไง ! บทความนี้จะแสดงวิธีสร้างการ์ดที่มีลักษณะพิเศษของพอร์ตโฟลิโอสำหรับบทความนี้ หากคุณมีข้อกังวลใด ๆ เกี่ยวกับวิธีการเดินทางไปที่นั่น แจ้งให้เราทราบภายใน ความเห็น.
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
