บล็อกทั้งหมดใช้การตั้งค่าส่วนกลางเดียวกันสำหรับแบบอักษร พื้นหลัง และการแสดงผล เพื่อให้แน่ใจว่ารูปแบบภาพที่สอดคล้องกันทั่วทั้งไซต์ของคุณ ในขณะที่เนื้อหาของบล็อกสามารถแตกต่างกันได้
หากต้องการกำหนดการตั้งค่าส่วนกลางสำหรับบล็อกใดๆ ให้วางเมาส์เหนือบล็อกนั้นแล้วเลือกปุ่ม การตั้งค่า ที่ปรากฏขึ้น

คลิกปุ่ม การตั้งค่า เพื่อเปิดเมนูการตั้งค่าส่วนส่วนกลางทางด้านขวา

การตั้งค่าแบบอักษร
คุณสามารถเปลี่ยนการตั้งค่าต่อไปนี้:
- แบบอักษรและสไตล์: ตระกูลแบบอักษร สไตล์ (ปกติหรือตัวเอียง) และน้ำหนัก (ความหนา)
- ระยะห่าง: ระยะห่างระหว่างตัวอักษร ความสูงของบรรทัด และขนาดแบบอักษร

สำหรับบล็อกที่มีทั้งฟิลด์หัวเรื่องและข้อความ คุณมีตัวเลือกการจัดรูปแบบสองแบบ:
- ใช้ สไตล์แบบอักษรเดียว กับทั้งบล็อกเพื่อความสม่ำเสมอ
- เปิดใช้งานตัวเลือก แบบอักษรเพิ่มเติม เพื่อกำหนดสไตล์แยกต่างหากสำหรับหัวเรื่องและข้อความ สร้างบทบาทภาพที่แตกต่างกันภายในบล็อกเดียวกัน

วิธีเพิ่มแบบอักษรที่กำหนดเอง
หากต้องการเพิ่มแบบอักษรที่กำหนดเอง ให้ค้นหาปุ่มที่มีชื่อเดียวกันแล้วคลิก:

คุณจะถูกนำไปยังหน้าที่มีแบบอักษรหลากหลายมากมาย:

ขั้นตอนที่ 1. ค้นหาแบบอักษรที่ต้องการ
a) สามารถทำได้โดยใช้แถบค้นหา:

เลือกเกณฑ์ที่จำเป็นสำหรับแบบอักษร:
- หมวดหมู่แบบอักษร
- sans-serif (ตัวอักษร sans-serif)
- serif (ตัวอักษร serif)
- handwriting (แบบอักษรที่เลียนแบบลายมือ)
- monospace (แบบอักษรที่มีความกว้างคงที่หรือไม่สมส่วน ซึ่งอักขระทั้งหมดมีความกว้างเท่ากัน)
- display (แบบอักษรตัวหนาสำหรับแสดงผล)
- การรองรับภาษา
- Cyrillic
- Latin
b) หากต้องการค้นหาแบบอักษรด้วยตนเอง ให้เลื่อนดูรายการในริบบิ้นการจัดรูปแบบ
ขั้นตอนที่ 2. คลิกที่แบบอักษรที่เลือก:
คุณจะเห็นหน้าต่างโมดอลพร้อมตัวเลือกแบบอักษร:

ขั้นตอนที่ 3. เลือกตัวเลือกแบบอักษรโดยทำเครื่องหมายที่ช่องถัดจากตัวเลือกที่คุณต้องการ:

ขั้นตอนที่ 4. คลิกปุ่ม "เพิ่ม" :

การตั้งค่าแบบอักษรที่กำหนดเองของคุณจะแสดงที่นี่เมื่อบันทึกแล้ว

ขั้นตอนที่ 6. คลิก "บันทึก" :

แบบอักษรที่เพิ่มจะแสดงในรายการเดียวกับแบบอักษรเริ่มต้น

การตั้งค่าพื้นหลัง

ปรับแต่งพื้นหลังของส่วนด้วยสีทึบ การไล่ระดับสี รูปภาพ หรือวิดีโอ

คุณสามารถวางซ้อนสีหรือการไล่ระดับสีบนรูปภาพพื้นหลังได้

รูปภาพสามารถเพิ่มเป็นไฟล์หรือเป็นลิงก์ไปยังรูปภาพ:

วิดีโอสามารถเพิ่มได้จากพื้นที่จัดเก็บ

ขั้นแรก อัปโหลดไฟล์วิดีโอของคุณไปยังพื้นที่จัดเก็บไฟล์

