วิธีเพิ่มปุ่มในบทเรียน

บน Kwiga คุณสามารถเพิ่มปุ่มได้ 2 วิธี:

1. วิธีด่วน – ช่วยให้คุณตั้งค่าสีและข้อความของปุ่มได้
   

2. การใช้โค้ด – ช่วยให้คุณแก้ไขพารามิเตอร์ต่างๆ ได้ เช่น รัศมีขอบ ขนาด สีเส้นขอบ ความสูง และอื่นๆ
   

การเพิ่มแบบด่วน

เปิดบทเรียนที่คุณต้องการเพิ่มปุ่ม แล้วแทรกองค์ประกอบ “Text, Image, Code Embedding” คลิกบริเวณที่คุณต้องการวางปุ่ม แล้วเลือก +Button จากแถบเครื่องมือของตัวแก้ไขข้อความ

ในเมนูที่เปิดขึ้น คุณสามารถเพิ่มลิงก์ ตั้งชื่อปุ่ม และปรับแต่งสีของปุ่มและข้อความได้ คลิก Submit, แล้วปุ่มจะถูกเพิ่มลงในบทเรียนของคุณ!

การเพิ่มปุ่มผ่านโค้ด

คุณสามารถเพิ่มปุ่มในบทเรียนของคอร์สหรือมาราธอนได้โดยใช้โค้ด HTML เราจะแสดงวิธีดำเนินการด้านล่างนี้

เปิดบทเรียนที่คุณต้องการเพิ่มปุ่ม แล้วแทรกองค์ประกอบ “Text, Image, Code Embedding”

จากนั้นเปิดตัวแก้ไขโค้ด (หากคุณไม่เห็นแถบเครื่องมือแก้ไขข้อความ — ให้คลิกในพื้นที่สีขาวเพื่อเปิดใช้งานช่องป้อนข้อความ):

ตัวแก้ไขโค้ดจะเปิดขึ้น (เป็นพื้นที่สีดำบนหน้าจอ) และที่ด้านบนของเมนู คุณจะเห็นปุ่มสำหรับเพิ่มเทมเพลตโค้ดสำเร็จรูป หากต้องการสร้างปุ่ม ให้เลือก Button:




คุณจะเห็นโค้ดบนหน้า และจะเห็นปุ่มของคุณอยู่ด้านบน

คุณยังสามารถปรับแต่งขนาดตัวอักษรบนปุ่ม ระยะห่างภายใน ความกว้างของปุ่ม และปรับรัศมีขอบได้

คุณสามารถตั้งค่าสีของปุ่มโดยใช้โค้ด RGB หรือ HEX, a ตัวแปลง, หรือ a เครื่องมือเลือกสี.

การวางหลายปุ่มในแถวเดียว

หากต้องการสร้างหลายปุ่มที่วางติดกัน จำเป็นต้องใช้โค้ดเพิ่มเติม ด้านล่างคือโค้ดสำหรับปุ่ม 3 ปุ่มที่มีข้อความ "Base", "Comfort" และ "Pro" ใน 3 สีที่แตกต่างกัน คุณสามารถแก้ไขส่วนที่เกี่ยวข้องของโค้ดได้ โดยเปลี่ยนข้อความ สี รูปแบบปุ่ม และอย่าลืมเพิ่มลิงก์ด้วย



<!-- Example Button -->

<div id="buttons-container">

    <a id="my-button" href="/"> Base </a>

    <a id="my-button" href="/"> Comfort </a>

    <a id="my-button" href="/"> Pro </a>

</div>

<style>

#buttons-container {

    display: flex;

    grid-gap: 20px;

    justify-content: center;

}

@media(max-width: 640px) {

    #buttons-container {

        flex-direction: column;

    }

}

#my-button {

    display: flex;

    margin: 0 auto;

    width: 100%;

    padding: 13px 20px;

    border-radius: 20px;

    color: rgb(255, 255, 255);

    background: orange;

    justify-content: center;

    &:first-child {

        background: green;

    }

    &:last-child {

        background: purple;

    }

}

</style>

พื้นที่ที่ไฮไลต์ด้วยสีเหลืองระบุตำแหน่งที่กำหนดสีของปุ่ม