วิธีที่ง่ายและสร้างสรรค์ในการแสดงโลโก้บริษัทใน Divi

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

นี่คือสิ่งที่จะกล่าวถึงในบทช่วยสอนนี้:

• กำลังเตรียมรูปภาพโลโก้ของคุณ
• การใช้ Divi Gallery Module เพื่อแสดงโลโก้ด้วยการลากและวางอย่างง่าย
• การใช้แกลเลอรี WordPress ที่ฝังเพื่อแสดงโลโก้
• การใช้ Divi Builder เพื่อสร้างเค้าโครงแบบกำหนดเองสำหรับโลโก้

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

แอบมอง

ต่อไปนี้คือตัวอย่างการออกแบบบางส่วนที่เป็นไปได้โดยใช้เทคนิคต่างๆ ในบทช่วยสอนนี้

กำลังเตรียมรูปภาพโลโก้ของคุณ

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

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

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

จากนั้นส่งออกรูปภาพเป็นไฟล์ png เพื่อให้พื้นหลังโปร่งใส

จากนั้นทำซ้ำขั้นตอนสำหรับโลโก้ที่เหลือของคุณ

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

สมัครสมาชิกช่อง Youtube ของเรา

#1 การใช้ Divi Gallery Module เพื่อแสดงโลโก้บริษัท (การลากและวางอย่างง่าย)

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

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

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

เนื่องจากฉันกำลังเพิ่มรูปภาพโลโก้ 8 รูปและไม่ต้องการแสดงชื่อ คำอธิบาย หรือการแบ่งหน้าใดๆ ฉันสามารถอัปเดตสิ่งต่อไปนี้ได้:

รูปภาพจำนวน: 8
แสดงชื่อและคำบรรยาย: NO
แสดงการแบ่งหน้า: NO

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

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

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

ความกว้างของเส้นขอบรูปภาพ: 1px
สีของเส้นขอบรูปภาพ: #dddddd
Image Box Shadow: ดูภาพหน้าจอ

นี่คือลักษณะการออกแบบขั้นสุดท้ายบนเบราว์เซอร์ขนาดต่างๆ

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

#2 การใช้ WordPress Gallery Embed เพื่อแสดงโลโก้บริษัท (พร้อมโมดูล Divi ใดๆ)

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

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

ใน Divi Builder ให้สร้างส่วนใหม่ที่มีโครงสร้างคอลัมน์หนึ่งในสี่ของสามในสี่

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

เนื้อหา: “เป็นจุดเด่นใน”
แบบอักษรของข้อความ: มอนต์เซอร์รัต
น้ำหนักแบบอักษรของข้อความ: ตัวหนา
ขนาดข้อความ: 26px
การวางแนวข้อความ: center

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

การดำเนินการนี้จะแสดงป๊อปอัป Media Gallery จากนั้นคลิกลิงก์สร้างแกลเลอรีทางด้านซ้ายของป๊อปอัป จากนั้นเลือกภาพโลโก้ที่คุณต้องการรวมไว้ในแกลเลอรี (ตัวอย่างนี้ฉันใช้รูปภาพแปดรูป) คลิกปุ่มสร้างแกลเลอรี

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

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

จากนั้นคลิกปุ่มสร้างแกลเลอรีใหม่

การดำเนินการนี้จะฝังรหัสย่อของแกลเลอรีที่จำเป็นใน WordPress และแสดงแกลเลอรีภายในโมดูลข้อความ

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

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

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

align-items: center;

CSS นี้ใช้งานได้เพราะเราตั้งค่า Equalize Column Heights เป็น YES ดังนั้นจึงทำให้คุณสมบัติ "display:flex" สำหรับแถวนั้นใช้งานได้ สำหรับข้อมูลเพิ่มเติม โปรดดูวิธีจัดแนวเนื้อหาในแนวตั้งใน Divi

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

.gallery img {
border: none !important;
}

นี่คือการออกแบบขั้นสุดท้าย

นี่คือพื้นหลังสีดำที่เพิ่มเข้ามาในแถว

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

