Elementor: วิธีเพิ่ม CSS ที่กำหนดเองให้กับเวอร์ชันฟรี

เมื่อเร็ว ๆ นี้หนึ่งในผู้อ่านของเราที่ไม่มี Elementor เวอร์ชัน Pro ท้าทายเราว่าเขาสามารถเพิ่ม CSS ที่กำหนดเองในเว็บไซต์ของเขาได้อย่างไร

เนื่องจากปัญหาซับซ้อนขึ้นเล็กน้อย เราคิดว่าผู้ใช้หลายคนอาจประสบปัญหานี้ ดังนั้นเราจึงตัดสินใจจัดทำบทความโดยละเอียดเกี่ยวกับวิธีการไปที่นั่น

ในบทความนี้ เราจะแสดงวิธีเพิ่ม CSS ที่กำหนดเองให้กับหน้าหรือเว็บไซต์ Elementor อย่างง่ายดาย

สามวิธีในการเพิ่ม CSS ที่กำหนดเองไปยังหน้า Elementor หรือเว็บไซต์มีดังนี้:

• เพิ่มโค้ด CSS ผ่านองค์ประกอบ HTML
• ผ่านปลั๊กอิน โค้ดส่วนย่อย
• การใช้เครื่องมือปรับแต่งธีมของ Elementor

วิธีที่ 1: เพิ่มโค้ด CSS จากองค์ประกอบ HTML ของ Elementor

ใช้วิธีนี้ถ้าคุณต้องการเพิ่ม CSS ในหน้าเดียวเท่านั้น

ขั้นตอนที่ 1: ลากและวางองค์ประกอบ Elementor HTML

คุณสามารถวางองค์ประกอบ HTML นี้ไว้ที่ใดก็ได้บนหน้า และมันจะทำงานได้ดี

ขั้นตอนที่ 2: คลิกไอคอนแก้ไข HTML

คลิกที่ไอคอน แก้ไข html ทางด้านขวาขององค์ประกอบ Elementor HTML การคลิกจะแสดงกล่องเครื่องมือแก้ไข HTML ที่ด้านซ้ายของหน้าจอ

ขั้นตอนที่ 3: เพิ่มโค้ด CSS ของคุณ

1. คลิกที่แท็บ เนื้อหา และเปิดรายการดรอปดาวน์ รหัส HTML.
2. วางโค้ด CSS ของคุณใน in บีคอน

วิธีที่ 2: CSS ที่กำหนดเองสำหรับ Elementor ผ่านปลั๊กอิน Code Snippet

ประโยชน์ของการใช้ปลั๊กอิน Code Snippets:

• หากคุณต้องการเปลี่ยนหรืออัปเดตธีม WordPress ของคุณ CSS จะถูกนำไปใช้เสมอ
• วิธีนี้เป็นวิธีที่สะดวกและมีประสิทธิภาพที่สุดในการเพิ่มโค้ด CSS เนื่องจากคุณสามารถเปิดหรือปิดโค้ด CSS เช่น ปลั๊กอินได้

ขั้นตอนที่ 1: เปิดเมนูส่วนขยายบนแดชบอร์ดของคุณ

ขั้นตอนที่ 2: เพิ่มปลั๊กอินใหม่

คลิกที่ปุ่ม เพิ่มเกี่ยวกับ »ในการเข้าถึงหน้าเพื่อเพิ่มปลั๊กอินใหม่

1. ค้นหาปลั๊กอิน " ตัวอย่างโค้ด ".
2. ติดตั้งโดยคลิกที่ปุ่ม ติดตั้งในขณะนี้ เมื่อผลการวิจัยเป็นบวก

ขั้นตอนที่ 3: เปิดใช้งานปลั๊กอิน

คลิกที่ปุ่ม กระตุ้น »เมื่อการติดตั้งเสร็จสมบูรณ์เพื่อเปิดใช้งานปลั๊กอิน ข้อมูลโค้ด

ขั้นตอนที่ 4: เปิดหน้าปลั๊กอินและเพิ่มข้อมูลโค้ด

1. เปิดเมนู สารสกัดจาก จากแดชบอร์ดของคุณ
2. คลิกที่ปุ่ม Nouveau เพื่อเพิ่มข้อมูลโค้ดใหม่

ขั้นตอนที่ 5: สร้างตัวอย่างและเปิดใช้งานactivate

1. ตั้งชื่อข้อมูลโค้ดของคุณ
2. ภายในแท็ก ให้เขียนโค้ดของคุณ รหัสนี้มีให้ด้านล่างสำหรับการคัดลอก
3. คลิกที่ปุ่ม บันทึกการเปลี่ยนแปลง เพื่อบันทึกข้อมูลโค้ด
4. หลังจากบันทึก CSS ให้คลิกที่ " กระตุ้น เพื่อเปิดใช้งานโค้ด CSS

