วิธีสร้างการซ้อนทับพื้นหลังไล่ระดับด้วยการตั้งค่าพื้นหลังของ Divi

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

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

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

ตัวอย่างการซ้อนทับพื้นหลังไล่ระดับสี

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

หมวดฮีโร่

นี่คือลักษณะของส่วนฮีโร่เมื่อเพิ่มรูปภาพพื้นหลังเท่านั้น:

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

ส่วนประกาศ

นี่คือลักษณะของส่วนการนำเสนอเมื่อใช้พื้นหลังสีเดียว:

และนี่คือลักษณะที่ผลลัพธ์สุดท้ายดูเหมือนเมื่อเราเพิ่มการซ้อนทับพื้นหลังแบบไล่ระดับลงในพื้นหลังรูปแบบ:

ส่วนการกำหนดราคา

นี่คือลักษณะของส่วนการกำหนดราคาเมื่อเราใช้สีเดียว (ในโทนสีอ่อนและเข้มกว่า):

และนี่คือลักษณะของผลลัพธ์ที่ได้หลังจากใช้การซ้อนทับพื้นหลังแบบไล่ระดับสี:

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

ทีละขั้นตอน: ส่วนฮีโร่

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

เริ่มสร้าง

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

การตั้งค่าโมดูลข้อความแรก

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

ภายในแท็บ ออกแบบ ทำการปรับเปลี่ยนต่อไปนี้ในหมวดหมู่ย่อยข้อความ:

• การวางแนวข้อความ: ศูนย์
• ขนาดตัวอักษรข้อความ: 30
• สีแบบอักษรของข้อความ: #FFFFFF

การตั้งค่าโมดูลข้อความที่สอง

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

• การวางแนวข้อความ: ศูนย์
• ขนาดตัวอักษรข้อความ: 16
• สีแบบอักษรของข้อความ: #FFFFFF

เลื่อนลงไปที่แท็บเดียวกันและเพิ่ม '500px' ให้กับ Max Width ในหมวดหมู่ย่อย Sizing และ '2%' ไปที่ Bottom Margin ในหมวดย่อย Spacing

การตั้งค่าปุ่ม

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

ภายในแท็บ ออกแบบ ทำการปรับเปลี่ยนต่อไปนี้ในหมวดหมู่ย่อยของปุ่ม:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 20
• สีข้อความของปุ่ม: #FFFFFF
• ปุ่มสีพื้นหลัง: rgba(0,0,0,0)
• ความกว้างของขอบปุ่ม: 2
• สีเส้นขอบของปุ่ม: #FFFFFF
• รัศมีเส้นขอบของปุ่ม: 7

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

มาร์จิ้นสูงสุด: 15%
ขอบล่าง: 10%

การตั้งค่าการซ้อนทับพื้นหลังไล่ระดับสี

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

สำหรับตัวอย่างที่เราทำ เราใช้การตั้งค่าต่อไปนี้:

• สีแรก: #3730ff
• สีที่สอง: #e02b20
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 272deg
• ตำแหน่งเริ่มต้น: 40%
• ตำแหน่งสุดท้าย: 100%

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

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

และคุณมีผลลัพธ์สุดท้าย:

ทีละขั้นตอน: ส่วนประกาศ

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

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

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

เริ่มสร้าง

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

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

การตั้งค่า Blurb

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

• ไอคอนสี: rgba(255,255,255,0.36)
• ไอคอนวงกลม: ใช่
• วงกลมสี: rgba(255,255,255,0)
• แสดงเส้นขอบวงกลม: ใช่
• สีเส้นขอบของวงกลม: rgba(255,255,255,0.36)
• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 96px

เลื่อนลงมาที่แท็บเดียวกันแล้ววางการวางแนวข้อความไปที่ 'กึ่งกลาง' ในหมวดหมู่ย่อยของข้อความ

เลื่อนต่อไปและเปิดหมวดหมู่ย่อยข้อความส่วนหัว ไปข้างหน้าและใช้การตั้งค่าต่อไปนี้:

• ขนาดตัวอักษรของส่วนหัว: 18
• สีข้อความส่วนหัว: #FFFFFF
• ความสูงของบรรทัดส่วนหัว: 1em

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

• ขนาดตัวอักษรของร่างกาย: 14
• สีข้อความ: #FFFFFF
• ความสูงของเส้นร่างกาย: 1.5em

อย่าลืมโคลนโมดูล Blurb สองครั้ง วางไว้ในคอลัมน์ที่เหลืออีกสองคอลัมน์และเปลี่ยนเนื้อหาตามนั้น

การตั้งค่าแถว

เปิดการตั้งค่าแถวและไปที่หมวดหมู่ย่อยการเว้นวรรคในแท็บออกแบบ สิ่งเดียวที่คุณต้องทำคือเปลี่ยนระยะขอบบนและล่างเป็น '5%'

การตั้งค่าการซ้อนทับพื้นหลังไล่ระดับสี

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

