คุณต้องการสร้างแอนิเมชั่นโฮเวอร์ด้วย Elementor ?

ในบทช่วยสอนนี้ เราจะใช้เป๊ปซี่กระป๋องที่เราจะบินข้ามไปและจะเปิดเผยคำอธิบายเกี่ยวกับกระป๋องนั้น

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

สร้างแอนิเมชั่นโฮเวอร์ใน Elementor

แทรกส่วนคอลัมน์เดียวจากนั้นในแถบด้านข้าง select ความสูงขั้นต่ำ sur การวางฟอร์ม

เกี่ยวกับ ความสูงขั้นต่ำ คลิกที่ VH แล้วลากตัวเลื่อนไปที่ 100. อยู่ในแท็บเสมอ แบบ กำหนด 650 Comme ความกว้าง.

สร้างแอนิเมชั่นโฮเวอร์ใน Elementor

เลือกคอลัมน์และบนแถบด้านข้างของฟิลด์ การจัดแนวแนวตั้ง เลือก สภาพแวดล้อม.

สร้างแอนิเมชั่นโฮเวอร์ใน Elementor

ในแท็บ สไตล์เปลี่ยนสีพื้นหลังโดยคลิกที่ตัวเลือกสีแล้วพิมพ์ #D37636 จากนั้นในส่วน ชายแดน, มาคว้า 20 สำหรับรัศมีขอบทั้งหมด

สร้างแอนิเมชั่นโฮเวอร์ใน Elementor

ในแท็บ สูง, ปิด padding binding แล้วพิมพ์ 75 สำหรับระยะขอบภายใน ด้านบน et Bas et 25 สำหรับระยะขอบภายใน เก้งก้าง et droite.

สร้างแอนิเมชั่นโฮเวอร์ใน Elementor

จากนั้นลากวิดเจ็ตในคอลัมน์ ส่วนภายใน. มาลบคอลัมน์ใดคอลัมน์หนึ่งออกจากส่วนภายในกัน

สร้างแอนิเมชั่นโฮเวอร์ใน Elementor

ในคอลัมน์ของส่วนด้านในที่เหลือ ให้วาง วิดเจ็ตชื่อเรื่อง และเปลี่ยนชื่อเป็น เป๊ปซี่เลิฟ.

อ่านคู่มือของเราได้ที่: วิธีสร้างการ์ดเอฟเฟกต์จากพอร์ตโฟลิโอใน Elementor

จากนั้นในแท็บ สไตล์ให้ข้อความเป็นสีขาวและสำหรับตัวพิมพ์ตั้งค่า ขนาด sur 32ที่ ความสูงของแถว sur 1.2, ระยะห่างตัวอักษร sur 0.5.

ใต้ วิดเจ็ตชื่อเรื่อง, วาง วิดเจ็ตแก้ไขข้อความ และแก้ไขข้อความ ในแท็บ สไตล์เปลี่ยนสีข้อความเป็นสีขาวและ ขนาด วิชาการพิมพ์บน 16ที่ ความสูงของแถว sur 1.5 และการเว้นวรรคตัวอักษร sur 0.5.

ในแท็บ สูง เปลี่ยนระยะขอบ Bas sur -10.

ในส่วน การวางตำแหน่ง แท็บ สูง, แก้ไข ความกว้าง sur Personnalisé และ ความกว้าง กำหนดเอง ตั้งค่าหลังเป็น 310.

สร้างแอนิเมชั่นโฮเวอร์ใน Elementor

ใต้ย่อหน้าเราจะเพิ่ม a วิดเจ็ตปุ่ม สำหรับ Text อ่านเพิ่มเติม.

สร้างแอนิเมชั่นโฮเวอร์ใน Elementor

ในแท็บ สไตล์ ให้ปุ่มสี Blanche และตั้งค่าสีข้อความเป็น Noire.

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

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