คัดลอกรหัส

add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );

วิธีที่ 3: ใช้ Elementor Theme Customizer

หมายเหตุ: โปรดใช้ความระมัดระวังก่อนที่จะใช้วิธีนี้ เพราะหากคุณเปลี่ยนธีม คุณจะสูญเสีย CSS . ที่กำหนดเองนี้.

ขั้นตอนที่ 1: เปิดตัวปรับแต่งธีม

ไปที่เว็บไซต์ของคุณแล้วคลิกตัวเลือกปรับแต่งบนแถบนำทางด้านบน ซึ่งจะเปิดหน้าต่างปรับแต่งธีม

ขั้นตอนที่ 2: คลิกที่แท็บ CSS เพิ่มเติม

นี่จะเป็นการเปิดหน้ารายการ CSS

ขั้นตอนที่ 3: เพิ่มโค้ด CSS ของคุณ

ดี ! ตอนนี้คุณรู้วิธีเพิ่ม CSS ที่กำหนดเองไปยังหน้า Elementor หรือเว็บไซต์ได้อย่างง่ายดายแล้ว ซึ่งจะทำให้การออกแบบหน้าเว็บที่ไม่ซ้ำกันใน Elementor Free มีความยืดหยุ่นมากขึ้น

รับ Elementor Pro ทันที!

ค้นพบปลั๊กอิน WordPress พรีเมียมบางอย่าง  

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

เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้

1 FileBird

คุณเคยประสบปัญหาในการจัดการไฟล์รูปภาพ วิดีโอ หรือเอกสารนับพันที่คุณอัปโหลดไปยัง WordPress FTP หรือไม่? ใช่หรือไม่ไม่สำคัญ สิ่งสำคัญคือต้องรู้ว่า WordPress ปลั๊กอิน FileBird จะช่วยให้คุณจัดการไฟล์มีเดียของคุณได้อย่างง่ายดายและเพิ่มพลังให้กับห้องสมุดของคุณ

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

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

เพื่อหาข้อมูลเพิ่มเติมค้นพบ วิธีการจัดการไฟล์และโฟลเดอร์ WordPress

ดังนั้นหากคุณต้องการที่จะเพิ่มพลังให้กับ จัดการไลบรารีสื่อของคุณที่ WordPress ปลั๊กอิน FileBird อาจเป็นอาวุธลับของคุณ

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

2 หมวดหมู่ขยายสุดยอด WooCommerce

Ce WordPress ปลั๊กอิน ให้คุณปรับเปลี่ยนรายการหมวดหมู่ WooCommerce ที่น่าเบื่อแบบยาวๆ ได้อย่างง่ายดาย และแทนที่ด้วยรายการย่อยระดับต่างๆ ในเมนูหีบเพลง

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

3 WavePlayer

ดังที่คุณอาจเดาได้จากชื่อ WavePlayer เป็นปลั๊กอินเครื่องเล่นเสียงที่ใช้รูปคลื่นของไฟล์เสียงที่เล่น ด้วยปลั๊กอินนี้ คุณจะสามารถโฮสต์แทร็กหรือรวมเข้ากับบริการอื่นๆ ได้เมฆโฮสติ้งเช่น SoundCloud

นอกจากนี้ยังสามารถใช้เพื่อวัตถุประสงค์ในการทำพอดแคสต์และมีคุณสมบัติอื่น ๆ เช่นการรองรับ HTML5 รูปแบบที่ตอบสนองการรวม WooCommerce ฯลฯ ...

นอกจากนี้คุณยังสามารถสร้างเพลย์ลิสต์ด้วยภาพก่อนที่จะเผยแพร่ คุณสมบัติที่สำคัญอีกประการหนึ่งคือความเร็วและประสิทธิภาพ

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

ทรัพยากรที่แนะนำ

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

• วิธีการบีบอัดและปรับขนาดภาพบน WordPress
• วิธีการมีที่อยู่อีเมลของคุณกับ WordPress โฮสติ้ง
• วิธีการเปลี่ยนชื่อภาพบนบล็อก WordPress
• วิธีการค้นหาเชื่อมโยงไปยังหน้าเข้าสู่ระบบเวิร์ดเพรส

สรุป

ที่นี่ ! เพียงเท่านี้สำหรับบทช่วยสอนนี้ เราหวังว่าคุณจะเพิ่ม CSS ที่กำหนดเองลงใน Elementor ได้ฟรี อย่าลังเลที่จะ แบ่งปันกับเพื่อนของคุณบนเครือข่ายโซเชียลที่คุณชื่นชอบ. 

อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress

หากคุณมีข้อเสนอแนะหรือข้อสังเกตไว้ในส่วนของเรา ความเห็น.

...