—

**راهنمای استفاده و نکات مهم برای نمایش بهینه در ویرایشگر بلوک یا سایت شما:**

برای اینکه متن بالا به درستی به عنوان هدینگ‌ها (H1, H2, H3) شناسایی شود و از لحاظ بصری نیز جذاب و رسپانسیو باشد، لازم است از کدهای HTML و CSS مناسب در ویرایشگر بلوک (مانند گوتنبرگ وردپرس) یا ویرایشگر کلاسیک استفاده کنید.

**روش کپی در ویرایشگر بلوک (گوتنبرگ):**
1. **کپی کردن محتوا:** تمام متن بالا را کپی کرده و در یک بلوک “HTML سفارشی” (Custom HTML) در گوتنبرگ پیست کنید.
2. **استایل‌دهی (CSS):** برای اعمال استایل‌ها، باید کد CSS زیر را به قسمت “سفارشی‌سازی” (Customize) قالب وردپرس خود، یا به فایل `style.css` قالب فرزند (Child Theme) خود اضافه کنید. این کار تضمین می‌کند که استایل‌ها به درستی اعمال شوند و با به‌روزرسانی قالب از بین نروند.

**توصیه برای رسپانسیو بودن و زیبایی:**
کد CSS زیر را به سایت خود اضافه کنید. این کد برای موبایل، تبلت و دسکتاپ بهینه شده و رنگ‌بندی زیبایی را ارائه می‌دهد.

“`css
/* Custom CSS for Thesis Consulting Article */

/* Base Font and General Layout */
body {
font-family: ‘Vazirmatn’, sans-serif; /* استفاده از فونت وزمیرمتن یا فونت دلخواه */
line-height: 1.8;
color: #333;
background-color: #f5f5f5; /* رنگ پس‌زمینه کلی */
margin: 0;
padding: 0;
direction: rtl; /* برای زبان فارسی */
text-align: right; /* برای تراز راست متن فارسی */
}

/* Main Container for the Article */
.wp-block-html .div { /* یا هر کلاسی که برای کانتینر اصلی مقاله شما تولید می‌شود */
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5; /* پس‌زمینه اصلی مقاله */
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* سایه ظریف برای کانتینر */
}

/* Headings Styling */
h1 {
font-size: 3em; /* سایز بزرگ برای H1 */
font-weight: 800; /* بسیار ضخیم */
color: #1A237E; /* رنگ آبی تیره */
text-align: center;
margin-bottom: 40px;
padding: 20px 0;
border-bottom: 3px solid #FFC107; /* خط طلایی زیر H1 */
background-color: #ffffff; /* پس‌زمینه سفید برای H1 */
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* سایه ظریف */
line-height: 1.3; /* فاصله خطوط مناسب */
}

h2 {
font-size: 2.2em;
font-weight: 700;
color: #004D40; /* رنگ سبز تیره (Teal) */
margin-top: 50px;
margin-bottom: 25px;
border-bottom: 2px solid #D7CCC8; /* خط خاکستری روشن زیر H2 */
padding-bottom: 10px;
line-height: 1.4;
}

h3 {
font-size: 1.8em;
font-weight: 600;
color: #4CAF50; /* رنگ سبز روشن */
margin-top: 40px;
margin-bottom: 20px;
line-height: 1.5;
}

h4 {
font-size: 1.5em;
color: #00796B; /* رنگ سبز متوسط */
margin-bottom: 15px;
}

/* Paragraphs */
p {
font-size: 1.1em;
text-align: justify;
margin-bottom: 25px;
color: #424242; /* رنگ متن کمی تیره‌تر */
}

/* Lists */
ul {
list-style-type: disc;
margin-right: 30px; /* برای زبان فارسی */
margin-bottom: 25px;
font-size: 1.1em;
padding: 0;
color: #424242;
}

ul li {
margin-bottom: 10px;
}

/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 1.1em;
min-width: 400px;
background-color: #ffffff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* سایه برای جدول */
border-radius: 8px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* برای اعمال border-radius به محتوا */
}

table thead tr {
background-color: #1A237E; /* رنگ آبی تیره برای سربرگ جدول */
color: #ffffff;
}

table th, table td {
padding: 15px 20px;
border: 1px solid #ddd;
text-align: right;
}

table th {
font-weight: 600;
}

table tbody tr:nth-child(odd) { /* رنگ متناوب سطرها */
background-color: #f9f9f9;
}

table tbody tr:hover { /* افکت هاور روی سطرها */
background-color: #f0f0f0;
}

/* Infographic Alternative Styling */
.infographic-container { /* استفاده از این کلاس برای div اینفوگرافیک */
background-color: #E8F5E9; /* رنگ سبز خیلی روشن برای پس‌زمینه اینفوگرافیک */
border-radius: 10px;
padding: 30px;
margin-bottom: 30px;
border: 1px solid #C8E6C9; /* حاشیه سبز */
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 20px; /* فاصله بین بلوک‌ها */
}

.infographic-item { /* استفاده از این کلاس برای هر بلوک در اینفوگرافیک */
flex: 1 1 300px; /* اجازه می‌دهد بلوک‌ها در صفحه بزرگتر کنار هم قرار گیرند و در صفحه کوچکتر زیر هم */
background-color: #FFFFFF;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* سایه عمیق‌تر برای بلوک‌های اینفوگرافیک */
text-align: center;
border-left: 5px solid; /* برای خط رنگی کناری */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن برای هاور */
}

.infographic-item:hover {
transform: translateY(-5px); /* کمی بالا رفتن در هاور */
box-shadow: 0 6px 16px rgba(0,0,0,0.12); /* سایه بیشتر در هاور */
}

/* Specific colors for infographic items */
.infographic-item:nth-child(1) { border-left-color: #00C853; } /* سبز روشن */
.infographic-item:nth-child(2) { border-left-color: #FFD740; } /* طلایی */
.infographic-item:nth-child(3) { border-left-color: #42A5F5; } /* آبی روشن */
.infographic-item:nth-child(4) { border-left-color: #FF7043; } /* نارنجی */

.infographic-item h4 {
margin-top: 0;
}

/* Responsive adjustments */
@media (max-width: 992px) {
h1 {
font-size: 2.5em;
margin-bottom: 30px;
}
h2 {
font-size: 2em;
margin-top: 40px;
}
h3 {
font-size: 1.6em;
margin-top: 30px;
}
.wp-block-html .div {
padding: 15px;
}
}

@media (max-width: 768px) {
h1 {
font-size: 2em;
padding: 15px 0;
margin-bottom: 25px;
}
h2 {
font-size: 1.8em;
margin-top: 35px;
}
h3 {
font-size: 1.4em;
margin-top: 25px;
}
p, ul, table {
font-size: 1em;
}
ul {
margin-right: 20px;
}
.infographic-item {
flex: 1 1 100%; /* در موبایل هر آیتم اینفوگرافیک یک سطر کامل را اشغال کند */
margin-bottom: 15px;
}
table th, table td {
padding: 10px 15px;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.6em;
padding: 10px 0;
margin-bottom: 20px;
}
h2 {
font-size: 1.5em;
margin-top: 30px;
}
h3 {
font-size: 1.2em;
margin-top: 20px;
}
.wp-block-html .div {
padding: 10px;
}
.infographic-container {
padding: 20px;
gap: 15px;
}
.infographic-item {
padding: 20px;
}
}

/* Ensure Vazirmatn font is loaded */
/* If you don’t have Vazirmatn, replace with a web-safe font or load it via @font-face */
/* Example for loading Vazirmatn (add this to your main CSS file or header) */
@import url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-Variable.css’);

“`

