Divi: نحوه تعادل دکمه های اولیه و ثانویه ماژول Fullwidth Header

آیا می خواهید ماژول Fullwidth Header Divi را با متعادل کردن دکمه های اصلی و ثانویه سفارشی کنید؟

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

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

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

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

دکمه های اصلی و دکمه های ثانویه به راهنمایی کمک می کنند آخرین بازدید خود را وب سایت به سهام خاص دکمه‌های اولیه معمولاً رایج‌ترین یا مورد نظر هستند و دکمه‌های ثانویه عملکرد کمتری هستند. این به راهنمایی کمک می کند آخرین بازدید به جایی که می خواهند بروند

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

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

بررسی

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

بیایید با ایجاد یک صفحه جدید با Divi Builder شروع کنیم

از داشبورد وردپرس، به صفحات> افزودن جدید برای ایجاد یک صفحه جدید

عنوانی به آن بدهید که برای شما منطقی باشد و کلیک کنید از Divi Builder استفاده کنید

سپس روی کلیک کنید شروع به ساختن کنید (از خراش بسازید)

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

همچنین بخوانید: Divi: نحوه استفاده از ماسک ها و الگوهای پس زمینه برای یک بخش قهرمان

طراحی نمونه اول

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

پیکربندی صفحه ما

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

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

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

1. در برگه "طرح بندی های از پیش ساخته"، از تابع جستجو برای یافتن بسته طرح‌بندی UX استفاده کنید.
2. هنگامی که آن را پیدا کردید، روی آن کلیک کنید. با این کار جزئیات طرح بندی و صفحات موجود ظاهر می شود.
3. با کلیک بر روی فرود، سپس روی کلیک کنید "از این طرح بندی استفاده کنید".

ما بخش بالایی طرح را به عنوان یک ماژول دوباره ایجاد می کنیم سربرگ Fullwidth.

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

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

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

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

روی فلش کلیک کنید "+" برای نمایش بخش های Divi سپس بر روی آن کلیک کنید "تمام عرض". این به طور خودکار کتابخانه Divi Fullwidth Module را نشان می دهد.

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

در کتابخانه ماژول Divi Fullwidth، روی " کلیک کنید سربرگ Fullwidth"

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

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

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

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

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

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

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

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

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

در برگه زمینه، این پارامتر را پیکربندی کنید:

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

سفارشی کردن هدر پهنای کامل

اکنون که محتوای ما تنظیم شده است، بیایید از طریق طرح.

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

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

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

تصویر

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

در برگه تصویر، تنظیمات زیر را پیکربندی کنید:

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

متن عنوان

در اینجا، بیایید متن عنوان این ماژول را سفارشی کنیم. در برگه متن عنوان، این تنظیمات را پیکربندی کنید:

• عنوان :
  • فونت: PT Sans
  • وزن قلم: پررنگ
  • اندازه متن: 5 رم
  • ارتفاع خط: 1,2 em

متن متن

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

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

متن زیرنویس

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

• عنوان فرعی :
  • فونت: Mukta
  • وزن قلم: پررنگ
  • سبک: بزرگ
  • رنگ متن: #13d678
  • فاصله حروف: 3 پیکسل

دکمه یک

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

• از سبک سفارشی برای دکمه یک استفاده کنید: بله
• دکمه یک:
  • رنگ متن: #ffffff
  • رنگ پس زمینه: #13d678
  • عرض حاشیه: 0 پیکسل
  • شعاع حاشیه: 100 پیکسل
  • فونت: Mukta
  • وزن قلم: پررنگ
• نمایش نماد دکمه یک: بله
• نماد: فلش سمت راست
• فقط نمایش نماد در حالت شناور برای دکمه یک: خیر

دکمه دو

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

• استفاده از سبک سفارشی برای دکمه: بله
  • دکمه دو
  • رنگ متن: #ffffff
  • رنگ پس زمینه: #303030
  • عرض حاشیه: 0 پیکسل
  • شعاع حاشیه: 100 پیکسل
  • فونت: Mukta
  • وزن قلم: پررنگ
• نماد نمایش دکمه دو: بله
• نماد دکمه دو: فلش راست
• فقط نمایش نماد روی دکمه شناور دو: بله

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

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

1. دکمه شماره 1 URL پیوند: URL دکمه 1 را در اینجا قرار دهید.
2. دکمه شماره 1 URL پیوند: URL دکمه 2 را در اینجا قرار دهید.

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

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

• روی فلش سبز رنگ در سمت راست پایین پنجره ماژول کلیک کنید.
• ذخیره
• از VisualBuilder خارج شوید.

دفعات بازدید: Divi: چگونه یک بخش Fluid Hero ایجاد کنیم

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

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

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

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

سبک های دکمه

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

دکمه یک

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

• استفاده از سبک های سفارشی برای دکمه یک: بله
• دکمه یک:
  • اندازه متن: 14 پیکسل
  • رنگ متن: #ffffff
  • رنگ پس زمینه: #0a0a0a
  • عرض حاشیه: 0 پیکسل
  • شعاع حاشیه: 10 پیکسل
  • فاصله حروف: 3 پیکسل
  • وزن قلم: پررنگ
  • سبک قلم: TT
• فقط نمایش نماد در شناور برای Buttpn One: بله
• پد یک دکمه: 15 پیکسل (بالا و پایین)، 25 پیکسل (چپ و راست)

دکمه دو

در برگه دکمه دو، تنظیمات زیر را پیکربندی کنید:

• استفاده از سبک سفارشی برای دکمه: بله
  • دکمه دو:
  • اندازه متن: 14 پیکسل
  • رنگ متن: #ffffff
  • رنگ پس زمینه: #0a0a0a
  • عرض حاشیه: 0 پیکسل
  • شعاع حاشیه: 10 پیکسل
  • وزن قلم: پررنگ
  • سبک قلم: TT
• پد دو دکمه: 10 پیکسل (پایین)، 10 پیکسل (چپ و راست)

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

هدر تمام عرض بسته "برنامه ریزی مالی".

سبک های دکمه

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

دکمه یک

در برگه دکمه یک، تنظیمات زیر را پیکربندی کنید:

• از سبک سفارشی برای دکمه یک استفاده کنید: بله
• دکمه یک:
  • اندازه متن: 18 پیکسل
  • رنگ متن: #ffffff
  • رنگ پس زمینه: #1b4ffe
  • padding: 15px()بالا و پایین)؛ 25 پیکسل (چپ و راست)

دکمه دو

در برگه دکمه دو، تنظیمات زیر را پیکربندی کنید:

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

اکنون DIVI را دانلود کنید!!!

نتیجه

ماژول Fullwidth Header Divi ایجاد بخش های قهرمان خیره کننده را آسان می کند وب سایت. 

استفاده استراتژیک از دکمه های اولیه و ثانویه تجربه کاربری شما را بهبود می بخشد و به بازدیدکنندگان وب سایت کمک می کند تا اقداماتی را که می خواهند انجام دهند. 

گزینه های سفارشی سازی با هدر تمام عرض بی پایان هستند، بنابراین از آزمایش کردن لذت ببرید!

اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.

دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...