วิธีสร้างเนื้อหาแบบแท็บใน Elementor โดยใช้ PowerPack Addons

สงสัยว่าจะสร้างเนื้อหาแบบแท็บใน Elementor ได้อย่างไร?

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

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

วิดเจ็ตแท็บขั้นสูงของ PowerPack – ภาพรวม

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

วิดเจ็ตแท็บขั้นสูงเป็นวิดเจ็ตแท็บที่ดีที่สุดในการสร้างเนื้อหาแบบแท็บบนเว็บไซต์ WordPress มาดูคุณสมบัติของวิดเจ็ต PowerPack Advanced Tabs สำหรับ Elementor:

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

สร้างเนื้อหาแบบแท็บใน Elementor ด้วย PowerPack Addons

ก่อนเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งและเปิดใช้งานตัวสร้างเพจ Elementor และ PowerPack Addons สำหรับ Elementor

เมื่อคุณเปิดใช้งานปลั๊กอินทั้งสองบนเว็บไซต์ WordPress ของคุณแล้ว ให้เปิดหน้าโดยใช้ตัวแก้ไข Elementor

ถัดไป ค้นหา " แท็บขั้นสูง ” ในพื้นที่วิดเจ็ต แล้วลากและวางวิดเจ็ตบนหน้า

อย่าลืมตรวจสอบ PowerPack “ PP ” ที่มุมบนขวาของวิดเจ็ต

แท็บเนื้อหาของวิดเจ็ตแท็บขั้นสูง

แท็บเนื้อหาของวิดเจ็ตแท็บขั้นสูงประกอบด้วยสองส่วน:

1. แท็บขั้นสูง
2. เค้าโครง

ลองดูที่ส่วนเหล่านี้ในรายละเอียด

แท็บขั้นสูง

ลองดูคุณสมบัติที่มีในส่วนนี้:

• คุณสามารถเพิ่ม “ แท็บ ” ได้มากเท่าที่คุณต้องการ เพียงคลิกเพื่อ “ เพิ่มรายการ ” เพื่อสร้างแท็บเพิ่มเติม
• คุณสามารถปรับแต่งแต่ละแท็บแยกกันได้
• ประเภทเนื้อหา: ตัวเลือกนี้ช่วยให้คุณเลือกประเภทเนื้อหาได้หลายประเภท เช่น เนื้อหา รูปภาพ ลิงก์ (วิดีโอ/รูปภาพ) ส่วนที่บันทึกไว้ วิดเจ็ตที่บันทึกไว้ และเทมเพลตหน้าที่บันทึกไว้

“เนื้อหา” เป็นประเภทเนื้อหา

เมื่อคุณต้องการแสดงเนื้อหา คุณสามารถปรับแต่งตัวเลือกเหล่านี้ได้:

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

“รูปภาพ” เป็นประเภทเนื้อหา

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

1. เลือกรูปภาพ: เลือกรูปภาพจากไลบรารีรูปภาพโดยใช้ตัวเลือกนี้
2. ขนาดภาพ: ตัวเลือกนี้ช่วยให้คุณเลือกขนาดภาพที่ต้องการได้

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

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

คุณสมบัติของส่วนไอคอนคือ:

1. ประเภทไอคอน: คุณสามารถเลือกประเภทไอคอนได้ ไม่ว่าจะเป็นไอคอนหรือรูปภาพ อาจเป็นโลโก้ของแบรนด์หรือสิ่งอื่นใด
2. ไอคอน: คุณสามารถเลือกไอคอนจากไลบรารีไอคอนได้

เค้าโครง

ลองดูคุณสมบัติที่มีในส่วนนี้:

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

[ หมายเหตุ: ตัวเลือกนี้จะใช้ได้เฉพาะเมื่อคุณเลือกรูปแบบการจัดวางแนวตั้งสำหรับแท็บ]

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

ใช้การเปลี่ยนแปลงเหล่านี้กับวิดเจ็ตแท็บขั้นสูงเพื่อดูผลลัพธ์ที่ดีที่สุด

แท็บสไตล์ของวิดเจ็ตแท็บขั้นสูง

แท็บสไตล์ของวิดเจ็ตแท็บขั้นสูงประกอบด้วยสองส่วน:

1. แท็บ
2. ชื่อ
3. เนื้อหา

ลองดูที่ส่วนเหล่านี้ในรายละเอียด

แท็บ

มาดูกันว่าฟีเจอร์ทั้งหมดมีอะไรบ้างในส่วนนี้:

• การ จัดแนวแนวนอนหรือแนวตั้ง: เลือกการจัดแนวสำหรับแท็บโดยใช้ตัวเลือกนี้ แต่ให้เลือกเค้าโครงก่อน
• ช่องว่างระหว่างแท็บ: ปรับแต่งระยะห่างระหว่างแท็บด้วยตัวเลือกนี้
• สีพื้นหลัง: เมื่อใช้ตัวเลือกนี้ คุณจะเลือกสีพื้นหลังสำหรับแท็บได้
• รัศมีเส้นขอบ: ใช้รัศมีเส้นขอบหากคุณต้องการแสดงขอบโค้งบนเส้นขอบแท็บ
• Padding: ปรับ padding สำหรับแท็บเพื่อรักษาระยะห่างระหว่างเส้นขอบของแท็บและเนื้อหา

ชื่อ

มาดูกันว่าฟีเจอร์ทั้งหมดมีอะไรบ้างในส่วนนี้:

• ตำแหน่งไอคอน: เลือกตำแหน่งไอคอนด้านบน ล่าง ขวา หรือซ้าย
• ขนาดไอคอน: ปรับขนาดไอคอนด้วยตัวเลือกนี้
• ความกว้างของภาพไอคอน: ปรับความกว้างของภาพไอคอนโดยใช้ตัวเลือกนี้
• รัศมีเส้นขอบ: ใช้รัศมีเส้นขอบหากคุณต้องการแสดงขอบโค้งบนเส้นขอบชื่อแท็บ
• Padding: ปรับ padding สำหรับแท็บเพื่อรักษาระยะห่างระหว่างเส้นขอบชื่อแท็บและเนื้อหา
• ตัว พิมพ์ชื่อเรื่อง: ปรับแต่งตัวพิมพ์ข้อความชื่อโดยใช้ตัวเลือกนี้
• สีไอคอน: เลือกสีไอคอนด้วยตัวเลือกนี้
• สีของ ชื่อเรื่อง: กำหนดสีข้อความของชื่อเรื่องโดยใช้ตัวเลือกสีของชื่อเรื่อง
• สีพื้นหลังของชื่อเรื่อง: หากคุณต้องการแสดงสีพื้นหลังให้กับชื่อเรื่อง คุณสามารถเลือกพื้นหลังสีโดยใช้ตัวเลือกนี้
• เอฟเฟกต์โฮเวอร์: ตัวเลือกนี้ให้ความยืดหยุ่นแก่คุณในการเปิดหรือปิดใช้งานเอฟเฟกต์โฮเวอร์

เนื้อหา

มาดูกันว่าฟีเจอร์ทั้งหมดมีอะไรบ้างในส่วนนี้:

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

นั่นคือทั้งหมดที่เกี่ยวกับการปรับแต่งแท็บเนื้อหาและสไตล์ของวิดเจ็ตแท็บขั้นสูงสำหรับ Elementor โดย PowerPack Addons

ติดตั้ง เปิดใช้งาน และทำการเปลี่ยนแปลงบางอย่างตามที่คุณเลือก มันง่ายอย่างนั้น

รับแท็บขั้นสูงของ PowerPack สำหรับ Elementor Page Builder

หลังจากที่ทราบเกี่ยวกับคุณลักษณะทั้งหมดของวิดเจ็ตแท็บขั้นสูงที่มีให้โดย PowerPack Elementor Addons เราค่อนข้างแน่ใจว่าคุณจะชอบที่จะใช้มันบนเว็บไซต์ของคุณ

เราหวังว่าบทช่วยสอนนี้จะช่วยให้คุณสร้าง "แท็บ" ที่มีสไตล์สำหรับเว็บไซต์ของคุณโดยใช้วิดเจ็ต PowerPack Advanced Tabs

วิดเจ็ตโดย PowerPack Addons ได้รับการออกแบบอย่างน่าอัศจรรย์โดยผู้เขียนโค้ดที่สร้างสรรค์ของเรา เพื่อให้ผู้ที่ไม่ใช่ผู้เขียนโค้ดสามารถใช้งานได้ง่ายภายในเวลาไม่กี่นาที

คลิกที่นี่เพื่อรับวิดเจ็ตแท็บขั้นสูงของ PowerPack และปรับปรุงรูปลักษณ์ของเว็บไซต์ของคุณและประสบการณ์ผู้ใช้

หากคุณสนุกกับการอ่านบทความนี้ คุณคงชอบที่จะสัมผัสประสบการณ์องค์ประกอบ PowerPack อื่นๆ ของเรา

โปรดส่งความคิดเห็นของคุณที่นี่; เราชอบที่จะได้รับคำตอบของคุณ
เข้าร่วมกับเราทาง Twitter, Facebook และ YouTube