เมื่อคุณแทรกรูปภาพแล้ว ให้กำหนดค่า ขนาดรูปภาพ sur ทั้งหมด และ การวางแนว คลิกเลย ศูนย์.

ในแท็บ สูง, ไปที่ส่วน ตำแหน่ง sur ความกว้าง เลือก ออนไลน์(อัตโนมัติ)บน ตำแหน่ง เลือก แน่นอน และ การวางแนวแนวนอน เลือก ขวา แล้วก็ ออฟเซ็ต เข้าสู่ -9.9 et sur le ออฟเซ็ต ของการวางแนวแนวตั้ง enter -105.

ลงไปอีกด้านล่าง ส่วนการแปลง กำหนด ปรับขนาด sur 0.5.

ตอนนี้เลือกคอลัมน์ของ ส่วนภายใน และในแท็บ สูง ใส่ชื่อของ คลาส css ข้อความเป๊ปซี่

จากนั้นเลือกส่วนหลักของเราไปที่ส่วน CSS ที่กำหนดเอง ของ Tab . ของเขา ขั้นสูง  คัดลอกและวางรหัสต่อไปนี้:

/*Hover Animation CSS*/
selector{
    --transition: 0.5s;
    --circle-color: #313F69;
    --content-background: #D27838;
    --mobile-height: 670px;
    --mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
    transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
    content: "";
    background: var(--circle-color);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 20px;
    clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
    clip-path: circle(400px at center);
    background: var(--content-background);
}
selector:hover .elementor-widget-image{
    right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector .pepsi-text{
    opacity: 0;
    visibility: hiddin;
}
selector:hover .pepsi-text{
    opacity: 1;
    visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
    height: var(--mobile-height);
}  
selector .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector:hover .elementor-widget-image{
    right: 68px !important;
    top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-top: -265px !important;
}
}

ข้อควรจำ: หากคุณไม่มีส่วนนี้ คุณต้องไปที่ เวอร์ชัน Pro ของ Elementor.

ตอนนี้ หากเราต้องการลบสีพื้นหลังออกจากข้อความ เราจะเลือกคอลัมน์หลักของเรา และในแท็บลักษณะจะปิดใช้งานสีพื้นหลัง

ในขณะนี้ แอนิเมชั่นของคุณจะทำงานบนเบราว์เซอร์ตามปกติ

แอนิเมชั่นบนแท็บเล็ตก็ดูสมบูรณ์แบบเช่นกัน

แต่บนสมาร์ทโฟนไม่แสดงผลตามปกติ มาแก้ปัญหานี้กันเถอะ

มาแสดงเบราว์เซอร์กันเถอะ

ในเบราว์เซอร์ ให้เลือกส่วน (ตรวจสอบให้แน่ใจว่าคุณยังคงอยู่ในโหมดสมาร์ทโฟน) และลดระดับ ความกว้าง sur 320

จากนั้นเลือกคอลัมน์หลักและในแท็บ ขั้นสูง, ตั้งค่าระยะขอบภายในทั้งหมดเป็น 25

สร้างแอนิเมชั่นโฮเวอร์ใน Elementor

ในเบราว์เซอร์ เลือกรูปภาพและในแท็บ สไตล์คลิกที่ PX de ความกว้าง และตั้งค่าเป็น 180.

ในแท็บ สูง du วิดเจ็ตรูปภาพไปต่อ ตำแหน่งและเลือก แน่นอนใน ออฟเซ็ตแนวนอน เข้าสู่ 75 และใน กะแนวตั้ง เข้าสู่ 236. กล่าวโดยย่อ อย่าลืมจัดภาพของคุณให้อยู่ตรงกลางวงกลมโดยใช้การชดเชยต่างๆ

สร้างแอนิเมชั่นโฮเวอร์ใน Elementor

ตอนนี้คุณสามารถดูตัวอย่างภาพเคลื่อนไหวบนอุปกรณ์ต่างๆ ได้แล้ว

รับ Elementor Pro ทันที!!!

สรุป

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

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

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

...