Divi: วิธีสร้างแบบฟอร์มเข้าสู่ระบบป๊อปอัป

คุณต้องการสร้าง ฟอร์ม เข้าสู่ระบบป๊อปอัปใน Divi ด้วยปุ่มเข้าสู่ระบบ / ออกจากระบบ?

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

ความคิดคือการสร้าง ฟอร์ม การเข้าสู่ระบบที่แสดงในป๊อปอัปทุกครั้งที่ผู้ใช้คลิกปุ่มเข้าสู่ระบบในส่วนหัวของหน้า 

สะดวกกว่าการเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าเข้าสู่ระบบที่กำหนดเอง

ในบทช่วยสอนนี้ เราจะสร้างแบบฟอร์มการเข้าสู่ระบบแบบป็อปอัพพร้อมปุ่มเข้าสู่ระบบและออกจากระบบแบบกำหนดเองใน Divi 

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

ขอเริ่มต้น!

การสำรวจ

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

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

นอกจากนี้ แบบฟอร์มการเข้าสู่ระบบป๊อปอัปจะแสดงเนื้อหา "คำเตือน" ที่แตกต่างกันทุกครั้งที่ผู้ใช้พยายามออกจากระบบ

สิ่งที่คุณต้องเริ่มต้น

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

นำเข้าเทมเพลตส่วนหัว "Crowdfunding Layout Pack" ลงใน Divi builder

ในการเริ่มต้น ดาวน์โหลด Divi Crowdfunding Layout Pack ส่วนหัวและส่วนท้ายฟรี . โดยไปที่ โพสต์บล็อก .

จากนั้นป้อนอีเมลของคุณเพื่อดาวน์โหลดไฟล์ zip

หลังจากนั้นให้แตกไฟล์เพื่อให้พร้อมนำเข้า

ในการนำเข้าไฟล์ไปยังตัวแก้ไขธีม ให้ทำตามขั้นตอนเหล่านี้:

1. ไปที่ Divi > ตัวสร้างธีม
2. คลิกที่ไอคอนพกพา
3. ในหน้าต่างป๊อปอัปการพกพา ให้เลือกแท็บการนำเข้า
4. เลือกไฟล์ที่คลายซิปที่ดาวน์โหลดไว้ก่อนหน้านี้เพื่อนำเข้า
5. Cliquer sur นำเข้าตัวสร้างธีม Divi แม่แบบ.
6. คลิกไอคอนแก้ไขเพื่อแก้ไขส่วนหัวที่นำเข้า

การสร้างแบบฟอร์มเข้าสู่ระบบป๊อปอัปใน Divi

ส่วนที่ 1: การสร้างปุ่มเข้าสู่ระบบและออกจากระบบ

เมื่ออยู่ใน Global Header Layout Editor ให้เปิด มุมมองชั้น เพื่อให้คุณสามารถดูองค์ประกอบทั้งหมดได้อย่างง่ายดาย

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

อ่าน: Divi: การเปรียบเทียบการไล่ระดับสีประเภทต่างๆ

การสร้างปุ่มเข้าสู่ระบบ

ในการสร้างปุ่มเข้าสู่ระบบของเรา ให้เปิดการตั้งค่าโมดูลปุ่มในคอลัมน์ 3 ของแถวบนสุด

อัปเดตรายการต่อไปนี้ภายใต้แท็บการออกแบบ:

• ไอคอนปุ่ม: ไอคอนล็อค (ดูภาพหน้าจอ)
• ตำแหน่งไอคอนปุ่ม: ขวา
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม : NO
• ช่องว่างภายใน: 0,5em (บนและล่าง), 2em (ซ้าย), 0,7em (ขวา)

ภายใต้แท็บ ระดับสูงกำหนดปุ่มสองคลาส CSS ที่กำหนดเองดังนี้:

• CSS Class: et-toggle-popup et-popup-login-button

การสร้างปุ่มออกจากระบบ

