วิธีใช้ Global Presets กับ Divi Layout Blocks เพื่อเพิ่มความคล่องตัวในการออกแบบโพสต์บล็อก

เผยแพร่แล้ว: 2020-08-19

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

ด้วย Divi เราสามารถควบคุมประสบการณ์การออกแบบโพสต์ในบล็อกได้มากขึ้น ค่าที่ตั้งไว้ล่วงหน้าทั่วโลกของ Divi ช่วยให้คุณสร้างการออกแบบทั่วทั้งไซต์ (เช่น ธีมย่อย) สำหรับองค์ประกอบต่างๆ ทั่วทั้งไซต์ของคุณ โดยเพิ่มความสะดวกในการปรับแต่งการออกแบบตามที่คุณต้องการด้วยการคลิกเพียงไม่กี่ครั้ง นอกจากนี้ หากคุณคุ้นเคยกับการสร้างเนื้อหาในตัวแก้ไข WordPress Block เริ่มต้น คุณสามารถใช้พลังของ Divi Layout Block เพื่อดึงองค์ประกอบ Global Preset เหล่านั้นได้ทันทีภายในเนื้อหาโพสต์ ซึ่งจะทำให้คุณสามารถเพิ่มองค์ประกอบการออกแบบใหม่ภายในบล็อกโพสต์ที่ตรงกับแม่แบบและส่วนที่เหลือของไซต์

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

ภาพรวมโดยย่อของ Global Presets

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

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

ค่าที่ตั้งไว้ล่วงหน้าของ Divi ทั่วโลก

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

คู่มือสไตล์พรีเซ็ตทั่วโลก

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

ภาพรวมโดยย่อของ Divi Layout Blocks

Divi Layout Block อนุญาตให้ผู้ใช้เพิ่ม Divi Layout ใดๆ ลงในบล็อกโพสต์ภายในตัวแก้ไข Gutenberg เรายังแปลง Divi Layout Block เป็นบล็อกที่ใช้ซ้ำได้ใน Gutenberg เหมือนกับบล็อก WordPress อื่นๆ นี่เป็นการเปิดประตูสำหรับการปรับปรุงการออกแบบ Divi Layout ที่เป็นประโยชน์บางอย่างให้กลายเป็นขั้นตอนปกติของการเขียนโพสต์ใน Gutenberg

ค่าที่ตั้งไว้ล่วงหน้าทั่วโลกและบล็อกเลย์เอาต์ทำงานร่วมกันอย่างไร

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

การใช้ Global Presets กับ Divi Layout Blocks เพื่อปรับปรุงการออกแบบโพสต์บล็อก

การอัพโหลด Global Presets Style Guide

สำหรับบทช่วยสอนนี้ เราจะเริ่มต้นอย่างรวดเร็วในการสร้าง Global Presets โดยใช้ Global Presets Style Guide Layout สำหรับ Web Agency Layout หลังจากอัปโหลดคู่มือสไตล์แล้ว เราจะมี Global Presets ที่พร้อมใช้งานเมื่อเพิ่มองค์ประกอบการออกแบบในบล็อกโพสต์โดยใช้ Divi Layout Block

หากต้องการดาวน์โหลด Global Presets ให้ไปที่บล็อกโพสต์ เลื่อนลงไปที่หัวข้อ “ดาวน์โหลด Global Presets Style Guide” จากนั้นป้อนที่อยู่อีเมลของคุณและคลิกเพื่อรับการดาวน์โหลด

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

หลังจากที่คุณดาวน์โหลดไฟล์ zip ลงในคอมพิวเตอร์ของคุณแล้ว ให้คลายซิปไฟล์และกลับไปที่แดชบอร์ดของ WordPress

ในการนำเข้าไฟล์ JSON คู่มือสไตล์ไปยัง Divi Library...

  1. นำทางไปยัง Divi > Divi Library
  2. คลิกปุ่มนำเข้าและส่งออก
  3. ภายใต้ป๊อปอัปการพกพา ให้เลือกแท็บการนำเข้า
  4. เลือกไฟล์ JSON คู่มือสไตล์สากลของเว็บเอเจนซี่
  5. ตรวจสอบให้แน่ใจว่าคุณได้เลือกนำเข้าค่าที่ตั้งล่วงหน้า
  6. จากนั้นคลิกปุ่มนำเข้า

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

ตอนนี้ค่าที่ตั้งไว้ล่วงหน้าทั่วโลกทั้งหมดนั้นมีอยู่ใน Divi Builder

กำลังอัปโหลดเทมเพลตโพสต์

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

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

ในการนำเข้าเทมเพลตโพสต์…

  1. นำทางไปยัง Divi > ตัวสร้างธีม
  2. จากนั้นคลิกไอคอนการพกพา
  3. ภายใต้โมดอลการพกพา ให้เลือกแท็บการนำเข้า
  4. เลือกไฟล์ JSON ของเทมเพลตโพสต์ที่คุณดาวน์โหลด
  5. จากนั้นคลิกปุ่มนำเข้า

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

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

