วิธีจัดรูปแบบและจัดตำแหน่งรูปภาพในสถานที่นามธรรมใน Divi

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

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

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

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดตัวอย่างการออกแบบจากบทช่วยสอนนี้ได้ฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ตอนนี้ขอได้รับการกวดวิชาเราจะ?

การเริ่มต้นใช้งาน

ในการเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งและใช้งานธีม Divi แล้ว จากนั้นสร้างหน้าใหม่และปรับใช้ Divi Builder ที่ส่วนหน้า เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

ตอนนี้คุณพร้อมที่จะออกแบบแล้ว!

การจัดตำแหน่งรูปภาพภายนอกวิวพอร์ตบางส่วน (ไปทางขวาหรือซ้าย)

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

นี่คือวิธีการทำ

สร้างและจัดรูปแบบโมดูลข้อความ

ขั้นแรกเราจะสร้างโมดูลข้อความซึ่งจะทำหน้าที่เป็นเนื้อหาหลักสำหรับส่วนของเรา

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

อัปเดตเนื้อหาเพื่อรวมสิ่งต่อไปนี้:

<h2>About Us</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

จากนั้นอัปเดตการตั้งค่าการออกแบบดังนี้:

แบบอักษรของข้อความ: Raleway
แบบอักษรหัวเรื่อง 2: Raleway
หัวข้อ 2 น้ำหนักแบบอักษร: ตัวหนา
หัวเรื่อง 2 ขนาดข้อความ: 44px (เดสก์ท็อป), 24px (โทรศัพท์)
ความกว้าง: 680px (เดสก์ท็อป), 60% (แท็บเล็ต), 80% (โทรศัพท์)
Custom Padding: บน 10%, 10% ล่าง, 10% ซ้าย, 5% ขวา

เพิ่มรูปภาพ #1

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

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

ถัดไป ให้ลดความกว้างของโมดูลรูปภาพลง และจัดแนวไปทางซ้ายดังนี้:

ความกว้าง: 5%
การจัดตำแหน่งโมดูล: ซ้าย

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

ตอนนี้เราสามารถขยายภาพโดยใช้ตัวเลือกการแปลงดังนี้:

เปลี่ยนสเกลแกน X: 416%
เปลี่ยนสเกลแกน Y: 416%

จากนั้นเราสามารถจัดตำแหน่งภาพโดยใช้การแปลงการแปลงดังนี้:

แปลงแกน X แปล: -36%
แปลงแกน Y แปล: 41%

สุดท้ายนี้ คุณสามารถหมุนภาพโดยใช้การหมุนการแปลง:

เปลี่ยนแกน Z หมุน: 11deg

ตอนนี้เราพร้อมที่จะเพิ่มภาพที่สองแล้ว ไปข้างหน้าและเพิ่มโมดูลรูปภาพโดยตรงภายใต้โมดูลข้อความ

จากนั้นอัปโหลดรูปภาพใหม่ไปยังโมดูลรูปภาพ

ถัดไป ให้ลดความกว้างของโมดูลรูปภาพลง และจัดแนวไปทางซ้ายดังนี้:

ความกว้าง: 10%
การจัดตำแหน่งโมดูล: ซ้าย

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

จากนั้นอัปเดตตัวเลือกการแปลงดังนี้:

เปลี่ยนสเกลแกน X: 464%
เปลี่ยนสเกลแกน Y: 464%

แปลงแกน X แปล: 7%
เปลี่ยนแปลแกน Y: -80%

เปลี่ยนแกน Z หมุน: -10deg

จากนั้นเพิ่มเงากล่องสำหรับองค์ประกอบการออกแบบเพิ่มเติม

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: -20px
ตำแหน่งแนวตั้งเงาของกล่อง: -7px

ตรวจสอบให้แน่ใจว่าโมดูลข้อความอยู่ด้านบน

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

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

องค์ประกอบหลัก CSS:

position: relative;

จากนั้นตั้งค่าดัชนี Z เป็น 1

ซ่อนส่วนล้น

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

เปิดการตั้งค่าส่วนและเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

overflow: hidden;

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

การสร้างพื้นหลังภาพตัดปะภาพนามธรรมสำหรับส่วนหัวของคุณ

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

นี่คือวิธีการทำ

การออกแบบโมดูลข้อความส่วนหัว

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

