نیاز به ایجاد یک سربرگ جهانی برای شما سایت اینترنتی با دیوی؟
یک هدر سراسری در همه جای شما ظاهر می شود وب سایت، مگر اینکه سرصفحه دیگری را به صفحه یا پستی اختصاص داده باشید.
بیایید شروع کنیم!
بررسی
در اینجا پیش نمایشی از هدر جهانی است که می خواهیم طراحی کنیم.
منوی اصلی خود را پیکربندی کنید
با ایجاد منوی خود در تنظیمات ظاهری سایت وردپرس خود شروع کنید.
به گزینه Theme Builder در زیر Divi دسترسی پیدا کنید
در گزینه های تم دیوی، روی Theme Builder کلیک کنید. هنگامی که به آنجا رسیدید، متوجه الف خواهید شد قالب وب سایت به طور پیش فرض
اضافه کردن و ایجاد یک سربرگ جهانی
Le قالب وب سایت پیش‌فرض جایی است که می‌توانید شروع به ایجاد هدر جهانی، بدنه جهانی و پاورقی جهانی کنید. روی «افزودن سربرگ جهانی» کلیک کنید و با کلیک روی «ساخت سربرگ جهانی» ادامه دهید تا فرآیند شروع شود.
تنظیمات بخش
اندازه
تنظیمات بخش را که در صفحه پیدا خواهید کرد باز کنید، در تب Style، ابعاد را در اندازه های مختلف صفحه تغییر دهید.
- حداکثر عرض: 100%
- حداکثر عرض: 1280 پیکسل (برای رایانه شخصی و تبلت)، 100٪ (برای موبایل)
فاصله
تمام حاشیه های داخلی بالا و پایین را بردارید
- راس حاشیه داخلی: 0 پیکسل
- حاشیه داخلی پایین: 0 پیکسل
مرز
حالا یک شعاع حاشیه به گوشه سمت چپ و راست پایین قسمت اضافه کنید.
- پایین سمت چپ: 50 پیکسل
- پایین سمت راست: 50 پیکسل
جعبه سایه
بیایید یک سایه جعبه ظریف نیز اضافه کنیم.
- قدرت تاری سایه جعبه: 60 پیکسل
- رنگ فونت زیرنویس: rgba(0,0,0,0.13)
دید
- سرریز افقی: قابل مشاهده است
- سرریز عمودی: قابل مشاهده است
یک خط جدید به سربرگ اختصاص دهید
اکنون که تنظیمات بخش عمومی را تکمیل کردیم، می‌توانیم شروع به اضافه کردن ردیف‌ها کنیم. در مجموع به دو خط نیاز داریم. یکی که به هدر اختصاص دارد و دیگری که امکان نمایش آیتم های منو را فراهم می کند. با اضافه کردن یک سطر جدید با استفاده از ساختار ستون زیر با هدر شروع می کنیم:
تنظیمات خط
تنظیمات پس زمینه
بدون افزودن ماژول به خط، تنظیمات خط را باز کنید و رنگ پس زمینه را تغییر دهید.
- پس زمینه: #38383F
اندازه
سپس پارامترهای اندازه خط را تغییر دهید.
- از عرض ناودان سفارشی استفاده کنید: بله
- فاصله ستون ها: 1
- حداکثر عرض: 100%
- حداکثر عرض: 100%
مشاهده
حالا بیایید با افزودن این خط کد CSS به عنصر ردیف اصلی، مطمئن شویم که ستون‌ها در صفحه‌های کوچک‌تر در کنار یکدیگر ظاهر می‌شوند.
01
display: flex;
ماژول تصویر را در ستون 1 اضافه کنید
لوگو را دانلود کنید
هنگامی که تنظیمات ردیف را تکمیل کردید، زمان شروع به اضافه کردن ماژول ها است. یک ماژول تصویر را به ستون 1 اضافه کنید و لوگوی خود را آپلود کنید.
هم ترازی
به تب Style بروید و تصویر را در سمت چپ تراز کنید.
اندازه
همچنین عرض ماژول را تغییر دهید.
فاصله
همچنین مقادیر حاشیه سفارشی را اضافه کنید.
ماژول ردیابی رسانه های اجتماعی را در ستون 2 اضافه کنید
شبکه های اجتماعی را اضافه کنید
به ستون دوم برویم. در آنجا به یک ماژول ردیابی رسانه های اجتماعی نیاز داریم. شبکه های اجتماعی مورد نظر خود را اضافه کنید. شما می توانید به تعداد دلخواه رسانه اجتماعی اضافه کنید.
رنگ پس زمینه شبکه اجتماعی
در مرحله بعد، هر شبکه اجتماعی را به صورت جداگانه باز کنید و رنگ پس زمینه را به رنگ کاملا شفاف تغییر دهید.
- رنگ پس زمینه: rgba (0,0,0,0)
هم ترازی
به تنظیمات معمولی ماژول برگردید و سپس تراز کامل ماژول را تغییر دهید.
تصویر
تنظیمات آیکون را نیز تغییر دهید.
- رنگ نماد: #FFFFFF
- استفاده از اندازه نماد سفارشی: بله
- اندازه فونت نماد: 16 پیکسل (کامپیوتر و تبلت)، 12 پیکسل (تلفن)
فاصله
یک حاشیه بالا اضافه کنید.
ماژول Button را در ستون 3 اضافه کنید
به ستون سوم بروید و یک ماژول Button حاوی متن دلخواه خود اضافه کنید.
هم ترازی
تراز دکمه ها را در تب Style تغییر دهید.
تنظیمات دکمه
تنظیمات دکمه را به صورت زیر سفارشی کنید:
- استفاده از سبک های سفارشی برای دکمه: بله
- اندازه متن دکمه: 12 پیکسل (رومیزی)، 10 پیکسل (تبلت)، 8 پیکسل (تلفن)
- رنگ متن دکمه: #ffffff
- دکمه پس زمینه: #ffae25
- پهنای حاشیه دکمه: 0 پیکسل
- دکمه Border Radius: 0 پیکسل
- فاصله حروف دکمه ها: 5 پیکسل (رومیزی)، 3 پیکسل (تبلت و تلفن)
- دکمه فونت: هیچکدام را باز کنید
- دکمه Soft Light: متن پررنگ
- سبک دکمه کپی: TT
فاصله
سفارشی کردن مقادیر حاشیه
یک خط جدید به نوار منو اختصاص دهید
هنگامی که خط اختصاص داده شده به سربرگ جهانی را پر کردید، می توانید خط دیگری را درست در زیر اضافه کنید.
تنظیمات خط
اندازه
بدون افزودن ماژول، تنظیمات خط را باز کنید و تنظیمات اندازه را در تب Style تغییر دهید.
فاصله
سپس تمام حاشیه های پایین و بالا را بردارید.
یک ماژول منو به ستون اضافه کنید
منو را انتخاب کنید
بعد، یک ماژول Menu را به ستون اضافه کنید و منویی را که در قسمت اول این آموزش ایجاد کردید انتخاب کنید.
وضع
به تب Style بروید و تنظیمات طرح بندی را به صورت زیر تغییر دهید:
اتصالات
همچنین رنگ لینک فعال را در تب Style تغییر دهید.
- رنگ پیوند فعال: #ffae25
منوی کشویی
همین کار را برای رنگ خط منوی کشویی در تنظیمات منوی کشویی انجام دهید.
- رنگ ردیف کشویی: #ffae25
تصویر
- رنگ نماد منوی همبرگر: #ffae25
متن منو
با تنظیمات متن منو.
- فونت منو: Prata
- رنگ متن منو: #000000
کاری کنید که هدر و نوار منو در بالا باقی بماند
تنظیمات بخش را باز کنید
هنگامی که خط دوم را تکمیل کردید، تنها کاری که باید انجام دهید این است که مطمئن شوید این بخش در بالای صفحات و پست های ما باقی می ماند. برای این کار دوباره تنظیمات بخش را باز می کنیم.
CSS سفارشی را به عنصر اصلی اضافه کنید
در ادامه به تب advanced رفته و چند خط کد CSS را به عنصر اصلی قسمت اضافه می کنیم.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
گزینه های هدر جهانی و سازنده تم را ذخیره کنید
پس از تکمیل کل طراحی هدر سراسری، قبل از خروج از طرح بندی قالب، حتما طرح را ذخیره کنید. هنگامی که از طرح بندی قالب خارج شدید، کل تغییرات سازنده تم خود را ذخیره کنید و کارتان تمام شد!
بررسی
اکنون که تمام مراحل را طی کردیم، اجازه دهید آخرین نگاهی به نتیجه داشته باشیم.
نتیجه
در این مقاله نحوه ایجاد یک هدر جهانی سفارشی با تم ساز جدید Divi را به شما نشان دادیم. این آموزش نشان می دهد که چقدر آسان است که هدرهای زیبا ایجاد کنید و آنها را در کل خود اعمال کنید وب سایت یا انواع پست سفارشی خاص.
امیدواریم در شخصی سازی وب سایت خود با تم ساز به شما کمک کند.
اگر سوال یا پیشنهادی دارید، لطفاً در قسمت نظرات با ما در میان بگذارید بخش نظرات CI-dessous.
...
