← บทความทั้งหมด

CSS รายหน้าใน Elementor โดยไม่ต้องมี Elementor Pro

ใน Elementor ช่อง Custom CSS ทั้งของวิดเจ็ต คอนเทนเนอร์ และทั้งหน้า เป็นส่วนหนึ่งของ Elementor Pro แต่ในเวอร์ชันฟรีคุณก็ยังแต่งองค์ประกอบเดียวหรือหน้าเดียวได้ตามต้องการ แค่เขียน CSS ไว้ที่อื่นแล้วชี้ไปยังองค์ประกอบที่ถูกต้อง ทำได้ในสามขั้น คือตั้ง class ให้องค์ประกอบ จำกัด rule ไว้เฉพาะหน้านั้น แล้วเก็บ CSS ไว้ในที่ที่ไม่หาย

1. ตั้ง class ให้องค์ประกอบ

ทุกวิดเจ็ตและคอนเทนเนอร์ใน Elementor ฟรีมีแท็บ Advanced ซึ่งมีสองช่องที่ใช้ตรงนี้ คือ CSS ID และ CSS Classes พิมพ์ชื่อลงใน CSS Classes เช่น promo-card โดยไม่ต้องใส่จุดข้างหน้า แล้วตัวครอบขององค์ประกอบนั้นจะมี class นี้อยู่บนหน้า

class ที่คุณตั้งเองดีกว่า class ที่ Elementor สร้างให้ แต่ละองค์ประกอบมี class อย่าง elementor-element-3f2a1b7 ด้วยก็จริง แต่รหัสนี้เปลี่ยนเมื่อคัดลอกหรือสร้างองค์ประกอบใหม่ rule ที่เขียนกับมันจะเลิกทำงานไปเงียบ ๆ

2. จำกัด rule ไว้หน้าเดียว

class เดียวกันอาจไปโผล่ในหลายหน้า จะให้ rule มีผลแค่หน้าเดียว ให้ขึ้นต้นด้วยสิ่งที่มีเฉพาะในหน้านั้น Elementor ครอบเนื้อหาของหน้าด้วยองค์ประกอบที่มี class elementor-123 โดย 123 คือ ID ของหน้า ดูได้จากตัวเลขหลัง post= ในแถบที่อยู่ตอนแก้ไขหน้า WordPress เองก็ใส่ page-id-123 ให้ <body> ของหน้า (และ postid-123 สำหรับโพสต์)

/* เฉพาะหน้า 123 */
.elementor-123 .promo-card {
	border-radius: 16px;
	box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
	transition: transform 0.2s ease;
}

.elementor-123 .promo-card:hover {
	transform: translateY(-4px);
}

/* เบรกพอยต์มือถือเริ่มต้นของ Elementor คือ 767px */
@media (max-width: 767px) {
	.elementor-123 .promo-card {
		border-radius: 12px;
	}
}

มีจุดหนึ่งที่ต่างจากช่องของ Elementor Pro คือคำว่า selector ใช้ได้เฉพาะในช่องนั้น ที่อื่นต้องเขียน selector เต็มแบบตัวอย่างข้างบน

3. เก็บ CSS ไว้ในที่ที่ไม่หาย

ใช้กับ Elementor ฟรีได้สามที่ และแต่ละที่ไม่เท่ากัน

วิดเจ็ต HTML ที่มีบล็อก <style> อยู่บนหน้า ใช้ได้และไม่ต้องลงอะไรเพิ่ม แต่ CSS จะไปอยู่ในเนื้อหาของหน้า ลบวิดเจ็ตเมื่อไรก็หายไปด้วย คัดลอกเซกชันก็ติดไปด้วย พิมพ์อยู่กลางหน้า และใครก็ตามที่จัดเลย์เอาต์ใหม่อาจทำมันพังโดยไม่รู้ตัว

