การสร้างไซต์รีวิวผลิตภัณฑ์ด้วยความพิเศษ – ตอนที่ 3

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

ในส่วนที่ 2 ของชุดนี้ เราได้สร้างเทมเพลตโพสต์รีวิวผลิตภัณฑ์โดยใช้การตั้งค่าในตัวของ Extra และ Visual Builder ด้วยเทมเพลตโพสต์ใหม่ คุณสามารถเพิ่มโพสต์เพิ่มเติมและกำหนดให้กับหมวดหมู่ที่เกี่ยวข้องได้

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

นี่คือตัวอย่างคร่าวๆ ของสิ่งที่เรากำลังจะสร้าง

การเตรียมองค์ประกอบการออกแบบ

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

ในการออกแบบเลย์เอาต์ของหมวดหมู่ เราจะใช้ตัวสร้างหมวดหมู่ของ Extra และ CSS ที่กำหนดเองเล็กน้อย

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

การสร้างไซต์รีวิวผลิตภัณฑ์ด้วยความพิเศษ – ตอนที่ 3

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

การสร้างเค้าโครงหมวดหมู่สำหรับโฮมเพจ

ตามค่าเริ่มต้น พิเศษจะใช้เค้าโครงหมวดหมู่สำหรับหน้าแรก ในการสร้างเลย์เอาต์แบบกำหนดเอง จากแถบด้านข้างแดชบอร์ดของ WordPress ให้ไปที่ Extra > Category Building ค้นหาเลย์เอาต์ของหมวดหมู่ที่มีชื่อ "โฮมเพจ" แล้ววางเมาส์เหนือมันแล้วเลือกแก้ไข

ถัดไป คลิก "ล้างเค้าโครง" บนเมนูตัวสร้างสีม่วงเพื่อลบเค้าโครงเริ่มต้นปัจจุบัน

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

ที่คอลัมน์ด้านซ้าย (สองในสาม) ให้เพิ่มแถบเลื่อนบทความเด่น

อัปเดตการตั้งค่าโมดูลตัวเลื่อนบทความเด่นดังนี้:

ใต้แท็บเนื้อหา…

หมวดหมู่: ทั้งหมด
แสดงเฉพาะโพสต์เด่น: [ฉันจะปิดสิ่งนี้จนกว่าคุณจะตัดสินใจว่าต้องการแสดงโพสต์ใด คุณสามารถกำหนดโพสต์ที่ต้องการได้ในกล่องการตั้งค่าพิเศษในหน้าแก้ไขบทความ]
แสดงผู้เขียน: OFF
แสดงวันที่: OFF

ใต้แท็บออกแบบ…

สีของลูกศรนำทาง: #ffffff
พื้นหลังลูกศรนำทาง: #000000
พื้นหลังคำอธิบายภาพ: rgba(255,255,255,0.4)
ชื่อแบบอักษรขนาด: 24px
ชื่อข้อความสี: #000000
ขนาดตัวอักษร Meta: 16px
สีข้อความเมตา: #000000
มาร์จิ้นที่กำหนดเอง: ด้านล่าง 0px

ภายใต้แท็บขั้นสูง…

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

border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
margin-bottom: 0px !important;

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

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

ภายใต้แท็บเนื้อหา เพิ่ม html ต่อไปนี้ในแท็บข้อความของกล่องเนื้อหา:

<h1>Get the Latest Reviews on Popular Products</h1>

<a class="join-cta" href="/reviews" target="_blank">Click to Join</a>

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

เคล็ดลับ : คุณสามารถใช้ Bloom เพื่อเรียกหน้าต่างป๊อปอัปการเลือกอีเมลเมื่อคลิก CTA นี้ ด้วยวิธีนี้ผู้เยี่ยมชมจะสามารถติดตามผลิตภัณฑ์ด้วยแคมเปญการตลาดทางอีเมลของคุณได้แล้ววันนี้ ในการดำเนินการนี้ คุณจะต้องติดตั้ง Bloom เพิ่มฟอร์มป๊อปอัป และผสานรวมผู้ให้บริการอีเมลของคุณ จากนั้นเลือกให้แสดงป๊อปอัปเมื่อคลิกตัวเลือก CSS “a.join-cta” ซึ่งสอดคล้องกับคลาสลิงก์ในโค้ด html ด้านบน

คุณยังสามารถอ่านเพิ่มเติมเกี่ยวกับวิธีสร้างป๊อปอัปแบบฟอร์ม optin บานเมื่อคลิกปุ่ม

กลับไปที่การตั้งค่าโมดูลข้อความ

ใต้แท็บออกแบบ…

ขนาดตัวอักษรข้อความ: 40px (เดสก์ท็อป), 24px (แท็บเล็ตและสมาร์ทโฟน)
ขนาดตัวอักษรของส่วนหัว: 42px (เดสก์ท็อป), 38px (แท็บเล็ต), 28px (สมาร์ทโฟน)
ช่องว่างภายในแบบกำหนดเอง: 40px (บน), 15px (ขวา), 15px (ล่าง), 15px (ซ้าย)

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

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

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

ใต้แท็บเนื้อหา…

ความเป็นมา: #ffffff

ใต้แท็บออกแบบ…

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

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

border-top: 10px solid #121212;
border-radius: 3px;
-webkit-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
-moz-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);

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

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

ดูดีจนถึงตอนนี้

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

