วิธีการออกแบบแบบฟอร์มการเข้าสู่ระบบออนไลน์สำหรับส่วนหัวทั่วโลกที่กำหนดเองใน Divi

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

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

ภาพรวมผลลัพธ์

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

และนี่คือแบบฟอร์มเข้าสู่ระบบออนไลน์บนหน้าจอแท็บเล็ตและโทรศัพท์

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

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

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

การเพิ่มส่วนหัวส่วนกลางใหม่

เพื่อให้สิ่งต่าง ๆ ดำเนินต่อไป เราต้องสร้างส่วนหัวระดับโลกใหม่สำหรับ .ของเรา เว็บไซต์เว็บ. ในการดำเนินการนี้ ให้ไปที่แดชบอร์ดของ WordPress และไปที่ Divi > Theme Builder

บน เทมเพลตเว็บไซต์ โดยค่าเริ่มต้น คลิก "เพิ่มส่วนหัวส่วนกลาง" จากนั้น "สร้างส่วนหัวส่วนกลาง"

จากนั้นเลือกตัวเลือกสร้างตั้งแต่เริ่มต้น

ออกแบบส่วนหัว Divi global ด้วยแบบฟอร์มเข้าสู่ระบบออนไลน์

การปรับแต่งส่วน

จาก Global Header Layout Editor คุณจะสามารถสร้างส่วนหัวที่กำหนดเองสำหรับไซต์ของคุณได้อย่างสมบูรณ์ ในการเริ่มต้นให้เปิดการตั้งค่าส่วนปกติและอัปเดตสิ่งต่อไปนี้:

• การไล่ระดับสีพื้นหลังด้านซ้าย:
• การไล่ระดับสีพื้นหลังด้านขวา:
• ทิศทางการไล่ระดับสี: 48 องศา
• การขยาย: 10 พิกเซลที่ด้านบน, 10 พิกเซลที่ด้านล่าง, 20 พิกเซลทางด้านซ้าย, 20 พิกเซลทางด้านขวา

เพื่อให้ส่วนหัวที่กำหนดเองของเราตอบสนองได้ดีขึ้นเราจะเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบส่วนหลัก

display:flex;justify-content:center;align-items:center;

การเพิ่มโลโก้ส่วนหัวในบรรทัดแรก

ตอนนี้ส่วนพร้อมแล้วเราสามารถเพิ่มบรรทัดแรก

เพิ่มแถว

เพิ่มแถวไปยังคอลัมน์ในส่วน

เพิ่มโมดูลรูปภาพที่มีภาพโลโก้

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

อัปเดตระยะขอบของโมดูลรูปภาพและรูปภาพ

อัปเดตการตั้งค่าภาพดังนี้:

• ภาพ: [เพิ่มโลโก้ (ประมาณ 64 พิกเซลคูณ 64 พิกเซล)]

• มาร์จิ้น: 20px ขวา

อัพเดตพารามิเตอร์บรรทัด

ก่อนดำเนินการเพิ่มเติมให้เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

• ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 25%
• การจัดแนวแถว: ซ้าย
• ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ

การเพิ่มแบบฟอร์มเข้าสู่ระบบออนไลน์ไปยังบรรทัดที่สอง

เพิ่มแถว

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

เพิ่มแถวที่สองพร้อมโครงสร้างลงในคอลัมน์ในส่วน

เพิ่มแบบฟอร์มเข้าสู่ระบบ

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

ลบเนื้อหาเริ่มต้น

ภายใต้การตั้งค่าการเข้าสู่ระบบลบชื่อปลอมและเนื้อหาร่างกาย

เพิ่มฟอร์มล็อกอินและคลาส CSS ที่กำหนดเอง

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

บนแท็บขั้นสูงเพิ่มคลาส CSS ต่อไปนี้:

• คลาส CSS: header-login-form

เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในพื้นที่ CSS คำอธิบายการเชื่อมต่อ:

margin-bottom: 0px !important

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

width: 100%;

เพิ่ม CSS ที่กำหนดเองต่อไปนี้ไปยังกล่อง CSS เขตข้อมูลการเชื่อมต่อ:

padding: 5px 4% !important

เพิ่ม CSS ที่กำหนดเองในการตั้งค่าเค้าโครงส่วนหัว

เนื่องจากเราได้เพิ่มคลาส CSS ที่กำหนดเองของเราไปยังโมดูลรูปแบบการเข้าสู่ระบบเราสามารถเพิ่ม CSS ที่กำหนดเองซึ่งจะกำหนดเป้าหมายเฉพาะรูปแบบการเข้าสู่ระบบนี้โดยเฉพาะ

