رفتن به محتوای اصلی

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

Divi: ساده ترین قالب وردپرس برای استفاده

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

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

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

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

بررسی

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

دفتر

تقسیم دکمه کنار هم

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

برو به Divi Theme Builder

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

استفاده از تم ساز

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

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

پیکربندی سر

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

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

فاصله

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

  • بالشتک بالایی: 0px
  • بالشتک پایین: 0px
پیکربندی فضای Divi

صفحه اول Z

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

  • فهرست Z: 99999
پیکربندی شاخص Z

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

ساختار ستون

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

پیکربندی چیدمان

اندازه

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

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

فاصله

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

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

عنصر اصلی

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

display: flex;align-items: center;

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

display: block;

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

Elementor به شما امکان می دهد تا با طراحی حرفه ای هر طراحی وب سایت را به راحتی ایجاد کنید. هزینه کارهایی را که می توانید انجام دهید ، متوقف نکنید. [رایگان]

پیکربندی سبک Divi

ستون 1

مرز

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

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

صفحه اول Z

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

  • فهرست Z: 11
تنظیمات پیشرفته پیکربندی ستون

ستون 2

عنصر اصلی

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

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

پیکربندی سبک ستون 1

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

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

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

ماژول انتخاب

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

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

پیکربندی آرم Divi

وضع

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

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

متن منو

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

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

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

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

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

آیکون های

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

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

اندازه

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

آیا شما به دنبال بهترین تم ها و پلاگین های وردپرس هستید؟

بهترین پلاگین ها و تم های وردپرس را در Envato دانلود کنید و به راحتی وب سایت خود را ایجاد کنید. در حال حاضر بیش از 49.720.000 دریافت می کند. [EXCLUSIVE]

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

منوی نشانگر CSS

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

margin-right: 10vw;

div css menu css را اضافه کنید

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

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

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

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

ستون divi کد css سفارشی

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

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

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

ماژول دکمه divi را کپی کنید

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

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

پیکربندی پیوند دکمه

هم ترازی

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

  • تراز دکمه: درست است
پیکربندی تراز ماژول دکمه

تنظیمات دکمه

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

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

فاصله

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

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

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

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

اسلات ماژول Divi

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

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

پیکربندی پیوند دکمه Divi

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

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

  • تراز دکمه: سمت چپ
ترازبندی دکمه Divi

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

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

به راحتی فروشگاه آنلاین خود را ایجاد کنید

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

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

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

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

  • راست: 110٪
  • کم: 110٪
تحول دکمه Divi

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

پس از اتمام عنوان جهانی ، تغییراتی را در ایجاد کننده ایجاد کنید و نتیجه را در وب سایت خود ارسال کنید!

ذخیره تغییرات
divi پیکربندی سر

بررسی

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

نتیجه آزمایشی نهایی

آخرین افکار

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

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

این مقاله حاوی نظرات 0

دیدگاهتان را بنویسید

آدرس ایمیل شما منتشر نخواهد شد. علامت گذاری شده اند *

این سایت از Akismet برای کاهش ناخواسته استفاده می کند. در مورد نحوه استفاده از اطلاعات نظرتان بیشتر بدانید.

بازگشت به بالا