منو سایت

  • خانه
  • وبلاگ
  • چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

 تاریخ انتشار :
/
  وبلاگ
چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

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

در پست امروز، نحوه بازآفرینی بخش‌های کاراکتر با استفاده از هدر Divi Fullwidth را نشان خواهیم داد. ما طراحی خود را با استفاده از 3 بسته چیدمان آماده شروع می کنیم و بخش های خود را با تمرکز بر تعادل دکمه های اولیه و ثانویه طراحی می کنیم. ما می‌خواهیم که دکمه اصلی برجسته باشد، زیرا دعوت به عمل اصلی ماست، در حالی که دکمه ثانویه را بدون سبقت گرفتن از دکمه اصلی قابل مشاهده و در دسترس نگه داریم.

اصول طراحی دکمه های اولیه و ثانویه

دکمه‌های اصلی و دکمه‌های ثانویه به راهنمایی بازدیدکنندگان وب‌سایت شما به اقدامات خاصی کمک می‌کنند. دکمه‌های اولیه معمولاً رایج‌ترین یا مطلوب‌ترین عملکرد هستند و دکمه‌های ثانویه عملکرد کمتری هستند. این به بازدیدکنندگان کمک می کند تا به جایی که می خواهند بروند حرکت کنند.

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

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

حالا که متوجه شدیم دکمه های اولیه و ثانویه چگونه کار می کنند، بیایید به سراغ آموزش برویم!

پیش نمایش طراحی

در اینجا نگاهی به سه هدر تمام عرضی داریم که امروز طراحی خواهیم کرد.

هدر UX Fullwidth

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

هدر تمام عرض مرکز بازنشستگی Divi

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

سربرگ برنامه ریزی مالی با عرض کامل

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

طرح بندی ها را به صورت رایگان دانلود کنید

برای دستیابی به طرح های این آموزش، ابتدا باید آن را از طریق دکمه زیر دانلود کنید. برای دسترسی به دانلود، باید با استفاده از فرم زیر در خبرنامه ما مشترک شوید. به‌عنوان یک مشترک جدید، هر دوشنبه بیشتر Divi خوبی و بسته Divi Layout رایگان دریافت خواهید کرد! اگر قبلاً در لیست هستید، فقط آدرس ایمیل خود را در زیر وارد کنید و روی دانلود کلیک کنید. شما “دوباره مشترک” نخواهید شد یا ایمیل های اضافی دریافت نمی کنید.

برای وارد کردن قالب هدر به کتابخانه Divi خود، موارد زیر را انجام دهید:

  1. به Divi Theme Builder بروید.
  2. روی دکمه Import در گوشه سمت راست بالای صفحه کلیک کنید.
  3. در پنجره قابل حمل، تب import را انتخاب کنید
  4. فایل مورد نظر را برای دانلود از رایانه خود انتخاب کنید (مطمئن شوید که ابتدا فایل را از حالت فشرده خارج کرده و از فایل JSON استفاده کنید).
  5. سپس روی دکمه import کلیک کنید.

پس از انجام، طرح برگه در Divi Builder در دسترس خواهد بود.

بریم سراغ آموزش، درسته؟

آنچه برای شروع نیاز دارید

برای شروع، باید موارد زیر را انجام دهید:

  1. Divi را در وب سایت وردپرس خود نصب کنید.
  2. یک صفحه اضافه کنید و به آن عنوان بدهید.
  3. Visual Builder را فعال کنید

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

مراحل طراحی هدر Ux Full Width

اکنون که صفحه خود را راه اندازی کرده ایم، بیایید با هدر تمام عرض برای صفحه فرود UX شروع کنیم.

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

ایجاد صفحه ما

قبل از شروع استایل‌سازی، باید بسته طرح‌بندی آماده UX را از کتابخانه Divi بارگیری کنیم. هنگامی که Visual Builder را فعال می کنید، سه گزینه ظاهر می شود، گزینه Choose Premade Layout را انتخاب کنید.

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

بسته طرح بندی را بارگیری کنید

برای بارگیری بسته طرح‌بندی UX در صفحه خود:

  1. در تب Pre-Made Layouts، از تابع جستجو برای یافتن بسته طرح‌بندی UX استفاده کنید.
  2. هنگامی که آن را پیدا کردید، روی آن کلیک کنید. این جزئیات طرح بندی و صفحات موجود را نشان می دهد.
  3. روی طراحی صفحه فرود کلیک کنید، سپس روی «استفاده از این طرح‌بندی» کلیک کنید.

ما قسمت بالای طرح را به عنوان یک ماژول هدر تمام عرض دوباره ایجاد می کنیم.

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

قسمت اول را حذف کنید