การตั้งค่ารูปภาพพื้นหลัง
การควบคุมตำแหน่งรูปภาพ
รูปภาพภายในส่วนจะถูกวางตำแหน่งโดยใช้พารามิเตอร์อิสระสองตัว:
- การจัดแนวแนวนอน (แกน X)
- การจัดแนวแนวตั้ง (แกน Y)
ระบุตำแหน่ง โดยใช้คำสำคัญหรือการรวมกัน:
| คำสำคัญ | ผลกระทบ |
|---|---|
top, bottom, center
|
การจัดแนวแนวตั้ง |
left, right, center
|
การจัดแนวแนวนอน |
bottom left, top right, center center
|
ตำแหน่งรวม |
สำหรับการควบคุมที่แม่นยำ คุณยังสามารถใช้ค่าตัวเลข:
- เปอร์เซ็นต์ (เช่น
30% 75%) - พิกเซล (เช่น
20px 100px) - หรือหน่วยผสม

ตัวเลือกการปรับขนาดรูปภาพ
คุณสามารถควบคุมขนาดของรูปภาพได้โดยใช้วิธีการต่อไปนี้:
1. กำหนดขนาดที่กำหนดเอง
กำหนดทั้งความกว้างและความสูงโดยใช้ค่าที่ยืดหยุ่น
-
รูปแบบ:
[ความกว้าง] [ความสูง] -
ตัวอย่างที่ 1 (พิกเซล):
500px 300px -
ตัวอย่างที่ 2 (เปอร์เซ็นต์):
15% 10%
2. ใช้คำสำคัญที่กำหนดไว้ล่วงหน้า
ระบุพารามิเตอร์เดียวเพื่อใช้พฤติกรรมการปรับขนาดเฉพาะ:
-
contain— ปรับขนาดรูปภาพให้พอดีกับความสูงของส่วนทั้งหมดในขณะที่คงอัตราส่วนภาพไว้ (ตัวอย่างที่ 3) -
cover— แสดงรูปภาพตามขนาดพิกเซลดั้งเดิม (ตัวอย่างที่ 4: ขนาดดั้งเดิม 1268×1343 px)

การทำซ้ำรูปภาพ
ตัวเลือกนี้ถูกปิดใช้งานตามค่าเริ่มต้น การตั้งค่าที่มีให้เลือก ได้แก่:

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

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

การตั้งค่าการแสดงผล

คุณสามารถระบุได้ว่าส่วนนี้จะมองเห็นได้ที่ไหน (เช่น บนอุปกรณ์หรือแพลตฟอร์มใด) โดยค่าเริ่มต้น จะแสดงบนเว็บไซต์และบน Facebook การใช้เมนูแบบเลื่อนลง คุณสามารถเลือกตัวเลือกการแสดงผลสำหรับบล็อกนี้ เช่น ทำให้มองเห็นได้เฉพาะบนเว็บไซต์
รัศมีขอบ:

รัศมีขอบระบุเป็นพิกเซล - px
ความสูงของส่วน

ความสูงของส่วนสามารถกำหนดได้โดยใช้หน่วยต่อไปนี้:
- px: พิกเซล (ค่าคงที่)
- vh: ความสูงของวิวพอร์ต (ตอบสนองต่อขนาดหน้าจอ)
ความกว้างของส่วน
ความกว้างของ 1 คอลัมน์ = 106 px
โดยค่าเริ่มต้น ความกว้างของส่วนจะถูกตั้งเป็นเต็มหน้าจอ และเนื้อหาจะแสดงภายในเค้าโครง 8 คอลัมน์

ตัวอย่างที่ 1: เนื้อหาอยู่กึ่งกลางภายในส่วนและครอบคลุม 5 คอลัมน์ของเค้าโครง

ตัวอย่างที่ 2. ส่วนครอบคลุม 8 คอลัมน์ โดยเนื้อหาครอบคลุมความกว้างทั้งหมดของส่วน:

เอฟเฟกต์การปรากฏที่ triggered โดยการเลื่อน

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

ในแนวตั้ง เนื้อหาจะถูกจัดชิดด้านบนตามค่าเริ่มต้น สามารถเลื่อนลงหรืออยู่กึ่งกลางบนหน้าได้
หากต้องการปรับข้อความให้เข้ากับหน้าจอแคบตามสไตล์ Mavibot โปรดเปิดใช้งานแถบเลื่อนนี้:

ระยะขอบ (สำหรับส่วน)
ระยะขอบภายนอก
คุณสามารถใช้ฟิลด์เหล่านี้เพื่อปรับระยะห่างระหว่างส่วนต่างๆ โดยค่าเริ่มต้น การเว้นระยะภายใน (บน/ล่าง/ซ้าย/ขวา) ถูกตั้งเป็น 0 px

