Skip to content

คลาส CSS ที่มากับธีม Plant

This content is not available in your language yet.

CSS Classes ที่อยู่ในธีม Plant พร้อมใช้งาน

Helper Classes

ขึ้นต้นด้วยเครื่องหมาย _ เพื่อตั้งค่าเพิ่มเติม

CSS Classรายละเอียด
_mobileแสดงผลบนมือถือและแท็บเบล็ตเท่านั้น (จอกว้างไม่เกิน 1023px)
_desktopแสดงผลบนจอคอมเท่านั้น (จอกว้าง 1024px ขึ้นไป)
_spaceเพิ่มระยะด้านล่าง (Margin-Bottom) โดยค่าเริ่มต้นคือ 16px, 20px, 32px สำหรับจอมือถือ, แท็บเบล็ต และจอคอม
_guestแสดงเฉพาะคนที่ไม่ได้ล็อกอิน
_memberแสดงเฉพาะคนที่ล็อกอิน (แค่ซ่อนการแสดงผล ไม่ควรใช้กับข้อมูลลับ)
_thแสดงเฉพาะเมื่อเปิดเว็บด้วยภาษาไทย (HTML lang=“th”)
_enแสดงเฉพาะเมื่อเปิดเว็บด้วยภาษาอังกฤษ (HTML lang=“en-US”)
_bodyแสดงฟอนต์สำหรับตัวอ่าน (Body ใน Customizer)
_hแสดงฟอนต์สำหรับพาดหัว (Heading ใน Customizer)
_headingแสดงฟอนต์สำหรับพาดหัว (Heading ใน Customizer) และน้ำหนัก (ตัวหนา/ตัวบาง) ตามที่ตั้งไว้
_h_altแสดงฟอนต์สำหรับพาดหัวแบบที่ 2 (Heading Alt ใน Customizer)
_heading_altแสดงฟอนต์สำหรับพาดหัวแบบที่ 2 (Heading Alt ใน Customizer) และน้ำหนัก (ตัวหนา/ตัวบาง) ตามที่ตั้งไว้
_nowrapตั้งค่าไม่ให้มีการตัดขึ้นบรรทัดใหม่ เข่นปุ่ม หรือหัวข้อสั้นๆ

S-Grid

เป็นคลาสสำหรับจัดคอลัมน์พื้นฐาน ตามขนาดจอ (Mobile, Tablet, Desktop)

CSS Classรายละเอียด
s-gridแสดงผลแบบ Grid
-m2, -m3จำนวนคอลัมน์ที่แสดงบนมือถือ (2,3 คอลัมน์) หากไม่ระบุคือ 1 คอลัมน์
-t2, -t3, -t4จำนวนคอลัมน์ที่แสดงบนแท็บเบล็ต (2,3,4 คอลัมน์) หากไม่ระบุ จะอิงตามมือถือ
-d1, -d2, -d3,
-d4, -d5, -d6
จำนวนคอลัมน์ที่แสดงบนจอคอม (1-6 คอลัมน์) หากไม่ระบุ จะอิงตามมือถือ

ตัวอย่างการใช้งาน

<div class="s-grid -m2 -t3 -d4">
<div>CONTENT 01</div>
<div>CONTENT 02</div>
<div>CONTENT 03</div>
<div>CONTENT 04</div>
<div>CONTENT 05</div>
<div>CONTENT 06</div>
<div>CONTENT 07</div>
<div>CONTENT 08</div>
<div>CONTENT 09</div>
<div>CONTENT 10</div>
<div>CONTENT 11</div>
<div>CONTENT 12</div>
</div>

ผลลัพธ์ที่ได้

CONTENT 01
CONTENT 02
CONTENT 03
CONTENT 04
CONTENT 05
CONTENT 06
CONTENT 07
CONTENT 08
CONTENT 09
CONTENT 10
CONTENT 11
CONTENT 12

หมายเหตุ สามารถใช้ร่วมกับ gap-0, gap-1, gap-2, ตามตารางด้านล่างได้

Tailwind Classes

คลาสที่อิงจาก Tailwind CSS เฉพาะพื้นฐานที่ใช้บ่อย ระบบใส่ !important ให้ เพื่อให้ใช้ร่วมกับ Block / Page Builder ได้

CSS Classรายละเอียด
relativeposition: relative
flexdisplay: flex
inline-flexdisplay: inline-flex
griddisplay: grid
text-lefttext-align: left จัดข้อความชิดซ้าย
text-centertext-align: center จัดข้อความกึ่งกลาง
text-righttext-align: right จัดข้อความชิดขวา
justify-startjustify-content: flex-start
justify-endjustify-content: flex-end
justify-centerjustify-content: center
justify-betweenjustify-content: space-between
items-startalign-items: flex-start
items-centeralign-items: center
↑ รายการด้านบน
รองรับ Responsive
ขึ้นด้วยด้วย sm: / md: / lg: ได้
(กว้าง 600px, 768px, 1024px)
mx-automargin-left: auto; margin-right: auto (จัดกึ่งกลาง)
m-0margin: 0 (ปรับให้ระยะด้านนอกเป็น 0 ทุกด้าน)
mt-0margin-top: 0
mb-0margin-bottom: 0
mb-1margin-bottom: 0.25rem
mb-2margin-bottom: 0.5rem
gap-0gap: 0
gap-1gap: 0.25rem
gap-2gap: 0.5rem
bg-transparentbackground-color: transparent

Other Classes

คลาสอื่นๆ ที่นิยมใช้

CSS Classรายละเอียด
hidedisplay: none ซ่อนการแสดงผล