آیا می خواهید با Divi یک هدر سراسری جانبی ایجاد کنید؟
در این آموزش، ما به شما نشان خواهیم داد که چگونه یک هدر چرخشی جهانی ایجاد کنید که در سمت چپ صفحات و پست های شما ظاهر می شود. رنگ پس‌زمینه سرصفحه کاملاً شفاف است و این امکان را به شما می‌دهد محتویات از صفحه/پست
ما مطمئن شدیم که هدر جهانی هنگام پیمایش در سمت چپ ثابت می ماند و همچنین منو را به نسخه ای مناسب برای موبایل تبدیل کردیم.
در این آموزش، ما به شما نشان خواهیم داد که چگونه طرح را از ابتدا بازسازی کنید!
برویم.
بررسی
قبل از فرو رفتن در آموزش، بیایید نگاهی گذرا به نتیجه ای که می خواهیم به دست آوریم بیندازیم.
به سازنده تم Divi بروید و شروع به ایجاد یک هدر سراسری کنید
از داشبورد وردپرس، به Divi > تم ساز
با کلیک بر روی "افزودن سربرگ جهانی"
Sélectionnez "ساخت سربرگ جهانی".
شروع به ایجاد هدر جانبی جهانی کنید
یک بخش جدید اضافه کنید
رنگ پس زمینه
پس از ورود به ویرایشگر قالب، می‌توانید بخش را از قبل در آنجا باز کنید و رنگ پس‌زمینه را در اندازه‌های مختلف صفحه تغییر دهید.
- رنگ پس زمینه: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX) (رومیزی)، #FFFFFF (تبلت و تلفن)
اندازه
به برگه بروید طرح، گزینه را پایین بکشید اندازه گیری و سپس پارامترهای اندازه بخش را تغییر دهید.
- عرض: 5vw (رومیزی)، 100% (تبلت و تلفن)
- حداقل ارتفاع: 100 VW (رومیزی)، خودکار (تبلت و تلفن)
فاصله
سپس گزینه Spacing را پایین بیاورید و تنظیمات را به صورت زیر تغییر دهید:
- بالشتک (بالا و پایین): 2vw
جعبه سایه
سپس به سایه جعبه و سایه جعبه سفارشی را در اندازه های مختلف صفحه اضافه کنید.
- موقعیت افقی سایه جعبه: 32 پیکسل (رومیزی)، 0 پیکسل (تبلت و تلفن)
- قدرت تاری سایه جعبه: 49 پیکسل
- قدرت پخش: 0 پیکسل (رومیزی)، 19 پیکسل (تبلت و تلفن)
- رنگ سایه: rgba(0,0,0,0.12)
افزودن CSS سفارشی
همچنین با افزودن چند خط کد CSS به عنصر بخش اصلی، مطمئن می‌شویم که هدر جانبی سراسری در سمت چپ ثابت بماند.
position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
در حالت شناور روی بخش
حتما این خطوط کد CSS را به عنصر اصلی در شناور بخش اضافه کنید.
position: fixed;
top: 0;
دید پیش‌فرض
سپس z-index را در پارامترهای موقعیت افزایش دهید.
- Z Index: 99999
قابلیت مشاهده شناور
مطمئن شوید که مقدار مشابهی هنگام شناور کردن اعمال می شود.
- Z Index: 99999
یک خط جدید اضافه کنید
ساختار ستون
پس از تکمیل تنظیمات بخش، با افزودن یک ردیف جدید با استفاده از ساختار ستون زیر ادامه دهید:
اندازه
بدون افزودن ماژول، تنظیمات خط را باز کنید و تنظیمات اندازه را تغییر دهید.
- از عرض ناودان سفارشی استفاده کنید: بله
- عرض ناودان: 1
فاصله
همچنین تمام حاشیه های پیش فرض را حذف کنید.
- بالشتک (بالا و پایین): 0 پیکسل
پارامترهای ستون
اضافه شدن CSS سفارشی (تبلت و تلفن)
در تبلت و تلفن، ما یک صفحه نمایش کاملا متفاوت را انتخاب می کنیم. سه ماژول مختلف را در کنار هم قرار می دهیم. برای این کار باید مقداری کد CSS اضافه کنیم.
تنظیمات ستون را باز کنید، به تب بروید فناوری و خطوط زیر کد CSS را در فضای خالی قرار دهید عنصر اصلی برای تبلت و گوشی:
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
یک ماژول Image به ستون اضافه کنید
لوگو را دانلود کنید
وقت آن است که اضافه کردن ماژول ها را شروع کنیم! اولین ماژول مورد نیاز ما یک ماژول Image است. یک فایل تصویر آرم نیمه شفاف به انتخاب خود آپلود کنید.
اندازه
سپس به برگه بروید طرح و عرض را در اندازه های مختلف صفحه تغییر دهید.
- عرض: 4 vw (رومیزی)، 12 vw (تبلت)، 16 vw (تلفن)
مقیاس تحول
سپس با تغییر تنظیمات مقیاس تبدیل، اندازه ماژول را افزایش دهید.
- سمت راست: 170% (رومیزی)، 100% (تبلت و تلفن)
- کم: 170٪ (رومیزی)، 100٪ (تبلت و تلفن)
"ترجمه ترجمه"
و با تغییر پارامترهای زیر ماژول را به سمت راست فشار دهید
- پایین: 1vw (رومیزی)، 0vw (تبلت و تلفن)
یک ماژول منو به ستون اضافه کنید
منوی مورد نظر را برای افزودن انتخاب کنید
ماژول بعدی که نیاز داریم ماژول Menu است. منوی مورد نظر خود را انتخاب کنید.
رنگ پس زمینه را حذف کنید
سپس رنگ زمینه را از ماژول بردارید.
وضع
سپس به برگه بروید طرح و تنظیمات چیدمان را تغییر دهید.
- سبک: متمرکز
- جهت منوی کشویی: رو به پایین
تنظیمات متن منو
همچنین تنظیمات متن منو را تغییر دهید.
- رنگ پیوند فعال: #cecece
- قلم منو: مونتسرات
- وزن قلم منو: پررنگ
- رنگ متن: #000000
- اندازه متن منو: 0,9 vw (رومیزی)، 2 vw (تبلت)، 2,5 vw (تلفن)
متن منو در حالت شناور
رنگ متن منو را در حالت شناور تغییر دهید.
- رنگ متن منو: #afafaf
منوی کشویی
همچنین در حال ایجاد برخی تغییرات در تنظیمات منوی کشویی هستیم.
- رنگ خط منوی کشویی: #000000
- رنگ متن منوی کشویی: #000000
آیکون های
سپس رنگ آیکون منوی همبرگر را تغییر دهید.
- رنگ نماد منوی همبرگر: #000000
فاصله
و مقادیر حاشیه سفارشی را در اندازه های مختلف صفحه اضافه کنید.
- حاشیه (بالا و پایین): 18 vw (رومیزی)، 0 vw (تبلت و تلفن)
- حاشیه (چپ و راست): -13vw (رومیزی)، 0vw (تبلت و تلفن)
چرخش تبدیل
اکنون، برای ایجاد افکت چرخش، با مقادیر چرخش تبدیل ماژول بازی خواهیم کرد.
- سمت چپ: 270 درجه (رومیزی)، 0 درجه (تبلت و تلفن)
ماژول "Social Media Follow" را به ستون اضافه کنید
شبکه های اجتماعی را اضافه کنید
بیایید به ماژول "Social Media Follow" برویم، که ماژول بعدی و آخرین ماژول است که برای تکمیل هدر محوری جهانی خود به آن نیاز داریم. چند شبکه اجتماعی به انتخاب خود اضافه کنید.
سبک‌های آیکون رسانه‌های اجتماعی را بازنشانی کنید
با بازنشانی تنظیمات هر شبکه اجتماعی به صورت جداگانه ادامه دهید. این به ما کمک می کند تا از رنگ پس زمینه آنها خلاص شویم.
هم ترازی
سپس به تب تغییر دهید طرح از ماژول و تغییر تراز ماژول در اندازه های مختلف صفحه نمایش.
- ماژول تراز: چپ (رومیزی)، راست (تبلت و تلفن)
تنظیمات نماد
در نهایت تنظیمات آیکون را نیز تغییر دهید.
- رنگ نماد: #000000
- استفاده از اندازه نماد سفارشی: بله
- اندازه قلم آیکون: 2,1 vw
تغییرات سازنده را ذخیره کنید و نتیجه را مشاهده کنید
پس از تکمیل تمام ماژول ها، می توانید مدل را ذخیره کنید، از سازنده خارج شوید تم از Divi و نتیجه را روی خود تجسم کنید وب سایت !
بررسی
اکنون که تمام مراحل را طی کردیم، اجازه دهید آخرین نگاهی به نتیجه داشته باشیم.
دفتر
اکنون DIVI را دانلود کنید!!!
نتیجه
در این مقاله نحوه ایجاد هدر سراسری چرخشی را به شما نشان دادیم. مگر اینکه غیر از این انتخاب کنید، هدر جهانی که ما ایجاد کردیم در همه پست ها و صفحات شما ظاهر می شود.
اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
همچنین ببینید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
