با کمال میل و دقت، مقاله‌ای جامع، علمی و سئو شده برای دانشجویان ژنتیک با تمرکز بر ویرایش پایان‌نامه، همراه با ساختار و طراحی پیشنهادی برای ویرایشگر بلوک، ارائه می‌شود.

—

—

**راهنمای استفاده و نکات طراحی برای ویرایشگر بلوک (WordPress Gutenberg Block Editor) یا محیط‌های مشابه:**

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

1. **کپی و چسباندن (Copy & Paste):**
* کل متن بالا را (از `div style=”font-family: ‘B Nazanin’…”` تا انتهای `div`) کپی کرده و در ویرایشگر بلوک خود بچسبانید. بسیاری از ویرایشگرهای مدرن HTML را به خوبی تفسیر می‌کنند.
* اگر ویرایشگر بلوک شما کد HTML را مستقیم قبول نمی‌کند، آن را در یک بلوک “HTML سفارشی” (Custom HTML) قرار دهید.
* در صورت بروز مشکل در نمایش برخی استایل‌ها (که بعید است)، ممکن است نیاز باشد استایل‌ها را به صورت دستی در بخش‌های مربوطه تنظیم کنید.

2. **تنظیم هدینگ‌ها (H1, H2, H3, H4):**
* **H1 (`

`):** این بلوک را به عنوان “عنوان” (Heading) در ویرایشگر بلوک شناسایی کنید. اگر استایل پیش‌فرض آن کافی نبود، از گزینه‌های استایل‌دهی بلوک برای تنظیم فونت سایز (32pt)، ضخامت (Bold) و رنگ (#0056b3) استفاده کنید.
* **H2 (`

`):** این بلوک‌ها را نیز به عنوان “عنوان” (Heading) تنظیم کنید. فونت سایز (24pt)، ضخامت (Bold) و رنگ (#0056b3) را مطابق دستورالعمل‌ها اعمال کنید.
* **H3 (`

`):** فونت سایز (20pt)، ضخامت (Bold) و رنگ (#007bff).
* **H4 (`

`):** فونت سایز (18pt)، ضخامت (Bold) و رنگ (#333).
* **نکته:** در ویرایشگر بلوک، به جای استفاده از `

` درون `

`، می‌توانید `

` را یک بلوک جداگانه در نظر بگیرید و ابتدای متن `

` را با ضخامت و سایز مورد نظر تنظیم کنید.

3. **ساختار و رسپانسیو بودن (Responsive Design):**
* **بلوک `div` اصلی:** کل محتوا در یک `div` اصلی با `max-width: 1200px; margin: 0 auto;` قرار گرفته است که به صورت خودکار در صفحات بزرگتر وسط‌چین شده و در صفحات کوچکتر (موبایل و تبلت) به عرض کامل نمایش داده می‌شود.
* **بلوک‌های سبز-آبی (اطلاعاتی) و خاکستری (مراحل):** از بلوک “گروه” (Group) یا “ستون‌ها” (Columns) در ویرایشگر بلوک استفاده کنید.
* برای بلوک‌هایی که دارای `background-color` هستند (مثل بخش “اهمیت ویرایش” و “ابزارها و تکنیک‌ها”)، می‌توانید یک بلوک “گروه” بسازید، رنگ پس‌زمینه را تنظیم کنید و محتوای مربوطه را داخل آن قرار دهید. استفاده از `border-left` را نیز می‌توان با تنظیمات پیشرفته بلوک (مثلاً یک بلوک “ستون” با یک ستون باریک و رنگی در سمت چپ) شبیه‌سازی کرد.
* برای بخش “مراحل کلیدی ویرایش” (که دارای `background-color: #f7f7f7;` است)، نیز از بلوک “گروه” با رنگ پس‌زمینه خاکستری استفاده کنید.
* **اینفوگرافیک جایگزین:** بلوک `div` مربوط به اینفوگرافیک، به گونه‌ای طراحی شده که متن درون آن به خوبی در فضای محدود نمایش داده شود. در ویرایشگر بلوک، می‌توانید از بلوک “HTML سفارشی” برای چسباندن کد اینفوگرافیک استفاده کنید.
* **جدول:** جدول با `width: 100%; overflow-x: auto;` طراحی شده تا در صفحات کوچک به صورت افقی قابل اسکرول باشد و محتوا از صفحه بیرون نزند. ویرایشگرهای بلوک معمولاً بلوک جدول رسپانسیو دارند.

4. **رنگ‌بندی و فونت:**
* **پالت رنگی:**
* رنگ اصلی متن: `#333` (خاکستری تیره برای خوانایی بالا)
* رنگ پس‌زمینه مقاله: `#fcfcfc` (سفید مایل به کرم)
* عناوین اصلی (H1, H2): `#0056b3` (آبی تیره، علمی)
* عناوین فرعی (H3): `#007bff` (آبی روشن‌تر)
* رنگ‌های تأکیدی/پس‌زمینه بلوک‌ها: `#eaf6ff` (آبی روشن مایل به سفید)، `#f7f7f7` (خاکستری روشن)
* رنگ تیک‌ها در لیست: `#007bff` و `#28a745` (سبز برای تأیید)
* **فونت:** `font-family: ‘B Nazanin’, ‘Vazirmatn’, sans-serif;` را در CSS سفارشی سایت خود یا در تنظیمات بلوک‌های متنی اعمال کنید تا فونت فارسی مناسب نمایش داده شود. (اگر این فونت‌ها نصب نیستند، به فونت پیش‌فرض مرورگر برمی‌گردد.)

5. **اینفوگرافیک و نمودار (جایگزین):**
* همانطور که توضیح داده شد، بلوک اینفوگرافیک یک جایگزین متنی و زیبا است که به خوبی در یک بلوک “HTML سفارشی” یا با استفاده از ترکیبی از بلوک‌های “عنوان”، “لیست” و “پاراگراف” در ویرایشگر بلوک قابل بازسازی است. طراحی آن به گونه‌ای است که حس یک اینفوگرافیک ساده و چک لیستی را القا می‌کند.

با رعایت این نکات، مقاله شما با ترکیبی از محتوای ارزشمند، ساختار سئو شده و طراحی بصری جذاب، آماده انتشار خواهد بود.