หากต้องการใช้ระยะขอบเท่ากันทุกด้าน ให้ป้อนค่าในฟิลด์หลัก ระยะขอบบน ล่าง ซ้าย และขวาจะถูกตั้งโดยอัตโนมัติ

เพื่อให้แน่ใจว่ามีความสอดคล้องทางภาพ ต้องกำหนดค่าระยะขอบแยกกันสำหรับแต่ละส่วน
ระยะขอบภายใน
ใช้ฟิลด์เหล่านี้เพื่อปรับระยะขอบภายในของส่วน โดยค่าเริ่มต้น ระยะขอบ (บน ล่าง ซ้าย ขวา) ถูกตั้งเป็น 32 px

ช่วงการมองเห็นตามอุปกรณ์
ช่วงการมองเห็นจะกำหนดว่าบล็อกนี้จะแสดงบนอุปกรณ์ใด (เช่น เดสก์ท็อป แท็บเล็ต มือถือ) การตั้งค่านี้ถูกกำหนดค่าแยกกันสำหรับแต่ละบล็อก

เหตุใดจึงมีประโยชน์และทำงานอย่างไร?
หากบล็อก (เช่น ปก) แสดงผลได้ดีบนเดสก์ท็อปแต่ไม่ดีบนมือถือ คุณสามารถกำหนดค่าให้ปรากฏเฉพาะบนอุปกรณ์ที่มีความกว้างหน้าจอ 960 พิกเซลขึ้นไปเท่านั้น ซึ่งจะทำให้บล็อกมองเห็นได้เฉพาะในมุมมองเดสก์ท็อปและซ่อนบนอุปกรณ์มือถือ
จากนั้นคุณต้องคัดลอกบล็อกนี้และปรับแต่งลักษณะที่ปรากฏสำหรับอุปกรณ์มือถือโดยเฉพาะ (เปลี่ยนรูปภาพ ขนาดแบบอักษร ฯลฯ) สำหรับบล็อกนี้ ให้ตั้งค่าการมองเห็นในช่วง 0 ถึง 960 พิกเซล ซึ่งจะเป็นเวอร์ชันมือถือของบล็อก
ผลลัพธ์คือ เวอร์ชันเดสก์ท็อปจะแสดงบนคอมพิวเตอร์ ในขณะที่เวอร์ชันมือถือจะแสดงบนสมาร์ทโฟนและแท็บเล็ต
ช่วงการมองเห็น (ค่าพารามิเตอร์ที่แตกต่างกัน) จำเป็นเพื่อให้สามารถปรับแต่งลักษณะที่ปรากฏของหน่วยสำหรับอุปกรณ์เฉพาะโดยการเลือกความละเอียด ตัวอย่างเช่น หากบล็อกแสดงผลไม่ดีบนแท็บเล็ตหรือบนโทรศัพท์รุ่นใดรุ่นหนึ่ง คุณสามารถปรับแต่งลักษณะที่ปรากฏตามความละเอียดของอุปกรณ์เหล่านี้
โดยค่าเริ่มต้น ส่วนจะแสดงบนอุปกรณ์ทุกขนาด
ตัวอย่าง
กำหนดค่าส่วนแรกสำหรับอุปกรณ์มือถือและแท็บเล็ต
- สร้างส่วน
- ตั้งค่าช่วงการมองเห็นจาก 0 ถึง 640 px
- อัปโหลดรูปภาพที่ปรับให้เหมาะสมสำหรับหน้าจอขนาดเล็ก

ส่วนที่สองสำหรับพีซี (แล็ปท็อป) ตั้งค่าช่วงการมองเห็นตั้งแต่ 641 พิกเซลขึ้นไป

- บันทึกการเปลี่ยนแปลงของคุณและไปที่หน้าแก้ไข เพื่อความสะดวกของคุณ การตั้งค่าการมองเห็นของส่วนจะแสดงที่นั่น

หากต้องการทดสอบว่าส่วนต่างๆ จะปรากฏบนอุปกรณ์เฉพาะอย่างไร ให้ไปที่หน้าตัวอย่างไซต์ คลิกขวาแล้วคลิก "ดูรหัส"

เลือกอุปกรณ์ที่คุณต้องการดูว่าไซต์จะมีลักษณะอย่างไร
จังหวะเวลาการปรากฏ

คุณสามารถใช้ฟิลด์นี้เพื่อกำหนดความล่าช้าก่อนที่ส่วนจะปรากฏ โดยระบุเป็นวินาที (s) หรือนาที (m)