ถัดไป ทำการเปลี่ยนแปลงต่อไปนี้กับตัวเลือกการไล่ระดับสี:

• สีแรก: #52009b
• สีที่สอง: #0edeed
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ขวา
• ตำแหน่งเริ่มต้น: 28%
• ตำแหน่งสุดท้าย: 100%

ไปที่ตัวเลือกพื้นหลัง อัปโหลดรูปแบบที่เลือก และทำการเปลี่ยนแปลงต่อไปนี้:

• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ทำซ้ำ (ขึ้นอยู่กับรูปแบบของคุณ)
• การผสมผสานภาพพื้นหลัง: ทวีคูณ

แค่นั้นแหละ! ตอนนี้คุณควรได้ผลลัพธ์ที่น่าทึ่งดังต่อไปนี้:

ทีละขั้นตอน: ส่วนราคา

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

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

เริ่มสร้าง

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

การตั้งค่าโมดูลข้อความแรก

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

ใช้การเปลี่ยนแปลงต่อไปนี้กับหมวดหมู่ย่อยข้อความของแท็บออกแบบ:

• การวางแนวข้อความ: ศูนย์
• ขนาดตัวอักษรของข้อความ: 24
• สีแบบอักษรของข้อความ: #FFFFFF
• ความสูงของบรรทัดข้อความ: 1.5em

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

• ขอบบน: 50px
• ขอบล่าง: 20px

การตั้งค่าโมดูลข้อความที่สอง

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

ในแท็บ ออกแบบ ทำการปรับเปลี่ยนต่อไปนี้:

• การวางแนวข้อความ: ศูนย์
• ขนาดตัวอักษรของข้อความ: 82px
• สีแบบอักษรของข้อความ: #FFFFFF
• ความสูงของบรรทัดข้อความ: 1.1em

เลื่อนลงมาที่แท็บเดิมและเพิ่ม '10px' ไปที่ระยะขอบด้านล่าง

การตั้งค่าโมดูลข้อความที่สาม

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

• การวางแนวข้อความ: ศูนย์
• ขนาดตัวอักษรข้อความ: 16
• สีแบบอักษรของข้อความ: #FFFFFF
• ความสูงของบรรทัดข้อความ: 1.1em

เลื่อนลงไปที่แท็บเดิมและเพิ่ม '33px' ไปที่ระยะขอบด้านล่างในหมวดย่อยการเว้นวรรค

การตั้งค่าปุ่ม

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

ภายในแท็บ Design ให้ใส่ Button Alignment ในหมวดย่อย Alignment ไปที่ 'Center' และทำการเปลี่ยนแปลงต่อไปนี้ในหมวดย่อยของ Button:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 13
• สีข้อความของปุ่ม: #FFFFFF
• สีพื้นหลังของปุ่ม: rgba(255,255,255,0.11)
• ความกว้างของขอบปุ่ม: 2
• สีเส้นขอบของปุ่ม: #FFFFFF
• รัศมีเส้นขอบของปุ่ม: 4
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 1

การตั้งค่าตัวแบ่ง

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

ตอนนี้เราได้เพิ่มโมดูลทั้งหมดแล้ว ตรวจสอบให้แน่ใจว่าคุณโคลนและใส่ไว้ในคอลัมน์อื่นๆ ด้วย

การตั้งค่าการซ้อนทับพื้นหลังไล่ระดับสี

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

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

• สีแรก: rgba(10,122,178,0.57)
• สีที่สอง: rgba(142,0,142,0.47)
• คอลัมน์ 1 ประเภทการไล่ระดับสี: เรเดียล
• คอลัมน์ 1 ทิศทางรัศมี: บนซ้าย
• คอลัมน์ 1 ตำแหน่งเริ่มต้น: 0
• คอลัมน์ 1 ตำแหน่งสิ้นสุด: 100%

ถัดไป ไปที่คอลัมน์ 2 และทำการเปลี่ยนแปลงต่อไปนี้กับตัวเลือกการไล่ระดับสี:

• สีแรก: #0a7ab2
• สีที่สอง: #8e008e
• คอลัมน์ 2 ประเภทการไล่ระดับสี: เชิงเส้น
• คอลัมน์ 2 ทิศทางการไล่ระดับสี: 180deg
• คอลัมน์ 2 ตำแหน่งเริ่มต้น: 0
• คอลัมน์ 2 ตำแหน่งสิ้นสุด: 100

ไปที่ตัวเลือกภาพพื้นหลัง อัปโหลดภาพพื้นหลังและเปลี่ยนการตั้งค่า:

• คอลัมน์ 2 ตำแหน่งภาพพื้นหลัง: บนซ้าย
• ทำซ้ำภาพพื้นหลังของคอลัมน์ 2: ทำซ้ำ
• คอลัมน์ 2 ภาพพื้นหลังแบบผสมผสาน: คูณ

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

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!