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

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

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

นี่คือ 4 ตัวอย่างเกี่ยวกับวิธีการปรับแต่ง บล็อกของคุณรวมถึงเอฟเฟกต์โฮเวอร์บางอย่างที่คุณสามารถใช้ได้ เมื่อสิ้นสุดบทช่วยสอนนี้ คุณจะสามารถสร้างการออกแบบที่ยอดเยี่ยมได้ บล็อกของคุณ.

บทเรียนอื่น ๆ เกี่ยวกับชุดรูปแบบ Divi

ขอเริ่มต้น

การกำหนดค่าเค้าโครงตารางสำหรับบล็อกของคุณ

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

เมื่อสร้างข้อความของคุณแล้วให้สร้างหน้าใหม่ ในหน้าใหม่ของคุณปรับใช้โมดูลบล็อกในคอลัมน์เต็มความกว้างในส่วนมาตรฐาน:

การกำหนดค่าโครงร่างของบล็อก Divi

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

  • เค้าโครง: ตาราง (ตาราง)
  • จำนวนบทความ: 12
  • แสดงภาพเด่น: ใช่
  • ปุ่มอ่านเพิ่มเติม: ON

การกำหนดค่า Divi grid

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

Gridcard css Divi

บันทึกการเปลี่ยนแปลงของคุณ

วิธีทำความเข้าใจเค้าโครง "กริด" สำหรับบล็อก

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

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

การนำเสนอเค้าโครง Divi กริด

บัตรตั๋วบล็อกถูกเรียงลำดับจากบนลงล่างในแต่ละคอลัมน์ ดังนั้นหากคุณต้องการให้ตัวเลขแก่พวกเขาคุณจะต้องนับ 1 ถึง 4 ในแต่ละความยาวจากบนลงล่าง:

นับบทความ Divi

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

เลขคู่และเลขคี่

ตัวอย่างการออกแบบประตู

ตัวอย่าง n ° 1: การออกแบบตาราง "Checkered"

สำหรับตัวอย่างแรกนี้ฉันจะกำหนดเป้าหมายการ์ดคี่ทั้งหมดในโมดูลบล็อก (การ์ด 1 และ 3) ในคอลัมน์แรกโดยให้สีพื้นหลังเป็นสีเทาเข้ม ในการดำเนินการนี้ไปที่ "Divi → Theme options" และเพิ่ม CSS ต่อไปนี้ในกล่องข้อความ CSS ที่กำหนดเอง:

#gridcard .column: ครั้งแรกที่เด็กบทความ: ชับเด็ก (แปลก) {พื้นหลัง: #333; }

ต่อไปนี้เป็นรายละเอียดของสิ่งรหัสนี้ไม่:

#gridcard = รหัสของโมดูลบล็อกทั้งหมด

.column: first-child = เลือกคอลัมน์แรกในโมดูลบล็อก

โพสต์: nth-child (คี่) = เลือกรายการคี่ (หรือการ์ด) ทั้งหมดในคอลัมน์

เมื่อรวมทั้งหมดเข้าด้วยกันจะเป็นการเลือกไพ่ที่มีเลขคี่ในคอลัมน์แรกของโมดูลบล็อกที่มี ID "gridcard"

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

#gridcard .column: ครั้งแรกที่เด็กบทความ: ชับเด็ก (แปลก) .entry-ชื่อ #gridcard .column: ครั้งแรกที่เด็กบทความ: ชับเด็ก (แปลก) .POST-เมตา #gridcard .column: ครั้งแรกที่เด็ก บทความ: ชับเด็ก (แปลก) ก .post-เมตา #gridcard .column: ครั้งแรกที่เด็กบทความ: ชับเด็ก (แปลก) .POST เนื้อหา P {สี: #ffffff; }

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

นี่คือผลลัพธ์:

การปรับแต่งตาราง Divi แปลก ๆ

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

#gridcard .column: last-child article: nth-child (odd) {background: # 333; } #gridcard .column: last-child article: nth-child (odd) .entry-title, #gridcard .column: last-child article: nth-child (odd) .post-meta, #gridcard .column: last- บทความย่อย: nth-child (odd) .post-meta a, #gridcard .column: last-child article: nth-child (odd) .post-content p {color: #ffffff; }

