ดาวน์โหลดการออกแบบแบนเนอร์ขายอเนกประสงค์สำหรับ Divi . ฟรี

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

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

มีอะไรให้บ้าง

นี่คือภาพรวมการออกแบบแบนเนอร์การขายที่รวมอยู่ในการดาวน์โหลด

ดาวน์โหลดการออกแบบแบนเนอร์ขายฟรี

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

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

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

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

ดาวน์โหลด

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

กำลังโหลดเค้าโครงไปยัง Divi Library

หลังจากดาวน์โหลดไฟล์แล้ว ให้แตกไฟล์ คุณจะพบว่ามีไฟล์ชื่อ “sales-banner-design.json” นี่คือสิ่งที่คุณจะโหลดลงในห้องสมุด Divi ของคุณ ไปที่แดชบอร์ด wordpress ของคุณและไปที่ Divi > Divi Library จากนั้นคลิกปุ่มนำเข้าที่ด้านบนของหน้า จากหน้าต่างป๊อปอัปการพกพา เลือกแท็บนำเข้าและเลือกไฟล์ sales-banner-design.json จากนั้นคลิกปุ่มนำเข้าเค้าโครง Divi Builder

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

วิธีสร้างแบนเนอร์ขายตั้งแต่เริ่มต้นใน Divi

การเพิ่มพื้นหลังของมาตรา

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

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

การปรับแต่งแถวสำหรับแบนเนอร์ขาย

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

ความกว้างที่กำหนดเอง: 700px
ความกว้างของรางน้ำ: 1
ระยะขอบที่กำหนดเอง: 0px บน, 0px, ด้านล่าง
ช่องว่างภายในที่กำหนดเอง: ด้านบน 0px, ด้านล่าง 0px

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

การเพิ่มกรอบขอบด้านบนด้วยข้อความที่อยู่ติดกัน

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

เนื้อหา: “ออนไลน์เท่านั้น”

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

น้ำหนักแบบอักษรของข้อความ: ตัวหนา
รูปแบบตัวอักษรของข้อความ: TT
สีข้อความ: rgba(255,255,255,0.9)
ขนาดข้อความ: 15px
ระยะห่างของตัวอักษรข้อความ: 2px
ความสูงของบรรทัดข้อความ: 1em
ความกว้าง: 22% (เดสก์ท็อป), 25% (แท็บเล็ต), 40% (สมาร์ทโฟน)
การจัดตำแหน่งโมดูล: ซ้าย
ระยะขอบที่กำหนดเอง: ด้านบน 0px, ด้านล่าง -15px
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

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

ตอนนี้เพิ่มโมดูลตัวแบ่งภายใต้โมดูลข้อความในแถวเดียวกัน จากนั้นอัปเดตการตั้งค่าตัวแบ่งดังนี้:

สี: rgba(255,255,255,0.9)
ตำแหน่งตัวแบ่ง: ด้านล่าง
น้ำหนักตัวแบ่ง: 15px
ส่วนสูง: 15px
ความกว้าง: 78% (เดสก์ท็อป), 75% (แท็บเล็ต), 60% (สมาร์ทโฟน)
การจัดตำแหน่งโมดูล: ขวา
ระยะขอบที่กำหนดเอง: 0px บน, 0px ล่าง
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

แน่นอน คุณจะต้องปรับความกว้างของเส้นขอบของคุณตามความกว้างของโมดูลข้อความของคุณ เมื่อปรับแต่งการออกแบบตามความต้องการของคุณเอง

ต่อไปเราต้องเพิ่มโมดูลตัวแบ่งอีกหนึ่งโมดูลเพื่อเชื่อมต่อตัวแบ่งของเรากับเส้นขอบด้านขวาของแถวที่เราจะออกแบบต่อไป

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

ความกว้าง: 15px
มาร์จิ้นที่กำหนดเอง: -1px ด้านล่าง

การเพิ่มกรอบขอบด้านล่างด้วย Adjacent Text

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