ฝังแกลเลอรีโลโก้ในโมดูล Divi ใดๆ

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

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

นี่คือตัวอย่างลักษณะเมื่อคุณเพิ่มรหัสย่อของแกลเลอรี wordpress ของโลโก้ของคุณลงในแท็บที่แตกต่างกันสองแท็บ
สำหรับตัวอย่างนี้ ฉันเลือกโลโก้ 6 โลโก้ที่มี 3 คอลัมน์สำหรับแต่ละแกลเลอรี

สิ่งนี้อาจมีประโยชน์สำหรับไซต์ที่ต้องการโลโก้จำนวนมาก

#3 การใช้ Divi Builder เพื่อสร้างเค้าโครงแบบกำหนดเองสำหรับโลโก้บริษัท

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

ในการออกแบบต่อไปนี้ ฉันจะแสดงเคล็ดลับบางประการเกี่ยวกับวิธีนำเค้าโครงโลโก้บริษัทของคุณไปสู่อีกระดับ

อันดับแรก เริ่มจากการสร้างส่วนใหม่ที่มีแถวหกคอลัมน์

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

ความกว้างที่กำหนดเอง: 90%
ความกว้างของรางน้ำ: 1
ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

แพ็ดดิ้งที่กำหนดเอง: 4vw ด้านบน, 4vw ด้านล่าง

บันทึกการตั้งค่า.

จากนั้นเพิ่มโมดูลรูปภาพลงในคอลัมน์แรกของคุณ แล้วเลือกรูปภาพโลโก้ของคุณ

จากนั้นดำเนินการเพิ่มภาพโลโก้ในแต่ละคอลัมน์ดังนี้:

คอลัมน์ 1: 1 โลโก้
คอลัมน์ 2: 2 โลโก้
คอลัมน์ 3: 3 โลโก้
คอลัมน์ 4: 3 โลโก้
คอลัมน์ 5: 2 โลโก้
คอลัมน์ 6: 1 โลโก้

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

align-items: center;

อย่างที่คุณเห็น การทำเช่นนี้จะสร้างเลย์เอาต์แบบโค้งมนสำหรับโลโก้

แต่สำหรับเลย์เอาต์นี้ ฉันจะจัดโมดูลให้อยู่ด้านล่างสุดของแถว ดังนั้นให้แทนที่ข้อมูลโค้ด "align-items: center" ด้วยข้อมูลต่อไปนี้:

align-items: flex-end;

ซึ่งจะจัดตำแหน่งโมดูลทั้งหมดที่ด้านล่างของแถวซึ่งจะทำงานได้ดีกับตัวแบ่งส่วนที่เราจะเพิ่ม

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

พื้นหลัง: #2a3443

สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
ตัวแบ่งสีด้านบน: rgba(255,255,255,0.03)
ความสูงของตัวแบ่งด้านบน: 13vw
พลิกตัวแบ่งด้านบน: แนวตั้ง

ช่องว่างภายในที่กำหนดเอง: ด้านบน 0px, ด้านล่าง 0px

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

อัปเดตการตั้งค่าส่วนดังนี้:

สีพื้นหลัง: #2a3443

สไตล์ตัวแบ่งด้านล่าง: ดูภาพหน้าจอ
ตัวแบ่งสีด้านล่าง: rgba(238,238,238,0.09)
ความสูงของตัวแบ่งด้านล่าง: 13vw

ช่องว่างภายในที่กำหนดเอง: 0px ด้านล่าง

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

สำหรับเนื้อหาเพิ่มต่อไปนี้:

<h2>As Featured In</h2>

หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
การจัดตำแหน่งข้อความหัวเรื่อง 2: center
หัวเรื่อง 2 สีข้อความ: #ffffff
หัวเรื่อง 2 ขนาดข้อความ: 32px

ระยะขอบที่กำหนดเอง: 0px ด้านล่าง

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

การจัดตำแหน่งภาพ: center
มาร์จิ้นที่กำหนดเอง: -75px

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

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

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

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

ไชโย!