รหัสนี้กำหนดเป้าหมายคอลัมน์ "สุดท้าย" (ในกรณีนี้คอลัมน์ที่สามคือคอลัมน์สุดท้าย) ด้วยองค์ประกอบชื่อเล่น "last-child"

สำหรับคอลัมน์ที่สอง (หรือกลาง) กำหนดเป้าหมายแม้แต่การ์ดเพื่อให้เอฟเฟกต์กระดานหมากรุกสมบูรณ์ ในการดำเนินการนี้เราต้องเพิ่ม CSS ต่อไปนี้:

#gridcard .column: nth-child (2) บทความ: nth-child (คู่) {background: # 333; } #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard .column: nth-child (2) article: nth-child (even) .post-meta, # gridcard .column: nth-child (2) article: nth-child (even) .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even) .post-content p {color : #fff; }

ตอนนี้ไปตรวจสอบหน้าบล็อกเพื่อดูรูปแบบตารางหมากรุกของบัตรโมดูลบล็อก

เค้าโครง Divi ตารางหมากรุก

ตัวอย่าง # 2: การเพิ่มเอฟเฟกต์โฮเวอร์ด้วยเค้าโครงตาหมากรุก

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

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

#gridcard .column: first-child article: nth-child (odd), #gridcard .column: last-child article: nth-child (odd), #gridcard .column: nth-child (2) article: nth-child (แม้) {พื้นหลัง: # 333; } #gridcard .column: first-child article: nth-child (odd) .entry-title, #gridcard .column: first-child article: nth-child (odd) .post-meta, #gridcard .column: first- บทความย่อย: nth-child (odd) .post-meta a, #gridcard .column: first-child article: nth-child (odd) .post-content p, #gridcard .column: last-child article: nth-child (odd) .entry-title, #gridcard .column: last-child article: nth-child (odd) .post-meta, #gridcard .column: last-child article: nth-child (odd) .post-meta a , #gridcard .column: last-child article: nth-child (odd) .post-content p, #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard คอลัมน์: nth-child (2) บทความ: nth-child (even) .post-meta, #gridcard .column: nth-child (2) article: nth-child (even) .post-meta a, #gridcard .column : nth-child (2) article: nth-child (even) .post-content p {color: #fff; } #gridcard .column: nth-child (2) article: nth-child (even): hover img, #gridcard .column: first-child article: nth-child (odd): hover img, #gridcard .column: last - บทความสำหรับเด็ก: nth-child (odd): hover img {-webkit-filter: greyscale (1); ตัวกรอง: โทนสีเทา (1); } #gridcard .column: nth-child (2) article: nth-child (odd): hover img, #gridcard .column: first-child article: nth-child (even): hover img, #gridcard .column: last - บทความสำหรับเด็ก: nth-child (คู่): เลื่อน img {-webkit-filter: ความสว่าง (1.5); ตัวกรอง: ความสว่าง (1.5); }

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

เพิ่มต่อไปนี้ CSS และ CSS มากขึ้นด้านบน:

