ก่อนที่คุณจะเพิ่มโมดูลคำนิยมลงในเพจได้ คุณต้องเข้าถึง Divi Builder ก่อน เมื่อ ธีม Divi ติดตั้งบนเว็บไซต์ของคุณ คุณจะสังเกตเห็นปุ่ม ใช้ Divi Builder เหนือโปรแกรมแก้ไขโพสต์เมื่อใดก็ตามที่คุณสร้างเพจใหม่ คลิกปุ่มนี้เพื่อเปิดใช้งาน Divi Builder และเข้าถึงโมดูลทั้งหมดที่มีให้ จากนั้นคลิกที่ปุ่ม ใช้ Visual Builder เพื่อเริ่มเครื่องกำเนิดไฟฟ้าในโหมดภาพ คุณยังสามารถคลิกปุ่ม เปิดใช้ Visual Builder เมื่อคุณเรียกดูเว็บไซต์ของคุณในเบื้องหน้าหากคุณเชื่อมต่อกับแผงควบคุม WordPress ของคุณ
เมื่อคุณเข้าสู่ Visual Builder คุณสามารถคลิกปุ่มบวกสีเทาเพื่อเพิ่มโมดูลใหม่ลงในเพจของคุณ โมดูลใหม่สามารถเพิ่มได้ภายในแถวเท่านั้น หากคุณกำลังเริ่มหน้าใหม่อย่าลืมเพิ่มแถวในเพจของคุณก่อน
ค้นหาโมดูลคำรับรองในรายการโมดูลและคลิกเพื่อเพิ่มลงในเพจของคุณ รายการโมดูลสามารถค้นหาได้ซึ่งหมายความว่าคุณยังสามารถพิมพ์ "คำรับรอง" จากนั้นกด Enter เพื่อค้นหาและเพิ่มโมดูลรับรองโดยอัตโนมัติ! เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับจากรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง .
ใช้กรณีตัวอย่าง: ส่วนคำรับรองสำหรับหน้าผลิตภัณฑ์
การเพิ่มส่วนคำรับรองเป็นวิธีที่ดีที่สุดวิธีหนึ่ง ส่งเสริม สินค้าหรือบริการของคุณ สำหรับตัวอย่างนี้ ฉันจะแสดงวิธีใช้โมดูลคำรับรองเพื่อสร้างส่วนคำรับรองที่ด้านล่างของหน้า Landing Page ส่งเสริม สินค้าหรือบริการของคุณ ชื่อของส่วนคำรับรองคือ "ลูกค้าที่มีความสุข" สิ่งสำคัญคือต้องมีชื่อที่มีประสิทธิภาพซึ่งทั้งสร้างสรรค์และเกี่ยวข้อง ข้อความรับรองทั้งสามรายการเป็นแบบสั้นในรูปแบบสามคอลัมน์ ตามด้วยปุ่ม CTA ที่ด้านล่างของหน้า
หากต้องการเพิ่มส่วนคำรับรองลงในเพจให้ใช้ตัวสร้างภาพเพื่อเพิ่มส่วนมาตรฐานที่มีแถวสามคอลัมน์ จากนั้นเพิ่มโมดูลข้อความรับรองในคอลัมน์แรกของแถวของคุณ
อัพเดตการตั้งค่าโมดูลข้อความรับรองด้วยสิ่งต่อไปนี้:
แท็บเนื้อหา
ชื่อผู้แต่ง: [ใส่ชื่อ]
ชื่อบทความ: [ป้อนชื่อ]
ชื่อบริษัท: [ป้อนบริษัท]
เนื้อหา: [ป้อนเนื้อหาของคำรับรอง]
URL รูปภาพแนวตั้ง: [ดาวน์โหลดภาพ 90 × 90]
ไอคอนใบเสนอราคา
:
แท็บการออกแบบ
สีข้อความ: แสง
การวางแนวข้อความ:
ตำรวจหน่วยร่างกาย: Roboto Light
ขนาดตัวอักษร: 20px
ความสูงของเส้นร่างกาย: 1.5em
เมื่อคุณสร้างโมดูลข้อความรับรองแรกให้ทำซ้ำสองครั้งแล้วลากโมดูลที่ซ้ำกันเพื่อเติมคอลัมน์ที่สองและสาม
เนื่องจากพารามิเตอร์การออกแบบทั้งหมดถูกถ่ายโอนไปยังโมดูลที่ซ้ำกันในบรรทัดที่สองและสามคุณสามารถย้อนกลับและอัปเดตเนื้อหาของแต่ละรายการได้
นั่นคือทั้งหมดที่
พารามิเตอร์เนื้อหาของโมดูลรับรอง
การตั้งค่าบนแท็บเนื้อหาจะจัดเป็นกลุ่มที่คุณสามารถเปิดเพื่อดูตัวเลือกเพิ่มเติมได้ วิธีนี้ทำให้คุณค้นหาการตั้งค่าที่ต้องการได้ง่ายขึ้นมาก คุณยังสามารถใช้แถบค้นหาที่ด้านบนเพื่อค้นหาแท็บการตั้งค่าทั้งหมดพร้อมกันสำหรับการตั้งค่าที่คุณกำลังมองหา จะทำให้คุณตรงประเด็น!
ตำรา
ที่นี่คุณสามารถเพิ่มชื่อของผู้เขียนคำรับรองชื่อบทความ บริษัท และเนื้อหาของคำรับรองเอง
ภาพ
หากคุณมีรูปโปรไฟล์หรือรูปภาพประเภทอื่น ๆ เพื่อประกอบคำรับรองของคุณคุณจะเพิ่มรูปภาพนี้ได้
ของลูกหนี้เพื้อนำมาชำระหนี
คุณสามารถเพิ่ม URL ของผู้แต่งหรือ บริษัท และควบคุมการเปิดได้ที่นี่
องค์ประกอบ
คุณสามารถเลือกให้ไอคอนใบเสนอราคาปรากฏหรือซ่อนได้ที่นี่
สิ่งแวดล้อม
ที่นี่คุณสามารถเลือกที่จะเพิ่มสีพื้นหลังหรือภาพในคำรับรองของคุณ
ป้ายกำกับผู้ดูแลระบบ
ในรายการดรอปดาวน์นี้คุณสามารถเพิ่มป้ายกำกับผู้ดูแลระบบที่จะปรากฏในตัวสร้างบนแดชบอร์ดตลอดจนในมุมมองตัวสร้างภาพ
พารามิเตอร์การออกแบบของโมดูลข้อความรับรอง
การตั้งค่าบนแท็บออกแบบจะจัดเป็นกลุ่มต่อไปนี้เพื่อให้ค้นหาการตั้งค่าที่คุณต้องการได้ง่ายขึ้น และอย่าลืมว่าคุณสามารถใช้แถบค้นหาเพื่อค้นหาการตั้งค่าที่เร็วยิ่งขึ้น!
ไอคอนอ้างอิง
นี่คือที่ที่คุณสามารถปรับสีของไอคอนใบเสนอราคา
สี่เหลี่ยมแนวตั้ง
การตั้งค่าแนวตั้งช่วยให้คุณสามารถปรับรัศมีขอบความกว้างแนวตั้งและความสูงแนวตั้งสำหรับภาพที่คุณอาจเพิ่มไว้ในแท็บเนื้อหา
ตำรา
การตั้งค่าเหล่านี้ช่วยให้คุณเปลี่ยนสีและการวางแนวของข้อความได้
ข้อความของร่างกาย
การตั้งค่าเหล่านี้ช่วยให้คุณสามารถปรับแบบอักษรน้ำหนักขนาดสีระยะห่างความสูงของบรรทัดและอื่น ๆ
ชายแดน
คุณสามารถเลือกใช้เส้นขอบได้ที่นี่ และหากคุณเลือกใช้เส้นขอบคุณยังสามารถเลือกสีเปลี่ยนความกว้างและเลือกรูปแบบได้อีกด้วย
การเว้นวรรค
ในพื้นที่ระยะห่างคุณสามารถเพิ่มการเติมที่กำหนดเองที่ด้านบนขวาล่างหรือด้านซ้ายของข้อความรับรอง คุณยังสามารถเปลี่ยนค่าเหล่านี้สำหรับเดสก์ท็อปแท็บเล็ตหรืออุปกรณ์เคลื่อนที่
พารามิเตอร์ขั้นสูงของโมดูลข้อความรับรอง
ในแท็บขั้นสูงของโมดูลคำรับรองของคุณคุณสามารถเพิ่ม ID (ตัวระบุ) และคลาส css เฉพาะได้ คุณยังสามารถเพิ่ม css ที่กำหนดเองให้กับตัวเลือก css ที่กำหนดไว้ล่วงหน้า (และที่เลือกไว้ล่วงหน้า) ต่างๆในโมดูลตัวเลื่อนวิดีโอของรายการแบบเลื่อนลง css ที่กำหนดเอง สุดท้ายในรายการแบบเลื่อนลงการเปิดเผยคุณสามารถปรับการมองเห็นโมดูลของคุณบนโทรศัพท์แท็บเล็ตและเดสก์ท็อป
[vc_row center_row=”ใช่”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลดธีม DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลด TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
บทแนะนำ Divi อื่น ๆ
- เว็บไซต์ 5 สำหรับการใช้งานร้านอาหาร Divi ธีม
- วิธีการเพิ่มข้อความในผลิตภัณฑ์ Divi WooCommerce
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- วิธีปรับเปลี่ยนกริดของบล็อกด้วย Divi
- วิธีการใช้บทบาทของบรรณาธิการ Divi บน WordPress
- วิธีสร้างแถบเลื่อน Divi แบบเต็มหน้าจอ
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- คุณสมบัติที่คุณอาจไม่รู้เกี่ยวกับ Divi
- วิธีการใช้ Divi Builder ใน WordPress
- วิธีใช้โมดูลเลื่อนภาพ Divi
- วิธีการใช้โมดูล Divi Builder Flip
- วิธีการเพิ่มโมดูลข้อความรับรองในตัวสร้าง Divi
- วิธีใช้โมดูลข้อความ Divi
- วิธีสร้างแถบเลื่อนบน Divi
- วิธีแก้ไขบทบาทผู้ใช้ Divi
- วิธีใช้โมดูล Divi Social Media
- วิธีใช้โมดูลร้านค้าในธีม WordPress Divi
- วิธีใช้โมดูลด้านข้าง Divi
- วิธีการใช้โมดูลตารางราคา Divi
- วิธีการใช้โมดูลชื่อเรื่องของสิ่งพิมพ์ของ Divi
- วิธีเพิ่มโมดูลวิดีโอของ Divi
- วิธีใช้โมดูลการนำทางบทความ
- วิธีการใช้โมดูลค้นหา Divi
- วิธีใช้โมดูลกระเป๋าสตางค์ Divi
- วิธีการใช้โมดูลคนบน Divi Builder
- วิธีใช้โมดูลกระเป๋าสตางค์กับตัวกรอง Divi
- วิธีการใช้โมดูลเลื่อนความกว้างเต็ม
- วิธีใช้โมดูล Divi Builder Image
- วิธีใช้โมดูลการนำทางความกว้างเต็มรูปแบบของ Divi Builder
- วิธีการใช้โมดูลคลังภาพ
- วิธีการใช้โมดูลบัตร Divi Builder Full-Width Card
- วิธีใช้โมดูล Divi Full Width Portfolio
- วิธีใช้โมดูลส่วนหัวแบบเต็มความกว้างของ Divi
- วิธีใช้โมดูล Divi Counter
- วิธีใช้แถบเลื่อนบทความบนเครื่องมือสร้าง Divi
- วิธีใช้โมดูล Divi Email Optin