ถัดไป คัดลอกโมดูลตัวแบ่งที่ยาวกว่าจากแถวบนสุด และวางใต้ตัวแบ่งขนาด 15px ในแถวล่าง แล้วปรับดังนี้

ความกว้าง: 75% (เดสก์ท็อป), 70% (แท็บเล็ต), 50% (สมาร์ทโฟน)
การจัดตำแหน่งโมดูล: ซ้าย

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

เนื้อหา: “เริ่ม 1 พฤศจิกายน”
ความกว้าง: 25% (เดสก์ท็อป), 30% (แท็บเล็ต), 50% (สมาร์ทโฟน)
การจัดตำแหน่งโมดูล: ขวา
ระยะขอบที่กำหนดเอง: ด้านบน -15px, ด้านล่าง 0px
ช่องว่างภายในแบบกำหนดเอง: เหลือ 15px

การเพิ่มโมดูลข้อความในแถวกลาง

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

จากนั้นอัปเดตสิ่งต่อไปนี้:

เนื้อหา: “ทุกอย่างลด 20%”
สีพื้นหลัง: rgba(255,255,255,0.9)

น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
รูปแบบตัวอักษรของข้อความ: TT
สีข้อความ: #000000
ขนาดข้อความ: 34px (เดสก์ท็อป), 20px (สมาร์ทโฟน)
ระยะห่างของตัวอักษรข้อความ: 2px
ความสูงของบรรทัดข้อความ: 1em
การวางแนวข้อความ: ศูนย์
Custom Padding: บน 2vw, 2vw ล่าง, 5vw ซ้าย, 5vw ขวา

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

ตอนนี้ทำซ้ำโมดูลข้อความเพื่อเริ่มต้นการออกแบบโมดูลข้อความถัดไป จากนั้นอัปเดตเนื้อหาด้วย html ต่อไปนี้:

<h2 style="border: 7px solid #000000;">Fall Sale</h2>

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

จากนั้นอัปเดตสิ่งต่อไปนี้:

ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
ส่วนหัว 2 รูปแบบตัวอักษร: TT
หัวเรื่อง 2 สีข้อความ: #000000
ขนาดข้อความของหัวเรื่อง 2: 100px (เดสก์ท็อป), 80px (แท็บเล็ต), 60px (สมาร์ทโฟน)
หัวเรื่อง 2 ระยะห่างตัวอักษร: 2px
มาร์จิ้นที่กำหนดเอง: 0px ด้านบน
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

สำหรับโมดูลข้อความสุดท้าย ให้ทำซ้ำโมดูลข้อความแรกในแถวกลางนี้ แล้ววางลงในโมดูลข้อความที่สอง

จากนั้นอัปเดตสิ่งต่อไปนี้:

เนื้อหา: “ซื้อเลย”
รูปแบบตัวอักษรของข้อความ: TT, U (ขีดเส้นใต้)
มาร์จิ้นที่กำหนดเอง: 0px ด้านบน
Custom Padding: 1vw บน, 2vw ด้านล่าง

จัดแต่งทรงผมแถวกลาง

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

ช่องว่างภายในแบบกำหนดเอง: ซ้าย 15px, ขวา 15px
ความกว้างของเส้นขอบขวา: 15px
สีขอบขวา: rgba(255,255,255,0.9)
ความกว้างของเส้นขอบด้านซ้าย: 15px
ขอบซ้ายสี: rgba(255,255,255,0.9)
โหมดผสมผสาน: หน้าจอ

โหมดผสมผสานหน้าจอช่วยให้ข้อความสามารถผสมผสานภาพพื้นหลังเพื่อแสดงผ่านข้อความเพื่อให้ได้เอฟเฟกต์สุดเจ๋ง!

ตรวจสอบผลลัพธ์สุดท้าย

การเพิ่มลิงก์ไปยังแบนเนอร์การขายของคุณ

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

การเพิ่มพื้นหลังส่วนต่างๆ สำหรับการออกแบบที่ไม่เหมือนใคร

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

นี่คือตัวอย่างบางส่วน

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

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

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

ไชโย!