چگونه می توان دو دکمه کنار هم به هدر دیوی جهانی خود اضافه کرد

داشتن تماس واضح برای اقدام در صفحات خود برای اکثر وب سایت ها یک ضرورت است. و چه راهی بهتر از قرار دادن آنها در هدر خود برای جلب توجه به برخی از مهمترین CTA ها؟ 

در آموزش امروز به شما نشان خواهیم داد که چگونه با استفاده از Button Builder دو دکمه کنار هم به هدر سراسری خود اضافه کنید. تم از دیوی یکی از دکمه ها اولیه و دیگری ثانویه است. همچنین می توانید فایل JSON هدر جهانی را به صورت رایگان دانلود کنید!

بررسی

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

دفتر

1. به Divi Theme Builder دسترسی پیدا کنید و یک هدر جهانی ایجاد کنید

برو به Divi Theme Builder

با رفتن به Divi Theme Builder شروع کرده و روی "افزودن یک هدر جهانی" کلیک کنید.

یک عنوان جهانی ایجاد کنید

با کلیک روی "Build Global Header" ادامه دهید.

2. یک طرح کلی هدر بسازید

یک بخش جدید اضافه کنید

فاصله

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

• بالشتک بالایی: 0px
• بالشتک پایین: 0px

صفحه اول Z

همچنین مطمئن شوید که z-index بخش را در تنظیمات دید افزایش دهید. این تضمین خواهد کرد که محتویات سربرگ جهانی در بالای کل صفحه ظاهر می شود و آن را ارسال می کند محتویات.

• فهرست Z: 99999

یک خط جدید اضافه کنید

ساختار ستون

پس از اتمام تنظیمات بخش ، با استفاده از ساختار ستون زیر یک ردیف جدید به بخش اضافه کنید:

اندازه

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

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

فاصله

همچنین مقادیر پر شده را در سمت چپ و راست خط تغییر دهید.

• بالشتک سمت چپ: 2vw (میز) ، 10vw (تبلت و تلفن)
• بالشتک مناسب: 2vw (میز) ، 10vw (رایانه لوحی و تلفن)

عنصر اصلی

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

display: flex;align-items: center;

ویژگی نمایش دسک تاپ را در رایانه لوحی و تلفن همراه حذف کنید.

display: block;

ستون 1

مرز

با باز کردن تنظیمات در ستون 1 ادامه دهید و یک مرز درست را فقط روی دسک تاپ اضافه کنید.

• عرض مرز راست: 1px (میز) ، 0 px (رایانه لوحی و تلفن)
• رنگ حاشیه سمت راست: # d8d8d8

صفحه اول Z

همچنین شاخص z ستون را افزایش دهید.

• فهرست Z: 11

ستون 2

عنصر اصلی

سپس تنظیمات ستون 2 را باز کرده و خطوط زیر کد CSS را به عنصر ستون اصلی اضافه کنید تا به دو ستون تبدیل شود.

display: grid;grid-template-columns: 50% 50%;

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

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

وقت آن است که شروع به اضافه کردن ماژول ها کنیم! یک ماژول منو به ستون 1 اضافه کنید و یک منو به دلخواه خود انتخاب کنید.

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

سپس یک آرم بارگذاری کنید.

وضع

به برگه طراحی ماژول بروید و اطمینان حاصل کنید که تنظیمات طرح زیر اعمال می شوند:

• سبک: تراز وسط قرار دارد
• مسیر منوی کشویی: پایین

متن منو

سپس تنظیمات متن فهرست را تغییر دهید.

• رنگ پیوند فعال: # ef6f49
• قلم منو: مونتسرات
• وزن قلم منو: نیمه پررنگ
• سبک قلم منو: بزرگ
• رنگ متن منو: # 333333 (پیش فرض) ، # ef6f49 (شناور)
• اندازه متن منو: 0.7vw (دسک تاپ) ، 1.8vw (رایانه لوحی) ، 2.5vw (تلفن)
• فاصله نامه نامه: 1px

متن منوی کشویی

همچنین در تنظیمات متن در منوی کشویی تغییراتی ایجاد کنید.

• رنگ پس زمینه منوی کشویی: #ffffff
• رنگ خط در منوی کشویی: # ef6f49