เปิดการตั้งค่าเค้าโครงส่วนหัวและเพิ่ม CSS ที่กำหนดเองต่อไปนี้:

.header-login-form .et_pb_login_form form {display: flex;justify-content: flex-end;align-items: center;}.header-login-form .et_pb_login_form .et_pb_contact_form_field {padding-bottom: 0px;margin-right: 5px;}.header-login-form .et_pb_forgot_password {display:none;}

CSS นี้จะทำให้ฟิลด์ล็อกอินและปุ่มปรากฏในบรรทัด (แนวนอน) ซ่อนลิงก์ "ลืมรหัสผ่านหรือไม่" »และเพิ่มระยะขอบเล็ก ๆ ระหว่างฟิลด์

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

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

• ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• การจัดแนวบรรทัด: ตรง
• ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ

ออกแบบการตั้งค่าสำหรับแบบฟอร์มการเข้าสู่ระบบ

ตอนนี้เราพร้อมที่จะอัปเดตการตั้งค่าแบบฟอร์มการเข้าสู่ระบบ เปิดการตั้งค่าของโมดูลฟอร์มล็อกอินและอัปเดตสิ่งต่อไปนี้:

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

ฟิลด์และลิงค์ข้อความ

• พื้นหลังของฟิลด์: สี: rgba (255,255,255,0.2)
• สีข้อความของฟิลด์: #ffffff
• ตำรวจสนาม: Lato
• ขนาดข้อความฟิลด์: 14px
• การจัดแนวข้อความ: ถูกต้อง
• ลิงก์แบบอักษร: Lato
• สไตล์แบบอักษรของลิงก์: ขีดเส้นใต้
• สีข้อความของลิงก์: # ff3190

การออกแบบปุ่ม

• ขนาดข้อความของปุ่ม: 15px
• สีพื้นหลังของปุ่ม: # ff3190
• ความกว้างของเส้นขอบปุ่ม: 0px
• แบบอักษรของปุ่ม: Lato
• ปุ่มเสริม: 2px ที่ด้านบน, 2px ที่ด้านล่าง
• มาร์จิ้น: 15px ต่ำ
• Padding: 0px ที่ด้านบน, 0px ที่ด้านล่าง, 0px ที่ด้านซ้าย, 0px ที่ด้านขวา

การเพิ่มเมนูไปยังบรรทัดที่สอง

โมดูลเมนู

ด้วยแบบฟอร์มการเข้าสู่ระบบออนไลน์ของเราเราสามารถเพิ่มเมนูด้านล่างได้โดยตรง

เพิ่มโมดูลเมนูภายใต้โมดูลฟอร์มการเข้าสู่ระบบ

การตั้งค่าโมดูลเมนู

อัพเดตการตั้งค่าเมนูดังต่อไปนี้:

• สีพื้นหลัง: rgba (0,0,0,0)
• แบบอักษรของเมนู: Lato
• น้ำหนักแบบอักษรของเมนู: ตัวหนา
• สีข้อความของเมนู: #ffffff
• ขนาดข้อความเมนู: 16px
• การจัดแนวข้อความ: ถูกต้อง
• สีพื้นหลังของเมนูแบบเลื่อนลง: #ffffff
• สีของเส้นในเมนูแบบเลื่อนลง: rgba (0,0,0,0)
• สีข้อความของเมนูแบบเลื่อนลง: # 000000
• สีพื้นหลังเมนูมือถือ: #ffffff
• สีข้อความเมนูมือถือ: # 000000
• สีไอคอนรถเข็น: #ffffff
• สีไอคอนค้นหา: #ffffff
• สีไอคอนเมนูแฮมเบอร์เกอร์: #ffffff

บันทึกส่วนหัวของแบบฟอร์มเข้าสู่ระบบ

อย่าลืมบันทึกเค้าโครงก่อนออกจากโปรแกรมแก้ไขเค้าโครงส่วนหัว

จากนั้นยังบันทึกการตั้งค่าตัวสร้างธีม

ผลสุดท้าย

แค่นั้นแหละ!

ทีนี้มาดูผลลัพธ์สุดท้ายกัน หากต้องการดูผลลัพธ์สุดท้าย เพียงไปที่หน้าของคุณ เว็บไซต์เว็บ.

นี่คือส่วนหัวบนหน้าจอเดสก์ท็อป

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

และนี่คือแบบฟอร์มเข้าสู่ระบบออนไลน์บนหน้าจอโทรศัพท์ สังเกตเมนูมือถือด้วย

และนี่คือสิ่งที่ผู้ใช้จะเห็นเมื่อเข้าสู่ระบบ

คิดสุดท้าย

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

เพื่อสุขภาพของคุณ!