ต้องสร้างแผนที่ฐานสิบหกพร้อมเอฟเฟกต์โฮเวอร์ผ่านตัวทรงพลัง สร้างหน้า Elementor ? ถ้าเป็นเช่นนั้น ดูในบทความนี้ว่าจะไปได้อย่างไร
หากคุณต้องการทราบภาพรวมของสิ่งที่เราจะพูดถึงในบทช่วยสอนนี้ เราขอเชิญคุณชมวิดีโอต่อไปนี้:
เพื่อให้บทช่วยสอนนี้สมบูรณ์ คุณจะต้อง Elementor เวอร์ชัน Proเนื่องจากเราจะใช้โค้ด CSS ที่กำหนดเองซึ่งรองรับโดย . เวอร์ชันนี้เท่านั้นElementor.
อ่านคู่มือของเราได้ที่: วิธีเพิ่มเบรดครัมบ์ลงในเว็บไซต์ กับ Elementor
มาสร้างส่วนใหม่ที่มีโครงสร้างเป็น 3 คอลัมน์จากนั้นในแผง เรามากำหนด การวางฟอร์ม sur ความสูงขั้นต่ำแล้วก็ ความสูงขั้นต่ำ คลิกเลย VH และตั้งค่าตัวเลื่อนเป็น 100
มาเพิ่ม . กันเถอะ วิดเจ็ตส่วนภายใน – ส่วนภายใน – ในคอลัมน์กลาง. วิดเจ็ตนี้ได้รับการกำหนดค่าเริ่มต้นโดยมี 2 คอลัมน์ ให้ลบหนึ่งคอลัมน์ออก มากำหนดค่ากันเถอะ การวางฟอร์ม sur ความสูงขั้นต่ำ และ ความสูงขั้นต่ำ มากำหนดกัน เลื่อนไปที่400.
ในแท็บ สไตล์, มาตั้งค่าภาพพื้นหลังโดยเลือกรูปภาพจากคลังของคุณ แล้วตั้งค่าตำแหน่งเป็น เหนือกว่าศูนย์กลาง, ทำซ้ำใน ไม่ซ้ำ และขนาดบน ปิดบัง.
เกี่ยวกับ ซ้อนทับพื้นหลังคลิกที่ เดกราเด เพื่อ ประเภทพื้นหลัง, เลือกและเปลี่ยนสีหลักบน #2299EF และตำแหน่งบน 20แล้วสีรองบน #พ.ศ.1917 และตำแหน่งบน 50, มุมบน 140 และความทึบบน 0.85
แล้วเติม วิดเจ็ตชื่อเรื่อง ในส่วนด้านใน และเป็น ชื่อเรื่อง, มาตั้งชื่อกัน จากนั้นในแท็บสไตล์ของวิดเจ็ตชื่อ ให้เปลี่ยนสีเป็น #FFFFFF. แล้วเติม วิดเจ็ตแก้ไขข้อความและในแท็บ สไตล์ จัดกึ่งกลางข้อความและเปลี่ยนสีเป็น #FFFFFF.
ดูเพิ่มเติม: วิธีเพิ่มรูปภาพลงในวิดเจ็ตตารางราคาด้วย Elementor
เลือกอีกครั้ง ส่วนภายใน, ไปที่แท็บ ขั้นสูง ในส่วน มาร์จิ้นภายใน, เข้าสู่ 25-2-2-2
เลือก Inner Section อีกครั้งและไปที่แท็บ Advanced และในส่วน Custom CSS ให้คัดลอกและวางโค้ดต่อไปนี้:
/*Traçage Hexagone*/
selector{
clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
}
ต่อไป ให้เพิ่มข้อมูลโค้ดที่สองด้านล่างไปยังโค้ดก่อนหน้า:
/*CSS pour Afficher/Masquer la Superposition du dégradé*/
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
opacity: 0 !important;
}
selector:hover .elementor-background-overlay{
opacity: 0.85 !important;
}
/*CSS pour Afficher/Masquer l'élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
}
selector:hover .elementor-column{
opacity: 1;
}
จากนั้นมาวางตัวอย่างด้านล่างด้วย
/*CSS d'effet de transition avec ombre*/
selector:hover{
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
.hexa-mom::before{
content: '';
position: absolute;
bottom: -70px !important;
width: 100%;
color: #fff;
height: 60px;
border-radius: 50%;
background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
display: block;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
z-index: 999;
}
.hexa-mom:hover::before{
opacity: 1 !important;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
จากนั้นเลือกคอลัมน์กลางและในแท็บ สูง, เข้าสู่ hexa-แม่ ในสนาม คลาส CSS.
ลองทำคอลัมน์นี้ซ้ำ 2 ครั้งแล้วลบอีก 2 คอลัมน์ที่เหลือ
มาเปลี่ยนภาพพื้นหลังของวิดเจ็ตอื่นกันเถอะ ส่วนด้านใน, ชื่อเรื่อง และ เนื้อหา ของโปรแกรมแก้ไขข้อความและสีของการไล่ระดับสีพื้นหลังซ้อนทับ คุณควรได้ผลลัพธ์ที่มีลักษณะดังนี้:
ที่นี่คุณเพิ่งเสร็จสิ้นภารกิจนี้อย่างง่ายดาย เพียงดูตัวอย่างการทำงานของแท็บเล็ตและสมาร์ทโฟน พยายามเปลี่ยนระยะขอบให้ตรงกับแต่ละอุปกรณ์
รับ Elementor Pro ทันที!
สรุป
ดังนั้น ! บทความนี้จะแสดงวิธีสร้างแผนที่ฐานสิบหกพร้อมเอฟเฟกต์สำหรับบทความนี้ หากคุณมีข้อกังวลใด ๆ เกี่ยวกับวิธีการเดินทางไปที่นั่น แจ้งให้เราทราบภายใน ความเห็น.
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
