วิธีสร้างส่วนเว็บไซต์ฮีโร่ในกูเทนเบิร์กด้วยธีมทั้งหมด

ธีม Total WordPress มาพร้อมกับเครื่องมือมากมายที่เว็บไซต์ธุรกิจอาจต้องใช้

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

อย่างที่คุณเห็น Total เวอร์ชันฟรีไม่ได้ปิดกั้นคุณด้วยเครื่องมือสร้างเพจ WordPress เพิ่มเติม แต่ให้ วิธี WordPress ดั้งเดิมในการออกแบบเว็บไซต์ของคุณ

ด้วยการมาถึงของ Gutenberg ตัวแก้ไข WordPress แบบบล็อก ธีม WordPress ใดๆ รวมถึง Total ก็สามารถปรับแต่งเพิ่มเติมได้อีกมาก การเลือกองค์ประกอบเนื้อหา (บล็อก) ทำให้เรามีอิสระในการปรับแต่งที่เราไม่เคยเห็นมาก่อนในแกนหลักของ WordPress ซึ่งยากที่จะปฏิเสธ

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

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

• สร้างส่วนแนะนำ/ต้อนรับเว็บไซต์
• โปรโมทสินค้าหรืองานสำคัญ
• เน้นเฉพาะรายการพอร์ตโฟลิโอหรือบริการ ฯลฯ

เพื่อเพิ่มศักยภาพในการปรับแต่งของ Gutenberg เราจะใช้ปลั๊กอิน Getwid WordPress Blocks ที่เรา แนะนำสำหรับผู้ใช้ธีม Total เรามั่นใจว่าผู้ใช้ Total บางรายได้ลองใช้ Getwid แล้ว

แต่สำหรับผู้ที่สงสัยว่า Getwid คืออะไร ต่อไปนี้เป็นคำอธิบายสั้น ๆ

พูดได้ไม่กี่คำ มันเป็นส่วนเสริม ฟรี ของ Gutenberg ที่มาพร้อมกับ คลังบล็อกระดับพรีเมียมที่ใหญ่ที่สุด และคอลเลกชัน การออกแบบเฉพาะสำหรับ Gutenberg ไม่ใช่เหตุผลเดียวที่เราแนะนำ

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

ปลั๊กอินจะปรากฏขึ้นตามคำแนะนำเมื่อคุณเปิดใช้งาน Total ซึ่งเป็นวิธีแก้ปัญหาชั่วคราวเพื่อดูว่าเหมาะสมกับลูกค้าของเราหรือไม่

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

ตัวอย่างส่วนฮีโร่และคำกระตุ้นการตัดสินใจที่สร้างด้วย Getwid ใน Total

เราดำเนินการทดสอบเหล่านี้ในเวอร์ชันฟรีของธีม Total และสามารถพูดได้อย่างปลอดภัยว่าแทบไม่มีข้อจำกัดใดๆ

อย่างไรก็ตาม ตัวเลือกความกว้างคอนเทนเนอร์ของเว็บไซต์ Total นั้นมีจำกัด ดังนั้น หากคุณกำลังมองหาเลย์เอาต์แบบเต็มหน้าจอ คุณอาจต้องการคิดถึง Total Plus

ก่อนอื่น คุณจะต้องใช้ บล็อกส่วนโดยบล็อก Getwid WordPress เกือบทุกครั้ง เป็นคอนเทนเนอร์ที่สามารถรองรับบล็อกอื่นๆ ได้จำนวนเท่าใดก็ได้ ดังนั้น ส่วนฮีโร่ของคุณสามารถแสดงเนื้อหาประเภทใดก็ได้

อีกสิ่งหนึ่งที่โดดเด่นเกี่ยวกับคอนเทนเนอร์ Section คือมีพื้นหลังหลายประเภท: รูปภาพ สี วิดีโอ (จาก WP Media Library หรือ YouTube) การไล่ระดับสีหลายสี และอื่นๆ

ดังนั้นงานหลักของคุณเมื่อออกแบบพื้นที่เว็บไซต์ด้วยบล็อกส่วนคือ:

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

ตอนนี้ไปที่ตัวอย่าง

ตัวอย่างที่ 1 ตู้โชว์สินค้า

บล็อคทั้งหมดในตัวอย่างนี้วางอยู่ภายในบล็อคของ Section:

1. หัวเรื่องขั้นสูง
2. หัวเรื่องขั้นสูง
3. หัวเรื่องขั้นสูง
4. กลุ่มปุ่ม
5. พื้นหลังส่วน: รูปภาพ (การวางตำแหน่ง > บนขวา; ขนาด > อัตโนมัติ)

บล็อกส่วนหัวช่วยให้คุณใช้แบบอักษร Google ขนาดข้อความ น้ำหนักแบบอักษร ฯลฯ นอกจากนี้ยังมีรูปแบบต่างๆ สำหรับปุ่มต่างๆ (เติมหรือโครงร่าง)

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