หากต้องการสร้างปุ่มออกจากระบบ ให้ทำซ้ำปุ่มเข้าสู่ระบบที่มีอยู่ในคอลัมน์ 3

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

เปลี่ยนข้อความปุ่มเป็น "ออกจากระบบ"

อัปเดตรายการต่อไปนี้ภายใต้แท็บการออกแบบ:

• ไอคอนปุ่ม: ไอคอนปลดล็อค (ดูภาพหน้าจอ)

ภายใต้แท็บ ระดับสูงให้อัปเดตปุ่ม CSS Classes ดังนี้:

• CSS Class: et-toggle-popup et-popup-logout-button

คลาสแรกจะเหมือนเดิม แต่คลาสที่สองจะแตกต่างกัน

ส่วนที่ 2: การสร้างส่วนป๊อปอัป

เมื่อกดปุ่มเสร็จแล้ว เราก็พร้อมที่จะสร้างส่วนป๊อปอัปที่จะทำหน้าที่เป็นป๊อปอัปของเราที่มี รูปแบบ การเชื่อมต่อ.

ใต้ส่วนหัว ให้เพิ่มส่วนปกติใหม่

จากนั้นแทรกแถวหนึ่งคอลัมน์ภายในส่วน

การตั้งค่ามาตรา

ก่อนอัปเดตแถว ให้เปิดการตั้งค่าส่วน

ภายใต้แท็บ คอนเทนต์ให้ส่วนนี้เป็นสีพื้นหลังสีขาว:

• ความเป็นมา: #ffffff

ภายใต้แท็บ ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 800px (เดสก์ท็อป), 80% (แท็บเล็ต), 100% (โทรศัพท์)
• การจัดตำแหน่งส่วน: ศูนย์
• ความสูง: อัตโนมัติ (เดสก์ท็อปและแท็บเล็ต), 100% (โทรศัพท์)
• ความสูงสูงสุด: 100%
• ช่องว่างภายใน: 0px (บนและล่าง)

• มุมโค้งมน: 10px
• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความเบลอ: 100pixels
• ความแรงของการแพร่กระจาย: 50px

ภายใต้แท็บ ระดับสูง, ปรับปรุงสิ่งต่อไปนี้:

เพิ่มคลาส CSS ที่กำหนดเอง

• CSS Class: et-popup-login

เพิ่มข้อมูลโค้ด CSS ที่กำหนดเองให้กับองค์ประกอบหลัก:

overscroll-behavior: contain;

อัปเดตตัวเลือกการมองเห็นและตำแหน่ง

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: auto
• ตำแหน่ง: คงที่
• ที่ตั้ง: เซ็นเตอร์ เซ็นเตอร์
• ดัชนี Z: 999999

การตั้งค่าสาย

เมื่อตั้งค่าส่วนเรียบร้อยแล้ว ให้เปิดการตั้งค่าบรรทัดและอัปเดตการตั้งค่าการออกแบบต่อไปนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ช่องว่างภายใน: 0px(บน), 5vh(ล่าง)

ส่วนที่ 3: การสร้างไอคอนป๊อปอัปปิด

ในการสร้างไอคอนปิดป๊อปอัปที่จะปิด/ซ่อนป๊อปอัปเมื่อคลิก เราจะใช้โมดูล Blurb

เพิ่มโมดูล Blurb ใหม่ในแถว

เปิดการตั้งค่าโมดูลและลบชื่อและเนื้อหา

จากนั้นเพิ่มไอคอนดังนี้:

• ใช้ไอคอน : ใช่
• ไอคอน: ไอคอน "x" (ดูภาพหน้าจอ)

ภายใต้แท็บ ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:

• ไอคอนสี: #004e43
• การจัดตำแหน่งรูปภาพ/ไอคอน: กึ่งกลาง
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 50px
• ความกว้าง: 50px
• โมดูลการจัดตำแหน่ง: right
• ส่วนสูง: 50px

