วิธีสร้างโพสต์เข้าสู่ระบบ 3D พร้อมเอฟเฟกต์โฮเวอร์ใน Divi

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

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

แอบมอง

ดาวน์โหลด 3D Sign Post Layout ฟรี

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

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

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

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

ดาวน์โหลด

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

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

ไปที่บทช่วยสอนกันไหม

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

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องมีสิ่งต่อไปนี้:

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

การสร้างภาพสำหรับป้ายโพสต์

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

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

ใน Photoshop คลิกเพื่อสร้างเอกสารใหม่ที่มีความสูงและความกว้างที่กำหนดเอง 25px

ตั้งค่าสีพื้นหน้าเป็นสีดำ (#000000) หรือสีอะไรก็ได้ที่คุณต้องการ

จากนั้นเลือกเครื่องมือถังสีและคลิกภายในเลเยอร์สี่เหลี่ยมว่างเพื่อทาสีสี่เหลี่ยมสีดำ

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

การนำการออกแบบโพสต์ป้าย 3D ไปใช้ใน Divi

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

ผืนผ้าใบเปล่าของคุณกำลังรออยู่!

ตอนนี้สร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์

การปรับแต่งแถว

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

ภาพพื้นหลัง: [ใส่รูปภาพสี่เหลี่ยมจัตุรัสที่กำหนดเองสำหรับโพสต์]
ขนาดภาพพื้นหลัง: ขนาดจริง
เล่นซ้ำภาพพื้นหลัง: ทำซ้ำ Y (แนวตั้ง)

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

ความกว้างของรางน้ำ: 1
ความกว้างสูงสุด: 980px
แพ็ดดิ้งแบบกำหนดเอง: บน 2vw ล่าง 2vw

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

perspective: 1000px;

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

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

การสร้างป้ายด้วย Blurb Module

ในการสร้างป้ายแรกของเราบนโพสต์ป้าย 3 มิติ เราจะใช้โมดูลการนำเสนอ ไปข้างหน้าและเพิ่มโมดูลการนำเสนอในแถว

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

ลดเนื้อหาจำลองเพื่อรวมข้อความเพียงสองสามบรรทัด

ใช้ไอคอน: ใช่
ไอคอน: ลูกศรซ้าย (ดูภาพหน้าจอ)

สีพื้นหลัง: #1a233f

ไอคอนสี: #9eb3c2
ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
ใช้ขนาดตัวอักษรของไอคอน: ใช่
ขนาดตัวอักษรของไอคอน: 80px

การวางแนวข้อความ: center
แบบอักษรของชื่อเรื่อง: Playfair Display
ชื่อข้อความสี: #9eb3c2
ขนาดข้อความชื่อเรื่อง: 38px (เดสก์ท็อป), 26px (โทรศัพท์)
ความกว้างสูงสุด: 600px
การจัดตำแหน่งโมดูล: ศูนย์
Custom Padding: 5% บน, 5% ล่าง, 5% ซ้าย, 5% ขวา

มุมโค้งมน: 20px

ความกว้างของเส้นขอบ: 3px
ขอบสี: #2335e

ที่ดูแลสไตล์ของโมดูลการนำเสนอของเรา แต่เพื่อให้ได้เอฟเฟกต์ 3D เราจำเป็นต้องใช้ตัวเลือกการแปลงเพื่อหมุนโมดูลการนำเสนอของเรา ให้ทำการอัปเดตดังต่อไปนี้:

เปลี่ยนแกนหมุน X: 20deg

ทำซ้ำแถวสำหรับสัญญาณเพิ่มเติม

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

ไปข้างหน้าและทำซ้ำแถวและอัปเดตโมดูลการนำเสนอในแถวใหม่ดังนี้:

เปลี่ยนแกนหมุน X: -30deg

ทำซ้ำแถวเพื่อสร้างสัญญาณที่สามและอัปเดตโมดูลการนำเสนอในแถวใหม่ดังต่อไปนี้:

เปลี่ยนแกนหมุน X: 40deg

การเปลี่ยนทิศทางของเครื่องหมายที่สอง

ตอนนี้ลูกศรทั้งหมดชี้ไปในทิศทางเดียวกัน หากต้องการเปลี่ยนทิศทางจากซ้ายไปขวา เราต้องอัปเดตการตั้งค่าโมดูลประกาศเล็กน้อย

เปิดการตั้งค่าของโมดูลการนำเสนอในแถวที่สอง (แถวกลาง) และอัปเดตสิ่งต่อไปนี้:

ไอคอน: ลูกศรขวา (ดูภาพหน้าจอ)

การวางแนวข้อความ: ซ้าย

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

direction: rtl;

ตอนนี้เนื้อหานำเสนอถูกย้อนกลับและคุณมีสัญญาณชี้ไปในทิศทางใหม่!

หมุนสัญญาณกลับสู่สถานะเดิมบน Hover

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

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

เปลี่ยนแกนหมุน X (โฮเวอร์): 0deg

บันทึกการตั้งค่า แค่นั้นแหละ!

ตรวจสอบการออกแบบและฟังก์ชันการทำงานจนถึงตอนนี้

การปรับแต่งส่วนของเราด้วยภาพพื้นหลัง

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

เปิดส่วนและเพิ่มภาพพื้นหลังใหม่ (ฉันกำลังใช้รูปภาพจาก Agency Layout Pack ของเรา)

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

ใช้เอฟเฟกต์พารัลแลกซ์: ใช่
ช่องว่างภายในที่กำหนดเอง: ด้านบน 0px, ด้านล่าง 0px

ผลสุดท้าย

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

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

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

ไชโย!