آیکون های

بعد ، رنگ نماد منوی همبرگر را تغییر دهید.

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

اندازه

همچنین حداکثر عرض آرم را به پارامترهای اندازه اضافه کنید.

• حداکثر عرض آرم: 9vw (میز) ، 12vw (رایانه لوحی) ، 15vw (تلفن)

منوی نشانگر CSS

و تنظیمات ماژول را با اضافه کردن یک خط کد CSS به آرم منو در برگه پیشرفته ، کامل کنید.

margin-right: 10vw;

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

یک کد CSS سفارشی را به ماژول اضافه کنید

آخرین و آخرین ماژول مورد نیاز در ستون 1 ، ماژول کد است. برای شخصی سازی فاصله بین موارد منو ، خطوط زیر کد CSS را اضافه کنید:

<style>.et-menu>li {padding-left: 1.5vw !important;padding-right: 1.5vw !important;}</style>

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

یک کپی اضافه کنید

بیایید به ماژول بعدی برویم! اولین ماژول دکمه را اضافه کنید و کپی دلخواه خود را وارد کنید.

اضافه کردن یک لینک

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

هم ترازی

به برگه طراحی ماژول بروید و ترازبندی دکمه را تغییر دهید.

• تراز دکمه: درست است

تنظیمات دکمه

دکمه را نیز سبک کنید.

• از دکمه های سفارشی برای دکمه استفاده کنید: بله
• اندازه متن دکمه: 0.8vw (دسک تاپ) ، 1.7vw (رایانه لوحی) ، 2.5vw (تلفن)
• رنگ متن دکمه: # 000000
• رنگ پس زمینه دکمه: # edeef0 (پیش فرض) ، # d6d7d8 (شناور)
• عرض مرز دکمه: 0px

• شعاع مرزی دکمه: 0px
• فاصله نامه دکمه: 2px
• قلم دکمه: مونتسرات
• وزن قلم دکمه: نیمه پررنگ
• سبک قلم دکمه: بزرگ

فاصله

تنظیمات ماژول را با افزودن مقادیر padding سفارشی در اندازه های مختلف صفحه کامل کنید.

• بالشتک بالایی: 1vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 3vw (تلفن)
• بالشتک پایین: 1vw (میز) ، 2vw (رایانه لوحی) ، 3vw (تلفن)
• بالشتک سمت چپ: 2vw (دسک تاپ) ، 4vw (رایانه لوحی) ، 6vw (تلفن)
• بالشتک مناسب: 2vw (میز) ، 4vw (رایانه لوحی) ، 6vw (تلفن)

ماژول دکمه کلون

پس از اتمام ماژول دکمه اول ، آن را کلون کنید.

پیوند را ویرایش کنید

ماژول دکمه های تکراری را باز کرده و URL را تغییر دهید.

تراز بندی را تغییر دهید

تراز بندی ماژول را نیز تغییر دهید.

• تراز دکمه: سمت چپ

تنظیمات دکمه را تغییر دهید

همچنین در تنظیمات دکمه تغییراتی ایجاد کنید.

• رنگ متن دکمه: #ffffff
• رنگ پس زمینه دکمه: # ef6f49 (پیش فرض) ، # e06945 (شناور)

مقیاس تبدیل شناور

تنظیمات دکمه را با اضافه کردن یک اثر شناور در مقیاس تبدیل کامل کنید.

• راست: 110٪
• کم: 110٪

3. تغییرات مربوط به مولد تم و نتیجه پیش نمایش را ذخیره کنید

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

بررسی

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

آخرین افکار

در این آموزش ، ما به شما نشان داده ایم که چگونه با استفاده از مولد زمینه Divi ، دو دکمه را در کنار هم به هدر کلی خود اضافه کنید. 

یکی از دکمه هایی که اضافه کردیم اولیه است و دیگری ثانویه است. افزودن دکمه‌ها به هدر کلی به شما کمک می‌کند تا برخی از مهم‌ترین CTA‌های خود را برجسته کنید وب سایت. شما همچنین توانستید فایل JSON را به صورت رایگان دانلود کنید! اگر سوالی دارید، در قسمت نظرات زیر نظر خود را درج کنید.