ส่วน "การ์ดที่ปรับแต่งได้" ในเครื่องมือสร้างเว็บไซต์ออกแบบมาสำหรับผู้ที่ต้องการนำเสนอข้อมูลสำคัญเกี่ยวกับผลิตภัณฑ์ บริการ หรือรีวิวจากลูกค้าได้อย่างง่ายดายและรวดเร็ว บล็อกเหล่านี้ช่วยให้คุณเพิ่มการ์ดที่ดึงดูดสายตาลงในหน้าเว็บไซต์ ซึ่งสามารถปรับแต่งให้ตรงกับความต้องการของธุรกิจของคุณได้
ไม่ว่าคุณต้องการให้คำอธิบายโดยละเอียดเกี่ยวกับหลักสูตร ข้อเสนอแนะจากลูกค้าที่พึงพอใจ หรือคำแนะนำในการใช้บริการของคุณ "การ์ดที่ปรับแต่งได้" และ "การ์ดหลักสูตร" จะช่วยเน้นข้อมูลและทำให้เข้าถึงและสะดวกยิ่งขึ้นสำหรับผู้เยี่ยมชมเว็บไซต์
วิธีการเพิ่มบล็อก?
ในการเพิ่มส่วน "การ์ดที่ปรับแต่งได้" ให้คลิกที่ "+" ในโหมดแก้ไขเว็บไซต์ของคุณ:
จากนั้น ค้นหาส่วน "การ์ดที่ปรับแต่งได้" ในเมนูที่เปิดขึ้นและคลิกเพื่อเพิ่มส่วนลงในเว็บไซต์ ส่วนดังกล่าวจะถูกเพิ่มลงในเว็บไซต์ และเมนูการตั้งค่าเนื้อหาจะเปิดขึ้นสำหรับคุณ:
วิธีการเพิ่มการ์ด?
ในเมนูแก้ไขของส่วน "การ์ดที่ปรับแต่งได้" ของเนื้อหา คุณจะเห็นส่วนต่างๆ สำหรับการตั้งค่า: รูปแบบของการ์ด รูปภาพ ปุ่ม ฯลฯ
เพื่อความสะดวกของคุณ คุณสามารถเพิ่มการ์ดก่อนเพื่อดูว่าการตั้งค่ารูปแบบนำไปใช้กับการ์ดอย่างไร
ในการดำเนินการนี้ ให้เลื่อนลงในเมนูการตั้งค่าเนื้อหาและค้นหาปุ่ม "เพิ่มการ์ด":
เมื่อคลิกที่ปุ่ม "เพิ่มการ์ด" คุณจะเห็นการตั้งค่าสำหรับการ์ดที่มีช่องข้อความว่าง แถบสำหรับอัปโหลดรูปภาพสำหรับการ์ดและสำหรับไอคอนปุ่ม รวมถึงข้อความของปุ่มเอง:
ช่องการตั้งค่าของการ์ดเป็นตัวเลือก: หมายความว่าคุณสามารถข้าม เช่น การอัปโหลดรูปภาพสำหรับการ์ดเองหรือสำหรับไอคอนปุ่ม โดยไม่ต้องแทรกข้อความ - ทุกอย่างขึ้นอยู่กับดุลยพินิจของคุณ
ตัวอย่างเช่น หากคุณไม่ต้องการปุ่มที่มีลิงก์ในการ์ด ให้เว้นช่อง "ชื่อปุ่ม" และ "ลิงก์" ว่างไว้: จากนั้นปุ่มจะไม่แสดงในการ์ด
มีการตั้งค่าต่างๆ สำหรับข้อความของการ์ด คล้ายกับโปรแกรมแก้ไขข้อความใดๆ ที่คุณสามารถปรับขนาดตัวอักษร โครงร่างตัวอักษร สี การเน้น รวมถึงเพิ่มลิงก์และอื่นๆ
ในการดำเนินการนี้ ให้เลือกข้อความ (ส่วนหนึ่งของข้อความ) และใช้การตั้งค่าที่จำเป็นกับข้อความ:
หลังจากที่คุณกำหนดค่าการ์ดใบแรกเสร็จสมบูรณ์แล้ว ให้เพิ่มการ์ดถัดไป: โดยคลิกที่ปุ่ม "เพิ่มการ์ด" ซึ่งอยู่ด้านล่างแถบการตั้งค่าของการ์ดใบแรกที่เพิ่ม:
การตั้งค่าการ์ด
การ์ดถูกกำหนดค่าในรูปแบบเดียว: การตั้งค่าทั้งหมดที่คุณใช้ในส่วนนี้จะถูกนำไปใช้กับการ์ดทั้งหมดในส่วนเดียวกัน
รูปแบบการ์ด
มีสองรูปแบบสำหรับการ์ดในเครื่องมือสร้างเว็บไซต์ Mavibot: แบบธรรมดาและแบบสไลด์
เมื่อใช้รูปแบบธรรมดา การ์ดทั้งหมดจะแสดงบนหน้าเดียวของส่วนเว็บไซต์ทันที:
เมื่อใช้รูปแบบ "สไลด์" การ์ดจะอยู่ในรูปแบบของภาพหมุน ซึ่งจะเพิ่มความมีชีวิตชีวาให้กับเว็บไซต์:
สำหรับรูปแบบสไลด์ คุณสามารถเลือกตำแหน่งของลูกศรและจุดของการ์ด:
ลูกศรสามารถอยู่ภายในสไลด์ ภายนอก หรือซ่อน (เช่น หากคุณตั้งเวลาสำหรับการพลิกการ์ดอัตโนมัติ):
จุดสามารถอยู่ภายในสไลด์ ภายนอก หรือซ่อนได้เช่นกัน
หากต้องการเลื่อนการ์ดโดยอัตโนมัติ ให้ตั้งค่าช่วงเวลาสำหรับการแสดงหนึ่งหน้า:
หากค่าตัวจับเวลาตั้งเป็น 0 การ์ดจะไม่ถูกเลื่อนโดยอัตโนมัติ
โปรดทราบ!
เวลาถูกตั้งเป็นมิลลิวินาที โดยหนึ่งมิลลิวินาทีเท่ากับ 0.001 วินาที ซึ่งหมายความว่าหากคุณต้องการตั้ง 7 วินาที ให้ป้อนค่าในฟิลด์ 7000
คุณยังสามารถเลือกประเภทของการ์ด:
การตั้งค่าสีสำหรับองค์ประกอบการ์ด
หากต้องการปรับแต่งการ์ดให้เข้ากับสไตล์ของคุณ ให้ใช้การตั้งค่าสี:
การตั้งค่าสีจะถูกนำไปใช้กับการ์ดทั้งหมดพร้อมกัน หากคุณต้องการให้สีข้อความแตกต่างกันในแต่ละการ์ด ให้ใช้การตั้งค่าในช่องข้อความ
มีจานสีที่หลากหลายสำหรับการปรับแต่งสี:
และคุณสามารถใช้การตั้งค่าสีกับองค์ประกอบใดๆ ของการ์ดได้
การตั้งค่าขอบและระยะห่าง
- จำนวนการ์ดต่อแถว - ช่องข้อความที่จะช่วยให้คุณกำหนดจำนวนการ์ดที่ต้องการในหนึ่งแถว (หน้า)
- ระยะห่าง - ช่องสำหรับป้อนค่าตัวเลขที่จะช่วยเพิ่มหรือลดระยะขอบแนวนอน/แนวตั้งระหว่างการ์ด รวมถึงระยะขอบภายในของการ์ด
คุณสามารถตั้งค่าตัวเลขทั่วไปสำหรับการเยื้องภายในของการ์ด หรือโดยคลิกที่เฟืองที่มุมขวาของบรรทัด ตั้งค่าแยกต่างหากสำหรับขอบบน ล่าง ซ้าย และขวา:
การวางแนวการ์ด
การวางแนวของการ์ดสามารถเป็นแนวนอนและแนวตั้งได้
การจัดตำแหน่ง
สามารถจัดกึ่งกลาง ชิดซ้าย หรือชิดขวาได้
การตั้งค่าเงา
จะช่วยเพิ่มความลึกให้กับการ์ดและเน้นให้เด่นขึ้นจากพื้นหลังของส่วน/หน้า
การตั้งค่ารูปภาพ
การตั้งค่ารูปภาพยังใช้กับรูปภาพทั้งหมดที่คุณเพิ่มในการ์ดด้วย
ในการตั้งค่ารูปภาพ คุณต้องตั้งค่า:
a) ความกว้างของรูปภาพ:
ช่องนี้รับค่าตัวเลขเป็นพิกเซล หากไม่ได้ระบุ จะแสดงโดยอัตโนมัติตามความกว้างจริงของรูปภาพเป็นพิกเซล
b) ความสูงของรูปภาพ:
ช่องนี้รับค่าตัวเลขเป็นพิกเซล หากไม่ได้ระบุ จะแสดงโดยอัตโนมัติตามสัดส่วนของความสูงจริงของรูปภาพ
c) การปัดมุม:
ช่องที่รับค่าตัวเลขเป็นพิกเซล ช่วยปัดมุมของรูปภาพ:
d) ขนาดรูปภาพ:
การตั้งค่านี้ใช้เมื่อจำเป็นต้องเติม/ยืด/วางตำแหน่งรูปภาพตามความกว้างและความสูงที่ระบุสำหรับรูปภาพ
e) ช่องทำเครื่องหมาย "รูปภาพหลังข้อความ"
หากคุณทำเครื่องหมายที่ช่อง รูปภาพจะอยู่ใต้ข้อความในการ์ด
วิธีการตั้งค่าปุ่ม
ข้อความ รวมถึง ลิงก์ ไปยังหน้าที่ผู้เยี่ยมชมเว็บไซต์ของคุณควรคลิก ถูกกำหนดค่าในการ์ดเอง:
นอกจากข้อความและลิงก์แล้ว คุณยังสามารถตั้งค่าไอคอนสำหรับปุ่มได้โดยการอัปโหลดรูปภาพในการ์ด:
หากต้องการตั้งค่าสีของข้อความและพื้นหลังของปุ่ม ให้ใช้การตั้งค่าที่นี่:
ถัดไป คุณสามารถปรับขนาด ความกว้าง และระยะห่างสำหรับปุ่ม:
- ความกว้างของปุ่ม - เป็นช่องที่รับค่าตัวเลขทั้งในหน่วยพิกเซลและเปอร์เซ็นต์:
- การจัดตำแหน่งปุ่ม - ช่วยตั้งค่าปุ่มในการ์ดโดยสัมพันธ์กับขอบขวาหรือซ้าย รวมถึงกึ่งกลาง
- รัศมีขอบปุ่ม - เป็นช่องที่รับค่าตัวเลขเป็นพิกเซลเพื่อปัดมุมของปุ่ม:
- ความกว้างของเส้นขอบ - เป็นช่องที่รับค่าตัวเลขเป็นพิกเซลเพื่อกำหนดความกว้างของโครงร่างปุ่ม:
- ระยะขอบ
ช่วยให้คุณปรับระยะห่างสำหรับปุ่มในการ์ดโดยสัมพันธ์กับขอบบน ล่าง ซ้าย และขวา
- ระยะห่างภายใน
ช่วยให้คุณปรับระยะห่างภายในปุ่ม
- ไอคอน
หากคุณอัปโหลดไอคอนไปยังปุ่มในการ์ด คุณสามารถปรับไอคอนให้พอดี:
และยังตั้งค่าตำแหน่งของไอคอนโดยสัมพันธ์กับข้อความทางซ้ายหรือขวา:
- เงาสำหรับปุ่ม
สามารถตั้งค่าเงาได้ไม่เพียงแต่สำหรับการ์ดเท่านั้น แต่ยังแยกต่างหากสำหรับปุ่มด้วย ในการดำเนินการนี้ เพียงค้นหาช่องแบบเลื่อนลงที่มีชื่อ "เงา" ในการตั้งค่าของปุ่มและเลือกระดับความเข้มของเงา: อ่อนหรือเข้ม:
- แอนิเมชันปุ่ม
ช่วยดึงดูดความสนใจของลูกค้า (ผู้ใช้เว็บไซต์) ไปยังการกระทำที่กำหนดเป้าหมายบนปุ่มและเพิ่มความมีชีวิตชีวาให้กับเว็บไซต์:
1) แอนิเมชันปุ่มกะพริบ:
2) แอนิเมชันปุ่มระเบิด:
เสร็จแล้ว!
ตอนนี้คุณรู้วิธีสร้างและปรับแต่งการ์ดบนเว็บไซต์ของคุณตั้งแต่เริ่มต้นแล้ว