Divi: วิธีสร้างส่วนหัวส่วนกลางด้วยแบบฟอร์มการเข้าสู่ระบบ

ต้องสร้างส่วนหัวส่วนกลางด้วย ฟอร์ม การเชื่อมต่อใน DIVI?

การสร้างไฟล์ ฟอร์ม การเข้าสู่ระบบในส่วนหัวของคุณสามารถเพิ่มประสิทธิภาพได้อย่างมาก ประสบการณ์ของผู้ใช้. 

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

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

การสำรวจ

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

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

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

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

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

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

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

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

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

• ขอบด้านใน: ด้านบน 10px, ด้านล่าง 10px, ซ้าย 20px, ขวา 20px

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

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

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

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

แอดไลน์

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

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

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

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

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

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

• ขอบ: 20px ขวา

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

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: YES
• ระยะห่างคอลัมน์: 1
• ความกว้างสูงสุด: 25%
• การจัดตำแหน่ง: ซ้าย

• ระยะขอบภายใน: 0px บนสุด 0px ล่างสุด

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

แอดไลน์

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

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

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

ภายในแถวหนึ่งคอลัมน์ เพิ่มโมดูล 'เชื่อมต่อ'

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

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

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

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

ดูคำแนะนำของเราบน วิธีสร้างเมนูด้านข้างแบบเลื่อนและตอบสนองใน 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 แบบกำหนดเองของเราที่จะกำหนดเป้าหมายเฉพาะแบบฟอร์มการเข้าสู่ระบบนั้นเท่านั้น

อ่านบทเรียนของเราต่อไป วิธีสร้างหน้าบล็อกด้วยโมดูลบล็อกด้วย DIVI

เปิดการตั้งค่าเค้าโครงส่วนหัวและเพิ่ม 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 ล่างสุด

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

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

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

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

• ฟิลด์สีพื้นหลัง: rgba(255,255,255,0.2)
• ฟิลด์สีข้อความ: #ffffff

• ฟอนต์ฟิลด์: Lato
• ฟิลด์ขนาดข้อความ: 14px
• การจัดตำแหน่งข้อความ: right

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: NO
• ขนาดข้อความของปุ่ม: 15px
• ปุ่มพื้นหลัง: #ff3190
• ปุ่มความกว้างเส้นขอบ: 0 พิกเซล

• แบบอักษรของปุ่ม: Lato
• ปุ่มขอบ: 2px บน, 2px ล่าง
• ปุ่ม Padding: 15px ด้านล่าง

• ขอบด้านใน: ด้านบน 0px, ด้านล่าง 0px, ซ้าย 0px, ขวา 0px

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

โมดูลเมนู

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

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

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

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

• พื้นหลัง: rgba(0,0,0,0)

• เมนูแบบอักษร: Lato
• เมนูแสงอ่อน: ตัวหนา
• สีข้อความเมนู: #ffffff
• ขนาดข้อความของเมนู: 16px
• การจัดตำแหน่งข้อความ: right

• สีพื้นหลังของเมนูแบบเลื่อนลง: #ffffff
• สีแถวแบบเลื่อนลง: rgba(0,0,0,0)
• สีข้อความเมนูแบบเลื่อนลง: #000000
• สีพื้นหลังเมนูมือถือ: #ffffff
• สีข้อความเมนูมือถือ: #000000

• สีไอคอนรถเข็น: #ffffff
• ค้นหาไอคอนสี: #ffffff
• ไอคอนเมนูแฮมเบอร์เกอร์สี: #ffffff

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

อย่าลืมบันทึกเลย์เอาต์ก่อนออกจากตัวแก้ไขส่วนหัว

จากนั้นให้บันทึกการตั้งค่า Theme Builder ด้วย

ผลสุดท้าย

เสร็จแล้ว!

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

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

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

สรุป

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

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

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

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

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

...