วิธีสร้างบล็อกสไตล์ปานกลางด้วย Divi

ในบล็อกโพสต์ Divi วันนี้ เราจะแบ่งปันเคล็ดลับดีๆ เกี่ยวกับวิธีสร้างเว็บไซต์บล็อกของคุณเองในสไตล์เดียวกับบล็อกขนาดกลาง

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

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

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

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

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

นอกจากนี้เรายังจะแสดงวิธีเพิ่มปลั๊กอินมูลค่าการอ่านและไฮไลต์และแชร์เพื่อให้ดูคล้ายคลึงกันมากยิ่งขึ้น ผลลัพธ์ The Worth The Read มีลักษณะดังนี้:

และการไฮไลท์และแชร์จะมีผลดังต่อไปนี้:

สร้างเมนูง่ายๆ เช่น บล็อกขนาดกลาง

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

องค์ประกอบเมนู

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

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

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

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

• ความสูงของเมนู: 54
• โลโก้ความสูงสูงสุด: 37
• ขนาดตัวอักษร: 18

ใช้จานสีที่มีคอนทราสต์และฟอนต์ธรรมดา

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

• แบบอักษร: Source Sans Pro
• สีข้อความ: rgba(0,0,0,.44)
• สีลิงค์ที่ใช้งาน: rgba(0,0,0,.44)
• สีพื้นหลัง: #fbfcfd

รวมไอคอนการค้นหา

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

ปิดใช้งานแถบการนำทางคงที่

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

จัดรูปแบบโมดูลบล็อกหน้าแรกของคุณตามหมวดหมู่

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

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

ปลั๊กอินการ์ดบทความ Divi

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

ปลั๊กอินฟรีทั้งหมด เพียงไปที่โพสต์และดาวน์โหลด!

โมดูลบล็อกที่กำหนดเองของ Divi

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

ราคาของปลั๊กอินคือ 20 เหรียญ

Divi Blog Extras

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

ปลั๊กอินขายปลีกที่ $15 สำหรับ Single Site License และ $30 สำหรับ Extended License

สร้างเทมเพลตบล็อกโพสต์

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

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

การตั้งค่าโพสต์ Divi

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

• เค้าโครงหน้า: เต็มความกว้าง
• การนำทางแบบจุด: ปิด
• ซ่อนการนำทางก่อนเลื่อน: Default
• ชื่อกระทู้ : ซ่อน

ผู้เขียน (เดสก์ท็อป)

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

โมดูลรูปภาพ

เปิด Image Module อัปโหลดรูปภาพในแท็บ Content และใส่ Image Alignment ไปที่ 'Left' ในแท็บ Design ดำเนินการต่อ เพิ่ม '-5%' ที่ขอบบน และ '25%' ที่ระยะขอบด้านซ้ายในหมวดหมู่ย่อยการเว้นวรรคของแท็บการออกแบบ

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

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

โมดูลข้อความแรก

เพิ่มชื่อผู้เขียนในกล่องเนื้อหาภายในแท็บเนื้อหาและทำการปรับเปลี่ยนประเภทย่อยข้อความของแท็บออกแบบดังต่อไปนี้:

• การวางแนวข้อความ: ซ้าย
• แบบอักษรข้อความ: Source Sans Pro
• ขนาดตัวอักษรของข้อความ: 18
• สีข้อความ: rgba(0,0,0,0.8)
• ความสูงของบรรทัดข้อความ: 1.7em

เลื่อนลงมาที่แท็บเดิมเพื่อเพิ่ม '-3%' ให้กับขอบบน และ '-70%' ที่ระยะขอบด้านซ้าย

โมดูลข้อความที่สอง

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

• การวางแนวข้อความ: ซ้าย
• แบบอักษรข้อความ: Source Sans Pro
• ขนาดตัวอักษรของข้อความ: 14
• สีข้อความ: rgba(0,0,0,0.44)
• ความสูงของบรรทัดข้อความ: 1.7em

นอกจากนี้ ให้เลื่อนลงมาที่แท็บเดิมและเพิ่ม '-5%' ไปที่ขอบบนสุด และ '-70%' ที่ขอบด้านซ้ายในหมวดย่อยการเว้นวรรค

การมองเห็นแถว

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

