โมดูล Divi Blog มีตัวเลือกเลย์เอาต์ในรูปแบบของกริดที่มีประโยชน์สำหรับการโพสต์บล็อกของคุณ เทมเพลตกริดจะจัดระเบียบการโพสต์บล็อกของคุณลงในกล่องหรือแผนที่ที่ทำให้การมองเห็นรายการบนหน้าจอง่ายขึ้นเมื่อเทียบกับมุมมองมาตรฐาน
การตั้งค่าโมดูลบล็อกช่วยให้คุณปรับแต่งการออกแบบโดยรวมของเครือข่ายของคุณได้ คุณสามารถทำให้การ์ดทั้งหมดของคุณมีสีพื้นหลังแบบอักษรระยะขอบ ฯลฯ เหมือนกันได้อย่างง่ายดายอย่างไรก็ตามตัวเลือกรูปแบบจะ จำกัด เฉพาะการออกแบบตารางโดยรวมซึ่งทำให้ยาก ใช้การออกแบบที่หลากหลายหรือแตกต่างกันกับแผนที่ภายในตาราง
วันนี้ ฉันจะแสดงให้คุณเห็นถึงวิธีการกำหนดเป้าหมายและนำสไตล์มากกว่าหนึ่งสไตล์ไปใช้กับการ์ดที่ประกอบกันเป็นตาราง บล็อกของคุณ ใช้ CSS ที่กำหนดเอง ฉันจะแสดงให้คุณเห็นถึงวิธีการใช้สไตล์ที่แตกต่างกันกับการ์ดแต่ละใบ เพื่อสร้างเอฟเฟกต์ตารางหมากรุก ฉันจะแสดงวิธีจัดสไตล์การ์ดแต่ละใบให้แตกต่างกันในแต่ละแถว และจะแสดงวิธีกำหนดเป้าหมายการ์ดแต่ละใบด้วย
นี่คือ 4 ตัวอย่างเกี่ยวกับวิธีการปรับแต่ง บล็อกของคุณรวมถึงเอฟเฟกต์โฮเวอร์บางอย่างที่คุณสามารถใช้ได้ เมื่อสิ้นสุดบทช่วยสอนนี้ คุณจะสามารถสร้างการออกแบบที่ยอดเยี่ยมได้ บล็อกของคุณ.
บทเรียนอื่น ๆ เกี่ยวกับชุดรูปแบบ Divi
- เว็บไซต์ 5 สำหรับการใช้งานร้านอาหาร Divi ธีม
- วิธีการเพิ่มข้อความบน Divi สินค้า WooCommerce
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้าบน Divi
- คุณสมบัติที่คุณไม่รู้เกี่ยวกับ Divi
- วิธีสร้างแถบเลื่อนบน Divi
- วิธีแก้ไขบทบาทผู้ใช้บน Divi
ขอเริ่มต้น
การกำหนดค่าเค้าโครงตารางสำหรับบล็อกของคุณ
ก่อนเริ่มต้นด้วยการออกแบบการ์ดโมดูลบล็อกตรวจสอบให้แน่ใจว่าคุณมีบทความอย่างน้อย 12 ที่สร้างขึ้นด้วยรูปภาพในกล่องแล้ว
เมื่อสร้างข้อความของคุณแล้วให้สร้างหน้าใหม่ ในหน้าใหม่ของคุณปรับใช้โมดูลบล็อกในคอลัมน์เต็มความกว้างในส่วนมาตรฐาน:
คลิกเพื่อแก้ไขการตั้งค่าของโมดูลบล็อก ภายใต้การตั้งค่าทั่วไปเปลี่ยนการตั้งค่าต่อไปนี้:
- เค้าโครง: ตาราง (ตาราง)
- จำนวนบทความ: 12
- แสดงภาพเด่น: ใช่
- ปุ่มอ่านเพิ่มเติม: ON
ภายใต้ Custom CSS ให้ป้อน "gridcard" ในกล่องข้อความ CSS ID มันจะเป็นวิธีที่เราจะปรับแต่งเฉพาะโมดูลบล็อกนี้
บันทึกการเปลี่ยนแปลงของคุณ
วิธีทำความเข้าใจเค้าโครง "กริด" สำหรับบล็อก
ตอนนี้คุณมีตารางบล็อกของคุณในสถานที่ที่มันเป็นสิ่งสำคัญที่จะเข้าใจโครงสร้างของรูปแบบของตารางเพื่อให้คุณสามารถค้นหาแผนที่ของโมดูลบล็อกที่คุณต้องการปรับแต่ง
กริดบล็อกถูกกำหนดค่าด้วยโครงร่างสามคอลัมน์ ต่อไปนี้เป็นภาพประกอบของตารางบล็อกที่มีบทความบล็อก 12 แบ่งออกเป็นสามคอลัมน์:
บัตรตั๋วบล็อกถูกเรียงลำดับจากบนลงล่างในแต่ละคอลัมน์ ดังนั้นหากคุณต้องการให้ตัวเลขแก่พวกเขาคุณจะต้องนับ 1 ถึง 4 ในแต่ละความยาวจากบนลงล่าง:
เนื่องจากคุณทราบลำดับตัวเลขของการ์ดบล็อกแต่ละใบในแต่ละคอลัมน์คุณจึงสามารถระบุการ์ดแต่ละใบเป็นเลขคี่หรือเลขคู่ได้ดังนี้:
ตัวอย่างการออกแบบประตู
ตัวอย่าง 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; }
โค้ดนี้กำหนดเป้าหมายองค์ประกอบข้อความทั้งหมดในการ์ดโมดูลบล็อก (รวมถึงชื่อเรื่อง เมตาของโพสต์ เมตาลิงก์ของโพสต์ และ เนื้อหา ของบทความ) และให้สีเป็นสีขาว
นี่คือผลลัพธ์:
ขั้นตอนต่อไปในการสร้างเค้าโครงกระดานหมากรุกของเราคือการกำหนดเป้าหมายการ์ดที่มีเลขคี่ในคอลัมน์ที่สามและใช้พื้นหลังสีเทาเข้มและข้อความสีขาวเช่นเดียวกับที่คุณทำในคอลัมน์แรก เพิ่ม 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; }
ตอนนี้ไปตรวจสอบหน้าบล็อกเพื่อดูรูปแบบตารางหมากรุกของบัตรโมดูลบล็อก
ตัวอย่าง # 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; }
ตอนนี้ไปดูผลในบล็อกของคุณ
ตัวอย่าง # 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; }
นี่คือผลลัพธ์ที่ได้:
ตัวอย่าง # 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 อื่น ๆ
- เว็บไซต์ 5 สำหรับการใช้งานร้านอาหาร Divi ธีม
- วิธีการเพิ่มข้อความในผลิตภัณฑ์ Divi WooCommerce
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- วิธีปรับเปลี่ยนกริดของบล็อกด้วย Divi
- วิธีการใช้บทบาทของบรรณาธิการ Divi บน WordPress
- วิธีสร้างแถบเลื่อน Divi แบบเต็มหน้าจอ
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- คุณสมบัติที่คุณอาจไม่รู้เกี่ยวกับ Divi
- วิธีการใช้ Divi Builder ใน WordPress
- วิธีใช้โมดูลเลื่อนภาพ Divi
- วิธีการใช้โมดูล Divi Builder Flip
- วิธีการเพิ่มโมดูลข้อความรับรองในตัวสร้าง Divi
- วิธีใช้โมดูลข้อความ Divi
- วิธีสร้างแถบเลื่อนบน Divi
- วิธีแก้ไขบทบาทผู้ใช้ Divi
- วิธีใช้โมดูล Divi Social Media
- วิธีใช้โมดูลร้านค้าในธีม WordPress Divi
- วิธีใช้โมดูลด้านข้าง Divi
- วิธีการใช้โมดูลตารางราคา Divi
- วิธีการใช้โมดูลชื่อเรื่องของสิ่งพิมพ์ของ Divi
- วิธีเพิ่มโมดูลวิดีโอของ Divi
- วิธีใช้โมดูลการนำทางบทความ
- วิธีการใช้โมดูลค้นหา Divi
- วิธีใช้โมดูลกระเป๋าสตางค์ Divi
- วิธีการใช้โมดูลคนบน Divi Builder
- วิธีใช้โมดูลกระเป๋าสตางค์กับตัวกรอง Divi
- วิธีการใช้โมดูลเลื่อนความกว้างเต็ม
- วิธีใช้โมดูล Divi Builder Image
- วิธีใช้โมดูลการนำทางความกว้างเต็มรูปแบบของ Divi Builder
- วิธีการใช้โมดูลคลังภาพ
- วิธีการใช้โมดูลบัตร Divi Builder Full-Width Card
- วิธีใช้โมดูล Divi Full Width Portfolio
- วิธีใช้โมดูลส่วนหัวแบบเต็มความกว้างของ Divi
- วิธีใช้โมดูล Divi Counter
- วิธีใช้แถบเลื่อนบทความบนเครื่องมือสร้าง Divi
- วิธีใช้โมดูล Divi Email Optin
สวัสดีตอนเช้า ! คุณทราบหรือไม่ว่าสามารถแก้ไขจำนวนคอลัมน์ของวัตถุบล็อกนี้ได้หรือไม่?
ฉันต้องการให้การ์ดแต่ละใบแสดงเต็มความกว้าง ขอบคุณ !
สวัสดี,
ฉันพยายามแสดงบทความในบล็อกใน "ตาราง" ด้วยรหัส "gridcard" แต่ไม่ได้ผล คุณสามารถช่วยฉันได้ไหม ?
ดีตอนเย็น
ขออภัยสำหรับการตอบกลับปลาย
คุณสามารถเรียบเรียงคำขอของคุณใหม่ได้ไหม
สวัสดี,
ฉันเป็นมือใหม่จริงๆ แต่ต้องขอบคุณบทเรียนออนไลน์ทำให้ฉันสามารถสร้างบล็อกที่ดีได้
ขอบคุณจริงๆสำหรับสิ่งนี้เพราะฉันเพิ่งคัดลอกรหัสและทุกอย่างก็เป็นไปอย่างไม่มีที่ติฉันดีใจกับผลลัพธ์
ขอขอบคุณอีกครั้งขอให้มีความสุขในวันนี้🙂
ฉันขอร้องคุณ ขอบคุณที่อ่านพวกเรา
ดีตอนเย็น
บล็อก DIVI ถัดจากชื่อผู้แต่งวางคำบุพบท "of" (เช่น Stefano) ฉันต้องการทราบว่าสามารถเปลี่ยนเป็น "de" ได้หรือไม่
สวัสดี,
ใช่เป็นไปได้ที่จะเปลี่ยนองค์ประกอบนี้ด้วย Divi
สวัสดี Thierry
บทช่วยสอนสุดยอด
ฉันต้องการทราบว่าสามารถเพิ่มขนาดของรูปภาพเด่นได้หรือไม่
ฉันต้องการนำสไตล์นี้ไปใช้กับบล็อกของฉัน
Merci
สวัสดี,
ใช่มันเป็นไปได้
สวัสดี,
ฉันจะปรับรูปแบบนี้ให้เหมาะสมกับมือถือ (แท็บเล็ต) ได้อย่างไร ฉันไม่มี Schabrettmuster แต่มีสีที่แตกต่างกันสำหรับแต่ละบล็อกโพสต์ตามลำดับที่เจาะจง แน่นอนว่าจะเปลี่ยนไปเมื่อคุณเปลี่ยนมาใช้มือถือและสีจะไม่สัมพันธ์กับโพสต์ที่ถูกต้องอีกต่อไป ...
ใครมีความคิดที่นี่?
สวัสดี,
ไม่มีโชคร้าย
สวัสดี,
ขอบคุณสำหรับบทความนี้! ฉันต้องการแก้ไข "อ่านเพิ่มเติม" ที่ด้านล่างของบทความด้วย
คุณช่วยยกตัวอย่างโค้ด CSS เพื่อเปลี่ยนข้อความและวางไว้ในปุ่มศูนย์กลางที่ดีหรือไม่?
en vous remerciant
โซฟี
สวัสดี 🙂 หากต้องการเปลี่ยนข้อความของปุ่ม “อ่านเพิ่มเติม” สามารถทำได้ในการตั้งค่าบล็อก > สไตล์ > อ่านข้อความเพิ่มเติม คุณสามารถแก้ไขการพิมพ์และข้อความของ "อ่านเพิ่มเติม" อย่างไรก็ตาม ฉันไม่รู้วิธีสร้างปุ่มออกมา การตั้งค่าที่ดี!
Cuándo lo pones ใน CSS personalizado, por ejemplo:
#gridcard.Column: first-child art: nth-child (impar) {background: #333; }
ข้อผิดพลาด da como el seigue: คาดว่าฟังก์ชันหรือ IDENT หลังจากลำไส้ใหญ่ที่บรรทัด 1, col 18
ความนับถือ
ดีตอนเย็น
บล็อกของเราแปลโดยอัตโนมัติจากภาษาฝรั่งเศส ฉันจึงขอเชิญชวนให้คุณเลือกภาษาฝรั่งเศสในวิดเจ็ตภาษาที่อยู่บนแถบด้านบนของบล็อกของเราและโค้ด CSS ที่ถูกต้องจะปรากฏขึ้น
ไม่ว่าจะเป็นเรื่องของความชั่วร้าย, ความผิดทางอาญา: artículo del primer hijo: no arte del primer hijo:
คุณสะกดผิดบทความควรเป็น: บทความลูกคนแรก: ไม่ใช่ศิลปะเด็กแรก:
สวัสดี
70 ภาษาอื่น ๆ
Bonjour
ขอบคุณสำหรับบทความ ฉันมีการนำเสนอแบบตาราง (ธีม Divi) ฉันมีภาพขนาดย่อ (ภาพถ่าย) สำหรับการนำเสนอบทความในทางกลับกันเมื่อฉันคลิกเพื่อเข้าถึงบทความรูปภาพจะแสดงเป็นขนาดใหญ่ที่จุดเริ่มต้นของ 'บทความ. มีวิธีทำให้มีขนาดเท่ากับภาพขนาดย่อหรือลบออกจากมุมมองโพสต์
Merci
แพทริค
ดีตอนเย็น
ขออภัยการสนับสนุน divi ของเรา จำกัด อยู่ในบทแนะนำของเรา กรุณาติดต่อ Eleganthemes SVP
Bonjourn บทความยอดเยี่ยม
ฉันลองเสี่ยงโชคของฉันที่นี่บางครั้งเราเดินไปรอบ ๆ หัวข้อหนึ่งเป็นเวลาหลายสัปดาห์โดยไม่ได้รับคำตอบเมื่อเรื่องเดียวกันกับคนอื่น ๆ
ฉันจึงมองหาวิธีแก้ปัญหาเพื่อตั้งค่าโพสต์กริดซึ่งประกอบด้วยภาพเท่านั้น แต่มีความสูงต่างกันเพื่อให้ชัดเจนยิ่งขึ้นซึ่งภาพหนึ่งในสองภาพมีความสูงเป็นสองเท่าของภาพที่อยู่ข้างๆ
ความคิด?
Julien
สวัสดีจูเลียน
ฉันขอแนะนำให้คุณติดต่อทีม DIVI จะสะดวกกว่าในกรณีนี้
กวดวิชาที่ดี! ฉันจะทดสอบ CA สุดสัปดาห์นี้สำหรับเว็บไซต์ของฉัน
คุณมีวิธีการแก้ปัญหาที่จะเอาสารสกัดในกริด?
ขอบคุณคุณ
Sofhy