Elementor: วิธีซูมการ์ดโปรไฟล์

คุณต้องการค้นหาวิธีซูมการ์ดโปรไฟล์ด้วยปลั๊กอินตัวสร้างเพจ Elementor ?

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

หากคุณไม่รู้ว่าเราจะพูดถึงเรื่องอะไรในวันนี้ เราขอเชิญคุณชมวิดีโอต่อไปนี้:

ถ้าอย่างนั้นเราก็กลับไปดูว่าทำไมเราถึงมาที่นี่

เพื่อให้บทช่วยสอนนี้สมบูรณ์ คุณจะต้อง Elementor เวอร์ชัน Proเนื่องจากเราจะใช้โค้ด CSS ที่กำหนดเองซึ่งรองรับโดย . เวอร์ชันนี้เท่านั้นElementor.

มาสร้างส่วนใหม่ที่มีโครงสร้าง 3 คอลัมน์กัน จากนั้นในแผง เรามากำหนด การวางฟอร์ม sur ความสูงขั้นต่ำแล้วก็ ความสูงขั้นต่ำ คลิกเลย VH และตั้งค่าตัวเลื่อนไปที่ 100.

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

ในแท็บ สไตล์, มาปรับเปลี่ยน ซ้อนทับพื้นหลัง. Cliquez sur คลาสสิก บนประเภทของพื้นหลัง และเลือกรูปภาพจากไลบรารีและในการตั้งค่ารูปภาพ ให้เลือก ศูนย์กลาง ศูนย์กลาง ในตำแหน่ง ปิดบัง ขนาด. ความทึบ วันที่ 1 และ

ในส่วน พรมแดน คลิกที่ % และป้อน 4 สำหรับรัศมีขอบทั้งหมด

ในจำนวนกล่อง ให้ตั้งค่าตัวเลื่อนไปที่ 0 sur ตามแนวนอน, To 70 sur แนวตั้ง, To 63 sur เบลอ, To -60 sur ดิฟฟิวเซอร์. คุณควรเห็นเอฟเฟกต์เงาที่สวยงามใต้ภาพของคุณ

ใน ส่วนภายใน เลื่อน วิดเจ็ตชื่อเรื่อง. เมื่อชื่อเข้าสู่ Steve Jobs ในแท็บ Style ให้เลือกสีขาว #FFFFFF. ในการพิมพ์ ให้เลือก Size 20.

จากนั้นเลือกคอลัมน์ของ Internal Section Widget และในแท็บ Style เลือกประเภทของเส้นขอบโดยคลิกที่ Solid, ความกว้างทั้งหมดเป็น 1 และสีบน #FFFFFF

ในแท็บ สูง, เปลี่ยนระยะขอบเป็น 15 และระยะขอบภายในบน 20.

ตอนนี้แทรกไอคอนโซเชียลมีเดียโดยลากวิดเจ็ตไอคอนโซเชียลมีเดียลงในส่วนภายใน

แก้ไขลิงก์โซเชียลมีเดียในแท็บ เนื้อหา โดยคลิกที่แต่ละโซเชียลเน็ตเวิร์ก หากคุณต้องการเพิ่มเครือข่ายโซเชียลอื่นๆ ให้คลิกปุ่มเพิ่มเป็นองค์ประกอบ

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

จากนั้นไปที่แท็บ สไตล์ในส่วน ไอคอน, เปลี่ยนสีเป็น Personnalisé.

อ่านคำแนะนำของเราเกี่ยวกับ; วิธีเพิ่มเลขหน้าด้วย Elementor

เกี่ยวกับ สีหลักตั้งค่าความโปร่งใสเป็นขั้นต่ำ

เกี่ยวกับ สีรอง, เลือกสี #FFFFFF. ที่ขนาด ให้ป้อน 20, มาร์จิ้นภายในบน 0.4.

ตอนนี้คลิกที่แท็บ สูงและในส่วน การวางตำแหน่งคลิกที่ Personnalisé. บน ความกว้างที่กำหนดเอง, เข้าสู่ 0.

ค้นพบด้วย วิธีใช้ตัวเลือกสีกับ Elementor

เกี่ยวกับ ตำแหน่งเลือก แน่นอน, บน Shift 15บน การวางแนวแนวตั้ง เลือก Basและ ออฟเซ็ต sur 20.

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

คัดลอกและวางรหัสต่อไปนี้ลงในส่วนนี้:

/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
    overflow: hidden !important;
}
selector .elementor-background-overlay{
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
    -webkit-transform-origin: left;
            transform-origin: left;
}
selector:hover .elementor-background-overlay{
    -webkit-transform: scale(2);
            transform: scale(2);
}

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

ตอนนี้คัดลอกและวางรหัสต่อไปนี้หลังจากรหัสก่อนหน้าเพื่อแสดงหรือซ่อนองค์ประกอบบางอย่างของคอลัมน์:

/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
    opacity: 0;
    -webkit-transition: all 0.75s !important;
    transition: all 0.75s !important;
}
selector:hover .elementor-column{
    opacity: 1;
}

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

ลองทำคอลัมน์นี้ซ้ำ 2 ครั้งแล้วลบอีก 2 คอลัมน์ที่เหลือ

เปลี่ยนภาพพื้นหลังของส่วนภายใน เช่นเดียวกับชื่อและลิงก์ของโซเชียลเน็ตเวิร์ก

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

รับ Elementor Pro ทันที!

สรุป

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

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

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

...