ดาวน์โหลดการออกแบบตู้โชว์ลูกค้าแบบเลื่อน/คลิกฟรีและขั้นสูงสำหรับ Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลด Client Showcase Hover/Click Design ฟรี

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

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

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

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

ดาวน์โหลด

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

มาเริ่มสร้างใหม่กันเถอะ!

เพิ่มมาตราใหม่

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

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

ก่อนเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและอนุญาตให้แถวใช้ความกว้างทั้งหมดของหน้าจอ

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

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นของแถวถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

การตั้งค่าคอลัมน์ 2

ดำเนินการต่อโดยเปิดการตั้งค่าของคอลัมน์ที่สอง

ระยะห่าง

เพิ่มค่าการเติมที่กำหนดเองลงในคอลัมน์

• แผ่นรองด้านบน: 9vw
• แผ่นรองด้านล่าง: 9vw
• ช่องว่างภายในด้านซ้าย: 8vw
• ช่องว่างภายในด้านขวา: 8vw

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เพิ่มเนื้อหา H3 และย่อหน้า

เมื่อคุณตั้งค่าแถวและคอลัมน์เสร็จแล้ว ให้ดำเนินการต่อโดยเพิ่มโมดูลข้อความลงในคอลัมน์ 1 เพิ่มข้อมูลลูกค้าลงในกล่องเนื้อหา

พื้นหลังไล่โทนสี

ไปที่การตั้งค่าพื้นหลังถัดไป และใช้พื้นหลังไล่ระดับสีต่อไปนี้:

• สี 1: rgba(43,135,218,0)
• สี 2: rgba(0,0,0,0.55)
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ภาพพื้นหลัง

อัปโหลดภาพพื้นหลังด้วย

การตั้งค่าข้อความ

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรของข้อความ: Lato
• สีข้อความ: #dbdbdb
• ขนาดตัวอักษร: 1vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 2.3vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.5vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 2.5vw (โทรศัพท์)

หัวเรื่อง 3 การตั้งค่าข้อความ

ทำการเปลี่ยนแปลงการตั้งค่าข้อความ H3 ด้วย

• แบบอักษรของหัวเรื่อง 3: Playfair Display
• ส่วนหัว 3 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 3 สีข้อความ: #ffffff
• หัวเรื่อง 3 ขนาดข้อความ: 3vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)
• ส่วนหัว 3 ความสูงของบรรทัด: 1.6em

ระยะห่าง

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

• ขอบบน: 9vw
• ระยะขอบล่าง: 9vw
• ระยะขอบซ้าย: 7vw (เดสก์ท็อป), 16vw (แท็บเล็ต), 17vw (โทรศัพท์)
• ระยะขอบขวา: 7vw (เดสก์ท็อป), 16vw (แท็บเล็ต), 17vw (โทรศัพท์)
• ด้านบน: 32vw (เดสก์ท็อป), 55vw (แท็บเล็ต), 49vw (โทรศัพท์)
• Padding ด้านล่าง: 3vw (เดสก์ท็อป), 6vw (แท็บเล็ตและโทรศัพท์)
• Padding ซ้าย: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)
• Padding ขวา: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)

กล่องเงา

เรายังเพิ่มเงากล่องที่มีสีสันอีกด้วย

• กล่องเงาตำแหน่งแนวนอน: 0px
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความแรงของการกระจายเงาของกล่อง: 7vw
• สีเงา: #ffcf0f

CSS ID

ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่ม CSS ID

• CSS ID: รูปภาพ-display-1

โมดูลข้อความโคลนห้าครั้ง

เมื่อคุณสร้าง Text Module แรกเสร็จแล้ว ให้ทำการโคลน 5 ครั้ง

เปลี่ยนเนื้อหาและภาพพื้นหลังของแต่ละรายการที่ซ้ำกัน

เปลี่ยนเนื้อหาและภาพพื้นหลังในแต่ละรายการที่ซ้ำกัน

เปลี่ยนสีกล่องเงาของแต่ละรายการที่ซ้ำกัน

พร้อมกับกล่องเงา

• เงาสี: #9f89ed

เปลี่ยน CSS ID ของแต่ละรายการที่ซ้ำกัน & เพิ่ม CSS Class

โมดูลข้อความแต่ละโมดูลในคอลัมน์ 1 ต้องการรหัส CSS ที่ไม่ซ้ำกัน โมดูลข้อความแรกในคอลัมน์ประกอบด้วยรหัส CSS 'photo-display-1' ส่วนโมดูลที่สองต้องการ 'photo-display-2' ส่วน 'photo-display-3' ที่สาม และอื่นๆ เพิ่มคลาส CSS ให้กับโมดูลข้อความที่ซ้ำกันแต่ละโมดูลด้วย (ตรวจสอบให้แน่ใจว่าคุณไม่ได้เพิ่มคลาสลงในโมดูลข้อความดั้งเดิม)

• CSS ID: photo-display-2 (จาก 2 ถึง 6)
• CSS Class: photo-hide-first (ทุกโมดูลข้อความในคอลัมน์ 1 ยกเว้นอันแรก)

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 2

เพิ่มเนื้อหา H2

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

การตั้งค่าข้อความ H2

ไปที่แท็บการออกแบบและแก้ไขการตั้งค่าข้อความ H2 ตามลำดับ:

• แบบอักษรของหัวเรื่อง 2: Playfair Display
• หัวเรื่อง 2 สีข้อความ: #636363
• หัวเรื่อง 2 ขนาดข้อความ: 3vw (เดสก์ท็อป), 6vw (แท็บเล็ตและโทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: 0.1vw
• ส่วนหัว 2 ความสูงของบรรทัด: 1.2em

เพิ่มโมดูลข้อความ #2 ลงในคอลัมน์ 2

เพิ่มเนื้อหา

เพิ่มโมดูลข้อความอื่นในคอลัมน์ 2 พร้อมเนื้อหาย่อหน้าที่คุณเลือก

การตั้งค่าข้อความ

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรของข้อความ: Lato
• การจัดตำแหน่งข้อความ: Justify
• ขนาดตัวอักษร: 0.9vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 2.7vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.1em

ระยะห่าง

แก้ไขค่าระยะขอบในการตั้งค่าระยะห่างด้วย

• อัตรากำไรขั้นต้น: 2vw
• ระยะขอบล่าง: 2vw
• ระยะขอบขวา: 7vw

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 2

ทัศนวิสัย

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

• แสดงตัวแบ่ง: ใช่

เส้น

ไปที่แท็บออกแบบและเปลี่ยนสีเส้น

• สีเส้น: #636363

ระยะห่าง

แก้ไขค่าระยะขอบในขนาดหน้าจอต่างๆ ต่อไป

• ระยะขอบล่าง: 7vw
• ระยะขอบซ้าย: 14vw (เดสก์ท็อป), 39vw (แท็บเล็ต), 38vw (โทรศัพท์)
• ระยะขอบขวา: 14vw (เดสก์ท็อป), 39vw (แท็บเล็ต), 38vw (โทรศัพท์)

แปลงร่างหมุน

หมุนโมดูลตัวแบ่ง

• ซ้าย: 90deg

แปลงแปล

และจัดตำแหน่งใหม่โดยใช้ค่าการแปลงการแปลงแบบกำหนดเองในขนาดหน้าจอต่างๆ

• ขวา: 2vw (เดสก์ท็อป), 3vw (แท็บเล็ตและโทรศัพท์)
• ด้านล่าง: -17.3vw (เดสก์ท็อป), -43vw (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลข้อความ #3 ลงในคอลัมน์ 2

เพิ่มเนื้อหา

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

การตั้งค่าข้อความ

ไปที่แท็บออกแบบและแก้ไขการตั้งค่าข้อความตามลำดับ:

• แบบอักษรของข้อความ: Lato
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• ขนาดตัวอักษร: 1.3vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: 1px
• ความสูงของบรรทัดข้อความ: 1.2em

ระยะห่าง

เพิ่มระยะขอบด้านบนและด้านล่างที่กำหนดเองต่อไป

• มาร์จิ้นสูงสุด: 1em
• ขอบล่าง: 1em

CSS ID

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

• CSS ID: รูปภาพคลิก-1

โมดูลข้อความโคลน #3 ห้าครั้ง

เมื่อคุณสร้างโมดูลข้อความไคลเอ็นต์ตัวแรกเสร็จแล้ว ให้โคลน 5 ครั้ง

เปลี่ยนเนื้อหาของแต่ละรายการที่ซ้ำกัน (ตรงกับโมดูลข้อความในคอลัมน์ 1)

เปลี่ยนชื่อไคลเอนต์ในแต่ละโมดูลข้อความที่ซ้ำกัน

เปลี่ยน CSS ID ของแต่ละรายการที่ซ้ำกัน

และจับคู่ CSS ID ของแต่ละรายการที่ซ้ำกันกับโมดูลข้อความในคอลัมน์ 1

• CSS ID: photo-click-2 (จาก 2 ถึง 6)

เพิ่มโค้ดโมดูล #1 ลงในคอลัมน์ 2

ใส่โค้ด CSS

ส่วนสุดท้ายของบทช่วยสอนนี้เน้นที่การทำให้ฟังก์ชันการทำงานโฮเวอร์ทำงานได้ เพิ่ม Code Module แรกในคอลัมน์ 2 และแทรกบรรทัดของโค้ด CSS ต่อไปนี้:

<style>
.photo-hide-first {
display: none;
}
</style>

เพิ่มโค้ดโมดูล #2 ไปยังคอลัมน์ 2

ใส่รหัส JQuery

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

<script>
jQuery(function($){

$('#photo-click-1').css({'color': '#ffcf0f', 'font-weight': 'bold', 'padding-left': '0.5em'});

$('[id*="photo-click"]').hover(function() {

var selector1 = $(this).attr('id').replace('click', 'display');
var $photo = $('#' + selector1);
var $photoColor = $photo.css('box-shadow').replace(/^.*(rgba?([^)]+)).*$/,'$1')

$photo.siblings().hide();
$photo.show();

$('[id*="photo-click"]').css({'color': '', 'font-weight': '', 'padding-left': ''});
$(this).css({'color': $photoColor, 'font-weight': 'bold', 'padding-left': '0.5em'});

});
});
</script>

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ของหน้าจอขนาดต่างๆ กันในขั้นสุดท้าย

เดสก์ทอป

มือถือ

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

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

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