เมื่อคุณมีเทมเพลตโพสต์ที่กำหนดเองแล้ว คลิกเพื่อแก้ไขเทมเพลตเนื้อหาที่กำหนดเอง คุณสามารถดูการออกแบบเทมเพลตโพสต์ได้เช่นกัน และทำการปรับเปลี่ยนโดยใช้ค่าที่ตั้งไว้ล่วงหน้าส่วนกลางที่มีอยู่ในคู่มือสไตล์ที่นำเข้า หากคุณกำลังสร้างเทมเพลตโพสต์ของคุณเองตั้งแต่เริ่มต้น คุณสามารถใช้ค่าที่ตั้งไว้ล่วงหน้าส่วนกลางเพื่อช่วยจับคู่การออกแบบเทมเพลตโพสต์กับองค์ประกอบอื่นๆ บนเว็บไซต์ ตัวอย่างเช่น คุณสามารถใช้ค่าที่ตั้งไว้ล่วงหน้า “WALP – H1 – 1” บนชื่อโพสต์ได้ดังนี้:

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

หรือคุณสามารถใช้ "WALP - Blurb 2" ที่ตั้งไว้ล่วงหน้าของโมดูลการประกาศแจ้งที่มีข้อมูลผู้เขียนแบบไดนามิก

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

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

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

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

ตัวอย่างเช่น คุณสามารถคัดลอกสไตล์ข้อความหัวเรื่องสำหรับค่าที่ตั้งไว้ล่วงหน้าส่วนกลางที่สร้างขึ้นสำหรับสไตล์ข้อความทั้งหมดในโมดูลข้อความเดียว

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

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

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

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

การใช้ Global Presets กับ Divi Layout Blocks

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

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

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

ตอนนี้ หากคุณดูโพสต์ที่ส่วนหน้า จะมีเนื้อหาโพสต์แสดงอยู่ภายในเทมเพลตของโพสต์ และเนื้อหา (หัวเรื่อง เนื้อหา ฯลฯ...) กำลังสืบทอดสไตล์จากการตั้งค่าโมดูลเนื้อหาโพสต์

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

โมดูลเนื้อหาโพสต์จะจัดการเฉพาะการจัดรูปแบบของข้อความพื้นฐานเท่านั้น หากคุณต้องการเพิ่มองค์ประกอบเพิ่มเติมในโพสต์ของคุณโดยใช้ตัวแก้ไข WordPress Block เริ่มต้น รูปแบบขององค์ประกอบเหล่านั้นจะต้องเปลี่ยนผ่าน CSS ที่กำหนดเองในธีมย่อย นั่นคือเว้นแต่คุณจะใช้ Divi Layout Blocks

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

การออกแบบ #1: การสร้างบล็อก CTA ด้วย Global Presets และ Divi Layout Block

ในตัวอย่างนี้ มาสร้างบล็อก CTA แบบกำหนดเองที่ตรงกับเทมเพลตโพสต์และการออกแบบไซต์

ในการดำเนินการนี้ ให้เพิ่ม Divi Layout Block ในเนื้อหาโพสต์

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

จากนั้นคลิกสร้างเค้าโครงใหม่

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

ซึ่งจะเป็นการเปิดตัวแก้ไขบล็อกเลย์เอาต์ซึ่งโดยพื้นฐานแล้วคือ Divi Builder ตามปกติ ให้ส่วนเริ่มต้นเป็นแถวหนึ่งคอลัมน์

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

เปิด Global Presets Layout ของคุณในเบราว์เซอร์อื่น อย่าลืมคลิกเพื่อสร้างส่วนหน้าเพื่อให้คุณเห็นองค์ประกอบต่างๆ ด้วยวิธีนี้ คุณจะเปิดเครื่องมือแก้ไขเลย์เอาต์ในเบราว์เซอร์หนึ่งและเปิดไกด์สไตล์ในอีกเบราว์เซอร์หนึ่ง

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

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

คัดลอกพื้นหลังจาก Style Guide

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

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

จากนั้นเปิดการตั้งค่าของส่วนในตัวแก้ไขเลย์เอาต์และวางพื้นหลังไปที่ส่วนนั้น

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

เพิ่มโมดูลข้อความด้วย H3 Preset

ถัดไป เพิ่มโมดูลข้อความใหม่ในแถว

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

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

เพิ่มส่วนหัว H3 สำหรับ CTA โดยวาง HTML ต่อไปนี้ในเนื้อหา:

<h3>Learn How One Client Increased Revenue by 500%</h3>

เปิดดรอปดาวน์ Global Presents และเลือกพรีเซ็ตสำหรับส่วนหัว H3 (WALP – H3 – 1)