ผู้เขียน (มือถือ)

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

โมดูลรูปภาพ

เปิด Image Module และวาง Image Alignment ไว้ที่ 'Center'

โมดูลข้อความแรก

เปิดโมดูลข้อความแรกและเปลี่ยนการวางแนวข้อความเป็น 'ศูนย์กลาง' ในหมวดหมู่ย่อยข้อความของแท็บออกแบบ

เลื่อนลงมาที่แท็บเดิม ลบขอบด้านซ้ายและเก็บขอบบนไว้

โมดูลข้อความที่สอง

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

การมองเห็นแถว

สุดท้าย เปิดการตั้งค่าแถวและปิดใช้งานแถวสำหรับเดสก์ท็อป

โมดูลหัวเรื่อง

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

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

นอกจากนี้; ทำการปรับเปลี่ยนต่อไปนี้ในหมวดหมู่ย่อยข้อความและข้อความชื่อเรื่องของแท็บออกแบบ:

• การวางแนวข้อความ: ศูนย์
• แบบอักษรของชื่อ: Source Sans Pro
• รูปแบบตัวอักษรของชื่อเรื่อง: Bold
• ขนาดตัวอักษรของชื่อเรื่อง: 47px (เดสก์ท็อป), 40 (แท็บเล็ต), 35 (โทรศัพท์)
• ชื่อข้อความสี: rgba(0,0,0,0.8)

รูปภาพเต็มความกว้าง

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

โมดูลข้อความ

ต่อไป เราจะสร้างโมดูลข้อความที่ใช้สำหรับโพสต์ในบล็อก เพิ่มส่วนมาตรฐานที่มีแถวเต็มความกว้างแล้วใส่โมดูลข้อความเข้าไป ในตัวอย่างนี้ เรากำลังใช้ฟอนต์ตระกูล 'Cardo' แทนที่จะเป็น 'Georgia' เพียงเพราะว่า 'Cardo' เป็นฟอนต์ที่อยู่ในตัว

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

• การวางแนวข้อความ: ซ้าย
• แบบอักษรข้อความ: Cardo
• ขนาดตัวอักษรของข้อความ: 25px (เดสก์ท็อป), 19px (แท็บเล็ต), 17px (โทรศัพท์)
• สีข้อความ: rgba(0,0,0,0.8)
• ความสูงของบรรทัดข้อความ: 1.8em

เลื่อนลงมาที่แท็บเดียวกัน เพิ่ม '800px' ให้กับความกว้างสูงสุดในหมวดหมู่ย่อย Sizing และเพิ่ม '10%' ให้กับขอบด้านซ้ายในหมวดย่อยการเว้นวรรค

โมดูลวิดีโอ

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

นี่คือลักษณะที่โครงสร้างควรมีลักษณะเหมือนในแบ็กเอนด์:

เราไม่ได้ทำการปรับเปลี่ยนใดๆ กับโมดูลวิดีโอ นอกจากการเพิ่ม URL

บันทึกเทมเพลต

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

ครั้งต่อไปที่คุณต้องการใช้เทมเพลต เพียงคลิกที่ 'โหลดจากไลบรารี' และโหลดเทมเพลต

คุ้มค่าแก่การอ่าน

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

ปลั๊กอิน WordPress ฟรีที่ช่วยให้คุณไปถึงที่นั่น คุ้มค่าแก่การอ่านโดย Well Done Marketing คุณสามารถดาวน์โหลดได้บนหน้าที่เราเชื่อมโยงหรือค้นหาในปลั๊กอิน ข้อดีของปลั๊กอินนี้คือคุณสามารถเลือกตำแหน่งที่คุณต้องการให้เวลาอ่านปรากฏ หน้า โพสต์ หรือทั้งสองอย่าง คุณยังสามารถเลือกตำแหน่งและรูปแบบได้

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

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

ไฮไลท์และแบ่งปัน

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

คุณสามารถเลือกช่องทางโซเชียลมีเดียที่ผู้คนสามารถแชร์ได้โดยไปที่การ ตั้งค่า > ไฮไลท์และแชร์ > เปิดใช้งานช่องทางโซเชียลมีเดียที่คุณต้องการใช้

ห่อ

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!

ภาพเด่นโดย Julia Tim / shutterstock.com