วิธีการซ้อนภาพใน WordPress

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

ยังสงสัยว่ามันคืออะไร? ช้าหน่อยแล้วให้เราพาคุณออกไป!

โอเวอร์เลย์คืออะไร?

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

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

ตื่นเต้นกันรึยัง? มาเริ่มกันเลย!

วิธีการซ้อนภาพใน WordPress

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

ทั้งสองวิธีนี้ใช้งานง่ายในบางวิธี และเราจะแสดงวิธีใช้งานทีละขั้นตอนให้คุณดู

วิธีที่ 1: การใช้ Cover Block ของ Gutenberg

ไปที่ตัวแก้ไขเพจของ Gutenberg

ขั้นตอนที่ 1: แทรกรูปภาพโดยใช้ Cover Block

คลิก เพิ่มบล็อก และเลือกประเภทบล็อกเป็น หน้าปก

จากนั้นเลือกรูปภาพพื้นหลังที่จะแสดงบนหน้าปกนั้น คุณสามารถอัปโหลดรูปภาพหรือเลือกรูปภาพจากห้องสมุดของคุณ

คุณยังสามารถเปลี่ยนรูปภาพที่คุณเพิ่มก่อนหน้านี้ลงในภาพหน้าปกได้หากจำเป็น คลิกที่รูปภาพ เลือก Change block style or type แล้วเลือก Cover :

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

นอกจากนี้ ฉันสามารถกำหนดความกว้างของรูปภาพได้ในการตั้งค่าด้านล่าง ฉันจะจัดตำแหน่งให้ตรงกลาง

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

ขั้นตอนที่ 2: ปรับแต่งการซ้อนทับบล็อคหน้าปก

ถัดไป คุณจะดำเนินการตั้งค่าบล็อกเพื่อสร้างโอเวอร์เลย์

คลิกที่บล็อก > คลิก ปุ่มตัวเลือก (แสดงเป็นปุ่มสามจุด) > เลือก แสดงการตั้งค่าเพิ่มเติม

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

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

เราจะลองทั้งสองตัวเลือกนี้ ขั้นแรก ให้ลองใช้การซ้อนทับแบบสีทึบ

โอเวอร์เลย์สีทึบ

ตอนนี้คุณสามารถ:

• เลือกสีจากเมนูที่แนะนำ
• เลือกสีที่กำหนดเอง คุณสามารถเลือกสีในจานสีหรือแทรกรหัสสีได้ สีที่กำหนดเองจะแสดงดังต่อไปนี้

ฉันเพิ่งเลือกสีสีชมพูหวานสำหรับภาพซ้อนทับของฉัน นอกจากนี้ ฉันยังเปลี่ยนความทึบ (ระดับความโปร่งใส) ของโอเวอร์เลย์ได้:

อัตราความทึบ 30 ถึง 60% เป็นค่าที่เหมาะสม หากคุณตั้งค่าความทึบต่ำกว่าหรือสูงกว่าอัตราที่แนะนำ การวางซ้อนอาจแทบมองไม่เห็นหรือเป็นตัวหนาเกินกว่าที่จะเห็นพื้นหลัง ฉันจะรักษาอัตราความทึบไว้ที่ 50% เป็นค่าเริ่มต้น

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

ตอนนี้ ไปที่ตัวเลือกการไล่ระดับสี

การซ้อนทับสีไล่โทนสี

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

เรามาดูกันว่าฉันสร้างการไล่ระดับสีทับซ้อนเพื่อให้เข้าใจดีขึ้นได้อย่างไร

ก่อนอื่น ฉันเปลี่ยนโหมดสีจากทึบเป็นไล่ระดับสี นอกจากนี้ ฉันยังเลือกชุดสีแบบไล่ระดับสีจากเมนูคำแนะนำ นี่คือลักษณะ:

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

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

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

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

วิธีที่ 2: การใช้ CSS

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

สำหรับการซ้อนทับแบบไล่ระดับ

เพิ่มรหัสนี้สำหรับการซ้อนทับแบบไล่ระดับสี:

 .background-gradient {
    ตำแหน่ง: ญาติ;
}
.background-gradient::before {
    เนื้อหา: '';
    พื้นหลัง: การไล่ระดับสีเชิงเส้น (135deg,#0693e3,#9b51e0);
    ตำแหน่ง: สัมบูรณ์;
    ด้านบน: 0;
    ซ้าย: 0;
    ด้านล่าง: 0;
    ขวา: 0;
    ดัชนี z: 1;
    ความทึบ: .5;
}

สำหรับการซ้อนทับแบบทึบ:

เพิ่มรหัสนี้สำหรับการซ้อนทับแบบทึบ:

 .background-ทึบ {
    ตำแหน่ง: ญาติ;
}
.background-opacity:ก่อน {
    เนื้อหา: '';
    ตำแหน่ง: สัมบูรณ์;
    ด้านบน: 0;
    ซ้าย: 0;
    ด้านล่าง: 0;
    ขวา: 0;
    ดัชนี z: 1;
    ความทึบ: .5;
    พื้นหลังสี: #000;
}

หมายเหตุ: โค้ดนี้จะช่วยให้คุณเพิ่มการซ้อนทับเท่านั้น ไม่ใช่ข้อความบนรูปภาพ

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

• ทึบ: <div class="background-opacity"> … </div>
• การไล่ระดับสี: <div class="background-gradient is-style-default"> … </div>

ตัวอย่างเช่น:

นั่นเป็นวิธีที่ฉันทำมัน!

คำตัดสิน

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