จากนั้นอัปเดตการตั้งค่าโมดูลข้อความดังนี้:

ใต้ แท็บเนื้อหา ให้เพิ่มพาดหัว html นี้ในแท็บข้อความของกล่องเนื้อหา:

<h1 class="subtitle fancy"><span>Product Reviews</span></h1>

ใต้แท็บออกแบบ…

การวางแนวข้อความ: ศูนย์
แบบอักษรส่วนหัว: B (ตัวหนา)
ขนาดตัวอักษรของส่วนหัว: 48px (เดสก์ท็อป), 42px (แท็บเล็ต), 36px (สมาร์ทโฟน)

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

ซึ่งจะทำหน้าที่เป็นชื่อหัวข้อด้านล่างซึ่งจะแสดงบทวิจารณ์ผลิตภัณฑ์ของคุณ

ถัดไป เพิ่มส่วนพิเศษด้วยโครงสร้างคอลัมน์สามในสี่ต่อไปนี้:

ในส่วนด้านซ้าย (สามในสี่) ให้เพิ่มแถวสองคอลัมน์

ในคอลัมน์ด้านซ้ายของแถวนั้น ให้เพิ่มโมดูลโพสต์

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

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

แสดงผู้เขียน: NO
แสดงวันที่: NO

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

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

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

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

จากนั้นคุณสามารถเพิ่มเนื้อหาในกล่องรีวิวเพื่อแสดงใต้วิดีโอได้

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

ทางด้านขวา (แถบด้านข้าง) ของส่วนพิเศษ เราจะเพิ่มโมดูลโพสต์อีกสองโมดูลที่ซ้อนกันอยู่ด้านบน

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

ทำซ้ำโมดูลโพสต์นั้นเพื่อให้กองอื่นอยู่ภายใต้ จากนั้นอัปเดตวิธีการจัดเรียงเป็น "ยอดนิยม"

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

ถัดไป ทำซ้ำ (หรือคัดลอก) ส่วนหลักที่สองที่มีโมดูลข้อความที่มีชื่อ "รีวิวผลิตภัณฑ์"

จากนั้นลาก (หรือวาง) ส่วนที่ซ้ำกันภายใต้ส่วนพิเศษ ในส่วนใหม่ ให้อัปเดตเนื้อหาการตั้งค่าโมดูลข้อความด้วย html ต่อไปนี้:

<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>

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

ต่อไปเราจะเพิ่มฟีดบล็อกที่แสดงบทวิจารณ์ผลิตภัณฑ์ทั้งหมดโดยเริ่มจากล่าสุด

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

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

และสุดท้าย ภายใต้โมดูลการก่ออิฐฟีดบล็อก ให้เพิ่มโมดูลม้าหมุนของโพสต์ อัปเดตการตั้งค่าโมดูล Posts Carousel ใต้แท็บเนื้อหาเพื่อรวมหมวดหมู่ทั้งหมดและเลือกใช่เพื่อแสดงโพสต์เด่นเท่านั้น

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

ตอนนี้เรามาดูกันว่าเลย์เอาต์สุดท้ายเป็นอย่างไร

การเพิ่ม CSS แบบกำหนดเองสองสามบรรทัด

เพื่อนำการออกแบบมารวมกัน เราต้องเพิ่ม Custom CSS สองสามบรรทัด ไปที่ Theme Customizer > CSS เพิ่มเติม และเพิ่มสิ่งต่อไปนี้ที่ด้านบนของโค้ด CSS ปัจจุบันที่มีอยู่แล้ว:

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
border-top: 10px solid;
}

จากนั้น ภายในวงเล็บคิวรีสื่อที่ตั้งค่าความกว้างขั้นต่ำ 980px ให้เพิ่มสิ่งต่อไปนี้:

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

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

นั่นคือทั้งหมดสำหรับเค้าโครงหมวดหมู่หน้าแรก นี่คือผลลัพธ์สุดท้ายที่ดูเหมือน:

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

การสร้างเค้าโครง "หมวดหมู่ทั้งหมด"

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

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

<h1 class="subtitle fancy"><span>All Categories</span></h1>

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

จากนั้นเพิ่มโมดูล Posts Carousel ใต้โมดูลข้อความ ในการตั้งค่าโมดูล Posts Carousel ให้เลือกเสื้อผ้าเป็นหมวดหมู่

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

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

<a href="/category/clothing">view all clothing reviews</a>

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

ใต้แท็บออกแบบ ให้เปลี่ยนการวางแนวข้อความเป็น "ขวา"

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

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

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

เลย์เอาต์สุดท้ายควรมีลักษณะเช่นนี้เมื่อคุณทำเสร็จแล้ว

และนี่คือลักษณะการจัดวางหมวดหมู่บนเว็บไซต์

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

แค่นี้แหละสำหรับโพสต์ของวันนี้ ฉันหวังว่าคุณจะสนุกกับส่วนที่ 3 ของซีรีส์ 4 ส่วนนี้ในการสร้างไซต์รีวิวผลิตภัณฑ์ด้วย Extra

ฉันหวังว่าคุณจะยังไม่เหนื่อย เรามีโพสต์สุดท้ายในซีรีส์ของเรา

กำลังมา

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

ฉันหวังว่าจะสร้างส่วนสุดท้ายของเว็บไซต์ของเราด้วยกัน

และเช่นเคย โปรดส่งความคิดเห็นด้านล่าง