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

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

ข้อมูลเบื้องต้นเกี่ยวกับรหัสย่อตัวสร้างบีเวอร์

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

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

ในตัวอย่างนี้ เรากำลังเพิ่มแถวที่บันทึกไว้ในโมดูล HTML:

เมื่อเราคลิกที่ บันทึก Beaver Builder จะแปลงรหัสย่อเป็นแถวที่บันทึกไว้โดยอัตโนมัติซึ่งสอดคล้องกับ:

ในโพสต์นี้ เราจะแสดงวิธีเพิ่มรหัสย่อในตัวแก้ไขให้คุณดู ในตอนนี้ เรามาพูดถึงประโยชน์ของการใช้รหัสย่อของ Beaver Builder

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

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

คุณสามารถเพิ่มรหัสย่อให้กับโมดูล Beaver Builder ด้วยฟิลด์ข้อความ ซึ่งรวมถึง:

• HTML
• ข้อความ
• หัวข้อ
• โทรออก
• ไอคอน
• แท็บ

อย่างไรก็ตาม ไม่ควรเพิ่มรหัสย่อมากเกินไป ซึ่งอาจเพิ่มเวลาในการโหลดเนื่องจากเซิร์ฟเวอร์ต้องขอไฟล์ CSS และ Javascript สำหรับแต่ละรหัสย่อ ขอแนะนำให้ใช้ไม่เกินสองหน้าต่อหน้า

5 ตัวอย่างรหัสย่อตัวสร้างบีเวอร์ที่เป็นประโยชน์

มีกรณีการใช้งานมากมายสำหรับรหัสย่อของ Beaver Builder มาดูตัวอย่างที่เป็นประโยชน์กัน

1. ปุ่มเรียกร้องให้ดำเนินการในตารางราคา

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

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

อย่าลืมปรับแต่งปุ่ม CTA ให้เข้ากับแบรนด์ภาพของคุณ

2. แบบฟอร์มการติดต่อในแท็บ

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

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

คุณสามารถเพิ่มแบบฟอร์มการติดต่อไปยังแท็บใดแท็บหนึ่งของคุณได้ โดยใช้รหัสย่อ:

ง่ายมาก! ตอนนี้ลูกค้าสามารถติดต่อคุณได้โดยไม่ต้องออกจากเพจ

3. รูปภาพภายในกล่องข้อความ

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

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

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

4. โมดูลใดๆ ในตัวแก้ไขบล็อก

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

คุณสามารถวางโมดูล Beaver Builder ลงในเพจได้อย่างง่ายดายโดยไม่ต้องออกจาก Block Editor เพียงแทรกบล็อก รหัสย่อ แล้ววางรหัสของคุณภายใน:

เมื่อคุณเผยแพร่โพสต์ รหัสสั้นจะแสดงเนื้อหาที่ส่วนหน้า:

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

5. วันที่ (ธีมตัวสร้างบีเวอร์เท่านั้น)

ธีมตัวสร้างบีเวอร์ของเรามาพร้อมกับรหัสย่อวันที่ที่กำหนดเอง ซึ่งจะแสดงวันที่ปัจจุบันในส่วนใดๆ ของหน้า รวมถึงส่วนหัว ส่วนท้าย และแถบด้านข้าง:

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

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

วิธีเพิ่มรหัสย่อด้วย Beaver Builder (ใน 2 ขั้นตอน)

เราได้ครอบคลุมหลายสถานการณ์ที่รหัสย่อของ Beaver Builder สามารถเร่งความเร็วและทำให้กระบวนการออกแบบของคุณง่ายขึ้น ตอนนี้ มาดูวิธีการเพิ่มไซต์ของคุณกัน:

ขั้นตอนที่ 1: สร้างรหัสย่อของคุณ

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

• โมดูล
• แถว
• คอลัมน์
• แม่แบบ

ตัวอย่างเช่น สมมติว่าคุณต้องการออกแบบโมดูลแบบฟอร์มติดต่อแบบกำหนดเอง คุณสามารถทำได้โดยไปที่ Beaver Builder > Saved Modules > Add New :

จากนั้น คุณจะได้รับแจ้งให้ตั้งชื่อโมดูลและเลือกประเภทโมดูล:

คลิกที่ เพิ่มโมดูลที่บันทึกไว้ ในหน้าถัดไป เลือก Launch Beaver Builder เพื่อเข้าถึงตัวแก้ไข ที่นี่ คุณสามารถปรับแต่งแบบฟอร์มการติดต่อได้ตามต้องการ:

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

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

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

ตอนนี้คุณสามารถใช้รหัสต่อไปนี้เพื่อสร้างรหัสย่อสำหรับโมดูลนี้:

 [fl_builder_insert_layout slug="my-post-slug"]

อย่าลืมแทนที่ "my-post-slug" ด้วยกระสุนของโมดูล Beaver Builder ของคุณ ในตัวอย่างของเรา จะมีลักษณะดังนี้:

 [fl_builder_insert_layout slug="contact-form"]

แค่นั้นแหละ – ตอนนี้คุณรู้วิธีสร้างรหัสย่อสำหรับโมดูล Beaver Builder แล้ว

ขั้นตอนที่ 2: ใส่รหัสย่อลงในหน้าของคุณ

ขั้นตอนสุดท้ายคือการเพิ่มรหัสย่อในหน้าของคุณ ในกรณีส่วนใหญ่ กระบวนการนี้จะเกี่ยวข้องกับการวางข้อมูลโค้ดในช่อง ข้อความ ของโมดูล

นี่คือตัวอย่างตารางราคาของเราก่อนหน้านี้ อย่างที่คุณเห็น เราได้เพิ่มรหัสย่อสำหรับปุ่ม CTA ในกล่องข้อความ คุณลักษณะ 5 :

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

บทสรุป

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

สรุป คุณสามารถใช้รหัสย่อของ Beaver Builder โดยทำตามขั้นตอนง่าย ๆ เหล่านี้:

1. บันทึกองค์ประกอบ (โมดูล แถว คอลัมน์ หรือเค้าโครง) แล้วมองหารหัสย่อหรือกระสุน
2. ใส่รหัสย่อลงในช่องข้อความภายในโมดูล Beaver Builder หรือบล็อก Shortcode ใน Block Editor

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

คำถามที่เกี่ยวข้อง

Beaver Builder ใช้รหัสย่อหรือไม่

Beaver Builder มีรหัสย่อสำหรับองค์ประกอบที่บันทึกไว้ เช่น โมดูล แถว คอลัมน์ และเทมเพลต จากนั้นคุณสามารถเพิ่มข้อมูลโค้ดเหล่านี้ลงในฟิลด์และโมดูลแบบข้อความได้ สามารถทำได้ทั้งในตัวแก้ไขส่วนหน้าของ Beaver Builder และ WordPress Block Editor นอกจากนี้ รหัสย่อยังช่วยให้คุณใช้ปลั๊กอินโปรด อื่นๆ ร่วมกับ Beaver Builder ได้อีกด้วย

คุณต้องการธีม Beaver Builder เพื่อใช้รหัสย่อหรือไม่?

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

ความแตกต่างระหว่าง Beaver Builder และ Beaver Themer คืออะไร?

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