<h1>Interior Design</h1>
<p>This is some content</p>

จากนั้นอัปเดตการออกแบบดังนี้:

สีพื้นหลัง: rgba(0,0,0,0.07)
สีข้อความ: #ffffff
การวางแนวข้อความ: ศูนย์
แบบอักษรของหัวเรื่อง: Raleway
น้ำหนักตัวอักษรของหัวเรื่อง: ตัวหนา
การจัดตำแหน่งข้อความหัวเรื่อง: ขวา
หัวเรื่องสีข้อความ: #ffffff
ขนาดข้อความของหัวเรื่อง: 44px (เดสก์ท็อป), 34px (แท็บเล็ต), 24px (โทรศัพท์)
ความกว้าง: 500px (เดสก์ท็อป), 60% (แท็บเล็ต), 80% (โทรศัพท์)
การจัดตำแหน่งโมดูล: ศูนย์
Custom Padding: บน 5vw, 5vw ล่าง, 1vw ขวา

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

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

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

สีพื้นหลัง: #4c606d
Custom Padding (เดสก์ท็อป): 0px บน, 0px ด้านล่าง
Custom Padding (แท็บเล็ต): 20px ด้านล่าง
Custom Padding (โทรศัพท์): 40px ด้านล่าง

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

กล่องเงา: ดูภาพหน้าจอ
กล่องเงาตำแหน่งแนวนอน: 0px
ตำแหน่งแนวตั้งเงาของกล่อง: -80px
สีเงา: #ffffff

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

overflow: hidden;

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

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

เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

Custom Padding: 10vw ด้านบน
ดัชนี Z: 10

การสร้างภาพต่อกันที่เป็นนามธรรม

ณ จุดนี้ส่วนพร้อมที่จะเริ่มเพิ่มภาพของเรา

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

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

การเพิ่มแถวของรูปภาพ

ไปข้างหน้าและสร้างแถวหนึ่งคอลัมน์ใหม่โดยตรงภายใต้แถวที่มีโมดูลข้อความ

จากนั้นเปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

ความกว้างที่กำหนดเอง: 50%
ความกว้างของรางน้ำ: 1

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

display: flex;

ตอนนี้ เมื่อคุณเพิ่มโมดูลรูปภาพในแถว โมดูลจะจัดแนวในแนวนอน

ดูว่าเกิดอะไรขึ้นเมื่อฉันทำซ้ำโมดูลรูปภาพในแถวด้วย display:flex เพิ่มลงในคอลัมน์

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

การจัดตำแหน่งรูปภาพด้วย Transform Translate

ได้เวลาเริ่มวางตำแหน่งภาพเพื่อสร้างภาพปะติดของเรา

รูปภาพ #1

เปิดการตั้งค่าสำหรับโมดูลรูปภาพแรก (ซ้ายสุด) และอัปเดตตัวเลือกการแปลงดังนี้:

เปลี่ยนสเกลแกน X: 266%
เปลี่ยนสเกลแกน Y: 266%

แปลงแปล: แกน X: -68%
แปลงแปล: แกน Y: -54%

รูปภาพ #2

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

เปลี่ยนมาตราส่วนแกน X: 184%
เปลี่ยนสเกลแกน Y: 184%

แปลงแปล: แกน X: -36%
แปลงแปล: แกน Y: -66%

รูปภาพ #3

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

เปลี่ยนขนาดแกน X: 206%
แปลงมาตราส่วนแกน Y: 206%

แปลงแปล: แกน X: -51%
แปลงแปล: แกน Y: -27%

รูปภาพ #4

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

เปลี่ยนสเกลแกน X: 180%
เปลี่ยนสเกลแกน Y: 180%

แปลงแปล: แกน X: 20%
แปลงแปล: แกน Y: 42%

รูปภาพ #5

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

เปลี่ยนมาตราส่วนแกน X: 290%
เปลี่ยนสเกลแกน Y: 290%

แปลงแปล: แกน X: -50%
แปลงแปล: แกน Y: 72%

การเพิ่มเงากล่องให้กับรูปภาพ

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

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

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: -40px
ตำแหน่งแนวตั้งเงาของกล่อง: 40px
เงาสี: rgba(255,255,255,0.13)

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายของการออกแบบ

เดสก์ทอป

ยาเม็ด

โทรศัพท์

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

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

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

ไชโย!