Divi ช่วยให้การเพิ่มรูปภาพได้ทุกที่เป็นเรื่องง่าย บล็อกของคุณ. รูปภาพทั้งหมดรองรับการโหลดแบบโปรเกรสซีฟ และมาพร้อมกับสไตล์แอนิเมชั่น 4 แบบที่ทำให้การนำทางไซต์ของคุณสนุกและน่าดึงดูด คุณสามารถวางโมดูลรูปภาพในคอลัมน์ใดๆ ที่คุณสร้างได้ และขนาดจะถูกปรับขนาดให้พอดี
วิธีการเพิ่มโมดูลภาพจาก Divi
ก่อนที่คุณจะเพิ่มโมดูลรูปภาพลงในเพจได้ คุณต้องข้ามไปที่ Divi Builder ก่อน เมื่อ ธีม Divi ติดตั้งบนเว็บไซต์ของคุณ คุณจะสังเกตเห็นปุ่ม ใช้ Divi Builder เหนือโปรแกรมแก้ไขโพสต์เมื่อใดก็ตามที่คุณสร้างเพจใหม่ คลิกที่ปุ่มนี้เพื่อเปิดใช้งาน Divi Builder และเข้าถึงโมดูล Divi Builder ทั้งหมด จากนั้นคลิกที่ปุ่ม ใช้ Visual Builder เพื่อเริ่มเครื่องกำเนิดไฟฟ้าในโหมดภาพ คุณยังสามารถคลิกปุ่ม ใช้ Visual Builder เมื่อคุณเรียกดูเว็บไซต์ของคุณในเบื้องหน้าหากคุณเชื่อมต่อกับแผงควบคุม WordPress ของคุณ
เมื่อคุณเปิดใช้งาน Visual Builder แล้วคุณสามารถคลิกปุ่มสีเทา (+) เพื่อเพิ่มโมดูลใหม่ในเพจของคุณ โมดูลใหม่สามารถเพิ่มได้ภายในแถวเท่านั้น หากคุณกำลังเริ่มหน้าใหม่อย่าลืมเพิ่มแถวในเพจของคุณก่อน
ค้นหาโมดูลรูปภาพในรายการโมดูลและคลิกเพื่อเพิ่มลงในเพจของคุณ รายการโมดูลสามารถค้นหาได้ซึ่งหมายความว่าคุณสามารถพิมพ์คำว่า "รูปภาพ" จากนั้นคลิก Enter เพื่อค้นหาและเพิ่มโมดูลรูปภาพโดยอัตโนมัติ! เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับจากรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง .
ตัวอย่างกรณีการใช้งาน: การเพิ่มรูปภาพที่ซ้อนทับกันเพื่อแสดงบริการบนหน้าบริการ
มีหลายวิธีในการใช้โมดูลรูปภาพ สำหรับตัวอย่างนี้ฉันจะแสดงวิธีเพิ่มรูปภาพในหน้าบริการสำหรับเว็บไซต์ธุรกิจขนาดเล็ก นี่คือที่ที่ฉันจะเพิ่มภาพ วงกลมสีแดงแต่ละวงแสดงถึงรูปภาพ
เนื่องจากการเพิ่มรูปภาพลงในหน้าเป็นกระบวนการที่ค่อนข้างง่ายและตรงไปตรงมา ฉันจะเพิ่มสไตล์ที่กำหนดเองเพื่อจัดตำแหน่งรูปภาพของฉันเพื่อให้ซ้อนทับกัน ทำให้เกิดเอฟเฟกต์แบบเรียงซ้อน
ขอเริ่มต้น
ใช้ตัวสร้างภาพเพื่อเพิ่มส่วนมาตรฐานด้วยเค้าโครง 1/4 1/4 1/2 จากนั้นเพิ่มโมดูลข้อความลงในคอลัมน์ด้านขวา 1/2 ของแถว ป้อนส่วนหัวและคำอธิบายสำหรับบริการ
จากนั้นเพิ่มโมดูลรูปภาพที่คอลัมน์ 1/4 ด้านซ้ายสุด
อัพเดตการตั้งค่าของโมดูลรูปภาพดังต่อไปนี้:
ตัวเลือกเนื้อหา
URL ของรูปภาพ: [ป้อน URL หรือดาวน์โหลดรูปภาพขนาด 500 × 625]
ตัวเลือกการออกแบบ
Custom Margin: left -60px
ตัวเลือกขั้นสูง
แอนิเมชัน: จากซ้ายไปขวา
บันทึกการตั้งค่า
เพิ่มโมดูลรูปภาพอื่นในคอลัมน์ 1/4 ที่สอง (หรือคอลัมน์กลาง) และอัปเดตการตั้งค่ารูปภาพดังต่อไปนี้:
ตัวเลือกเนื้อหา
URL ของรูปภาพ: [ป้อน URL หรือดาวน์โหลดรูปภาพขนาด 500 × 625]
ตัวเลือกการออกแบบ
Custom Margin: ด้านบน 100px, -60px Left
ตัวเลือกขั้นสูง
แอนิเมชัน: จากขวาไปซ้าย
บันทึกการตั้งค่า
สิ่งนี้จะดูแลส่วนแรก ตอนนี้สำหรับส่วนบริการถัดไปเราสามารถทำซ้ำส่วนที่เราเพิ่งสร้างขึ้นสำหรับส่วนบริการแรก เมื่อส่วนซ้ำแล้วให้เปลี่ยนโครงสร้างคอลัมน์เป็นโครงร่าง 1/2 1/4 1/4 คอลัมน์ (ตรงข้ามกับส่วนก่อนหน้า)
จากนั้นลากโมดูลข้อความที่มีส่วนหัวและคำอธิบายของบริการลงในคอลัมน์ 1/2 ทางด้านซ้ายสุด ตรวจสอบให้แน่ใจว่าได้เลื่อนโมดูลรูปภาพสองโมดูลให้เต็มทุกๆ 1/4 คอลัมน์ (ตอนนี้อยู่ทางขวา)
เนื่องจากโมดูลรูปภาพซ้ำกันเราจึงจำเป็นต้องอัปโหลดภาพใหม่สำหรับส่วนบริการนั้น ๆ นอกจากนี้โมดูลจะมีการตั้งค่าระยะขอบแบบกำหนดเองเสมอเช่นเดียวกับโมดูลรูปภาพสองโมดูลแรกที่สร้างขึ้น มาเปลี่ยนกันเถอะ
เริ่มต้นด้วยโมดูลรูปภาพในคอลัมน์ 1 / 4 ด้านขวาอัพเดตการตั้งค่าภาพต่อไปนี้:
ตัวเลือกเนื้อหา
URL ของรูปภาพ: [ป้อน URL หรือดาวน์โหลดรูปภาพขนาด 500 × 625]
ตัวเลือกการออกแบบ
Custom Margin: -60px Left (only)
แท็บขั้นสูง
แอนิเมชัน: จากขวาไปซ้าย
สุดท้ายอัปเดตการตั้งค่าภาพสำหรับโมดูลภาพ 1/4 คอลัมน์กลางดังต่อไปนี้:
ตัวเลือกเนื้อหา
URL ของรูปภาพ: [ป้อน URL หรือดาวน์โหลดรูปภาพขนาด 500 × 625]
ตัวเลือกการออกแบบ
Custom Margin: 100px Up, -60px Right
แท็บขั้นสูง
แอนิเมชัน: จากซ้ายไปขวา
บันทึกการตั้งค่า
ตอนนี้ดูหน้าเว็บ!
ตัวเลือกเนื้อหาโมดูลภาพ
ในแท็บเนื้อหาคุณจะพบองค์ประกอบเนื้อหาทั้งหมดของโมดูลเช่นข้อความรูปภาพและไอคอน ทั้งหมดที่ควบคุม สิ่งที่ ปรากฏในโมดูลของคุณจะพบได้ในแท็บนี้เสมอ
URL ของรูปภาพ
วาง URL ของรูปภาพที่ถูกต้องที่นี่หรือเลือก / อัปโหลดรูปภาพผ่านไลบรารีสื่อของ WordPress รูปภาพจะปรากฏทางซ้ายในคอลัมน์เสมอและครอบคลุมความกว้างทั้งหมดของคอลัมน์ของคุณ อย่างไรก็ตามรูปภาพของคุณจะไม่มีขนาดใหญ่กว่าขนาดเดิม ความสูงของรูปภาพจะถูกกำหนดโดยอัตราส่วนของรูปภาพต้นฉบับของคุณ
เปิดในมุมมอง
ที่นี่คุณสามารถเลือกได้ว่าจะเปิดภาพของคุณในโปรแกรมดูภาพเมื่อคุณคลิกที่ภาพหรือไม่ หากเปิดใช้งานตัวเลือกนี้รูปภาพของคุณจะ "ซูม" เป็นขนาดสูงสุดเมื่อคุณคลิกในหน้าต่างโมดอล เป็นคุณสมบัติที่ยอดเยี่ยมสำหรับกระเป๋าสตางค์
Link URL
วาง URL ของเว็บที่ถูกต้องในช่องนี้เพื่อเปลี่ยนรูปภาพของคุณให้เป็นลิงก์ การเว้นช่องนี้ว่างไว้จะทำให้รูปภาพของคุณเป็นองค์ประกอบคงที่
กำลังเปิด URL
คุณสามารถเลือกได้ที่นี่ว่าลิงก์ของคุณจะเปิดในหน้าต่างใหม่หรือไม่
ป้ายกำกับดูแลระบบ
สิ่งนี้จะเปลี่ยนป้ายชื่อโมดูลในตัวสร้างเพื่อให้ระบุตัวตนได้ง่าย เมื่อคุณใช้มุมมอง WireFrame ใน Visual Builder ป้ายเหล่านี้จะปรากฏในบล็อกโมดูลของอินเทอร์เฟซ Divi Builder
ตัวเลือกการออกแบบโมดูลภาพ
ในแท็บออกแบบคุณจะพบตัวเลือกรูปแบบโมดูลทั้งหมดเช่นแบบอักษรสีการปรับขนาดและระยะห่าง นี่คือแท็บที่คุณจะใช้เพื่อเปลี่ยนรูปลักษณ์ของโมดูลของคุณ โมดูล Divi แต่ละโมดูลมีรายการการตั้งค่าการออกแบบมากมายที่คุณสามารถใช้เพื่อเปลี่ยนแปลงอะไรก็ได้
ภาพซ้อนทับ
หากเปิดใช้งานตัวเลือกนี้สีและไอคอนภาพซ้อนทับจะปรากฏขึ้นเมื่อผู้เยี่ยมชมวางเมาส์เหนือรูปภาพ
ไอคอนสีซ้อนทับ
คุณสามารถกำหนดสีที่กำหนดเองสำหรับไอคอนภาพซ้อนทับได้ที่นี่
ปกคลุมภาพซ้อนทับสี
ที่นี่คุณสามารถกำหนดสีที่กำหนดเองสำหรับการวางซ้อน
ไอคอนการบิน
ที่นี่คุณสามารถกำหนดไอคอนที่กำหนดเองสำหรับการวางซ้อน
ลบช่องว่างด้านล่างภาพ
ตัวเลือกนี้จะมีผลกับรูปภาพเมื่อเป็นโมดูลสุดท้ายในคอลัมน์เท่านั้น เมื่อเปิดใช้งานตัวเลือกนี้ระยะห่างระหว่างด้านล่างของรูปภาพและส่วนถัดไปจะถูกลบออกทำให้รูปภาพสามารถจัดกรอบด้านบนของส่วนถัดไปของเพจได้
การจัดตำแหน่งภาพ
ที่นี่คุณเลือกทิศทางที่รูปภาพของคุณจะลอยในคอลัมน์ คุณสามารถลอยภาพไปทางซ้ายขวาหรือจัดให้อยู่กึ่งกลาง
จัดกึ่งกลางภาพบนมือถือเสมอ
บ่อยครั้งที่ภาพขนาดเล็กจะดูน่าพึงพอใจกว่าบนอุปกรณ์มือถือเมื่ออยู่ตรงกลาง เมื่อคอลัมน์ล้มเหลวรูปภาพที่จัดชิดซ้ายหรือขวาในคอลัมน์ที่มีขนาดเล็กจะถูกละเลยเมื่อคอลัมน์ล้มเหลวและมีความกว้างถึง 100% การเปิดใช้งานคอลัมน์นี้ที่มีรูปภาพบังคับเพื่อจัดแนวตรงกลางคอลัมน์บนอุปกรณ์เคลื่อนที่โดยไม่ส่งผลต่อการจัดแนวรูปภาพบนเดสก์ท็อป
ใช้เส้นขอบ
การเปิดใช้งานตัวเลือกนี้จะวางเส้นขอบรอบโมดูลของคุณ เส้นขอบนี้สามารถปรับแต่งได้โดยใช้พารามิเตอร์เงื่อนไขต่อไปนี้
สีของเส้นขอบ
ตัวเลือกนี้มีผลต่อสีของเส้นขอบของคุณ เลือกสีที่กำหนดเองจากตัวเลือกสีเพื่อใช้กับเส้นขอบของคุณ
ความกว้างของเส้นขอบ
โดยค่าเริ่มต้นเส้นขอบจะกว้าง 1 พิกเซล คุณสามารถเพิ่มค่านี้ได้โดยการลากแถบเลื่อนช่วงหรือป้อนค่าที่กำหนดเองในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน รองรับหน่วยวัดที่กำหนดเองซึ่งหมายความว่าคุณสามารถเปลี่ยนหน่วยเริ่มต้นจาก "px" เป็นอย่างอื่นได้เช่น em, vh, vw เป็นต้น
สไตล์ชายแดน
เส้นขอบรองรับรูปแบบที่แตกต่างกันแปดแบบ: ทึบลายจุดคู่ร่องสันซ้อนทับและเริ่มต้น เลือกสไตล์ที่คุณต้องการจากเมนูแบบเลื่อนลงเพื่อนำไปใช้กับเส้นขอบของคุณ
ความกว้างของภาพสูงสุด
โดยค่าเริ่มต้นความกว้างสูงสุดของภาพจะตั้งไว้ที่ 100% ซึ่งหมายความว่ารูปภาพจะแสดงด้วยความกว้างตามธรรมชาติเว้นแต่ความกว้างของรูปภาพจะเกินความกว้างของคอลัมน์พาเรนต์ซึ่งในกรณีนี้รูปภาพจะถูก จำกัด ไว้ที่ 100% ของความกว้างของคอลัมน์ หากคุณต้องการจำกัดความกว้างสูงสุดของรูปภาพเพิ่มเติมคุณสามารถทำได้โดยป้อนค่าความกว้างสูงสุดที่ต้องการที่นี่ ตัวอย่างเช่นค่า 50% จะจำกัดความกว้างของรูปภาพไว้ที่ 50% ของความกว้างของคอลัมน์ระดับบนสุด
บังคับความกว้างเต็ม
ตามค่าเริ่มต้นรูปภาพจะแสดงตามความกว้างดั้งเดิม อย่างไรก็ตามคุณสามารถเลือกบังคับให้รูปภาพขยายความกว้างเต็มของคอลัมน์พาเรนต์ได้โดยเปิดใช้งานตัวเลือกนี้
ระยะขอบที่กำหนดเอง
ระยะขอบคือช่องว่างที่เพิ่มเข้าไปด้านนอกโมดูลของคุณระหว่างโมดูลและองค์ประกอบถัดไปด้านบนด้านล่างหรือทางซ้ายและขวาของโมดูล คุณสามารถเพิ่มค่าระยะขอบที่กำหนดเองให้กับสี่ด้านใดก็ได้ของโมดูล หากต้องการลบระยะขอบที่กำหนดเองให้ลบค่าที่เพิ่มออกจากช่องป้อนข้อมูล โดยค่าเริ่มต้นค่าเหล่านี้จะวัดเป็นพิกเซล แต่คุณสามารถป้อนหน่วยวัดที่กำหนดเองได้ในช่องป้อนข้อมูล
ตัวเลือกโมดูลภาพขั้นสูง
ในแท็บขั้นสูงคุณจะพบตัวเลือกที่นักออกแบบเว็บที่มีประสบการณ์มากกว่าอาจพบว่ามีประโยชน์เช่นแอตทริบิวต์ CSS และ HTML ที่กำหนดเอง ที่นี่คุณสามารถใช้ CSS ที่กำหนดเองกับองค์ประกอบต่างๆของโมดูลได้ คุณยังสามารถใช้คลาส CSS และ ID ที่กำหนดเองกับโมดูลซึ่งสามารถใช้เพื่อปรับแต่งโมดูลในไฟล์ style.css ของธีมลูกของคุณ
รหัส CSS
ป้อน CSS ID ทางเลือกเพื่อใช้สำหรับโมดูลนี้ คุณสามารถใช้ ID เพื่อสร้างสไตล์ CSS ที่กำหนดเองหรือเพื่อเชื่อมโยงไปยังส่วนเฉพาะของเพจของคุณ
ชั้น CSS
ป้อนคลาส CSS ที่เป็นทางเลือกเพื่อใช้สำหรับโมดูลนี้ คุณสามารถใช้คลาส CSS เพื่อสร้างสไตล์ CSS ที่กำหนดเองได้ คุณสามารถเพิ่มหลายชั้นเรียนโดยคั่นด้วยช่องว่าง สามารถใช้คลาสเหล่านี้ในธีมลูก Divi ของคุณหรือในสไตล์ชีต CSS แบบกำหนดเองที่คุณเพิ่มลงในเพจหรือในเว็บไซต์ของคุณโดยใช้ตัวเลือกธีม Divi หรือการตั้งค่าในหน้า Divi Builder
CSS ที่กำหนดเอง
CSS ที่กำหนดเองยังสามารถนำไปใช้กับโมดูลและภายในของโมดูลได้ ในส่วน CSS ที่กำหนดเองคุณจะพบช่องข้อความที่คุณสามารถเพิ่มสไตล์ชีต CSS ที่กำหนดเองให้กับแต่ละองค์ประกอบได้โดยตรง รายการ CSS ในการตั้งค่าเหล่านี้รวมอยู่ในแท็กสไตล์แล้ว ดังนั้นเพียงป้อนกฎ CSS โดยคั่นด้วยอัฒภาค
นิเมชั่น
ใช้เมนูแบบเลื่อนลงนี้เพื่อระบุแอนิเมชั่นการโหลดแบบขี้เกียจสำหรับรูปภาพของคุณ คุณสามารถเลือกให้รูปภาพของคุณปรากฏจากด้านขวาซ้ายล่างหรือด้านบน
ความชัดเจน
ตัวเลือกนี้ช่วยให้คุณควบคุมอุปกรณ์ที่โมดูลของคุณปรากฏ คุณสามารถเลือกที่จะปิดใช้งานโมดูลของคุณบนแท็บเล็ตสมาร์ทโฟนหรือเดสก์ท็อปทีละเครื่อง สิ่งนี้มีประโยชน์หากคุณต้องการใช้ม็อดต่างๆบนอุปกรณ์ต่าง ๆ หรือหากคุณต้องการลดความซับซ้อนของการออกแบบอุปกรณ์เคลื่อนที่โดยการลบองค์ประกอบบางอย่างออกจากหน้า
ข้อความรูปภาพทางเลือก
ข้อความแสดงแทนจะให้ข้อมูลที่จำเป็นทั้งหมดหากรูปภาพไม่โหลดแสดงอย่างถูกต้องหรืออยู่ในสถานการณ์อื่น ๆ ที่ผู้ใช้ไม่สามารถมองเห็นรูปภาพได้ นอกจากนี้ยังช่วยให้เครื่องมือค้นหาอ่านและจดจำรูปภาพได้อีกด้วย
[vc_row center_row=”ใช่”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลดธีม DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลด TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
บทแนะนำ Divi อื่น ๆ
- เว็บไซต์ 5 สำหรับการใช้งานร้านอาหาร Divi ธีม
- วิธีการเพิ่มข้อความในผลิตภัณฑ์ Divi WooCommerce
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- วิธีปรับเปลี่ยนกริดของบล็อกด้วย Divi
- วิธีการใช้บทบาทของบรรณาธิการ Divi บน WordPress
- วิธีสร้างแถบเลื่อน Divi แบบเต็มหน้าจอ
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- คุณสมบัติที่คุณอาจไม่รู้เกี่ยวกับ Divi
- วิธีการใช้ Divi Builder ใน WordPress
- วิธีใช้โมดูลเลื่อนภาพ Divi
- วิธีการใช้โมดูล Divi Builder Flip
- วิธีการเพิ่มโมดูลข้อความรับรองในตัวสร้าง Divi
- วิธีใช้โมดูลข้อความ Divi
- วิธีสร้างแถบเลื่อนบน Divi
- วิธีแก้ไขบทบาทผู้ใช้ Divi
- วิธีใช้โมดูล Divi Social Media
- วิธีใช้โมดูลร้านค้าในธีม WordPress Divi
- วิธีใช้โมดูลด้านข้าง Divi
- วิธีการใช้โมดูลตารางราคา Divi
- วิธีการใช้โมดูลชื่อเรื่องของสิ่งพิมพ์ของ Divi
- วิธีเพิ่มโมดูลวิดีโอของ Divi
- วิธีใช้โมดูลการนำทางบทความ
- วิธีการใช้โมดูลค้นหา Divi
- วิธีใช้โมดูลกระเป๋าสตางค์ Divi
- วิธีการใช้โมดูลคนบน Divi Builder
- วิธีใช้โมดูลกระเป๋าสตางค์กับตัวกรอง Divi
- วิธีการใช้โมดูลเลื่อนความกว้างเต็ม
- วิธีใช้โมดูล Divi Builder Image
- วิธีใช้โมดูลการนำทางความกว้างเต็มรูปแบบของ Divi Builder
- วิธีการใช้โมดูลคลังภาพ
- วิธีการใช้โมดูลบัตร Divi Builder Full-Width Card
- วิธีใช้โมดูล Divi Full Width Portfolio
- วิธีใช้โมดูลส่วนหัวแบบเต็มความกว้างของ Divi
- วิธีใช้โมดูล Divi Counter
- วิธีใช้แถบเลื่อนบทความบนเครื่องมือสร้าง Divi
- วิธีใช้โมดูล Divi Email Optin
