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

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

พื้นหลังหลายชั้นคืออะไร?

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

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

นี่คือลักษณะของพื้นหลังแบบหลายชั้น:

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

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

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

ทำไมต้องใช้พื้นหลังหลายชั้น?

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

นี่คือเหตุผลบางประการในการใช้พื้นหลังชั้น:

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

และที่ดีที่สุดของทั้งหมด - ทั้งหมดนี้ทำใน UI Beaver Builder ไม่จำเป็นต้องมี CSS พิเศษหรือการตั้งค่าที่ซับซ้อน ด้วยการคลิกเพียงไม่กี่ครั้งคุณสามารถสร้างการออกแบบแบบไดนามิกที่มีการทำงานที่ใช้งานได้ดีเท่าที่ควร

วิธีใช้พื้นหลังหลายชั้นใน Beaver Builder

คุณสามารถผสมและจับคู่พื้นหลังได้มากเท่าที่คุณต้องการ - สีการไล่ระดับสีและรูปภาพ - ตามลำดับใด ๆ :

นี่คือวิธีเพิ่มหลายพื้นหลังลงในแถวคอลัมน์หรือโมดูลกล่อง:

1. เปิดองค์ประกอบสำหรับการแก้ไข
   คลิกเพื่อแก้ไขโมดูลแถวคอลัมน์หรือกล่องซึ่งคุณต้องการใช้พื้นหลังหลายชั้น
2. ไปที่การตั้งค่าพื้นหลัง
   ในแผงการตั้งค่าโมดูลนำทางไปยังส่วน พื้นหลัง
3. เปิดใช้งานหลายพื้นหลัง
   เลือกตัวเลือก เบื้องหลังหลายตัว เพื่อเปิดใช้งานชั้น
4. เพิ่มพื้นหลังแรกของคุณ
   คลิกที่ไอคอน + เพื่อเพิ่มประเภทพื้นหลังจากนั้นเลือกจาก สี ภาพถ่าย หรือ การไล่ระดับสี ปรับแต่งการตั้งค่าตามต้องการ
5. เพิ่มเลเยอร์พื้นหลังเพิ่มเติม
   คลิกไอคอน + อีกครั้งเพื่อเพิ่มเลเยอร์อื่น ทำซ้ำกระบวนการสำหรับแต่ละประเภทพื้นหลังที่คุณต้องการซ้อน
6. บันทึกการเปลี่ยนแปลงของคุณ
   เมื่อคุณมีความสุขกับการออกแบบพื้นหลังเลเยอร์ของคุณให้คลิก บันทึก

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

เคล็ดลับการออกแบบสำหรับการเลเยอร์เหมือนมืออาชีพ

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

1. การไล่ระดับสีชั้นบนภาพเพื่อการอ่านที่ดีขึ้น

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

2. ทำให้มันบอบบางไม่เบี่ยงเบนความสนใจ

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

3. ใช้สีแบรนด์อย่างมีกลยุทธ์

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

4. เพิ่มความสนใจด้านภาพด้วยการซ้อนเลเยอร์

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

5. ทดสอบการตอบสนองมือถือ

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

6. ไฮไลต์ส่วนสำคัญด้วยพื้นผิวภาพ

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

7. ใช้ความทึบเพื่อผสมผสานเลเยอร์อย่างราบรื่น

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

กรณีการใช้งานจริง

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

• ส่วนของฮีโร่ : รวมภาพกับการซ้อนทับสีเพื่อการแนะนำที่สะอาดและมีผลกระทบสูง
• Call-to-actions (CTAs) : ใช้สีและพื้นผิวของแบรนด์ที่เป็นตัวหนาเพื่อดึงดูดความสนใจทันที
• ไฮไลท์บล็อก : ใช้พื้นหลังการไล่ระดับสีและภาพเพื่อให้ชื่อโดดเด่น
• Bento Grids : ใช้พื้นผิวและสีที่อยู่ด้านหลังแต่ละบล็อกเพื่อสร้างความลึกและความสนใจด้านภาพ

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

ถัดไป: เลเยอร์พื้นหลังที่บันทึกไว้

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

ลองใช้พื้นหลังหลายชั้นวันนี้

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