ในบทช่วยสอนใหม่นี้ เราจะแสดงวิธีสร้างปุ่มหลายบรรทัดพร้อมไอคอนใน Elementor.
ควรสังเกตว่าคุณไม่จำเป็นต้องมีปลั๊กอินเพิ่มเติมในการทำเช่นนั้น เวอร์ชัน Elementor โปรจะให้ทุกสิ่งที่คุณต้องการเพื่อไปที่นั่น
เพื่อให้ได้แนวคิดว่าเราจะทำอะไรในบทช่วยสอนนี้ วิดีโอต่อไปนี้จะแสดงตัวอย่างสิ่งที่เราจะทำร่วมกัน
ตอนนี้ขอไปทำงาน
ค้นพบด้วย วิธีสร้างหน้าที่กำหนดเองสำหรับ WooCommerce ใน เอเลที่ปรึกษา
มาสร้างส่วนใหม่โดยเลือกส่วนที่มีคอลัมน์กัน
จากนั้นในแผงด้านข้างให้เลือก ความสูงขั้นต่ำ สำหรับ การวางฟอร์ม และ ความสูงขั้นต่ำ คลิกเลย VH และตั้งค่าตัวเลื่อนไปที่ 100.
ตอนนี้ลาก วิดเจ็ตปุ่ม ในพื้นที่ทำงานของเรา
ในแท็บ เนื้อหา จากแถบด้านข้าง มาเปลี่ยนสนามกัน ตำรา โดยเข้าไป ดาวน์โหลดบน App Storeจากนั้นในวัน การวางแนว คลิกเลย ศูนย์
จากนั้นคลิกที่ปุ่มไลบรารีไอคอน พิมพ์ apple ในแถบค้นหา เลือกไอคอนที่เราสนใจ แล้วคลิกปุ่มแทรก
กลับไปที่แถบด้านข้างมาเปลี่ยน Icon Spacing เป็น 14
อ่าน: วิธีสร้างการ์ดเอฟเฟกต์จากพอร์ตโฟลิโอ dans Elementor
ในแท็บ สไตล์, มาปรับเปลี่ยน สีพื้นหลัง ปุ่มบน Noire
มาเปลี่ยนกันเถอะ ขนาด วิชาการพิมพ์บน 25
เกี่ยวกับ รัศมีชายแดน, มาคว้า 20 สำหรับรัศมีขอบทั้งหมด สำหรับ ระยะขอบภายใน, มาคว้า 14-36-14-36 สำหรับระยะขอบ ขึ้น ขวา ลง และซ้าย.
ดูเพิ่มเติมที่: วิธีเปลี่ยนรูปภาพด้วยการคลิกปุ่ม dans Elementor
ตอนนี้เราจะไปที่แท็บ เนื้อหา และแปลงข้อความของปุ่มเป็นสองบรรทัด
เมื่อต้องการทำสิ่งนี้ ให้คัดลอกและวางรหัสต่อไปนี้ลงในช่องข้อความ:
<span class="top-small-text">TEXTE DE PREMIERE LIGNE</span> <br> TEXTE DE DEUXIEME LIGNE
มาเปลี่ยนข้อความ FIRST LINE TEXT เป็น ดาวน์โหลด sur และข้อความของ SECOND LINE TEXT ใน App Store
ตอนนี้เราจำเป็นต้องควบคุมบรรทัดแรกและบรรทัดที่สองให้มากขึ้น
ในการทำเช่นนี้ไปที่แท็บ สูง จากนั้นในส่วน CSS ที่กำหนดเองให้คัดลอกและวางรหัสต่อไปนี้:
selector .elementor-button-icon{
font-size: 62px;
}
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
ข้อควรจำ: หากคุณไม่มีส่วนนี้ คุณต้องอัปเกรดเป็นเวอร์ชัน Pro อย่างรวดเร็ว
ดังนั้นเพื่อปรับแต่งปุ่มของคุณให้เพียงพอ เช่น ขยายไอคอนโดยแก้ไขค่าของ font-size จากส่วนรหัส:
selector .elementor-button-icon{
font-size: 62px;
}
อ่าน: วิธีการส่งออกและนำเข้าโมเดล Elementor
หากต้องการปรับแต่งสีของบรรทัดแรกให้เปลี่ยนค่าของ color และถ้าคุณต้องการเปลี่ยนค่าขนาดฟอนต์ คุณต้องเปลี่ยนค่า font-size จากส่วนรหัสต่อไปนี้:
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
และที่นี่คุณเพิ่งสร้างปุ่มหลายบรรทัดพร้อมไอคอน คุณสามารถดูตัวอย่างได้
รับ Elementor Pro ทันที!!!
สรุป
ดังนั้น ! นั่นคือทั้งหมดสำหรับบทความนี้ซึ่งจะแสดงวิธีสร้างปุ่มหลายบรรทัดพร้อมไอคอน Elementor. หากคุณมีข้อกังวลใดๆ เกี่ยวกับการเดินทางไปที่นั่น เรายินดีที่จะรับฟังความคิดเห็นจากคุณใน ความเห็น.
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