ปรับปรุงการออกแบบ

จากนั้นอัปเดตสีข้อความเป็นสีขาวและจัดตำแหน่งให้อยู่กึ่งกลาง

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

เพิ่มปุ่มด้วย Global Preset

ใต้โมดูลข้อความ ให้เพิ่มปุ่มใหม่

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

จากนั้นอัปเดตข้อความปุ่มและเลือกหนึ่งในการออกแบบปุ่มพรีเซ็ตทั่วโลก สำหรับตัวอย่างนี้ ให้ใช้ “WALP – Button 3”

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

บันทึกการเปลี่ยนแปลง

เมื่อเสร็จแล้วให้คลิกบันทึกและออก

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

ตอนนี้คุณสามารถดูองค์ประกอบที่แสดงใน WordPress Block Editor

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

การออกแบบ #2: การสร้างใบเสนอราคาบล็อกด้วยการตั้งค่าล่วงหน้าทั่วโลกและบล็อกเค้าโครง Divi

สำหรับองค์ประกอบการออกแบบถัดไปนี้ เราจะเพิ่มใบเสนอราคาในบล็อกโพสต์

เพิ่ม Divi Layout Block

ในการเริ่มต้น ให้เพิ่ม Divi Layout Block ที่คุณต้องการให้แสดงใบเสนอราคา

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

จากนั้นคลิกสร้างเค้าโครงใหม่

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

คัดลอกและวางพื้นหลังจากคู่มือสไตล์

คัดลอกพื้นหลังสีน้ำเงินเข้มจากคู่มือสไตล์

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

จากนั้นวางลงในส่วนเริ่มต้นของตัวแก้ไขเค้าโครง

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

เพิ่มแถว

ถัดไป เพิ่มแถวหนึ่งคอลัมน์ในส่วน

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

เพิ่ม Testimonial Module ด้วย Preset

จากนั้นเพิ่มโมดูลข้อความรับรองลงในคอลัมน์ จากนั้นเลือก Global Preset “WALP – Testimonial 2”

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

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

อัพเดทการออกแบบ

ภายใต้แท็บการออกแบบ ให้ปรับการตั้งค่าการออกแบบดังนี้:

  • อ้างไอคอนสี:
  • น้ำหนักแบบอักษรของร่างกาย: เบา
  • รูปแบบตัวอักษรของตัวหนังสือ: ตัวเอียง
  • การจัดตำแหน่งข้อความเนื้อหา: ซ้าย
  • สีข้อความ: #ffffff
  • แบบอักษรของผู้แต่ง: Ubuntu
  • ขนาดข้อความของผู้เขียน: 16px

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

เพิ่มค่าที่ตั้งไว้ทั่วโลกใหม่

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

หากต้องการสร้างใหม่ ให้คลิกปุ่ม "สร้างพรีเซ็ตใหม่จากรูปแบบปัจจุบัน" จากนั้นตั้งชื่อที่ตั้งไว้ล่วงหน้าใหม่ (“ใบเสนอราคาโพสต์บล็อก”) และบันทึก ค่าที่ตั้งไว้ล่วงหน้าทั่วโลกพร้อมสำหรับการใช้งานในอนาคต

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

บันทึกเลย์เอาต์แล้วคุณจะเห็นภายในเนื้อหาโพสต์

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

การออกแบบ #1: การเพิ่ม Blurbs ลงในบล็อกโพสต์ด้วย Global Presets และ Divi Layout Block

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

เพิ่มใหม่ Divi Layout Block

เพิ่ม Divi Layout Block อื่นแล้วคลิกปุ่มสร้างเค้าโครงใหม่

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

ในตัวแก้ไขเค้าโครง เพิ่มแถวสองคอลัมน์ให้กับเค้าโครง

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

เพิ่มโมดูล Blurb พร้อมพรีเซ็ต

ในคอลัมน์ด้านซ้าย เพิ่มโมดูลการนำเสนอ

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

เพิ่มภาพไอคอนใหม่ให้กับการนำเสนอ จากนั้นเปิดรายการแบบเลื่อนลงที่ตั้งไว้ล่วงหน้าและเลือกพรีเซ็ต "WALP - Blurb 4"

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

เพิ่ม Blurb ที่สอง

จากนั้นคัดลอกประกาศและวางลงในคอลัมน์ 2 และอัปเดตรูปภาพ

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

บันทึกเลย์เอาต์แล้วคุณจะเห็นในเนื้อหาโพสต์

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

ผลสุดท้าย

ตอนนี้เปิดโพสต์ที่ส่วนหน้าเพื่อดูผลลัพธ์สุดท้าย

ค่าที่ตั้งไว้ทั่วโลกพร้อมบล็อกเลย์เอาต์ Divi

บล็อกที่นำกลับมาใช้ใหม่ได้ด้วย Global Presets

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

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

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

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

ไชโย!