หน้าตา → ปรับแต่ง → CSS เพิ่มเติม กล่องของ WordPress เอง เหมาะกับ rule ไม่กี่ข้อ แต่ Customizer ไม่มีประวัติให้ย้อนกลับ และ WordPress เก็บแยกตามธีม เปลี่ยนธีมเมื่อไรก็ต้องทิ้งไว้ข้างหลัง

ปลั๊กอินสำหรับโค้ด StyleScript ซึ่งใช้ฟรี เก็บ CSS ของคุณแยกจากธีมและจากข้อมูลของ Elementor พิมพ์ไว้ท้ายสุดของ head ของหน้า แสดงตัวอย่าง CSS ที่ยังไม่บันทึกบนเว็บจริงโดยเห็นคุณคนเดียว และเก็บประวัติการบันทึกไว้ เมื่อใช้ selector ที่จำกัดเฉพาะหน้าแบบข้างบน กล่อง CSS ระดับทั้งเว็บกล่องเดียวก็แต่งหน้าเดี่ยวได้กี่หน้าก็ได้ โดยแต่ละ rule มีผลเฉพาะที่ของมัน ปุ่ม แทรก media query ตามเบรกพอยต์ มีเบรกพอยต์ของ Elementor ให้เลือก โดยอ่านจากการตั้งค่าของเว็บคุณ media query จึงตรงกับอุปกรณ์ในตัวแก้ไขของ Elementor

เมื่อ rule ยังแพ้อยู่

สไตล์ที่ตั้งในแผงของ Elementor ถูกเขียนด้วย selector ยาว ๆ ที่มี class ซึ่งสร้างให้องค์ประกอบนั้นอยู่ด้วย เช่น .elementor-123 .elementor-element.elementor-element-3f2a1b7 .elementor-heading-title selector ที่สั้นกว่าจะแพ้ แม้จะมาทีหลังก็ตาม

มีสองนิสัยที่ช่วยไม่ให้ต้องสู้กัน

• อะไรที่แผงแก้ได้ ให้แก้ในแผง สี ระยะห่าง และตัวอักษรควรอยู่ที่นั่น CSS ของคุณจะได้ไม่ต้องแข่งกับมัน
• ใช้ CSS กับสิ่งที่แผงทำไม่ได้ เช่น สถานะ hover และ focus, ::before และ ::after, clip-path การปรับ grid และแอนิเมชัน rule แบบนี้แทบไม่ชนกับของ Elementor class ของคุณกับ prefix ของหน้าก็เพียงพอ

ถ้า rule ไหนต้องเขียนทับค่าในแผงจริง ๆ ให้เพิ่มความเจาะจงก่อน เช่น ใส่ class ของหน้าซ้ำ หรือเพิ่ม class ของวิดเจ็ตอย่าง .elementor-widget-heading ก่อนจะหันไปใช้ !important

CSS รายหน้าโดยไม่ต้องมี prefix

prefix ใช้ได้ แต่เว็บที่มี landing page หลายหน้า กล่อง CSS ระดับทั้งเว็บจะค่อย ๆ เต็มไปด้วย rule ของหน้าเดี่ยว StyleScript Pro เพิ่มกล่อง StyleScript — โค้ดของหน้านี้ ให้ทุกหน้า โพสต์ และสินค้า WooCommerce อยู่ในตัวแก้ไขของ WordPress รวมกับกล่องอื่นใต้เนื้อหา ใส่ CSS, JavaScript และโค้ดส่วนหัว/ส่วนท้ายสำหรับหน้านั้นเท่านั้น พิมพ์ในหน้านั้นที่เดียว ต่อจากโค้ดระดับทั้งเว็บ เลือกไม่ใส่ CSS ระดับทั้งเว็บในหน้านั้นก็ได้ และปุ่ม ดูตัวอย่างหน้านี้ แสดงผลให้ดูก่อนบันทึก สำหรับหน้าที่สร้างด้วย Elementor ให้เปิดด้วย แก้ไข แทน แก้ไขด้วย Elementor จึงจะเห็นกล่องนี้