ภายใต้แท็บ ระดับสูงให้เพิ่มคลาส CSS ให้กับโมดูล Blurb ดังนี้:

• CSS Class: et-toggle-popup

ส่วนที่ 4: การสร้างแบบฟอร์มการเข้าสู่ระบบ "เข้าสู่ระบบ" และ "ออกจากระบบ"

เพื่อให้มีเนื้อหาและการออกแบบที่แตกต่างกันสำหรับแบบฟอร์มการเข้าสู่ระบบในการเข้าสู่ระบบและออกจากระบบ เราจะสร้างโมดูลแบบฟอร์มการเข้าสู่ระบบที่แตกต่างกันสองโมดูล 

แบบฟอร์มแรกจะเป็นแบบฟอร์มการเข้าสู่ระบบซึ่งจะแสดงทุกครั้งที่ผู้ใช้ "ออกจากระบบ" แบบฟอร์มที่สองจะเป็นแบบฟอร์มการเข้าสู่ระบบซึ่งจะแสดงทุกครั้งที่ผู้ใช้ "เข้าสู่ระบบ"

การสร้างแบบฟอร์ม "ออกจากระบบ"

ในการสร้างแบบฟอร์มการเข้าสู่ระบบ "ออกจากระบบ" ให้เพิ่มโมดูลการเข้าสู่ระบบใหม่ด้านล่างไอคอนโมดูล Blurb ภายในแถว

เปิดการตั้งค่าโมดูลและเปลี่ยนการตั้งค่าต่อไปนี้:

แท็บเนื้อหา

• เปลี่ยนเส้นทางไปยังหน้าปัจจุบัน: ใช่
• ใช้สีพื้นหลัง: NO

แท็บออกแบบ

• ฟิลด์สีพื้นหลัง: rgba(0,78,67,0.05)
• ฟิลด์โฟกัสสีพื้นหลัง: rgba (0,78,67,0,15)
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: Dark

• แบบอักษรของชื่อเรื่อง: Poppins
• น้ำหนักแบบอักษรของชื่อเรื่อง: กึ่งหนา
• สีข้อความ: #000000
• ความสูงของบรรทัดหัวเรื่อง: 1,3 em
• แบบอักษรของร่างกาย: Work Sans

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

จากนั้นวางลักษณะปุ่มลงในกลุ่มตัวเลือกปุ่มในการตั้งค่าการเชื่อมต่อใต้แท็บออกแบบ

ถัดไป อัปเดตลักษณะปุ่มสำหรับแบบฟอร์มการเข้าสู่ระบบดังนี้:

• ปุ่ม
  • สีข้อความ: #ffffff
  • ความเป็นมา: #004e43
  • พื้นหลัง (โฮเวอร์): #00683c
  • ความกว้างของเส้นขอบ: 0 พิกเซล
  • ช่องว่างภายใน: 15px (บนและล่าง)

ถัดไป อัปเดตตัวเลือกการปรับขนาดดังนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 80% (เดสก์ท็อป), 90% (แท็บเล็ต), 95% (โทรศัพท์)
• โมดูลการจัดตำแหน่ง: Center

แท็บขั้นสูง

ภายใต้แท็บ ระดับสูงให้อัปเดตคลาส CSS และ CSS ที่กำหนดเองดังนี้:

• CSS Class: et-logged-out-form

CSS ที่กำหนดเองสำหรับคำอธิบายการเชื่อมต่อ:

width: 100% !important;
float: none !important;

CSS ที่กำหนดเองสำหรับแบบฟอร์มการเข้าสู่ระบบ:

width: 100% !important;
padding: 0px !important;

เพื่อให้แน่ใจว่าโมดูลการเข้าสู่ระบบครอบคลุมความกว้างของแถว/คอลัมน์ทั้งหมด แม้กระทั่งบนเดสก์ท็อป

การสร้างแบบฟอร์ม “เข้าสู่ระบบ”

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