از آنجایی که می‌خواهیم بخش اول را با استفاده از ماژول Fullwidth Header دوباره ایجاد کنیم، باید آن بخش را حذف کنیم. نشانگر را روی بخش نگه دارید و روی نماد سطل زباله کلیک کنید.

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

یک بخش با عرض کامل اضافه کنید

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

روی پیکان “+” کلیک کنید تا بخش های Divi ظاهر شوند و سپس روی “full width” کلیک کنید. با این کار کتابخانه Divi Fullwidth Module به طور خودکار نمایش داده می شود.

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

یک هدر با عرض کامل اضافه کنید

در کتابخانه Divi Fullwidth Module، روی “Fullwidth Header” کلیک کنید.

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

محتوا اضافه کنید

قبل از شروع به طراحی ماژول، بیایید محتوای مورد نیاز برای این ماژول را اضافه کنیم.

محتوای متنی را اضافه کنید

در زیر تب Text، محتوای زیر را اضافه کنید:

  1. عنوان: دانش خود را در مورد طراحی UX بهبود بخشید
  2. زیرنویس: دوره طراحی UX
  3. دکمه شماره 1: نمای کلی دوره
  4. دکمه شماره 2: بیشتر بدانید
  5. متن متن: متن جایگزین

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

اضافه کردن تصاویر

اکنون که محتوای متنی خود را داریم، باید دو تصویر به طراحی خود اضافه کنیم.

  1. در تب Images، تصویر لوگو (ستاره ها) و تصویر هدر (تصویر شخصی که گوشی را در دست دارد) اضافه کنید.

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

رنگ پس زمینه را تغییر دهید

در تب Background، این تنظیمات را پیکربندی کنید:

  1. رنگ زمینه: #131517

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

طرح هدر با عرض کامل

اکنون که محتوای خود را تنظیم کردیم، بیایید از طریق تب Design مقداری سبک به آن اضافه کنیم.

اسکرول به پایین نماد

بیایید نماد اسکرول پایین، فلش رو به پایین را اضافه کنیم.

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

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

تصویر

بیایید با گرد کردن گوشه ها، منحنی ها را به تصاویر خود اضافه کنیم.

در تب Image تنظیمات زیر را انجام دهید:

  1. تصویر گوشه های گرد: روی دکمه زنجیره پیوند کلیک کنید تا پیوند گوشه‌ها قطع شود، سپس 1000 پیکسل را در کادر ورودی پایین سمت چپ و پایین سمت راست وارد کنید. با این کار گوشه پایین سمت چپ و پایین سمت راست تصاویر ما گرد می شود.

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

متن عنوان

در اینجا اجازه دهید متن عنوان را برای این ماژول استایل کنیم. در تب Title Text، این تنظیمات را پیکربندی کنید:

  1. فونت عنوان: PT Sans
  2. وزن قلم عنوان: پررنگ
  3. اندازه متن سرصفحه: 5 رم
  4. ارتفاع خط عنوان: 1.2 سانتی متر

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

متن اصلی

اینجاست که به متن بدنه این ماژول استایل می دهیم. در تب Body text، این تنظیمات را پیکربندی کنید:

  1. فونت اصلی: Mukta
  2. اندازه متن متن: 18 پیکسل

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

متن زیرنویس

اینجاست که به متن زیرنویس این ماژول استایل می دهیم. در تب Subtitle Text، این تنظیمات را پیکربندی کنید:

  1. فونت زیرنویس: Mukta
  2. وزن قلم زیرنویس: پررنگ
  3. سبک قلم زیرنویس: حروف بزرگ
  4. رنگ متن زیرنویس: #13d678
  5. فاصله بین حروف زیرنویس: 3 پیکسل

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

دکمه یک

اینجاست که می‌توانیم استایل‌های سفارشی را برای دکمه یک، دکمه اصلی تنظیم کنیم. در تب Button One، این تنظیمات را پیکربندی کنید:

  1. از سبک های سفارشی برای دکمه یک استفاده کنید: بله
  2. رنگ یک دکمه: #ffffff
  3. پس زمینه دکمه یک: #13d678
  4. عرض حاشیه تک دکمه: 0 پیکسل
  5. شعاع حاشیه یک دکمه: 100 پیکسل
  6. فونت دکمه یک: Mukta
  7. وزن فونت دکمه یک: پررنگ
  8. نمایش نماد روی دکمه یک: بله
  9. نماد دکمه یک: فلش سمت راست
  10. نمایش نماد فقط در شناور برای دکمه اول: خیر

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

دکمه دو

حالا بیایید دکمه ثانویه، دکمه دوم را استایل کنیم. در تب Button Two، این تنظیمات را پیکربندی کنید:

  1. از سبک های سفارشی برای دکمه یک استفاده کنید: بله
  2. رنگ یک دکمه: #ffffff
  3. پس زمینه دکمه یک: #303030
  4. عرض حاشیه تک دکمه: 0 پیکسل
  5. شعاع حاشیه یک دکمه: 100 پیکسل
  6. فونت دکمه یک: Mukta
  7. وزن فونت دکمه یک: پررنگ
  8. نمایش نماد روی دکمه یک: بله
  9. نماد دکمه یک: فلش سمت راست
  10. نمایش نماد فقط در شناور برای دکمه اول: بله

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

