การเพิ่มรายชื่อผู้รับจดหมายของคุณเป็นเรื่องง่ายโดยใช้โมดูลการสมัครรับจดหมายข่าวที่นำเสนอโดย ธีม WordPress ดีวี โมดูลนี้รองรับการบูรณาการ MailChimp , Aweber et Feedburner.

บูรณาการ mailchimp divi.png

วิธีเพิ่มโมดูลการสมัครรับจดหมายข่าวในเพจของคุณ

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

ใช้ divi builder

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

อีเมล optin.png

ค้นหาโมดูลอีเมล optin ในรายการโมดูลและคลิกเพื่อเพิ่มลงในเพจของคุณ รายการโมดูลสามารถค้นหาได้ซึ่งหมายความว่าคุณสามารถพิมพ์คำว่า "email optin" จากนั้นคลิก "Enter" เพื่อค้นหาและเพิ่มโมดูล optin โดยอัตโนมัติ! เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับจากรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง .

การกำหนดค่าบัญชีอีเมล

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

อีเมล optin configuration.png

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

เชื่อมโยงบัญชี Aweber ของคุณ

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

เข้าสู่ระบบ aweber divi.png

จากนั้นคัดลอกและวางคีย์ในฟิลด์ รหัส API ในการตั้งค่าโมดูลจากนั้นคลิกปุ่ม ส่ง .

บัญชีของคุณได้รับการเชื่อมโยงแล้วและคุณสามารถเลือกรายชื่ออีเมลของคุณจากเมนูแบบเลื่อนลง รายการ AWeber .

เชื่อมโยงบัญชี MailChimp ของคุณ

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

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

api mailchimp divi.png

ตัวอย่างการใช้งาน: การเพิ่มโพสต์การสมัครรับข้อมูลที่ด้านล่างของโพสต์บล็อก

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

visual Builder divi example.jpg

ใช้ Visual Builder เพิ่มส่วนมาตรฐานด้วยแถว 1/2 คอลัมน์ (2 คอลัมน์) ใต้ส่วนที่มีเนื้อหาโพสต์

เนื่องจากตัวอย่างนี้จะเป็นข้อเสนอ e-book กับ optin ให้เพิ่มโมดูลรูปภาพที่คอลัมน์ด้านซ้ายและอัปโหลดรูปภาพของหนังสือ ตั้งค่าการจัดแนวรูปภาพเป็น "กึ่งกลาง" และตั้งค่าความกว้างสูงสุดของรูปภาพเป็น 300px

เพิ่มโมดูลอีเมล Optin divi.jpg

จากนั้นเพิ่มโมดูล Optin Email ในคอลัมน์ด้านขวา

ตัวอย่างอีเมล optin tutorial divi.png

อัปเดตการตั้งค่าอีเมล Optin ดังนี้:

ตัวเลือกเนื้อหา

หัวข้อ: ข้อความปุ่ม "สมาชิกใหม่รับสำเนา E-Book ของฉันฟรี": "สมัครสมาชิก" เนื้อหา: "เรื่องราวที่น่าสนใจที่จะทำให้คุณไม่ต้องนั่งติดขอบที่นั่ง ผู้ให้บริการ: [เลือกผู้ให้บริการ] 
เลือกรายการหรือชื่อสตรีม

ตัวเลือกการออกแบบ

สีพื้นหลังฟิลด์: # f1f1f1 สีพื้นหลัง: #ffffff สีของเส้นขอบโฟกัส: ใช่สีขอบ: # 02b875 สีข้อความ: การวางแนวข้อความสีเข้ม: ส่วนหัวตรงกลาง แบบอักษร: PT ที่ไม่มีส่วนหัวขนาดตัวอักษร: 35px ความสูงส่วนหัว: 1.3em ขนาดตัวอักษร: 18px ช่องว่างที่กำหนดเอง: ขวา 20px ลักษณะด้านซ้าย 20px ใช้แบบกำหนดเองสำหรับปุ่ม: ใช่ปุ่มขนาดข้อความ: 26px สีของปุ่มข้อความ: #ffffff สีพื้นหลังของปุ่ม: # 02b875 ความกว้างของขอบปุ่ม: 2 สีขอบของปุ่ม: # 02b875 ปุ่มตัวอักษรระยะห่าง: 1px ไอคอนปุ่มเพิ่ม: ใช่ไอคอนปุ่ม: [เพิ่มไอคอน]

อีเมล ebook ตัวอย่าง divi configuration.png

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

ตัวเลือกเนื้อหาโมดูลอีเมล OptIn

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

การตั้งค่าตัวเลือกอีเมล options.png

ชื่อเรื่อง

ใส่ชื่อเรื่องของคุณ ฟอร์ม การลงทะเบียนที่นี่

ข้อความปุ่ม

ระบุข้อความปุ่มลงทะเบียนที่นี่

เนื้อหา

