คุณเคยต้องการที่จะนำเสนอสร้างการ์ดผลิตภัณฑ์กับ Elementor ?
นี่คือสิ่งที่เราจะแสดงให้คุณเห็นในบทช่วยสอนนี้ เพื่อให้ได้แนวคิดที่ค่อนข้างแม่นยำว่าเราจะพูดถึงอะไรในวันนี้ เราขอเชิญคุณชมวิดีโอต่อไปนี้:
บทแนะนำนี้เป็นการนำเสนอผลิตภัณฑ์ที่เป็นรองเท้าโดยเน้นขนาด สี และปุ่มซื้อของแต่ละรายการ เมื่อคุณวางเมาส์เหนือการ์ดแต่ละใบ ข้อมูลนี้จะปรากฏขึ้น นี่คือบทสรุปโดยย่อของสิ่งที่เราจะทำ
เพื่อทำตามบทช่วยสอนนี้ เราขอเชิญคุณค้นหารูปภาพของรองเท้าและต้องมี Elementor รุ่น Pro ใครยังไม่มี กดลิงค์นี้ได้เลย.
แต่กลับมาที่เราอยู่ที่นี่เพื่ออะไร
มาสร้างเพจและแก้ไขกันด้วย Elementor.
ในนี้ เรามาเลือกโครงสร้างที่มี 3 คอลัมน์กัน มาจัดกันเลยค่ะ ความสูง sur ความสูงขั้นต่ำ , ความสูงขั้นต่ำบน VH และตั้งเคอร์เซอร์เป็น 100.
ในแท็บ ลักษณะ เลือกสีพื้นหลังเป็น #130640
ในคอลัมน์กลางให้แทรก a วิดเจ็ตรูปภาพ โดยการเลือกภาพรองเท้าจากห้องสมุดของคุณ
ไปที่แท็บสไตล์และในคุณสมบัติรูปภาพตั้งค่าความกว้างเป็น80
แล้วลาก วิดเจ็ตชื่อเรื่อง และป้อนชื่อเรื่อง รองเท้าไนกี้ - นี่คือตัวอย่าง อาจเป็นแบรนด์อื่นทั้งหมดก็ได้ -
อ่าน: วิธีเพิ่มประสิทธิภาพเค้าโครงเว็บไซต์ของคุณด้วย Elementor
ตั้งค่าแท็ก HTML เป็น H3 และจัดตำแหน่งให้อยู่ตรงกลาง
ไปที่แท็บสไตล์แล้วเปลี่ยนสีข้อความเป็นสีขาว
เปลี่ยนตัวพิมพ์ด้วย
แล้วลาก วิดเจ็ตส่วนภายใน ใต้ วิดเจ็ตชื่อเรื่อง ที่คุณแทรกไว้ด้านบน
ตามค่าเริ่มต้น วิดเจ็ตนี้จะให้คุณ 2 คอลัมน์ ลบหนึ่งคอลัมน์ ในเรื่องนี้ วิดเจ็ตส่วนภายใน, แทรก วิดเจ็ตชื่อเรื่อง
ให้เป็นชื่อเรื่อง ตัด : และตั้งค่าแท็ก HTML เป็น ระยะ.
ในแท็บสไตล์ เปลี่ยนสีของชื่อเรื่อง ขนาดเป็น 15 และอ้วนเป็น 300
ในแท็บขั้นสูง ตั้งค่าเฉพาะระยะขอบขวาเป็น 5 และในคุณสมบัติ การวางตำแหน่ง เลือก อินไลน์ (อัตโนมัติ).
เพิ่มวิดเจ็ตปุ่มส่วนภายในเดียวกันกับสำหรับข้อความ 8 และระยะห่างไอคอนเป็น 0
อ่าน: วิธีเลื่อนดูภาพพอร์ตโฟลิโอขนาดยาวด้วย Elementor
ในแท็บ ลักษณะ ให้เปลี่ยนสีข้อความและสีพื้นหลังของปุ่มตามลำดับเป็น ขาวดำ และในขอบภายใน ให้ป้อน 6-10-6-10 ตามลำดับสำหรับระยะขอบบน-ขวา-ล่างภายใน - ซ้าย
บนแท็บขั้นสูง ตั้งค่าเฉพาะระยะขอบด้านซ้ายเป็น 5 และในคุณสมบัติการจัดตำแหน่ง ให้เลือกอินไลน์ (อัตโนมัติ)
ทำซ้ำปุ่มนี้ 3 ครั้งและเปลี่ยนข้อความของ 3 ปุ่มสุดท้ายเป็น 9,10,11 - คุณสามารถทำได้โดยใช้ตัวอักษร S, M, L, XL, XXL-
คลิกแก้ไขส่วนและตั้งค่าการจัดแนวแนวนอนเป็นศูนย์
จากนั้นทำซ้ำส่วนภายในนี้ - ส่วนภายใน- และแก้ไขขนาดตามสี ลบ 3 ปุ่มและปุ่มที่จะยังคงลบข้อความของปุ่ม
ในแท็บ เนื้อหา ของปุ่ม เลือกไอคอนวงกลมจากไลบรารีไอคอน คลิกแทรกเพื่อเพิ่มลงในปุ่ม
ในแท็บ ลักษณะ กำหนดขนาด 24 ให้กับตัวพิมพ์ และเชื่อมโยงระยะขอบภายใน แล้วป้อน 0 ในสีพื้นหลัง ตั้งค่าความโปร่งใสเป็นต่ำสุด จากนั้นคุณสามารถเปลี่ยนสีของข้อความเป็นสีน้ำเงินได้
จากนั้นทำซ้ำปุ่มนี้ 3 ครั้ง และเปลี่ยนสีของอีกสองปุ่มที่เหลือเป็นสีเหลืองและสีแดง จากนั้นคลิกที่ส่วนด้านในเพื่อแก้ไขและบนแท็บขั้นสูงตั้งค่าระยะขอบด้านบนและด้านล่างเป็น -5 และ 10
ตอนนี้เรากำลังจะเพิ่มวิดเจ็ตปุ่มด้านล่างวิดเจ็ตส่วนภายในที่สอง ป้อนเป็นข้อความ ซื้อเลย และการจัดตำแหน่งให้อยู่ตรงกลาง ในแท็บ ลักษณะ ตั้งค่าปุ่มเป็น สีขาว และข้อความของปุ่มเป็น สีดำ จากนั้นตั้งค่ารัศมีเส้นขอบทั้งหมดเป็น 20
เลือกคอลัมน์หลักที่เราทำงานและตั้งค่าการจัดตำแหน่ง แนวตั้ง sur สภาพแวดล้อมในแท็บสไตล์ เลือกประเภทพื้นหลังเป็น เดกราเด และเป็นประเภท select เป็นแฉก จากนั้นบนสีหลักตั้งค่าความโปร่งใสและตำแหน่งเป็น 94. สำหรับสีที่สอง ให้ตั้งค่าตำแหน่งเป็น 77 และรัศมีขอบเกิน 10
บนแท็บขั้นสูง ตั้งค่าระยะขอบเป็น 0-35-0-35 และระยะขอบด้านในเป็น 50-20-50-20
จากนั้นคุณสามารถซ่อนแผงเพื่อดูว่างานของคุณเป็นอย่างไร คุณจะเห็นว่าการ์ดของคุณสวยมาก แต่เราจะทำให้มันมีชีวิตชีวาด้วยการทำแอนิเมชั่นบางส่วน และสำหรับสิ่งนั้น เราจะสร้างภาพเคลื่อนไหวให้กับขนาด สี และปุ่มซื้อ
ดูเพิ่มเติมที่: วิธีเปลี่ยนส่วนหัวในการเลื่อนหน้าบน Elementor
มาเริ่มกันที่ส่วนแรกภายในซึ่งจะแสดงขนาดของผลิตภัณฑ์และบนแท็บขั้นสูง ให้นิยาม จางลง เป็นเอฟเฟกต์การเคลื่อนไหว - แอนิเมชั่นรายการและแอนิเมชั่นดีเลย์บน 300.
ลองทำเช่นเดียวกันกับส่วนภายในที่แสดงสี แต่มีความล่าช้าของแอนิเมชั่น 800 สำหรับปุ่มซื้อ การหน่วงเวลาจะเป็น 1000
ตอนนี้เรากำลังจะมอบหมายชั้นเรียน ซ่อนไว้ก่อน ส่วนด้านในและปุ่มซื้อ เลือก Inner Section แรก ในแท็บ Advanced และในคุณสมบัติ Advanced ให้ป้อน hide-first ในฟิลด์ CSS Classes ทำเช่นเดียวกันกับ Inner Section และปุ่มซื้อ
ดังนั้นเราจึงจะเพิ่มโค้ด CSS ที่จะทำให้ทั้งคอลัมน์เคลื่อนไหว คัดลอกรหัสต่อไปนี้:
ตัวเลือก {
ความสูง: 400px;
แสดงผล: ดิ้น;
}
/ * CSS สำหรับแสดง / ซ่อน * /
ตัวเลือก .hide-first {
display: none;
}
ตัวเลือก: เลื่อน .hide-first {
จอแสดงผล: บล็อก
}
/ * การแปลงภาพ * /
ตัวเลือก img {
การเปลี่ยนแปลง: ง่าย .5s;
}
ตัวเลือก: โฮเวอร์ img {
แปลง: แปล (-20px, -40px) หมุนขนาด (-25deg) (1.4);
}
/ * ภาพรวมมือถือ * /
@media (ความกว้างสูงสุด: 767px) {
ตัวเลือก: โฮเวอร์ img {
แปลง: แปล (-20px, 0px) หมุน (-10deg) มาตราส่วน (1);
}
ตัวเลือก {
ระยะขอบ: 50px 10px;
}
}
เลือกคอลัมน์ที่จะแก้ไขและไปที่แท็บขั้นสูงและในฟิลด์ CSS ที่กำหนดเอง ให้วางโค้ดนี้
หมายเหตุ: คุณควรรู้ว่าตัวเลือกนี้จะใช้ได้เฉพาะเมื่อคุณมีเวอร์ชัน Pro เท่านั้นElementor.
หากเสร็จสิ้น แผนที่ของคุณจะแสดงภาพเคลื่อนไหวเมื่อวางเมาส์โอเวอร์ โดยค่าเริ่มต้นจะซ่อนขนาด สี และปุ่มซื้อ
ในส่วนของคำอธิบายโค้ดนั้น ในส่วนความคิดเห็นจะให้ภาพรวม แต่ด้วยการปรับเปลี่ยนค่า คุณจะเข้าใจว่าแต่ละคำสั่งมีไว้เพื่ออะไร
ดูเพิ่มเติม: วิธีเพิ่มปุ่มสองปุ่มเคียงข้างกันในคอลัมน์เดียวกัน ด้วย Elementor
หากทุกอย่างทำงานได้ตามปกติ ให้ทำซ้ำคอลัมน์นี้สองครั้งและลบคอลัมน์ว่างอื่นๆ
สิ่งที่คุณต้องทำคือเปลี่ยนรูปภาพและชื่อบล็อกอื่นๆ และสุดท้ายดูตัวอย่างงานของคุณ
คุณเพิ่งสร้างการ์ดผลิตภัณฑ์ที่สวยงาม
รับ Elementor Pro ทันที!
สรุป
ดังนั้น ! เพียงเท่านี้สำหรับบทช่วยสอนนี้ ซึ่งจะแสดงให้คุณเห็นถึงวิธีการสร้างการ์ดผลิตภัณฑ์ด้วย Elementor หากคุณมีข้อกังวลใด ๆ เกี่ยวกับวิธีการเดินทางไปที่นั่นแจ้งให้เราทราบใน ความเห็น.
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
