آیا می خواهید پست های وبلاگ خود را بهبود ببخشید؟ DIVI با افزودن بخش قهرمان به آن؟
بخش های قهرمان تمام صفحه در هر صفحه وب عالی به نظر می رسند، اما به ویژه در پست های وبلاگ عالی هستند.
حتی اگر تصویر برجسته تمام صفحه است، گزینه های طراحی زیادی برای قرار دادن عنوان و متن متا وجود دارد. انجام آن با قالب ساز Divi .
در این مقاله، ما چندین روش برای اضافه کردن یک بخش قهرمان تمام صفحه به قالب پست وبلاگ خود خواهیم دید. دیوی
بیایید شروع.
بررسی
در اینجا پیش نمایشی از آنچه در این آموزش طراحی خواهیم کرد، آمده است.
دفعات بازدید: Divi: چگونه از "Gradient Builder" برای زیباسازی تصاویر خود استفاده کنیم
بخش Hero با ماژول نسخه Desktop عنوان پست
بخش قهرمان با ماژول نسخه موبایل عنوان پست
طرح بندی بخش Hero را با ماژول نسخه دسکتاپ Post Title تغییر دهید
اکنون DIVI را دانلود کنید!!!
طرح بندی بخش قهرمان جایگزین با ماژول عنوان پست تلفن همراه
بخش قهرمان با نسخه دسکتاپ ابرداده
بخش قهرمان با نسخه موبایل ابرداده
اکنون DIVI را دانلود کنید!!!
الگوهای پست وبلاگ برای بخش قهرمان تمام صفحه شما
می توانید قالب پست های وبلاگ را در آن ایجاد کنید DIVI Theme Builder از ابتدا یا یک قالب را از وبلاگ The Elegant Themes دانلود کنید. برای یافتن آنها در وبلاگ جستجو کنید “قالب پست وبلاگ رایگان”. اگر قالبی را دانلود کردید، حتما آن را از حالت فشرده خارج کنید.
برای مثال های خود، از آن استفاده خواهیم کرد قالب رایگان وبلاگ پست برای بسته طرح بندی طراح مد Divi . ما همچنین از بسته layout استفاده می کنیم رایگان طراح مد سربرگ و پاورقی .
الگوی پست وبلاگ خود را برای بخش قهرمان تمام صفحه خود دانلود یا ایجاد کنید
می توانید قالب پست وبلاگ خود را دانلود کنید یا از ابتدا یکی بسازید. ما یکی را آپلود خواهیم کرد، اما روند ایجاد یک بخش قهرمان تمام صفحه یکسان است.
همچنین ببینید: Divi: نحوه استفاده از ماسک ها و الگوهای پس زمینه برای یک بخش قهرمان
روش 1: ماژول عنوان پست تمام صفحه
در این روش از ماژول PostTitle . اگر می خواهید تمام اطلاعات را با هم نمایش دهید، انتخاب خوبی است. هنگامی که الگوی خود را دارید، نماد ویرایش را برای باز کردن آن انتخاب کنید.
قالبی که ما آپلود کردیم دارای بخشی با تصویر برجسته است. ما این بخش را حذف می کنیم و a را اضافه می کنیم بخش تمام عرض در این مکان.
Sélectionnez عنوان پست تمام عرض در لیست ماژول های تمام عرض.
همه موارد به صورت پیش فرض انتخاب شده اند. آنها را فعال بگذارید. اسکرول کنید به قرار دادن تصویر ویژه و انتخاب کنید بالاتر از عنوان.
- محل قرارگیری تصویر ویژه: بالای عنوان
حرکت به رنگ پس زمینه و رنگ را روی #ffff9f2 قرار دهید
- پس زمینه: #fff9f2
متن عنوان
برگه را انتخاب کنید طرح. برای متن عنوان، H1 را نگه دارید و Playfair Display را انتخاب کنید. آن را روی Left Justified قرار دهید و #34332e را برای رنگ انتخاب کنید.
- عنوان :
- سطح سرفصل: H1
- فونت: Playfair Display
- ترازبندی متن: توجیه چپ
- رنگ متن: #34332e
برای اندازه متن ، نسخه دسکتاپ را روی 65 پیکسل، نسخه موبایل را روی 42 پیکسل و ارتفاع ردیف را روی 1,2 میلیمتر تنظیم کنید.
- اندازه متن عنوان (رومیزی): 65 پیکسل (رومیزی)، 42 پیکسل (تلفن)
- ارتفاع خط عنوان: 1,2 em
متا متن
حرکت به متا متن. مونتسرات را برای فونت انتخاب کنید و آن را روی تراز متوسط، بزرگ، راست برای نسخه دسکتاپ و تراز چپ برای نسخه موبایل تنظیم کنید. برای رنگ، #7b7975 را انتخاب کنید.
- MetaFont:
- فونت: مونتسرات
- وزن: متوسط
- سبک: TT
- متا متن:
- تراز: راست (رومیزی)، چپ (تلفن)
- رنگ: #7b7975
را تنظیم کنید اندازه فونت برای نسخه دسکتاپ در 14 پیکسل، برای نسخه موبایل در 10 پیکسل، فاصله حروف در 1 پیکسل و ارتفاع خط در 1,6 em. تنظیمات خود را ببندید و قالب خود را ذخیره کنید.
- متا متن:
- اندازه (رومیزی): 14 پیکسل
- اندازه (تلفن): 10px
- فاصله حروف: 1 پیکسل
- ارتفاع خط: 1,6 em
عنوان روی تصویر پس زمینه
اگر تصمیم دارید که عنوان روی تصویر مشخص شده ظاهر شود، از همان تنظیمات طراحی استفاده کنید و به برگه برگردید محتوا.
Sélectionnez عنوان/تصویر پس زمینه متا برای قرار دادن تصویر ویژه.
- محل قرارگیری تصویر ویژه: عنوان/تصویر پس زمینه متا
حرکت به زمینه و انتخاب کنید گرادیان زمینه. رنگ سمت چپ را روی #fff9f2، رنگ سمت راست را روی rgba (255,255,255,0)، جهت را روی 90 درجه، موقعیت شروع را روی 30% تنظیم کنید و برای قرار دادن گرادیان بالای تصویر پس زمینه، بله را انتخاب کنید. تنظیمات خود را ببندید و ذخیره کنید.
- توقف های گرادیان:
- 30٪: #fff9f2
- 100٪: rgba (255,255,255,0)
- جهت گرادیان: 90 درجه
- گرادیان مربع در بالای پس‌زمینه تصویر: بله
روش 2: بخش قهرمان تمام صفحه با متادیتا
این روش از ماژول های متنی با استفاده می کند محتوای پویا برای اطلاعات. اگر می خواهید همه موارد را در مکان های مختلف نمایش دهید، این گزینه خوبی است.
ابتدا قالب را دانلود کنید و قسمت اول را حذف کنید. ما ماژول‌ها و تنظیمات آنها را در ستون سمت چپ دوباره ایجاد می‌کنیم، اما آنها را مرور می‌کنیم تا بتوانید آنها را پیکربندی کنید.
تنظیمات بخش قهرمان تمام صفحه با متادیتا
تنظیمات را باز کنید بخش و به تصویر پس زمینه. انتخاب کنید گرادیان زمینه و تنظیمات را به صورت زیر تغییر دهید:
- توقف های گرادیان:
- 30٪: #fff9f2
- 100٪: rgba (255,255,255,0)
- جهت گرادیان: 90 درجه
- گرادیان مربع در بالای پس‌زمینه تصویر: بله
Sélectionnez تصویر پس زمینه و گزینه را انتخاب کنید از محتوای پویا استفاده کنید.
را انتخاب کنید تصویر ویژه در گزینه ها
برگه را انتخاب کنید طرحو به اندازه گیری. 100 ولت ساعت را به حداقل ارتفاع اضافه کنید. تنظیمات بخش را ببندید.
- حداقل ارتفاع: 100vh
تنظیمات بخش قهرمان تمام صفحه با متادیتا
سپس یک ردیف ستون دوتایی به بخش اضافه کنید.
a اضافه کنید ماژول متن در ستون سمت راست
برای او محتویات، انتخاب کنید از محتوای پویا استفاده کنید.
را انتخاب کنید عنوان پست/آرشیو در لیست گزینه ها
- محتوای پویا: عنوان پست/بایگانی
به برگه بروید طرح.
- عنوان:
- متن: H1
- فونت: Playfair Display
- ترازبندی متن: توجیه چپ
- رنگ متن: #34332e
برای اندازه متن ، برای نسخه دسکتاپ روی 65 پیکسل، برای نسخه موبایل روی 42 پیکسل و ارتفاع ردیف روی 1,2 میلی متر تنظیم کنید.
- عنوان:
- اندازه متن: 65 پیکسل (رومیزی)، 42 پیکسل (تلفن)
- ارتفاع خط: 1,2 em
حرکت به فاصله و 50% را برای padding بالا وارد کنید. تنظیمات را ببندید.
- بالشتک: 50% (بالا)
همچنین می توانید این مقاله را در: نحوه ایجاد یک بخش قهرمان با ماژول هدر کامل Divi
بخش قهرمان با دسته ابرداده
یک بخش جدید اضافه کنید به طور منظم در بخش Hero.
تنظیمات آن را باز کرده و تنظیم کنید رنگ پس زمینه در #fff9f2. تنظیمات را ببندید.
- رنگ پس زمینه: #fff9f2
سپس a را اضافه کنید خط از 4 ستون به بخش جدید.
قهرمان تمام صفحه با متن دسته بندی ابرداده
a اضافه کنید ماژول متن در ستون سمت چپ
تنظیمات ماژول را باز کرده و انتخاب کنید از محتوای پویا استفاده کنید برای بدنه متن
Sélectionnez دسته بندی های گذشته در لیست
- محتوای پویا: دسته بندی پست
برگه را انتخاب کنید طرح و به سمت پایین به عنوان متن بروید. H4 را انتخاب کنید. Playfair Display را برای فونت انتخاب کنید و آن را روی تراز متوسط، بزرگ، راست برای نسخه دسکتاپ و تراز چپ برای نسخه تلفن تنظیم کنید. برای رنگ، #7b7975 را انتخاب کنید.
- عنوان:
- نمایش متن
- فونت: Playfair Display
- وزن قلم: متوسط
- سبک: TT
- تراز متن: مرکز
- رنگ متن: #7b7975
اندازه قلم را برای نسخه دسکتاپ روی 14 پیکسل، برای نسخه موبایل روی 10 پیکسل، فاصله حروف را روی 1 پیکسل و ارتفاع خط را روی 1,6 em تنظیم کنید. تنظیمات خود را ببندید و قالب خود را ذخیره کنید.
- سرفصل 4:
- اندازه (رومیزی): 14 پیکسل
- اندازه (تلفن): 10px
- فاصله حروف: 1 پیکسل
- ارتفاع خط: 1,6 em
حرکت به فاصله و 0px را به حاشیه پایین اضافه کنید. تنظیمات را ببندید.
- حاشیه (پایین): 0 پیکسل
بخش قهرمان تمام صفحه با متادیتای متا متن
سپس ماژول Category را کپی کرده و به ستون بعدی بکشید. هر کدام از ماژول های متا تنظیمات یکسانی دارند. نحوه ایجاد اولین ماژول را نشان خواهیم داد و سپس آن را دو بار کپی کنید تا ماژول های دیگر ایجاد شود.
نویسنده
تنظیمات را باز کرده و حذف کنید محتویات پویا
با کلیک بر روی از محتوای پویا استفاده کنید و انتخاب کنید نویسنده پست.
- محتوای پویا: نویسنده پست
در برگه طرح، تنظیمات زیر را تغییر دهید.
- سرفصل 4:
- فونت: مونتسرات
- وزن قلم: متوسط
- سبک: TT
- تراز متن (رومیزی): مرکز
- تراز متن (تلفن): سمت چپ
- رنگ: #7b7975
پارامترهای اندازه فونت عبارتند از:
- اندازه متن: 14 پیکسل (رومیزی)، 10 پیکسل (تلفن)
- فاصله حروف: 1 پیکسل
- ارتفاع خط: 1,6 em
La حاشیه پایینی باید 0px داشته باشد.
- حاشیه (پایین): 0 پیکسل
تاریخ
نسخه ماژول Author و آن را به ستون بعدی بکشید.
آن را حذف کنید محتویات پویا فعلی، انتخاب کنید از محتوای پویا استفاده کنید و انتخاب کنید تاریخ انتشار پست. تنظیمات را ببندید.
- محتوای پویا: تاریخ انتشار پست
نظر
Enfin، نسخه ماژول Post Publish Date و آن را به آخرین ستون بکشید.
در مورد ماژول های دیگر، محتوای پویا را حذف کرده و انتخاب کنید از محتوای پویا استفاده کنید .
را انتخاب کنید تعداد نظرات ارسال کنید از انتخاب های شما
- محتوای پویا: تعداد نظرات ارسال کنید
این بار یک فاصله و کلمه Comments را در فیلد اضافه کنید پس از . مودال کوچک را ببندید سپس تنظیمات را ببندید. کار خود را ذخیره کنید.
- بعد از: نظرات
همچنین بخوانید: Divi: نحوه نمایش ماژول Fullwidth Header به صورت تمام صفحه
Résultats
بخش Hero با ماژول نسخه Desktop عنوان پست
بخش قهرمان با ماژول نسخه موبایل عنوان پست
طرح بندی بخش Hero را با ماژول نسخه دسکتاپ Post Title تغییر دهید
طرح بندی بخش قهرمان جایگزین با ماژول عنوان پست تلفن همراه
بخش قهرمان با نسخه دسکتاپ ابرداده
بخش قهرمان با ابرداده نسخه موبایل
اکنون DIVI را دانلود کنید!!!
نتیجه
همین و بس! این نگاه ما به نحوه اضافه کردن یک بخش قهرمان تمام صفحه به قالب پست وبلاگ شما است. DIVI.
ماژول ها DIVI و Theme Builder چندین گزینه برای ایجاد بخش های قهرمان تمام صفحه ارائه می دهد. همه روش ها بسیار خوب کار می کنند و همه مزایای خود را دارند.
با استفاده از این روش ها، می توانید یک بخش تمام صفحه Hero را به هر قالب پست وبلاگ Divi اضافه کنید.
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.
دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
