ماژول Divi Blog یک گزینه چیدمان در قالب یک شبکه مفید برای پست های وبلاگ شما دارد. الگوی شبکه ، پست های وبلاگ شما را در جعبه ها یا نقشه هایی ترتیب می دهد که قابلیت مشاهده موارد در صفحه را در مقایسه با نمای استاندارد ساده می کند.

تنظیمات ماژول بلاگ به شما امکان می دهد طراحی کلی شبکه خود را شخصی سازی کنید. به راحتی می توانید تمام کارت هایتان از یک رنگ پس زمینه ، قلم ، حاشیه و غیره استفاده کنند. با این حال ، گزینه های سبک محدود به طراحی شبکه به طور کلی است ، که این کار را دشوار می کند استفاده از طرح های مختلف یا مختلف بر روی نقشه های داخل شبکه.

امروز می‌خواهم به شما نشان دهم که چگونه می‌توانید بیش از یک سبک را روی کارت‌هایی که شبکه را تشکیل می‌دهند، هدف قرار دهید و اعمال کنید. وبلاگ شما با استفاده از CSS سفارشی من به شما نشان خواهم داد که چگونه یک استایل متفاوت را روی کارت های دیگر اعمال کنید تا یک افکت شطرنجی ایجاد کنید. من همچنین به شما نشان خواهم داد که چگونه هر کارت را در هر ردیف متفاوت استایل کنید و به شما نشان خواهم داد که چگونه هر کارت را هدف قرار دهید.

بنابراین این 4 مثال در مورد نحوه سفارشی سازی است وبلاگ شما، از جمله برخی از افکت های شناور که می توانید استفاده کنید. در پایان این آموزش، شما قادر خواهید بود برای ایجاد طرح های بسیار جذاب وبلاگ شما.

آموزش های دیگر با موضوع Divi

• سایت های رستوران 5 که از موضوع دووی استفاده می کنند
• نحوه اضافه کردن متن به یک محصول WooCommerce در Divi
• نحوه تغییر رنگ منو بین صفحات در Divi
• ویژگی هایی که شما در مورد Divi نمی دانید
• نحوه ایجاد کشویی در دیوی
• نحوه ویرایش نقش کاربر در Divi

بیایید شروع.

پیکربندی چیدمان برای وبلاگ شما

قبل از شروع طراحی کارتهای ماژول وبلاگ ، مطمئن شوید که حداقل مقالات 12 را قبلاً با یک تصویر در جعبه ایجاد کرده اید.

پس از ایجاد پیام های خود ، صفحه جدیدی ایجاد کنید. در صفحه جدید خود ، ماژول وبلاگ را در یک ستون با عرض کامل در یک قسمت استاندارد مستقر کنید:

برای ویرایش تنظیمات ماژول Blog کلیک کنید. تحت تنظیمات عمومی ، تنظیمات زیر را تغییر دهید:

• طرح بندی: شبکه
• تعداد مقالات: 12
• نمایش تصویر برجسته: بله
• دکمه Read more: ON

در بخش CSS سفارشی ، "gridcard" را در کادر متن CSS ID وارد کنید. این راهی برای ما خواهد بود که فقط این ماژول وبلاگ را شخصی سازی کنیم.

تغییرات خود را ذخیره کنید

چگونه می توان طرح "Grid" وبلاگ را درک کرد

حالا که شبکه وبلاگ خود را در جای خود قرار داده است مهم است که درک ساختار طرح شبکه، به طوری که شما می توانید نقشه های ماژول وبلاگ که می خواهید سفارشی کنید.

شبکه وبلاگ با یک طرح سه ستونی پیکربندی شده است. در زیر نمونه ای از شبکه وبلاگ با مقالات وبلاگ 12 به سه ستون تقسیم شده است:

کارت بلیط های وبلاگ از بالا به پایین در هر یک از ستون ها سفارش داده می شود. بنابراین ، اگر می خواهید یک شماره به آنها بدهید ، باید از هر طول از بالا به پایین 1 را به 4 بشمارید:

از آنجا که از ترتیب عددی هر کارت وبلاگ در زیر هر ستون اطلاع دارید ، می توانید هر کارت را به صورت عدد فرد یا زوج به شرح زیر مشخص کنید:

مثال طرح شبکه

مثال n ° 1: طراحی شبکه "شطرنجی"

برای این مثال اول ، تمام کارتهای عجیب و غریب موجود در ماژول وبلاگ (کارتهای 1 و 3) را در ستون اول هدف قرار می دهم که به آنها رنگ زمینه خاکستری تیره می دهد. برای انجام این کار ، به "گزینه های Divi → Theme" بروید و CSS زیر را در جعبه متن سفارشی CSS اضافه کنید:

#gridcard .column: مقاله اول کودک: nth-child (odd) {background: #333؛ }

در اینجا یک شکست از آنچه این کد انجام می دهد:

#gridcard = شناسه کل ماژول وبلاگ

. Column: first-child = ستون اول را در ماژول وبلاگ انتخاب کنید

post: nth-child (عجیب) = انتخاب همه موارد عجیب (یا کارت) در ستون

با جمع آوری همه اینها ، کارتهای شماره گذاری شده در ستون اول ماژول وبلاگ با شناسه "gridcard" انتخاب می شوند.

سپس متن سفید خود را اضافه کنید که با افزودن CSS زیر بیش از پس زمینه تیره می شود:

#gridcard .column: آیتم اول کودک: nth-child (odd) .entry-title، #gridcard .column: first-child مقاله: nth-child (odd) .post-meta a، #gridcard .column: first-child }

این کد تمام عناصر متنی را در کارت های ماژول وبلاگ (از جمله عنوان، متاهای پست، پیوندهای متا پست، و محتویات از مقاله) و رنگ سفید را به آنها می دهد.

نتیجه این است:

مرحله بعدی در ایجاد طرح شطرنجی ما این است که کارتهای شماره فرد را در ستون سوم هدف قرار دهید و پس زمینه خاکستری تیره و متن سفید را درست مانند آنچه در ستون اول انجام دهید اعمال کنید. CSS زیر را در جعبه متن Custom CSS اضافه کنید:

#gridcard .column: مقاله آخرین فرزند: nth-child (عجیب) {background: # 333؛ } #gridcard .column: مقاله فرزند آخر: n-child (فرد). عنوان اصلی ، #gridcard. ستون: مقاله last-child: n-child (عجیب). post-meta ، #gridcard. ستون: last- مقاله کودک: nth-child (عجیب) .post-meta a ، #gridcard. ستون: مقاله فرزند آخر: nth-child (عجیب) .post-content p {color: #ffffff؛ }

این کد ستون "آخرین" را هدف قرار می دهد (در این حالت ، ستون سوم آخرین ستون است) با عنصر نام مستعار "فرزند آخر".

برای ستون دوم (یا متوسط) ، حتی کارتها را برای تکمیل جلوی شطرنجی هدف قرار دهید. برای انجام این کار باید CSS زیر را اضافه کنیم:

#gridcard. ستون: مقاله nth-child (2): nth-child (حتی) {background: # 333؛ } #gridcard. ستون: مقاله nth-child (2): nth-child (حتی). عنوان اصلی ، #gridcard. ستون: مقاله nth-child (2): nth-child (حتی). post-meta ، # gridcard. ستون: مقاله nth-child (2): nth-child (حتی) .post-meta a ، #gridcard. ستون: مقاله nth-child (2): nth-child (حتی). محتوای پست p {color : #fff؛ }

اکنون، از صفحه وبلاگ دیدن کنید تا طرح شطرنجی نقشه های ماژول وبلاگ را مشاهده کنید.

مثال شماره 2: افزودن جلوه های شناور با طرح شطرنجی