ฟิลด์นี้เป็นที่ที่คุณสามารถเข้าสู่เนื้อหาของโมดูลการลงทะเบียน

ผู้ให้บริการ

ที่นี่คุณสามารถเลือกผู้ให้บริการรายชื่ออีเมลที่คุณใช้ ปัจจุบันโมดูลรองรับการผสานรวม MailChimp , Aweber et Feedburner. เลือกผู้ให้บริการของคุณจากรายการจากนั้นดำเนินการตามตัวเลือกต่อไปนี้

รายการ MailChimp

หากคุณเลือก MailChimp ในฐานะผู้ให้บริการตัวเลือกนี้จะปรากฏขึ้น คุณสามารถเลือกรายการ MailChimp เพื่อเพิ่มลูกค้าได้ที่นี่ หากคุณไม่เห็นรายการใด ๆ ที่นี่คุณต้องตรวจสอบให้แน่ใจว่าได้ตั้งค่าคีย์ MailChimp API ใน ePanel และคุณมีอย่างน้อยหนึ่งรายการในบัญชี MailChimp หากคุณได้เพิ่มรายการใหม่ แต่ไม่ปรากฏที่นี่ให้เปิดใช้งานตัวเลือก 'สร้างรายการ MailChimp ใหม่' ใน ePanel อย่าลืมปิดการใช้งานเมื่อสร้างรายการขึ้นมาใหม่

รายชื่อของ Aweber

หากคุณได้เลือก Aweber ในฐานะผู้ให้บริการตัวเลือกนี้จะปรากฏขึ้น คุณสามารถเลือกรายการ Aweber เพื่อเพิ่มลูกค้าได้ที่นี่ หากคุณไม่เห็นรายการใด ๆ ที่นี่คุณต้องตรวจสอบให้แน่ใจว่า Aweber ได้รับการกำหนดค่าอย่างถูกต้องใน ePanel และคุณมีอย่างน้อยหนึ่งรายการในบัญชี Aweber หากคุณได้เพิ่มรายการใหม่ แต่ไม่ปรากฏที่นี่ให้เปิดใช้งานตัวเลือก 'สร้างรายการ Aweber ใหม่' ใน ePanel อย่าลืมปิดการใช้งานเมื่อสร้างรายการขึ้นมาใหม่

ชื่อเรื่อง Feedburner

หากคุณได้เลือก Feedburner ในฐานะผู้ให้บริการตัวเลือกนี้จะปรากฏขึ้น นี่คือวิธีที่คุณระบุบัญชี Feedburner ของคุณ คุณจะต้องป้อนชื่อฟีดของคุณซึ่ง สามารถพบได้ที่นี่ .

ใช้สีพื้นหลัง

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

สีพื้นหลัง

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

ป้ายกำกับการดูแลระบบ

สิ่งนี้จะเปลี่ยนป้ายชื่อโมดูลในตัวสร้างเพื่อให้ระบุตัวตนได้ง่าย เมื่อคุณใช้มุมมอง WireFrame ใน Visual Builder ป้ายเหล่านี้จะปรากฏในบล็อกโมดูลของอินเทอร์เฟซ Divi Builder

ออกแบบส่วน Email Optin

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

ตัวเลือกการออกแบบโมดูลอีเมล optin.png

สีพื้นหลังฟิลด์แบบฟอร์ม

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

สีข้อความของฟิลด์แบบฟอร์ม

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

สีพื้นหลัง

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

สีของข้อความในโฟกัส

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

ใช้สีขอบโฟกัส

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

สีของเส้นขอบโฟกัส

ด้วยการใช้การตั้งค่านี้คุณสามารถเปลี่ยนสีของเส้นขอบที่ปรากฏบนฟิลด์อินพุตที่โฟกัส

สีข้อความ

หากสีพื้นหลังเป็นสีเข้มควรตั้งค่าสีข้อความเป็น "แสง" อย่างไรก็ตามหากสีพื้นหลังเป็นสีอ่อนควรตั้งค่าสีข้อความเป็น "มืด"

การวางแนวข้อความ

เมนูแบบเลื่อนลงนี้ช่วยให้คุณระบุการวางแนวข้อความของคุณว่าจะจัดชิดซ้ายจัดกึ่งกลางหรือชิดขวา

แบบอักษรส่วนหัว

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

ขนาดตัวอักษรส่วนหัว

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

สีข้อความส่วนหัว

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

ระยะห่างของตัวอักษรส่วนหัว

ระยะห่างของตัวอักษรมีผลต่อช่องว่างระหว่างตัวอักษรแต่ละตัว หากคุณต้องการเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัวในข้อความส่วนหัวของคุณให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

ความสูงของแถวส่วนหัว

ความสูงของแถวมีผลต่อช่องว่างระหว่างแต่ละแถวของข้อความส่วนหัวของคุณหากคุณต้องการเพิ่มช่องว่างระหว่างแต่ละแถวให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการใน ช่องป้อนข้อมูลทางด้านขวาของเคอร์เซอร์ ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

