5 การออกแบบการเลือกรับอีเมลที่คุณสร้างได้ด้วยโมดูลการเลือกรับอีเมลของ Divi
เผยแพร่แล้ว: 2019-01-14เราทุกคนรักสมาชิกใหม่ในรายชื่ออีเมลของเรา และหนึ่งในวิธีหลักในการรับสมาชิกใหม่คือการจัดเตรียมแบบฟอร์มการเลือกรับอีเมลที่ออกแบบมาอย่างดีให้ผู้เยี่ยมชมของคุณ นั่นเป็นเหตุผลที่ในบทช่วยสอนนี้ ฉันจะแสดงให้คุณเห็นถึงวิธีการสร้างการออกแบบที่แตกต่างกันห้าแบบด้วยโมดูลการเลือกรับอีเมล Divi เพื่อช่วยจุดประกายจินตนาการของคุณเกี่ยวกับสิ่งที่เป็นไปได้ด้วยโมดูลที่ทรงพลังและยืดหยุ่นนี้
แอบมอง
นี่คือตัวอย่างการออกแบบโมดูล Divi Email Opt-in 5 แบบที่เราจะทำการแก้ไขในวันนี้
#1 Shadow Stacks Opt-in
เริ่มออกแบบ #1
#2 การเลือกขนาดใหญ่และน้อยที่สุด
เริ่มออกแบบ #2
#3 Skinny Opt-in
เริ่มออกแบบ #3
#4 การเลือกรับข้อเสนอหนังสือ
เริ่มออกแบบ #4
#5 การเลือกเฟรมคัตเอาท์
เริ่มออกแบบ #5
สิ่งที่คุณต้องการเพื่อเริ่มต้น
สมัครสมาชิกช่อง Youtube ของเรา
สำหรับบทช่วยสอนนี้ สิ่งที่คุณต้องมีคือ Divi เราจะสร้างแต่ละส่วนตั้งแต่เริ่มต้น ดังนั้นจึงไม่จำเป็นต้องมีเลย์เอาต์ที่สร้างไว้ล่วงหน้า อย่างไรก็ตาม ฉันจะใช้รูปภาพบางส่วนจากชุดเค้าโครงบางส่วนของเรา แต่คุณสามารถใช้รูปภาพของคุณเองได้หากต้องการ
นอกจากนี้ สิ่งสำคัญคือต้องรู้ว่าคุณจะไม่สามารถดูฟิลด์แบบฟอร์ม optin บนไซต์สดได้ จนกว่าคุณจะกำหนดผู้ให้บริการ/รายชื่ออีเมลให้กับโมดูลการเลือกรับอีเมลของคุณ คุณสามารถทำได้ในการตั้งค่าการเลือกอีเมลของคุณภายใต้บัญชีอีเมล
ทีนี้มาดูการออกแบบเหล่านั้นกัน!
#1 Shadow Stacks Opt-in
การออกแบบนี้เพิ่มเงาสองกล่องให้กับโมดูลการเลือกรับอีเมล Divi สำหรับเอฟเฟกต์การซ้อนที่ไม่เหมือนใครซึ่งทำให้แบบฟอร์มปรากฏขึ้น เงาของกล่องแรกจะถูกเพิ่มลงในโมดูลการเลือกรับอีเมล และเงาของกล่องที่สองจะถูกเพิ่มลงในแถวซึ่งมีขนาดและเส้นขอบที่กำหนดเองเพื่อให้ทำงานได้
นี่คือวิธีการทำ
ขั้นแรกให้สร้างส่วนใหม่ด้วยแถวหนึ่งคอลัมน์ และเพิ่มโมดูลการเลือกรับอีเมลลงในแถว
เปิดการตั้งค่าการเลือกรับอีเมลและอัปเดตสิ่งต่อไปนี้:
สีพื้นหลัง: #1a0a38
เลย์เอาต์: ร่างกายอยู่ด้านบน แบบฟอร์มอยู่ด้านล่าง
เขตข้อมูล มุมโค้งมน: 0px
การวางแนวข้อความ: ศูนย์
น้ำหนักแบบอักษรของชื่อเรื่อง: เบา
ขนาดข้อความชื่อเรื่อง: 36px
สีข้อความของปุ่ม: #ffffff
สีพื้นหลังของปุ่ม: #00ac69
ความกว้างของขอบปุ่ม: 0px
รัศมีเส้นขอบของปุ่ม: 0px
Custom Padding: 3vw บน, 3vw ล่าง, 5vw ซ้าย, 5vw ขวา
ตอนนี้ มาเพิ่มเลเยอร์เงากล่องแรกของเราที่ด้านหลังโมดูลการเลือกรับอีเมลของเรา
กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: 25px
ตำแหน่งแนวตั้งเงาของกล่อง: -25px
เงาสี: rgba(26,10,56,0.82)
ตอนนี้ มาเพิ่มตัวอย่างเล็ก ๆ ของ CSS ที่กำหนดเองเพื่อลบช่องว่างภายในด้านซ้ายที่เพิ่มลงในแบบฟอร์มโดยค่าเริ่มต้น ไปที่แท็บขั้นสูงและเพิ่ม CSS ต่อไปนี้ภายใต้แบบฟอร์มการเลือกใช้
padding-left: 0px !important;
ที่ดูแลการตั้งค่าโมดูลการเลือกรับอีเมล ทีนี้มาแก้ไขแถวของเรากัน เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:
ความกว้างที่กำหนดเอง: 600px
ช่องว่างภายในแบบกำหนดเอง: บน 25px ล่าง 0px ขวา 25px
ความกว้างขอบล่าง: 25px
สีขอบล่าง: rgba(0,0,0,0)
ความกว้างของเส้นขอบด้านซ้าย: 25px
สีขอบด้านซ้าย: rgba(0,0,0,0)
ตอนนี้เราสามารถเพิ่มเงาของกล่องลงในแถวได้
กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: 50px
ตำแหน่งแนวตั้งเงาของกล่อง: -50px
ความแรงของการกระจายเงาของกล่อง: -25px
เงาสี: rgba(26,10,56,0.55)
ตอนนี้เรามาดูการออกแบบขั้นสุดท้ายกัน
#2 การเลือกขนาดใหญ่และน้อยที่สุด
การออกแบบการเลือกรับอีเมลนี้เรียบง่าย สะอาดตา และมีขนาดใหญ่ ช่องแบบฟอร์มจะปรับขนาดตามขนาดของเบราว์เซอร์เพื่อให้ดูดีบนอุปกรณ์ทั้งหมด และไม่ใหญ่เกินไปที่จะบังคับให้ผู้ใช้เลื่อนดู
นี่คือวิธีการทำ
ขั้นแรกให้สร้างส่วนใหม่ด้วยแถวหนึ่งคอลัมน์ และเพิ่มโมดูลการเลือกรับอีเมลลงในแถว
เปิดการตั้งค่าการเลือกรับอีเมลและอัปเดตเนื้อหาเพื่อรวมข้อความชื่อและส่วนท้ายของคุณ
จากนั้นอัปเดตพื้นหลังด้วยสีเข้มหรือรูปภาพ:
สีพื้นหลัง: #121212
ภาพพื้นหลัง: เป็นตัวเลือก ฉันใช้จาก Podcast Layout Pack
ก่อนที่เราจะไปยังแท็บการออกแบบเพื่อการปรับแต่งเพิ่มเติม เราต้องทำให้มีที่ว่างสำหรับองค์ประกอบแบบฟอร์มขนาดใหญ่ที่เราจะเพิ่มเข้าไป ในการดำเนินการนี้ ให้ไปที่การตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:
ความกว้างที่กำหนดเอง: 100%
เคล็ดลับ: การใช้ความกว้างที่กำหนดเอง 100% เป็นวิธีที่ดีในการตรวจสอบให้แน่ใจว่าการออกแบบของคุณไม่มีระยะขอบขวาหรือซ้ายบนมือถือ หากคุณใช้ตัวเลือก “ทำให้เต็มความกว้าง” ความกว้างสูงสุดของคุณจะเท่ากับ 89% ดังนั้นคุณจึงยังมีระยะขอบบนมือถือ
ตอนนี้ให้ย้อนกลับไปที่การตั้งค่าโมดูลการเลือกรับอีเมลและอัปเดตการออกแบบต่อไปนี้:
เลย์เอาต์: ร่างกายอยู่ด้านบน แบบฟอร์มอยู่ด้านล่าง
สีพื้นหลังของฟิลด์แบบฟอร์ม: rgba(0,0,0,0)
เขตข้อมูล มุมโค้งมน: 0px
ฟิลด์ ความกว้างของเส้นขอบด้านล่าง: 2px
ฟิลด์ขอบด้านล่างสี: #ffffff
การวางแนวข้อความ: ศูนย์
แบบอักษรของชื่อเรื่อง: Lato
น้ำหนักแบบอักษรของชื่อเรื่อง: เบา
รูปแบบตัวอักษรของชื่อเรื่อง: TT
ขนาดข้อความชื่อเรื่อง: 4vw
ความสูงของบรรทัดชื่อเรื่อง: 1em
สีข้อความของฟิลด์: #ffffff
ฟอนต์ฟิลด์: Lato
น้ำหนักแบบอักษรของฟิลด์: เบา
ขนาดข้อความของฟิลด์: 3.5vw
ช่องว่างระหว่างตัวอักษรภาคสนาม: 0.1em
ความสูงของเส้นสนาม: 1.3em
ระยะห่างระหว่างตัวอักษร: 0.5em
ขนาดข้อความของปุ่ม: 4vw
รัศมีเส้นขอบของปุ่ม: 0px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 0.1em
แบบอักษรของปุ่ม: Lato
น้ำหนักแบบอักษร: เบา
Custom Padding: บน 10vw, 10vw ล่าง, 10vw ซ้าย, 10vw ขวา
สังเกตการใช้หน่วยความยาว vw สำหรับขนาดตัวอักษรรวมกับหน่วยความยาว em สำหรับความสูงของบรรทัดและการเว้นวรรคตัวอักษร ซึ่งช่วยให้ข้อความและการออกแบบสามารถปรับขนาดได้อย่างราบรื่นเมื่อปรับเบราว์เซอร์ของคุณ
ขั้นตอนสุดท้ายคือการรวมตัวอย่าง CSS ที่กำหนดเองบางส่วนเพื่อขัดเกลาการออกแบบ ไปที่แท็บขั้นสูงและเพิ่ม CSS ที่กำหนดเองต่อไปนี้ภายใต้ฟิลด์แบบฟอร์มการเลือกใช้:
font-size: 3.5vw;
ซึ่งจะช่วยให้ขนาดของข้อความเมื่อพิมพ์เพื่อให้ตรงกับข้อความตัวแทนในช่องแบบฟอร์มของคุณ
จากนั้นให้เพิ่มระยะขอบแบบกำหนดเองเหนือปุ่มเพื่อให้มีพื้นที่หายใจเล็กน้อย เพิ่มสิ่งต่อไปนี้ภายใต้ปุ่มสมัครสมาชิก:
margin-top: 3.5vw;
ตอนนี้เรามาดูการออกแบบขั้นสุดท้ายกัน
#3 Skinny Opt-in
การออกแบบครั้งต่อไปนี้แน่นอนว่าจะเป็นโซลูชันยอดนิยมสำหรับบริษัทและบล็อกที่ต้องการประหยัดพื้นที่แนวตั้งในโพสต์หรือหน้า Landing Page แม้ว่าโมดูล Email Opt-in ของ Divi จะดีที่สุดสำหรับรูปแบบแนวตั้งแบบดั้งเดิม แต่จริงๆ แล้ว คุณสามารถแปลงแบบฟอร์มเป็นแบบฟอร์มแนวนอนแบบบางได้โดยใช้ตัวอย่าง CSS เพียงเล็กน้อย
นี่คือวิธีการทำ
สร้างส่วนใหม่ด้วยแถวหนึ่งคอลัมน์ และเพิ่มโมดูลการเลือกรับอีเมลในแถว
เปิดการตั้งค่าการเลือกรับอีเมลและอัปเดตเนื้อหาเพื่อรวมชื่อเรื่องแต่ไม่มีอะไรอื่น
จากนั้นอัปเดตการออกแบบด้วยสีพื้นหลังและปุ่มดังนี้:
สีพื้นหลัง: #54677d
เลย์เอาต์: ร่างกายอยู่ด้านบน แบบฟอร์มอยู่ด้านล่าง
การวางแนวข้อความ: ศูนย์
สีพื้นหลังของปุ่ม: #b0c94f
ความกว้างของขอบปุ่ม: 0px
ตอนนี้ก็ถึงเวลาสำหรับ CSS ที่กำหนดเอง เนื่องจากเราต้องการการออกแบบแบบฟอร์มแบบบางบนเดสก์ท็อปเท่านั้น (ไม่ใช่บนมือถือ) เราจะเพิ่ม CSS ลงในหน้า (ภายใต้การตั้งค่าหน้า) โดยใช้รหัส CSS ที่กำหนดเองเพื่อกำหนดเป้าหมายรูปแบบแบบฟอร์ม
ในการดำเนินการนี้ ให้ไปที่แท็บขั้นสูงและกำหนด CSS ID ที่กำหนดเองให้กับโมดูลการเลือกใช้
CSS ID: ผอม
ซึ่งจะใช้เพื่อกำหนดเป้าหมายแบบฟอร์มนี้ด้วย CSS ภายนอกที่เราจะเพิ่มลงในเพจ
ตอนนี้เปิดการตั้งค่าหน้า Divi Builder และเพิ่ม CSS ต่อไปนี้ภายใต้แท็บขั้นสูง
@media (min-width: 980px){
#skinny.et_pb_newsletter .et_pb_newsletter_fields {
flex-wrap: nowrap !important;
}
#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
flex-basis: 23%;
}
}
#skinny .et_pb_newsletter_form {
padding-left: 0px;
}
เนื่องจาก Divi ใช้ flex เพื่อจัดรูปแบบแบบฟอร์มบนแบ็กเอนด์อยู่แล้ว CSS นี้จึงนำคุณสมบัติ flex-wrap ที่ทำให้ฟิลด์ของฟอร์มจัดแนวในแนวตั้ง ผลลัพธ์คือเลย์เอาต์แนวนอนของฟิลด์ฟอร์ม การปรับคุณสมบัติ flex-basis เป็น 23% โดยทั่วไปจะกำหนดความกว้างของแต่ละฟิลด์ในฟอร์ม และเนื่องจากเราได้เพิ่ม CSS ลงในคิวรี่สื่อ การออกแบบจะเกิดขึ้นบนเดสก์ท็อปที่มีเค้าโครงเริ่มต้นของแบบฟอร์มที่แสดงบนมือถือเท่านั้น
นี่คือการออกแบบขั้นสุดท้าย
#4 การเลือกรับข้อเสนอหนังสือ
การออกแบบนี้รวมภาพสองสามภาพไว้ในโมดูลการเลือกรับอีเมลเพื่อวัตถุประสงค์ในการส่งเสริมข้อเสนอหนังสือฟรีสำหรับการลงทะเบียน ในการทำเช่นนี้ สิ่งที่คุณต้องทำคือเพิ่มรูปภาพโดยใช้ตัวแก้ไข wysiwyg ในตัวเพื่อเพิ่มคำอธิบายและเนื้อหาส่วนท้าย เป็นความจริงที่คุณออกแบบให้สำเร็จได้โดยการรวมโมดูลการเลือกรับอีเมลกับโมดูลอื่นๆ ในแถวสองคอลัมน์ แต่ฉันคิดว่ามันน่าจะเป็นประโยชน์ที่จะแสดงวิธีทำทั้งหมดในโมดูลเดียวกัน
นี่คือวิธีการทำ
สร้างส่วนใหม่ด้วยแถวหนึ่งคอลัมน์ และเพิ่มโมดูลการเลือกรับอีเมลในแถว
เปิดการตั้งค่าการเลือกรับอีเมลและอยู่ในแท็บเนื้อหา
ภายใต้คำอธิบาย ให้ย่อข้อความเริ่มต้นให้เหลือเพียงสองสามประโยค จากนั้นเพิ่มรูปภาพจากไลบรารีสื่อของคุณโดยคลิกปุ่มเพิ่มสื่อ
คุณต้องการให้แน่ใจว่ารูปภาพมีความกว้างไม่เกิน 200px สำหรับตัวอย่างนี้ ฉันใช้ขนาดกลางของรูปภาพ
ใต้ส่วนท้าย ให้เพิ่มประโยคสองสามประโยคสำหรับเนื้อหาข้อความส่วนท้าย จากนั้นคลิกปุ่ม เพิ่มสื่อ เพื่อเพิ่มภาพโลโก้ใต้ข้อความ (แน่นอนว่าไม่บังคับ)
เพื่อให้แน่ใจว่ารูปภาพอยู่กึ่งกลาง ให้ตั้งค่าตัวเลือกการจัดตำแหน่งให้อยู่กึ่งกลางเมื่อเพิ่มรูปภาพจากไลบรารีสื่อ
ตอนนี้คุณพร้อมที่จะอัปเดตการออกแบบที่เหลือแล้ว เริ่มต้นด้วยการให้โมดูลมีภาพพื้นหลังและการไล่ระดับสีพื้นหลังเหนือรูปภาพเพื่อทำให้ข้อความอ่านง่ายขึ้น
ภาพพื้นหลัง: [เพิ่มรูปภาพ]
พื้นหลังไล่ระดับสีซ้าย: rgba(0,0,0,0.5)
พื้นหลังไล่ระดับสีขวาสี: rgba(0,0,0,0.5)
วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่
จากนั้นอัปเดตส่วนที่เหลือของการออกแบบดังนี้:
สีข้อความของปุ่ม: #333333
สีพื้นหลังของปุ่ม: #ffcb7a
ความกว้างของขอบปุ่ม: 0px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 5px
น้ำหนักแบบอักษร: Ultra Bold
รูปแบบตัวอักษร: TT
ความกว้าง: 700px
การจัดตำแหน่งโมดูล: ศูนย์
Custom Padding: 3vw บน, 3vw ล่าง, 3vw ซ้าย, 3vw ขวา
นี่คือการออกแบบขั้นสุดท้าย
#5 การเลือกเฟรมคัตเอาท์
เทคนิคการออกแบบที่เรียบง่ายนี้เป็นวิธีที่ยอดเยี่ยมในการทำให้อีเมลของคุณมีรูปลักษณ์ที่ไม่เหมือนใคร เคล็ดลับคือการใช้ตัวแบ่งส่วนที่มีสีเดียวกับพื้นหลังของส่วน จากนั้นโดยปรับความสูงของตัวแบ่ง คุณสามารถซ้อนทับแบบฟอร์มการเลือกรับอีเมลเพื่อตัดขอบออกด้วยวิธีที่ไม่เหมือนใครเพื่อให้ได้เอฟเฟกต์การจัดเฟรมที่สวยงาม
นี่คือวิธีการทำ
สร้างส่วนใหม่ด้วยแถวหนึ่งคอลัมน์ และเพิ่มโมดูลการเลือกรับอีเมลในแถว
เปิดการตั้งค่าการเลือกรับอีเมลและปรับพื้นหลังให้โมดูลของคุณ
พื้นหลังไล่ระดับสีซ้าย: #8300e9
ไล่สีพื้นหลังด้านขวา: #06c8ff
ประเภทการไล่ระดับสี: เรเดียล
ทิศทางเรเดียล: บนซ้าย
จากนั้นอัปเดตส่วนที่เหลือของการออกแบบดังนี้:
น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
ขนาดข้อความชื่อเรื่อง: 36px
ความกว้าง: 70% (เดสก์ท็อป), 100% (แท็บเล็ตและสมาร์ทโฟน)
การจัดตำแหน่งโมดูล: ศูนย์
ช่องว่างภายในที่กำหนดเอง: 6vw บน, 6vw ล่าง, 6vw ซ้าย, 6vw ขวา
มุมโค้งมน: 50px บนซ้าย, 0px บนขวา, 50px ล่างขวา, 0px ล่างซ้าย
บันทึกการตั้งค่าของคุณ
จากนั้นอัปเดตการตั้งค่าแถวของคุณด้วยความกว้างที่กำหนดเอง
ความกว้างที่กำหนดเอง: 100%
ตอนนี้เราพร้อมที่จะปรับแต่งการตั้งค่าส่วนเพื่อเพิ่มเอฟเฟกต์เฟรมคัตเอาท์ของเราด้วยตัวแบ่งส่วนเหล่านั้น
เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:
สีพื้นหลัง: #222222
สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
ตัวแบ่งสีด้านบน: #222222 (ตรวจสอบให้แน่ใจว่าสีนี้ตรงกับสีพื้นหลังของส่วน)
ความสูงของตัวแบ่งด้านบน: 12vw (เดสก์ท็อป), 150px (แท็บเล็ตและสมาร์ทโฟน)
การจัดเรียงตัวแบ่งด้านบน: ด้านบนของเนื้อหาส่วน
สไตล์ตัวแบ่งด้านล่าง: ดูภาพหน้าจอ
ตัวแบ่งสีด้านล่าง: #222222 (ตรวจสอบให้แน่ใจว่าสีนี้ตรงกับสีพื้นหลังของส่วน)
ความสูงของตัวแบ่งด้านล่าง: 12vw (เดสก์ท็อป), 150px (แท็บเล็ตและสมาร์ทโฟน)
ตัวแบ่งแนวนอน ทำซ้ำแนวนอน: 0.8x
Bottom Divider Flip: แนวตั้งและแนวนอน
การจัดเรียงตัวแบ่งด้านล่าง: ด้านบนของเนื้อหาส่วน
ตอนนี้เรามาดูการออกแบบขั้นสุดท้ายกัน
ดูโพสต์เกี่ยวกับการสร้างการออกแบบกรอบที่ไม่เหมือนใครเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเทคนิคการออกแบบนี้
ความคิดสุดท้าย
การออกแบบการเลือกรับอีเมลเหล่านี้เป็นเพียงส่วนเล็กๆ เท่านั้น เมื่อคุณนึกถึงตัวเลือกสไตล์ทั้งหมดที่มีใน Divi ฉันตั้งใจให้การออกแบบเรียบง่ายพอที่จะทำให้คุณเข้าใจได้กว้างๆ ว่าคุณจะทำอะไรได้บ้าง รู้สึกอิสระที่จะสำรวจการออกแบบที่สวยงามมากขึ้นด้วยตัวคุณเองโดยการเพิ่มแบบอักษร สี และเอฟเฟกต์โฮเวอร์ใหม่ และอย่าลืมที่จะมีความสนุกสนานในกระบวนการ
ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น
ไชโย!