هنگامی که می دانید چگونه کارت های ماژول وبلاگ را هدف قرار دهید ، می توانید هر یک از عناصر داخل کارت را خلاقانه تغییر دهید.

برای این مثال ، من می خواهم از طرح شطرنجی استفاده کنم و این بار هنگام قرار گرفتن در بالای نقشه ، تصاویر برجسته را از نقشه های خاکستری تیره به سیاه و سفید تغییر می دهم. و ، من می خواهم تصاویر برجسته کارت های سفید را هنگام قرار گرفتن در بالای کارت ، روشن تر کنم. برای انجام این کار ، CSS زیر را در قسمت Custom CSS اضافه کنید (مطمئن شوید که کد دیگر را غیرفعال یا برش دهید تا با کد جدید ناسازگار باشد):

# گرید کارت. ستون: مقاله کودک اول: فرزند نهم (عجیب) ، # گرید کارت. ستون: مقاله فرزند آخر: فرزند نهم (عجیب) ، # گرید کارت. ستون: مقاله نهم (2): فرزند نهم (حتی) {background: # 333؛ } #gridcard .column: مقاله فرزند اول: n-child (عجیب). عنوان اصلی ، #gridcard. ستون: مقاله فرزند اول: n-child (عجیب). post-meta ، #gridcard. ستون: first- مقاله کودک: فرزند نهم (عجیب) .post-meta a ، #gridcard. ستون: مقاله فرزند اول: nth-child (فرد). محتوای پست p ، #gridcard. ستون: مقاله فرزند آخر: nth-child (عجیب). عنوان عنوان ، # گرید کارت. ستون: مقاله فرزند آخر: فرزند نهم (عجیب). پست متا ، # گرید کارت. ستون: مقاله فرزند آخر: فرزند نهم (عجیب). پست متا a ، #gridcard .column: مقاله فرزند آخر: nth-child (عجیب). محتوای پست p ، #gridcard. ستون: مقاله nth-child (2): nth-child (زوج). عنوان ورودی ، #gridcard. ستون: مقاله nth-child (2): nth-child (زوج) .post-meta ، #gridcard. ستون: nth-child (2) مقاله: nth-child (حتی) .post-meta a ، #gridcard. ستون : مقاله nth-child (2): nth-child (حتی) .post-content p {color: #fff؛ } #gridcard .column: مقاله nth-child (2): nth-child (زوج): hover img، #gridcard. ستون: مقاله فرزند اول: nth-child (عجیب): hover img، #gridcard. ستون: آخرین مقاله کودک: n-child (عجیب): hover img {-webkit-filter: grayscale (1)؛ فیلتر: مقیاس خاکستری (1)؛ } #gridcard .column: مقاله nth-child (2): nth-child (عجیب): hover img، #gridcard. ستون: مقاله فرزند اول: nth-child (زوج): hover img، #gridcard. ستون: آخرین مقاله کودک: n-child (حتی): hover img {-webkit-filter: brightness (1.5)؛ فیلتر: روشنایی (1.5)؛ }

شما همچنین می توانید یک اثر وارونگی روی کارتها اضافه کنید تا وقتی روی کارتهای سفید می روید ، آنها خاکستری تیره شوند و وقتی روی کارتهای خاکستری تیره می روید ، آنها سفید شوند.

اضافه کردن CSS زیر علاوه بر CSS فوق:

#gridcard. مقاله ستون ، #gridcard .column مقاله img {-webkit-گذار: همه 0.8s؛ -moz-transfer: تمام 0.8 ثانیه انتقال: تمام 0.8 ثانیه } #gridcard .column: مقاله فرزند اول: n-child (عجیب): شناور ، #gridcard. ستون: مقاله last-child: nth-child (عجیب): شناور ، #gridcard. ستون: nth-child (2) مقاله: nth-child (حتی): شناور {background: #fff؛ } #gridcard .column: مقاله فرزند اول: n-child (عجیب): شناور .entry-title ، #gridcard .column: مقاله فرزند اول: nth-child (عجیب): hover .post-meta ، #gridcard. ستون: مقاله فرزند اول: فرزند نهم (عجیب): شناور .post-meta a ، #gridcard. ستون: مقاله فرزند اول: n-فرزند (عجیب): شناور .post-content p ، #gridcard. ستون: مقاله فرزند آخر: فرزند نهم (عجیب و غریب): شناور .عنوان عنوان ، # گرید کارت. ستون: مقاله فرزند آخر: کودک نهم (عجیب): شناور .پست-متا ، # گرید کارت. ستون: مقاله فرزند آخر : nth-child (عجیب): شناور .post-meta a ، #gridcard .column: مقاله فرزند آخر: n-child (عجیب): شناور .post-content p ، #gridcard. ستون: nth-child (2) مقاله: nth-child (حتی): شناور .entry-title ، #gridcard. ستون: nth-child (2) مقاله: nth-child (حتی): hover .post-meta ، #gridcard. ستون: nth-child ( 2) مقاله: nth-child (زوج): hover .post-meta a ، #gridcard .column: nth-child (2) مقاله: nth-child (زوج): hover .post-content p {color: # 333؛ } #gridcard .column: مقاله فرزند اول: nth-child (حتی): شناور ، #gridcard .column: مقاله last-child: nth-child (حتی): hover ، #gridcard. ستون: nth-child (2) مقاله: فرزند نهم (فرد): شناور {background: # 333؛ } #gridcard .column: مقاله فرزند اول: nth-child (زوج): hover .entry-title، #gridcard .column: مقاله فرزند اول: nth-child (حتی): hover .post-meta، #gridcard. ستون: مقاله فرزند اول: فرزند نهم (حتی): شناور .post-meta a ، #gridcard. ستون: مقاله فرزند اول: n-فرزند (حتی): شناور .post-content p ، #gridcard. ستون: مقاله last-child: nth-child (even): hover .entry-title، #gridcard .column: مقاله last-child: nth-child (even): hover .post-meta، #gridcard. ستون: مقاله فرزند آخر : nth-child (even): شناور .post-meta a ، #gridcard .column: مقاله آخرین فرزند: nth-child (حتی): شناور .post-content p ، #gridcard. ستون: nth-child (2) مقاله: nth-child (عجیب): شناور .entry-title ، #gridcard. ستون: nth-child (2) مقاله: nth-child (عجیب): شناور .post-meta ، #gridcard. ستون: nth-child ( 2) مقاله: nth-child (عجیب): شناور .post-meta a ، #gridcard. ستون: nth-child (2) مقاله: nth-child (عجیب): شناور .post-content p {color: #fff؛ }

حالا بروید تا تأثیر آن را در وبلاگ خود ببینید.

مثال # 3: سفارشی کردن کارت ها با ردیف

برای مثال سوم ، من می خواهم همان پس زمینه تیره و متن سفید را روی کارتهای هر ردیف دیگر (نه ستون) اعمال کنم. برای انجام این کار ، باید تمام کارتهای زوج را در هر ستون هدف قرار دهید. به بخش "Divi → Options" از موضوع بروید و اطمینان حاصل کنید که کد CSS قبلی را که از زمان شروع این آموزش به آن اضافه کرده اید غیرفعال یا حذف کنید. سپس CSS زیر را اضافه کنید:

مقاله # gridcard: nth-child (حتی) {background-color: # 333؛ } مقاله # gridcard: nth-child (even) .entry-title ، #gridcard Article: nth-child (even). post-meta ، #gridcard Article: nth-child (even). post-meta a ، #gridcard مقاله : nth-child (زوج) .post-content p {color: #fff؛ }

نتیجه این است که:

مثال # 4: طراحی نقشه شبکه خاص

