به راحتی وب سایت خود را با Elementor بسازید

Elementor به شما امکان می دهد ایجاد کنید به راحتی و رایگان هر طراحی وب سایت یا وبلاگ با ظاهری حرفه ای. از پرداخت هزینه زیاد برای وب سایتی که خودتان می توانید انجام دهید خودداری کنید.

آیا نیاز به ایجاد یک سربرگ جهانی برای وب سایت خود با Divi دارید؟

یک هدر سراسری در همه جای وب سایت شما ظاهر می شود مگر اینکه سرصفحه متفاوتی را به یک صفحه یا پست اختصاص داده باشید.

بیایید شروع کنیم!

بررسی

در اینجا پیش نمایشی از هدر جهانی است که می خواهیم طراحی کنیم.

منوی اصلی خود را پیکربندی کنید

با ایجاد منوی خود در تنظیمات ظاهری سایت وردپرس خود شروع کنید.

به گزینه Theme Builder در زیر Divi دسترسی پیدا کنید

در گزینه های Divi theme، روی Theme Builder کلیک کنید. پس از آن، متوجه یک الگوی وب سایت پیش فرض خواهید شد.

اضافه کردن و ایجاد یک سربرگ جهانی

قالب پیش‌فرض وب‌سایت جایی است که می‌توانید شروع به ایجاد هدر جهانی، بدنه جهانی و پاورقی جهانی کنید. روی «افزودن سربرگ جهانی» کلیک کنید و با کلیک روی «ساخت سربرگ جهانی» ادامه دهید تا فرآیند شروع شود.

تنظیمات بخش

اندازه

تنظیمات بخش را که در صفحه پیدا خواهید کرد باز کنید، در تب Style، ابعاد را در اندازه های مختلف صفحه تغییر دهید.

  • حداکثر عرض: 100%
  • حداکثر عرض: 1280 پیکسل (برای رایانه شخصی و تبلت)، 100٪ (برای موبایل)

فاصله

تمام حاشیه های داخلی بالا و پایین را بردارید

  • راس حاشیه داخلی: 0 پیکسل
  • حاشیه داخلی پایین: 0 پیکسل

مرز

حالا یک شعاع حاشیه به گوشه سمت چپ و راست پایین قسمت اضافه کنید.

  • پایین سمت چپ: 50 پیکسل
  • پایین سمت راست: 50 پیکسل

جعبه سایه

بیایید یک سایه جعبه ظریف نیز اضافه کنیم.

  • قدرت تاری سایه جعبه: 60 پیکسل
  • رنگ فونت زیرنویس: rgba(0,0,0,0.13)

دید

  • سرریز افقی: قابل مشاهده است
  • سرریز عمودی: قابل مشاهده است

یک خط جدید به سربرگ اختصاص دهید

اکنون که تنظیمات بخش عمومی را تکمیل کردیم، می‌توانیم شروع به اضافه کردن ردیف‌ها کنیم. در مجموع به دو خط نیاز داریم. یکی که به هدر اختصاص دارد و دیگری که امکان نمایش آیتم های منو را فراهم می کند. با اضافه کردن یک سطر جدید با استفاده از ساختار ستون زیر با هدر شروع می کنیم:

Divi: بهترین تم وردپرس تمام وقت!

بیشتر دانلود 901.000، Divi محبوب ترین تم وردپرس در جهان است. این کامل، آسان برای استفاده است و همراه با بیش از قالب های رایگان 62.

تنظیمات خط

تنظیمات پس زمینه

بدون افزودن ماژول به خط، تنظیمات خط را باز کنید و رنگ پس زمینه را تغییر دهید.

  • پس زمینه: #38383F

اندازه

سپس پارامترهای اندازه خط را تغییر دهید.

  • از عرض ناودان سفارشی استفاده کنید: بله
  • فاصله ستون ها: 1
  • حداکثر عرض: 100%
  • حداکثر عرض: 100%

مشاهده

حالا بیایید با افزودن این خط کد CSS به عنصر ردیف اصلی، مطمئن شویم که ستون‌ها در صفحه‌های کوچک‌تر در کنار یکدیگر ظاهر می‌شوند.

01 display: flex;

ماژول تصویر را در ستون 1 اضافه کنید

لوگو را دانلود کنید

هنگامی که تنظیمات ردیف را تکمیل کردید، زمان شروع به اضافه کردن ماژول ها است. یک ماژول تصویر را به ستون 1 اضافه کنید و لوگوی خود را آپلود کنید.

هم ترازی

به تب Style بروید و تصویر را در سمت چپ تراز کنید.

اندازه

همچنین عرض ماژول را تغییر دهید.

فاصله

همچنین مقادیر حاشیه سفارشی را اضافه کنید.

یک هدر سراسری با موضوع Divi Builder ایجاد کنید

ماژول ردیابی رسانه های اجتماعی را در ستون 2 اضافه کنید

شبکه های اجتماعی را اضافه کنید

به ستون دوم برویم. در آنجا به یک ماژول ردیابی رسانه های اجتماعی نیاز داریم. شبکه های اجتماعی مورد نظر خود را اضافه کنید. شما می توانید به تعداد دلخواه رسانه اجتماعی اضافه کنید.

یک هدر سراسری با موضوع Divi Builder ایجاد کنید