แบบอักษร Body

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

ขนาดแบบอักษร Body

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

สีตัวอักษร

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

ระยะห่างของตัวอักษร

ระยะห่างของตัวอักษรมีผลต่อช่องว่างระหว่างตัวอักษรแต่ละตัว หากคุณต้องการเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัวในข้อความของคุณให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

ความสูงของเส้นร่างกาย

ความสูงของเส้นมีผลต่อช่องว่างระหว่างข้อความแต่ละบรรทัดในเนื้อหาของคุณหากคุณต้องการเพิ่มช่องว่างระหว่างแต่ละบรรทัดให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่คุณต้องการในช่องป้อนข้อมูล ที่อยู่ทางขวาของเคอร์เซอร์ ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

ใช้เส้นขอบ

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

สีของเส้นขอบ

ตัวเลือกนี้มีผลต่อสีของเส้นขอบของคุณ เลือกสีที่กำหนดเองจากตัวเลือกสีเพื่อใช้กับเส้นขอบของคุณ

ความกว้างของเส้นขอบ

โดยค่าเริ่มต้นเส้นขอบจะกว้าง 1 พิกเซล คุณสามารถเพิ่มค่านี้ได้โดยการลากแถบเลื่อนช่วงหรือป้อนค่าที่กำหนดเองในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน รองรับหน่วยวัดที่กำหนดเองซึ่งหมายความว่าคุณสามารถเปลี่ยนหน่วยเริ่มต้นจาก "px" เป็นอย่างอื่นได้เช่น em, vh, vw เป็นต้น

สไตล์ชายแดน

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

ระยะขอบที่กำหนดเอง

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

ช่องว่างภายในที่กำหนดเอง

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

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม

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

ขนาดข้อความของปุ่มข้อความ

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

สีของข้อความปุ่ม

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

สีพื้นหลังของปุ่ม

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

ปุ่มความกว้างของเส้นขอบ

ปุ่ม Divi ทั้งหมดมีขอบ 2px ตามค่าเริ่มต้น เส้นขอบนี้สามารถเพิ่มหรือลดได้โดยใช้การตั้งค่านี้ สามารถลบเส้นขอบได้โดยป้อนค่าเป็น 0

สีเส้นขอบของปุ่ม

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

รัศมีขอบของปุ่ม

รัศมีของเส้นขอบมีผลต่อความกลมของมุมปุ่มของคุณ ตามค่าเริ่มต้นปุ่มต่างๆใน Divi จะมีรัศมีขอบเล็ก ๆ ที่ล้อมรอบมุม 3 พิกเซล คุณสามารถลดค่านี้เป็น 0 เพื่อสร้างปุ่มสี่เหลี่ยมหรือเพิ่มขึ้นอย่างมากเพื่อสร้างปุ่มที่มีขอบวงกลม

การเว้นวรรคของตัวอักษรปุ่ม

ระยะห่างของตัวอักษรมีผลต่อช่องว่างระหว่างตัวอักษรแต่ละตัว หากคุณต้องการเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัวในข้อความปุ่มของคุณให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

แบบอักษรปุ่ม

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

เพิ่มไอคอนปุ่ม

ปิดใช้งานการตั้งค่านี้จะลบไอคอนออกจากปุ่มของคุณ ตามค่าเริ่มต้นปุ่ม Divi ทั้งหมดจะแสดงไอคอนลูกศรบนโฮเวอร์

ไอคอนปุ่ม

หากเปิดใช้งานไอคอนคุณสามารถใช้การตั้งค่านี้เพื่อเลือกไอคอนที่จะใช้ในปุ่มของคุณ Divi มีไอคอนต่างๆให้เลือก

ปุ่มไอคอนสี

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

ไอคอนตำแหน่งปุ่ม

คุณสามารถเลือกที่จะแสดงไอคอนของปุ่มของคุณไปทางซ้ายหรือขวาของปุ่มของคุณ

แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม

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

สีของปุ่มวางเมาส์

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

สีพื้นหลังของปุ่มวางเมาส์

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

ปุ่มปักหมุดสี

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

ปุ่มรัศมีขอบเลื่อน

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

ปุ่มเว้นวรรคบันทึกย่อ

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

ตัวเลือกขั้นสูงสำหรับ OptIn ของอีเมล

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

โมดูลอีเมล optin

รหัส CSS

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

ชั้น CSS

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

CSS ที่กำหนดเอง

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

ความชัดเจน

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

บทเรียนอื่น ๆ เกี่ยวกับ WordPress Theme Divi

[vc_row center_row = "ใช่"] [vc_column width = "1/2″] [vcex_button target =" blank "layout =" expand "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] [/ width_column] [» vc_column] [ » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" Layout = "ขยาย" align = "กลาง" 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 "] ดาวน์โหลดเทมเพลต DIVI [/ vcex_button] [/ vc_column] [/ vc_row]