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

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

มาเริ่มกันเลย!

แอบมอง

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

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

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

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

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

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip และเพิ่มไฟล์ json ไฟล์ใดไฟล์หนึ่งลงใน Divi Theme Builder โดยใช้ตัวเลือก Theme Builder Portability

ไปที่บทช่วยสอนกันไหม

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

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

การเพิ่ม Global Header ใหม่

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

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

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

การออกแบบ Divi Global Header ด้วยแบบฟอร์มการเข้าสู่ระบบแบบอินไลน์

การปรับแต่งมาตรา

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

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

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

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

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

เมื่อส่วนพร้อมแล้ว เราก็เพิ่มแถวแรกได้

เพิ่มแถว

เพิ่มแถวหนึ่งคอลัมน์ในส่วน

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

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

อัปเดตอิมเมจโมดูลอิมเมจและระยะขอบ

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

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

• ขอบ: 20px ขวา

อัปเดตการตั้งค่าแถว

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

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

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

เพิ่มแถว

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

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

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

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

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

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

เพิ่มแบบฟอร์มการเข้าสู่ระบบ Custom Class และ CSS

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

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

• CSS Class: 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
• การจัดตำแหน่งข้อความ: right
• แบบอักษรของลิงก์: Lato
• ลักษณะแบบอักษรของลิงก์: ขีดเส้นใต้
• ลิงค์สีข้อความ: #ff3190

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

• ขนาดข้อความของปุ่ม: 15px
• สีพื้นหลังของปุ่ม: #ff3190
• ความกว้างของขอบปุ่ม: 0px
• แบบอักษรของปุ่ม: Lato
• ปุ่ม Padding: บน 2px, 2px ด้านล่าง
• ระยะขอบ: ด้านล่าง 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

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

ตรวจสอบให้แน่ใจว่าได้บันทึกเค้าโครงก่อนที่คุณจะออกจากตัวแก้ไขเค้าโครงส่วนหัว

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

ผลลัพธ์สุดท้าย

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

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

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

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

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

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

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

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

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

ไชโย!