วิธีสร้างแบบฟอร์มการเลือกใช้บลูมแบบเต็มหน้าจอ โปร่งใส หรือเต็มความกว้าง

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

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

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

ตัวอย่าง 1

ตัวอย่าง 2

การสร้างแบบฟอร์มการเลือกใช้แบบเต็มหน้าจอและโปร่งใสด้วย Bloom: Tips

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

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

เปิดใช้งานแบบฟอร์มการเลือกใช้ก่อน

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

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

(หรือแน่นอน บนไซต์การแสดงละคร/ทดสอบ)

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

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

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

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

ในโพสต์นี้ เราจะแสดงวิธีการดำเนินการดังกล่าวสำหรับตัวอย่างที่เรากำลังสร้างใหม่

เริ่มสร้างตัวอย่างแรก

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

เพิ่มแบบฟอร์มการเลือกรับ

เริ่มต้นด้วยการเพิ่มแบบฟอร์มการเลือกใช้ใหม่ให้กับเว็บไซต์ของคุณโดยไปที่ แดชบอร์ด WordPress > Bloom > คลิกที่ 'New Optin' ที่มุมขวา > เลือก 'Pop up'

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

การตั้งค่าการออกแบบ

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

มันดูค่อนข้างแตกต่างไปจากผลลัพธ์ที่ได้ แต่คุณสามารถสังเกตได้ว่าพื้นฐานของแบบฟอร์มการเลือกเข้าร่วมนั้นเหมือนกัน

ชื่อและข้อความที่เลือกใช้

ตอนนี้ เพื่อให้แบบฟอร์มการเลือกของเราดูเหมือนกับตัวอย่างที่เราแสดงให้คุณเห็นข้างต้น ให้เริ่มต้นด้วยการปรับเปลี่ยนการตั้งค่าการออกแบบมาตรฐานของ Optin Title และ Optin Message ภายในแท็บ Design ดังต่อไปนี้:

• สีข้อความ: #FFFFFF
• รูปแบบข้อความ: ตัวหนา
• การวางแนวข้อความ: ศูนย์

การตั้งค่ารูปภาพ & การปรับแต่ง Optin

เลื่อนลงมาที่แท็บเดียวกันและทำการปรับเปลี่ยนการตั้งค่ารูปภาพ การจัดแต่งสไตล์ Optin และสไตล์เส้นขอบดังต่อไปนี้:

• การวางแนวภาพ: ไม่มีภาพ
• สีพื้นหลัง: ใส
• แบบอักษรของส่วนหัว: Lato
• แบบอักษรของร่างกาย: Lato
• สีข้อความ: ข้อความเข้ม
• สไตล์มุม: มุมเหลี่ยม
• การวางแนวเส้นขอบ: ขอบบน + ล่าง
• สีเส้นขอบ: #FFFFFF
• สไตล์เส้นขอบ: เส้นขอบประ

รูปแบบเส้นขอบ การตั้งค่าแบบฟอร์ม & การจัดรูปแบบแบบฟอร์ม

เลื่อนลงต่อไปและทำการปรับเปลี่ยนการตั้งค่าแบบฟอร์มและการจัดรูปแบบแบบฟอร์มด้วย:

• การวางแนวแบบฟอร์ม: แบบฟอร์มด้านล่าง
• ฟิลด์ชื่อ: ฟิลด์ไม่มีชื่อ
• ข้อความอีเมล: อีเมล
• ข้อความปุ่ม: สมัครสมาชิก!
• การวางแนวฟิลด์แบบฟอร์ม: ฟิลด์ฟอร์มแบบเรียงซ้อน
• รูปแบบมุมของฟิลด์แบบฟอร์ม: มุมโค้งมน
• สีข้อความของแบบฟอร์ม: Light Text
• สีพื้นหลังของแบบฟอร์ม: ชัดเจน
• สีของปุ่ม: #6a18a0
• สีข้อความของปุ่ม: เบา

รูปแบบขอบแบบฟอร์ม

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

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

สุดท้ายนี้ เราต้องแก้ไข CSS บางอย่างในแบบฟอร์มเพื่อตั้งค่าทุกอย่างให้เข้าที่ คัดลอกและวางโค้ดต่อไปนี้ลงในฟิลด์ Custom CSS:

.et_bloom .et_bloom_popup:after{
background: -webkit-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -o-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -moz-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important; }

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content
{ background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_light .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

เปลี่ยนรหัสตามแบบฟอร์มการเลือกรับ Bloom ของคุณเอง

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

ตัวเลขที่ส่วนท้ายของส่วนที่ไฮไลต์ในหน้าจอการพิมพ์ด้านบนคือ 6 เนื่องจากเป็นตัวเลขที่ 6 ในแถว:

ดังนั้น คุณจะต้องปรับตัวเลขตามตำแหน่งที่อยู่ในรายการแบบฟอร์มของคุณ

ผลสุดท้าย

หากคุณดูตัวอย่างแบบฟอร์มการเลือกเข้าร่วมตอนนี้ คุณจะสังเกตเห็นว่ามีการแก้ไขทั้งหมด และแบบฟอร์มการเลือกรับของคุณจะมีลักษณะดังนี้:

การตั้งค่าการแสดงผล

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

เริ่มสร้างตัวอย่างที่สอง

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

การตั้งค่าการออกแบบ

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

เลื่อนลงและเลือก 'Dark Text' สำหรับสีข้อความของแบบฟอร์ม และใช้ '#724501' เป็นสีของปุ่ม

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

สุดท้ายนี้ เราจะต้องเพิ่มบรรทัดโค้ด CSS ลงในกล่อง CSS ที่กำหนดเอง:

@media only screen and (min-width: 981px){ 
.et_bloom .et_bloom_popup:after{ 
margin-top: 12% !important; 
height: 50% !important; 
background: url(""); 
border-top: 3px solid #b29470 !important; border-bottom: 3px solid #b29470 !important; 
box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-webkit-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-moz-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
}
.et_bloom .et_bloom_form_container .et_bloom_close_button {
right: -250px !important;
top: -20% !important;
}}

@media only screen and (max-width: 981px){
.et_bloom .et_bloom_popup:after{
background: url("");
} }

.et_bloom .et_bloom_form_container .et_bloom_popup_input {
background: #FFFFFF !important;
}

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_dark .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important; margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

แทนที่ภาพพื้นหลัง

สิ่งสุดท้ายที่คุณต้องทำคือแทนที่ภาพพื้นหลังที่กำลังถูกใช้โดยหนึ่งใน URL ในโฟลเดอร์ wp-content ของคุณหรือที่อื่น URL แรกที่ทำเครื่องหมายในหน้าจอการพิมพ์ด้านล่างใช้กับเดสก์ท็อป และ URL ที่สองสำหรับแท็บเล็ตและโทรศัพท์

ผลสุดท้าย

และคุณทำเสร็จแล้ว! แบบฟอร์มการเลือกรับที่สองของคุณควรมีลักษณะดังนี้:

ความคิดสุดท้าย

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!