#gridcard .column บทความ #gridcard .column บทความ img {-webkit-transition: 0.8s ทั้งหมด; -moz-transition: 0.8s ทั้งหมด; การเปลี่ยนแปลง: 0.8s ทั้งหมด; } #gridcard .column: first-child article: nth-child (odd): hover, #gridcard .column: last-child article: nth-child (odd): hover, #gridcard .column: nth-child (2) บทความ: nth-child (แม้): hover {background: #fff; } #gridcard .column: first-child article: nth-child (odd): hover .entry-title, #gridcard .column: first-child article: nth-child (odd): hover .post-meta, #gridcard คอลัมน์: บทความลูกคนแรก: nth-child (odd): hover .post-meta a, #gridcard .column: first-child article: nth-child (odd): hover .post-content p, #gridcard .column: บทความลูกสุดท้าย: nth-child (odd): hover .entry-title, #gridcard .column: last-child article: nth-child (odd): hover .post-meta, #gridcard .column: last-child article : nth-child (คี่): hover .post-meta a, #gridcard .column: last-child article: nth-child (odd): hover .post-content p, #gridcard .column: nth-child (2) บทความ: nth-child (คู่): hover .entry-title, #gridcard .column: nth-child (2) บทความ: ที่ n-child (คู่): hover .post-meta, #gridcard .column: nth-child ( 2) บทความ: nth-child (คู่): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-content p {color: # 333; } #gridcard .column: first-child article: nth-child (even): hover, #gridcard .column: last-child article: nth-child (even): hover, #gridcard .column: nth-child (2) บทความ: nth-child (odd): hover {background: # 333; } #gridcard .column: first-child article: nth-child (even): hover .entry-title, #gridcard .column: first-child article: nth-child (even): hover .post-meta, #gridcard คอลัมน์: บทความลูกคนแรก: ที่ n-child (คู่): hover .post-meta a, #gridcard .column: first-child article: nth-child (even): hover .post-content p, #gridcard .column: บทความลูกสุดท้าย: nth-child (คู่): hover .entry-title, #gridcard .column: last-child article: nth-child (even): hover .post-meta, #gridcard .column: last-child article : nth-child (แม้): hover .post-meta a, #gridcard .column: last-child article: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) article: nth-child (odd): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-meta, #gridcard .column: nth-child ( 2) article: nth-child (odd): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-content p {color: #fff; }

ตอนนี้ไปดูผลในบล็อกของคุณ

การปรับแต่งกริดเมื่อวางเมาส์เหนือ Divi

ตัวอย่าง # 3: ปรับแต่งแผนที่เส้น

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

#gridcard บทความ: nth-child (คู่) {background-color: # 333; } #gridcard article: ที่ n-child (even) .entry-title, #gridcard article: nth-child (even) .post-meta, #gridcard article: nth-child (even) .post-meta a, #gridcard article : nth-child (แม้) .post-content p {color: #fff; }

นี่คือผลลัพธ์ที่ได้:

ผลการกำหนดค่าตามเส้น Divi

ตัวอย่าง # 4: การออกแบบแผนที่ตารางที่เฉพาะเจาะจง

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

ไปที่หน้าที่แสดงโมดูลบล็อกของคุณและคลิกขวาที่การ์ดของคุณ ในช่องตัวเลือกที่ปรากฏขึ้นให้เลือก "ตรวจสอบ" (บางเบราว์เซอร์อาจมี "ตรวจสอบรายการ" หรือสิ่งที่คล้ายกันซึ่งจะทำให้หน้าต่างเครื่องมือสำหรับนักพัฒนาใช้งานได้ซึ่งแสดงทั้ง html และ css สำหรับคุณ หน้าเว็บค้นหาแท็กบทความที่ปิดบทความของคุณและจด ID บทความที่กำหนดไว้นี่คือตัวเลือกที่คุณควรใช้เพื่อกำหนดเป้าหมายการ์ดแต่ละใบของคุณสำหรับตัวอย่างของฉันฉันมี คลิกขวาและคลิกตรวจสอบเพื่อค้นหารหัส "post-3466"

ดังต่อไปนี้:

การปรับเปลี่ยนบทความเดียว

ในการกำหนดเป้าหมายบัตร CSS นี้เพื่อให้เขามีพื้นหลังสีเทาที่มีตัวอักษรสีขาว, คุณต้องใช้ CSS ต่อไปนี้:

# post-3466 {พื้นหลัง: # 333333; } # post-3466 .entry-title, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {color: #fff; }

ตอนนี้แผนที่มีสไตล์เฉพาะที่ใช้กับมันแล้ว

นั่นคือทั้งหมด!

คิดสุดท้าย

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

หากคุณมีคำถามหรือข้อเสนอแนะใด ๆ อย่าลังเลที่จะให้พวกเขาให้ฉัน

[vc_row center_row=”ใช่”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลดธีม DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลด TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

บทแนะนำ Divi อื่น ๆ