رنگ پس زمینه شبکه اجتماعی

در مرحله بعد، هر شبکه اجتماعی را به صورت جداگانه باز کنید و رنگ پس زمینه را به رنگ کاملا شفاف تغییر دهید.

  • رنگ پس زمینه: rgba (0,0,0,0)
یک هدر سراسری با موضوع Divi Builder ایجاد کنید

هم ترازی

به تنظیمات معمولی ماژول برگردید و سپس تراز کامل ماژول را تغییر دهید.

تصویر

تنظیمات آیکون را نیز تغییر دهید.

  • رنگ نماد: #FFFFFF
  • استفاده از اندازه نماد سفارشی: بله
  • اندازه فونت نماد: 16 پیکسل (کامپیوتر و تبلت)، 12 پیکسل (تلفن)

فاصله

آیا می خواهید محصولات خود را در اینترنت بفروشید؟

WooCommerce را به صورت رایگان دانلود کنید، بهترین افزونه های تجارت الکترونیک برای فروش محصولات فیزیکی و دیجیتالی خود در وردپرس و به راحتی فروشگاه آنلاین خود را ایجاد کنید. ایده آل برای مبتدیان.

یک حاشیه بالا اضافه کنید.

ماژول Button را در ستون 3 اضافه کنید

به ستون سوم بروید و یک ماژول Button حاوی متن دلخواه خود اضافه کنید.

هم ترازی

تراز دکمه ها را در تب Style تغییر دهید.

تنظیمات دکمه

تنظیمات دکمه را به صورت زیر سفارشی کنید:

  • استفاده از سبک های سفارشی برای دکمه: بله
  • اندازه متن دکمه: 12 پیکسل (رومیزی)، 10 پیکسل (تبلت)، 8 پیکسل (تلفن)
  • رنگ متن دکمه: #ffffff
  • دکمه پس زمینه: #ffae25
  • پهنای حاشیه دکمه: 0 پیکسل
  • دکمه Border Radius: 0 پیکسل
  • فاصله حروف دکمه ها: 5 پیکسل (رومیزی)، 3 پیکسل (تبلت و تلفن)
  • دکمه فونت: هیچکدام را باز کنید
  • دکمه Soft Light: متن پررنگ
  • سبک دکمه کپی: TT

فاصله

سفارشی کردن مقادیر حاشیه

یک خط جدید به نوار منو اختصاص دهید

هنگامی که خط اختصاص داده شده به سربرگ جهانی را پر کردید، می توانید خط دیگری را درست در زیر اضافه کنید.

تنظیمات خط

اندازه

بدون افزودن ماژول، تنظیمات خط را باز کنید و تنظیمات اندازه را در تب Style تغییر دهید.

فاصله

سپس تمام حاشیه های پایین و بالا را بردارید.

یک ماژول منو به ستون اضافه کنید

منو را انتخاب کنید

بعد، یک ماژول Menu را به ستون اضافه کنید و منویی را که در قسمت اول این آموزش ایجاد کردید انتخاب کنید.

وضع

به تب Style بروید و تنظیمات طرح بندی را به صورت زیر تغییر دهید:

اتصالات

همچنین رنگ لینک فعال را در تب Style تغییر دهید.

  • رنگ پیوند فعال: #ffae25
یک هدر سراسری با موضوع Divi Builder ایجاد کنید

منوی کشویی

همین کار را برای رنگ خط منوی کشویی در تنظیمات منوی کشویی انجام دهید.

  • رنگ ردیف کشویی: #ffae25

تصویر

  • رنگ نماد منوی همبرگر: #ffae25

متن منو

با تنظیمات متن منو.

  • فونت منو: Prata
  • رنگ متن منو: #000000

کاری کنید که هدر و نوار منو در بالا باقی بماند

تنظیمات بخش را باز کنید

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

CSS سفارشی را به عنصر اصلی اضافه کنید

در ادامه به تب advanced رفته و چند خط کد CSS را به عنصر اصلی قسمت اضافه می کنیم.

01 position: fixed;

02 top: 0;

03 left: 0;

04 right: 0;

گزینه های هدر جهانی و سازنده تم را ذخیره کنید

پس از تکمیل کل طراحی هدر سراسری، قبل از خروج از طرح بندی قالب، حتما طرح را ذخیره کنید. هنگامی که از طرح بندی قالب خارج شدید، کل تغییرات سازنده تم خود را ذخیره کنید و کارتان تمام شد!

بررسی

اکنون که تمام مراحل را طی کردیم، اجازه دهید آخرین نگاهی به نتیجه داشته باشیم.

یک هدر سراسری با موضوع Divi Builder ایجاد کنید

نتیجه

در این مقاله نحوه ایجاد یک هدر جهانی سفارشی با تم ساز جدید Divi را به شما نشان دادیم. این آموزش نشان می دهد که چقدر آسان است که هدرهای زیبا ایجاد کنید و آنها را در کل وب سایت یا انواع پست سفارشی خاص اعمال کنید. 

امیدواریم در شخصی سازی وب سایت خود با تم ساز به شما کمک کند.

اگر سوال یا پیشنهادی دارید، لطفاً در قسمت نظرات با ما در میان بگذارید بخش نظرات CI-dessous.

...

0 سهام
سهم
صدای جیر جیر
ثبات