วิธีสร้างหน้า Landing Page ให้วันอังคารด้วย Divi และ GiveWP

ในกรณีที่คุณยังไม่เคยได้ยิน เราพร้อมที่จะเริ่มต้นแคมเปญใหญ่ในวัน Black Friday และ Cyber ​​Monday ที่ Elegant Themes แต่ยังมีสิ่งดีๆ เกิดขึ้นอีกในช่วงเวลานี้ของปี เรียกว่าให้วันอังคาร (ปีนี้ตรงกับวันที่ 28 พฤศจิกายน) และเป็นความพยายามขององค์กรไม่แสวงหากำไรของโลกเพื่อเตือนทุกคนว่าแม้ว่าพวกเขาจะเอากระเป๋าเงินไปซื้อของส่วนตัว พวกเขาอาจต้องการพิจารณาบริจาคให้กับผู้ที่อยู่ใน จำเป็นด้วย ไอเดียเจ๋ง! และเนื่องจากเราอยู่ในธุรกิจที่ส่งเสริมชุมชนของเรา เราจึงคิดว่าควรช่วยเหลือผู้ที่ใช้ Divi (หรือพิเศษ) และทำงานให้กับองค์กรไม่แสวงหาผลกำไรเพื่อสร้างหน้า Landing Page บริจาคให้วันอังคารที่ดีที่สุด สามารถ.

ต่อไปนี้คือภาพรวมคร่าวๆ ของสิ่งที่เราจะสร้างในวันนี้

สิ้นสุดการแสดงตัวอย่าง

ในโพสต์ของวันนี้ เราจะสร้างหน้า Landing Page ของ Giving Tuesday ที่สวยงามพร้อมด้วยแบบฟอร์มการบริจาคที่สวยงาม (และใช้งานได้จริง)

ติดตั้งปลั๊กอิน GiveWP และสร้างแบบฟอร์มใหม่

แบบฟอร์มการบริจาคที่เราจะใช้ในบทช่วยสอนนี้สร้างโดยปลั๊กอิน GiveWP หากต้องการติดตั้ง ให้ไปที่ผู้ดูแลระบบ WordPress ของคุณไปที่ Plugins > Add New ใช้คุณลักษณะการค้นหาเพื่อค้นหาปลั๊กอิน Give คลิกปุ่ม "ติดตั้งทันที" แล้วเปิดใช้งาน

ถัดไป ไปที่ การ บริจาค > เพิ่มแบบฟอร์ม ป้อนชื่อแบบฟอร์ม ฉันเลือก “สนับสนุนเกษตรกรในท้องถิ่นของคุณและเกษตรกรรมที่ยั่งยืน”

ถัดไป คุณจะสังเกตเห็นตัวเลือกแบบฟอร์มการบริจาค มาดูกันทีละแท็บ

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

ตัวเลือกการบริจาค: การบริจาคหลายระดับ

แสดงการบริจาค: ปุ่ม

จำนวนที่กำหนดเอง: เปิดใช้งาน

ในส่วนระดับการบริจาค ให้ตั้งค่าระดับการบริจาคต่อไปนี้: $1, $5, $10, $25, $50, $100 อย่าลืมตั้งค่าระดับการบริจาค $5.00 เป็นค่าเริ่มต้นใหม่ของคุณ

ตอนนี้ไปที่แท็บการแสดงแบบฟอร์ม สิ่งเดียวที่คุณต้องทำที่นี่คือเปลี่ยนการตั้งค่า Display Options เป็น Modal