ในการสร้างแบบฟอร์มการเข้าสู่ระบบ "ออกจากระบบ" ให้ทำซ้ำแบบฟอร์มเข้าสู่ระบบที่มีอยู่

ถัดไป อัปเดตป้ายกำกับสำหรับแต่ละรายการ รูปแบบ การเชื่อมต่อตามลำดับ

เปิดการตั้งค่าที่ซ้ำกัน (แบบฟอร์ม "เข้าสู่ระบบ") และเพิ่มชื่อไซต์เป็นเนื้อหาแบบไดนามิกให้กับชื่อของโมดูลแบบฟอร์มการเข้าสู่ระบบ

จากนั้นเปิดการตั้งค่าเนื้อหาแบบไดนามิกของชื่อไซต์และอัปเดตเนื้อหาก่อนและหลังดังนี้:

• ก่อนหน้านี้: “คุณกำลังพยายามออกจากระบบธีมที่หรูหรา”
• หลังจาก: ". " 

สิ่งนี้จะสร้างการแจ้งเตือนแบบไดนามิกที่ดีสำหรับผู้ใช้ที่พยายามออกจากระบบ

จากนั้นเพิ่มส่วนหัว H3 ต่อไปนี้ลงในเนื้อหา:

<h3>Are you sure?</h3>

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

• เลือกแท็บ ลิงค์ ภายใต้ตัวเลือก เนื้อความ.
• แบบอักษรของลิงก์: Work Sans
• ลิงก์น้ำหนักแบบอักษร: กึ่งหนา
• รูปแบบตัวอักษร: TT
• การจัดแนวข้อความลิงก์: กึ่งกลาง
• สีของข้อความลิงก์: #ffffff

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

ภายใต้แท็บ ระดับสูงให้อัปเดตคลาส CSS และ CSS ที่กำหนดเองดังนี้:

• CSS Class: et-logged-in-form

CSS ที่กำหนดเองสำหรับแบบฟอร์มการเข้าสู่ระบบ:

display:none;

ส่วนที่ 5: เพิ่มรหัสที่กำหนดเอง

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

CSS

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

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

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

JQuery

ใต้แท็กสไตล์สิ้นสุด ให้วาง JQuery ต่อไปนี้เพื่อให้แน่ใจว่าได้ใส่โค้ดลงในแท็กสคริปต์ที่จำเป็น

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

ตัวอย่างนี้เพียงแค่สลับส่วนป๊อปอัปเมื่อใดก็ตามที่ผู้ใช้คลิกที่หนึ่งในสามรายการที่มีคลาส " and-toggle-popup (ปุ่มเข้าสู่ระบบและออกจากระบบพร้อมไอคอนการนำเสนอ "x")

ดูสิ่งนี้ด้วย: Divi: วิธีใช้การตั้งค่ามาสก์พื้นหลังและตัวเลือกการแปลงรูปแบบ

เสร็จแล้ว!

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

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายบนคอมพิวเตอร์ แท็บเล็ต และโทรศัพท์

สังเกตว่าปุ่มเข้าสู่ระบบและปุ่มออกจากระบบเปลี่ยนไปอย่างไร และเมื่อผู้ใช้เข้าสู่ระบบแล้ว ผู้ใช้จะยังอยู่ในหน้าปัจจุบัน 

นอกจากนี้ แบบฟอร์มการเข้าสู่ระบบป๊อปอัปจะแสดงเนื้อหา "คำเตือน" ที่แตกต่างกันทุกครั้งที่ผู้ใช้พยายามออกจากระบบ

ดาวน์โหลด DIVI ทันที !!!

บทสรุป

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

อย่าลังเลที่จะปรับการออกแบบและเนื้อหาของแบบฟอร์มการเข้าสู่ระบบ (หรือปุ่มต่างๆ) เพื่อสร้างประสบการณ์การเข้าสู่ระบบที่ไม่เหมือนใครบนเว็บไซต์ของคุณเอง

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

ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ

อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...