ตัวอย่างที่ 2 Portfolio extract

บล็อกทั้งหมดจะอยู่ในบล็อกส่วน:

1. หัวเรื่องขั้นสูง
2. หัวเรื่องขั้นสูง
3. สามคอลัมน์ (ย่อหน้า รูปภาพ รูปภาพ)
4. พื้นหลังส่วน: การไล่ระดับสี

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

ตัวอย่างที่ 3 คุณสมบัติหรือการ์ดเหตุการณ์

ในส่วนฮีโร่ดังกล่าว คุณสามารถแสดงผลิตภัณฑ์ กิจกรรม บริการ สิ่งของ บุคคล ฯลฯ

บล็อกหัวเรื่องขั้นสูงช่วยให้คุณเลือกแบบอักษรใดก็ได้:

ในตัวอย่างนี้ เราใช้พื้นหลังแบบไล่ระดับสีและตัวแบ่งรูปร่างด้านล่างของพื้นหลัง (Waves Multilayered)

1. สองหัวเรื่องขั้นสูง
2. ย่อหน้า
3. ปุ่ม
4. ภาพ
5. พื้นหลังส่วน: การไล่ระดับสี + ตัวแบ่งรูปร่าง

ตัวอย่างที่ 4 ส่วนคำกระตุ้นการตัดสินใจ

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

เป็นส่วนที่ง่ายมากที่มีภาพพื้นหลัง หัวเรื่องบางส่วน และปุ่มแบบรวมศูนย์

1. สามบล็อกหัวเรื่องขั้นสูง
2. บล็อกปุ่ม
3. พื้นหลังส่วน: รูปภาพที่มีความทึบ (ขนาด > หน้าปก)

คุณจะเพลิดเพลินไปกับความง่ายในการปรับการจัดแนวเนื้อหาด้วยมุมที่ลากได้:

นอกจากนี้ยังเป็นเทรนด์ในการสร้างเลย์เอาต์ออฟเซ็ตด้วยการวางหัวเรื่องไว้เหนือรูปภาพ:

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

ตัวอย่างที่ 5. ส่วนย่อยของฮีโร่

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

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

1. สองหัวเรื่องขั้นสูง
2. ย่อหน้า
3. ปุ่ม
4. บล็อกแกลลอรี่ Image Stack
5. พื้นหลังส่วน: สีทึบ

ตัวอย่างที่ 6 สำเนียงภาพ

แกลเลอรี่ภาพ แถบเลื่อน และวิดีโอเป็นเครื่องมือที่ใช้กันทั่วไปในการสร้างภาพที่ดึงดูดความสนใจ

ตัวอย่างเช่น คุณสามารถใช้บล็อก Media & Text Slider โดย Getwid เพื่อสร้างสไลด์โชว์พร้อมเนื้อหาข้อความเสริม:

1. สื่อและตัวเลื่อนข้อความ
2. พื้นหลังส่วน: การไล่ระดับสี + ตัวแบ่งด้านบนและด้านล่างพร้อมความสูงที่กำหนดเอง

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

ตัวอย่างที่ 7 แบนเนอร์

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

บล็อกนี้เหมาะอย่างยิ่งสำหรับการขายชั่วคราวและไฮไลต์อย่างต่อเนื่อง

1. แบนเนอร์
2. พื้นหลังของส่วน: การไล่ระดับสีแบบเอกรงค์

ตัวอย่างที่ 8 ส่วนข้อมูล

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

นี่คือเลย์เอาต์สองคอลัมน์ที่มีบล็อกหีบเพลงและรูปภาพอยู่ข้างๆ:

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

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

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

เพื่อปิดท้าย

คุณรู้หรือไม่ว่าสิ่งที่ดีที่สุดเกี่ยวกับการใช้คอมโบ Gutenberg และ Getwid ในธีม Total ฟรีคืออะไร? ไม่ ไม่ใช่แค่จำนวนบล็อกที่มีความสำคัญ

ที่สำคัญกว่านั้น คุณไม่จำเป็นต้องมีสายตาของนักออกแบบ (หรือทักษะของนักพัฒนา) เพื่อสร้างเนื้อหาที่ดูดี มีสกินที่สร้างไว้ล่วงหน้า รูปแบบบล็อก และการออกแบบที่พร้อมใช้งานมากมายที่พร้อมช่วยเหลือคุณ Getwid WordPress Blocks เป็นทางเลือกที่ดีสำหรับผู้สร้างเพจสำหรับผู้ที่ใช้ Total เวอร์ชันฟรี

จนกว่าตัวแก้ไขบล็อกจะยังไม่สมบูรณ์เพียงพอ ส่วนเสริมพิเศษของ Gutenberg อาจเป็นจุดเริ่มต้นที่ดี

คุณลอง Gutenberg หรือ Getwid แล้วหรือยัง? แจ้งให้เราทราบในความคิดเห็น.