**توضیحات تکمیلی:**
* **فونت:** در CSS بالا، فونت `Vazirmatn` استفاده شده است. اگر این فونت را در سایت خود ندارید، می‌توانید آن را با `@import` از CDN بارگذاری کنید (کد آن در انتها آمده است) یا آن را با فونت دیگری که در سایت شما موجود است جایگزین کنید.
* **بلوک اینفوگرافیک:** بلوک اینفوگرافیک به گونه‌ای طراحی شده است که در موبایل، تبلت و دسکتاپ به خوبی نمایش داده شود. در صفحه‌های کوچکتر، آیتم‌ها زیر هم قرار می‌گیرند.
* **رنگ‌بندی:** از یک پالت رنگی حرفه‌ای شامل آبی تیره، سبزآبی، طلایی و سبز روشن استفاده شده که ظاهری علمی و در عین حال جذاب به مقاله می‌دهد.
* **رسپانسیو بودن:** با استفاده از `media queries`، ظاهر مقاله در اندازه‌های مختلف صفحه (موبایل، تبلت، لپ‌تاپ و تلویزیون) بهینه شده است.
* **کپی کردن HTML:** محتوای متنی که در بالا ارائه شده، خودش شامل تگ‌های HTML است (`

`, `

`, `

`, `
`, `
`). کافیست آن را در بخش “Custom HTML” ویرایشگر گوتنبرگ یا در حالت “متن” (Text) ویرایشگر کلاسیک کپی کنید. سپس CSS بالا را به سایت خود اضافه کنید تا ظاهر مورد نظر اعمال شود.



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

 

© ۱۴۰۴. تمامی حقوق برای موسسه فان پروژه محفوظ است.