ในแท็บเป้าหมายการบริจาค ให้เปิดใช้งานตัวเลือกเป้าหมายการบริจาคก่อน เมื่อคุณทำเสร็จแล้ว ให้กำหนดจำนวนเป้าหมายของคุณ ฉันได้ตั้งค่าของฉันเป็น $1,000 ฉันยังกำหนดรูปแบบเป้าหมายเป็นเปอร์เซ็นต์ด้วย วิธีนี้จะทำให้ผู้ชมจากรูปแบบทราบเปอร์เซ็นต์ของเป้าหมายที่เราทำได้ ไม่ใช่จำนวนเงินจริงที่เราหามาได้ และสุดท้าย ฉันได้เปลี่ยนสีแถบความคืบหน้าเล็กน้อยเพื่อให้ตรงกับสีเขียวที่ใช้ตลอดทั้งเว็บไซต์ที่เหลือของฉัน (#07c907)

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

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

เมื่อตั้งค่าแบบฟอร์มนี้จริง คุณจะต้องไปที่การ บริจาค > การตั้งค่า และกำหนดค่าต่างๆ เช่น เกตเวย์การชำระเงิน อีเมล ฯลฯ

เตรียมเนื้อหาภาพของคุณ

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

ในการสร้างภาพนี้ ฉันใช้ Photoshop แต่คุณยังสามารถใช้ซอฟต์แวร์ฟรีที่เรียกว่า Gimp ได้อีกด้วย เป็นเครื่องมือโอเพ่นซอร์สที่มีคุณสมบัติเหมือนกันมากมาย

นี่คือวิธีการสร้าง

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

นี่คือภาพที่ฉันพบ

จากนั้นฉันก็เปิดภาพนั้นใน photoshop

เนื่องจากเลเยอร์เริ่มต้นถูกล็อกโดยค่าเริ่มต้น ให้ทำซ้ำโดยคลิกขวาที่เลเยอร์นั้นแล้วเลือก "Duplicate Layer" จากนั้น ซ่อนเลเยอร์แรกโดยคลิกที่ไอคอนรูปตาที่อยู่ถัดจากเลเยอร์นั้น

ถัดไป ใช้เครื่องมือไม้กายสิทธิ์เพื่อเลือกพื้นที่สีขาวทั้งหมดรอบๆ และภายในองค์ประกอบผัก กดปุ่ม Backspace เพื่อลบ

ถัดไป นำทางในเมนูด้านบนของคุณไปที่ Image > Canvas Size และปรับขนาดผ้าใบของคุณเป็น 1920×1080 เมื่อคุณทำเช่นนี้ องค์ประกอบของคุณจะมีขนาดใหญ่มากเมื่อเทียบกับผืนผ้าใบใหม่ที่เล็กกว่าของคุณ

บนแป้นพิมพ์ของคุณ ให้กด command+T หรือไปที่ Edit > Transform > Scale ปรับขนาดเลเยอร์องค์ประกอบที่แยกออกมาเพื่อให้พอดีกับขนาดผ้าใบใหม่

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

การสร้างการออกแบบใน Divi

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

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

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

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

สุดท้าย ไปที่แท็บ ออกแบบ และเปิดการตั้งค่า SubHead Text ตั้งค่า Subhead Font Weight ให้เป็นตัวหนา

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

ถัดไป เปิดการตั้งค่าโมดูลสำหรับโมดูลข้อความอ้างอิง เปลี่ยนพื้นหลังของสิ่งนั้นเป็น #F6F6F6 เช่นกัน

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

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

เริ่มจากการตั้งค่าส่วนและดำเนินการกันก่อน อันดับแรก เราต้องเปลี่ยนสีพื้นหลัง ตั้งค่าเป็น #F6F6F6 เดียวกับหัวข้อด้านบน

จากนั้นในแท็บ ออกแบบ ให้เปิดตัวเลือกการเว้นวรรค เพิ่มช่องว่างภายในแบบกำหนดเองต่อไปนี้:

ด้านบน: 250px

ขวา: 40px

ด้านล่าง: 250px

ซ้าย: 40px

สุดท้าย ขณะที่ยังอยู่ในการตั้งค่าส่วน ให้ไปที่แท็บขั้นสูง และเปิดตัวควบคุม CSS ID & Classes ภายใต้ CSS ID เขียนคำว่า "บริจาค"

บันทึกการตั้งค่าใหม่ของคุณ

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

ภายในโมดูลการทดสอบใหม่ ให้วางรหัสย่อสำหรับแบบฟอร์มบริจาคที่เราสร้างไว้ก่อนหน้านี้ ตั้งค่าพื้นหลังเป็นสีขาวทึบ (#ffffff)

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

ภายใต้ตัวเลือกข้อความ กำหนดการตั้งค่าต่อไปนี้:

ขนาดข้อความ: 18px

ความสูงของบรรทัดข้อความ: 1.8em

ภายใต้ตัวเลือกข้อความหัวเรื่องสำหรับ H2 ให้กำหนดการตั้งค่าต่อไปนี้:

หัวเรื่อง 2 ขนาดข้อความ: 36px

ส่วนหัว 2 ความสูงของบรรทัด: 1.5em

ภายใต้ตัวเลือกการเว้นวรรค กำหนดการตั้งค่าต่อไปนี้:

Custom Padding: 50xp (สำหรับทุกฟิลด์)

ภายใต้ตัวเลือก Box Shadow ให้เลือกตัวเลือกสุดท้ายในแถวบนสุด (ทางด้านขวาสุด) จากนั้นกำหนดค่าตัวเลือกนี้:

ความแรงของการกระจายเงาของกล่อง: -2px

สุดท้าย ภายใต้ตัวเลือกแอนิเมชั่น ให้กำหนดการตั้งค่าเหล่านี้:

สไตล์แอนิเมชั่น: Bounce

ทิศทางของแอนิเมชั่น: ขึ้น

ระยะเวลาแอนิเมชั่น: 800ms

ภาพเคลื่อนไหวล่าช้า: 400ms

ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

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

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

ไปที่ตัวเลือกธีมของคุณโดยไปที่ Divi > Divi Library > General เลื่อนลงไปที่กล่อง CSS ที่กำหนดเอง แล้ววางรูปแบบปุ่มติดตามที่นั่น:

/*Give Plugin Styles*/

.give-btn.give-btn-modal {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

#give-purchase-button.give-submit.give-btn {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

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

ตอนนี้เรากำลังจะไปที่ไหนสักแห่ง! มาเพิ่มสัมผัสสุดท้ายกันเถอะ ภาพพื้นหลังของส่วนที่เราเริ่มสร้างก่อนหน้านี้

ในการทำให้เสร็จ ให้ปรับขนาดหน้าต่างเบราว์เซอร์ของคุณเป็น 1920×1120 คุณสามารถใช้เว็บไซต์เช่น whatsmybrowsersize.com

จากนั้น จับภาพหน้าจอของหน้าการบริจาคของคุณโดยให้แบบฟอร์มใหม่ของเราอยู่ตรงกลาง ควรมีลักษณะเช่นนี้

เปิดภาพหน้าจอใหม่นี้ใน Photoshop พร้อมกับไฟล์ photoshop ที่เราสร้างไว้ก่อนหน้านี้

ใช้เครื่องมือ Rectangle Marquee เพื่อเลือกแบบฟอร์มของคุณ จากนั้นไปที่ Select > Inverse เพื่อเลือกทุกอย่าง ยกเว้น แบบฟอร์มของคุณ ลบการเลือกใหม่ของคุณ ตอนนี้คุณควรมีผืนผ้าใบที่มีลักษณะเช่นนี้

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

ในแผงเลเยอร์ของคุณ ให้ปรับความทึบของเลเยอร์แบบฟอร์มเป็น 50% จากนั้นเมื่อเลือกแบบฟอร์มในภายหลัง ให้คลิกไอคอนแม่กุญแจแล้วล็อค ตอนนี้ควรมีลักษณะเช่นนี้

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

เมื่อคุณมีการกำหนดค่าขั้นสุดท้ายแล้ว ให้ไปที่ ไฟล์ > ส่งออก > ส่งออกเป็น แล้วเลือก PNG เพื่อรักษาพื้นหลังโปร่งใส

ตอนนี้เราสามารถเพิ่มรูปภาพนั้นลงในส่วนแบบฟอร์มการบริจาคของหน้าการบริจาคของเรา กลับไปที่เว็บไซต์ Divi ของเรา

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

ขนาดภาพพื้นหลัง: ขนาดจริง

ตำแหน่งภาพพื้นหลัง: Center

บันทึกการตั้งค่าเหล่านี้ ส่วนแบบฟอร์มของคุณควรเสร็จสมบูรณ์แล้ว

เพื่อให้การออกแบบของคุณสมบูรณ์ (เพื่อให้ตรงกับตัวอย่างแบบเต็มหน้าของเราตั้งแต่ต้นโพสต์) เพียงเปลี่ยนสีพื้นหลังของส่วนหน้าที่เหลือเพื่อให้ตรงกับภาพหน้าจอ คุณจะใช้สีเทา (#F6F6F6) หรือสีขาว (#ffffff)

ระดมทุนอย่างมีความสุข!

ด้วย Divi และปลั๊กอินที่ทรงพลังเท่ากับ Give เรามั่นใจว่าความพยายามในการให้วันอังคารของคุณจะได้รับความนิยมอย่างมาก ขอบคุณที่ติดตามกัน หากคุณยังคงต้องการความช่วยเหลือเกี่ยวกับสิ่งที่กล่าวถึงในบทช่วยสอนนี้ เราจะทำการสตรีมสดวันนี้เวลา 15.00 น. บนหน้า Facebook และช่อง YouTube ของเรา ซึ่งฉันจะแสดงกระบวนการทั้งหมดนี้ในเทคเดียว ฉันจะยังถามคำถามในขณะที่เราไปพร้อมกัน หวังว่าจะเจอคุณที่นั้น!