برخی از شما ممکن است بخواهید کارت خاصی را انتخاب کنید. برای انجام این کار ، باید شناسه مورد منحصر به فردی را پیدا کنید که به طور خودکار به هر یک از کارت های شما اختصاص داده شود. برای این مثال ، من از مرورگر Chrome استفاده می کنم.

به صفحه نمایش ماژول وبلاگ خود بروید و روی یکی از کارتهای خود کلیک راست کنید. در کادر گزینه هایی که ظاهر می شود ، "بازرسی" را انتخاب کنید (برخی از مرورگرها ممکن است "مورد بازرسی" یا موارد مشابه داشته باشند. این پنجره ابزارهای توسعه دهنده را نمایش می دهد که هم html و هم css را برای شما نمایش می دهد صفحه وب. برچسب مقاله را که مقاله شما را بسته بندی می کند پیدا کنید و شناسه مقاله اختصاص داده شده به آن را بنویسید. این انتخابی است که باید برای هدف قرار دادن کارت شخصی خود استفاده کنید. به عنوان مثال ، من برای یافتن شناسه "post-3466" کلیک راست کرده و کلیک کنید.

به شرح زیر:

برای هدف تنها این کارت در CSS برای دادن یک پس زمینه خاکستری به یک فونت سفید، شما باید از CSS زیر استفاده کنید:

# post-3466 {background: # 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=”yes”][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_colum][/vc_colum] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”family” =_font ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-NAD”]DOW قالب DIVI[/vcex_button][/vc_column][/vc_row]

سایر آموزشهای دوگانه

• سایت های رستوران 5 که از موضوع دووی استفاده می کنند
• چگونه برای اضافه کردن متن در محصول Divi WooCommerce
• چگونه می توان رنگ منو را بین صفحات Divi تغییر داد
• نحوه شخصی سازی شبکه های یک وبلاگ با Divi
• نحوه استفاده از ویرایشگر نقش دووی در وردپرس
• نحوه ایجاد یک نوار لغزنده تمام صفحه Divi
• چگونگی تغییر رنگ منوها بین صفحات Divi
• ویژگی هایی که احتمالاً در مورد Divi نمی دانید
• نحوه استفاده از Divi Builder در وردپرس
• نحوه استفاده از ماژول پیمایش ویدئو Divi
• نحوه استفاده از ماژول Flip Builder Divi
• نحوه اضافه کردن ماژول توصیفی در Divi Builder
• نحوه استفاده از ماژول متن دووی
• نحوه ایجاد کشویی در دیوی
• نحوه ویرایش نقش کاربر Divi
• نحوه استفاده از ماوی رسانه اجتماعی Divi
• نحوه استفاده از ماژول فروشگاه با موضوع WordPress Divi
• نحوه استفاده از ماوی نوار کناری Divi
• نحوه استفاده از ماژول جدول قیمت دووی
• چگونه از عنوان ماژول نشریات دووی استفاده کنیم
• نحوه اضافه کردن ماژول ویدیویی از دیوی
• نحوه استفاده از ماژول ناوبری مقاله
• چگونه از ماوی جستجوی Divi استفاده کنیم
• چگونه از ماژول کیف پول Divi استفاده کنیم
• نحوه استفاده از ماژول شخص در Divi Builder
• نحوه استفاده از ماژول کیف پول با فیلتر Divi
• نحوه استفاده از ماژول کشویی عرض کامل
• نحوه استفاده از ماژول Image Divid Builder
• نحوه استفاده از ماژول ناوبری تمام عرض Divi Builder
• نحوه استفاده از ماژول گالری تصاویر
• نحوه استفاده از ماوی کارت Width Divi Builder
• نحوه استفاده از ماژول Portfolio Full Width Divi
• نحوه استفاده از ماژول هدر تمام عیار Divi
• چگونه از ماوی شمارنده Divi استفاده کنیم
• نحوه استفاده از نوار لغزنده مقالات در Divi Builder
• نحوه استفاده از ماژول Divi ایمیل Optin