پیوندها را به دکمه ها اضافه کنید

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

  1. دکمه شماره 1 URL پیوند: URL مربوط به دکمه یک را در اینجا بچسبانید.
  2. دکمه شماره 2 URL پیوند: URL مربوط به دکمه دو را در اینجا بچسبانید.

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

طراحی خود را ذخیره کنید

اکنون که ما هدر تمام عرض کاملاً طراحی شده خود را داریم، حتماً طرح خود را ذخیره کنید!

  1. روی فلش سبز رنگ در گوشه سمت راست پایین پنجره ماژول کلیک کنید.
  2. سپس روی نماد ذخیره در نوار ابزار Divi کلیک کنید تا طراحی صفحه شما ذخیره شود.
  3. از Visual Builder خارج شوید.

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

از آزمایش کردن لذت ببرید

راه های استایل دادن به ماژول Divi Fullwidth Header بی پایان است. استفاده از دکمه اصلی و دکمه ثانویه می‌تواند به هدایت بازدیدکنندگان شما به صفحه‌ای که می‌خواهید آنها را ببینند یا اقدامی (مانند ارسال درخواست) که می‌خواهید انجام دهند، کمک کند.

بیایید به دو نمونه دیگر از Fullwidth Header که دارای یک دکمه اصلی برجسته هستند نگاه کنیم.

هدر تمام عرض مرکز بازنشستگی Divi

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

سبک دکمه ها

بیایید نگاهی به سبک های منحصر به فرد برای دکمه های اصلی و ثانویه بیاندازیم.

دکمه یک

در تب Button One، تنظیمات زیر را پیکربندی کنید:

  1. از سبک های سفارشی برای دکمه یک استفاده کنید: بله
  2. اندازه متن دکمه اول: 14 پیکسل
  3. رنگ یک دکمه: #ffffff
  4. پس زمینه دکمه یک: #0a0a0a
  5. عرض حاشیه تک دکمه: 0 پیکسل
  6. شعاع حاشیه یک دکمه: 10 پیکسل
  7. وزن فونت دکمه یک: پررنگ

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

دکمه دو

در تب Button Two، تنظیمات زیر را پیکربندی کنید:

  1. از سبک های سفارشی برای دکمه یک استفاده کنید: بله
  2. اندازه متن دکمه اول: 14 پیکسل
  3. رنگ یک دکمه: #ffffff
  4. پس زمینه دکمه یک: #0a0a0a
  5. عرض حاشیه تک دکمه: 0 پیکسل
  6. شعاع حاشیه یک دکمه: 10 پیکسل
  7. وزن فونت دکمه یک: پررنگ

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

و آنجاست! دو دکمه منحصر به فرد، یکی برجسته و دیگری که در جایگاه دوم قرار می گیرد.

سربرگ برنامه ریزی مالی با عرض کامل

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

سبک دکمه ها

بیایید نگاهی به سبک های منحصر به فرد برای دکمه های اصلی و ثانویه بیاندازیم.

دکمه یک

در تب Button One، تنظیمات زیر را پیکربندی کنید:

  1. از سبک های سفارشی برای دکمه یک استفاده کنید: بله
  2. اندازه متن دکمه اول: 18 پیکسل
  3. رنگ متن دکمه اول: #ffffff
  4. رنگ پس زمینه دکمه اول: #1b4ffe
  5. بالشتک تک دکمه: 15 پیکسل بالا و پایین. 25 پیکسل چپ و راست

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

دکمه دو

در تب Button Two، تنظیمات زیر را پیکربندی کنید:

  1. از سبک های سفارشی برای دکمه دو استفاده کنید: بله
  2. دکمه دو رنگ متن: #1b4ffe
  3. دکمه دو رنگ پس زمینه: شفاف
  4. نماد دکمه رنگ دو: #1b4ffe

چگونه دکمه های اولیه و ثانویه را در ماژول هدر Divi Fullwidth خود متعادل کنید

افکار نهایی

Divi Fullwidth Header ایجاد بخش های قهرمان خیره کننده در وب سایت شما را آسان می کند. استفاده استراتژیک از دکمه های اصلی و ثانویه تجربه کاربری شما را بهبود می بخشد و به بازدیدکنندگان وب سایت کمک می کند تا اقدامات مورد نظر خود را انجام دهند. گزینه های سفارشی سازی با Fullwidth Header بی پایان هستند، بنابراین از آزمایش کردن لذت ببرید!