Divi: نحوه سفارشی سازی نمادهای سبد و جستجوی ماژول "Fullwidth Menu".

آیا می خواهید بدانید که چگونه می توان نمادهای سبد خرید و جستجوی ماژول Divi Fullwidth Menu را سفارشی کرد؟

منوی شما وب سایت یکی از مهم ترین بخش های شما است وب سایت به دلیل تأثیر مستقیمی که می تواند بر نحوه پیمایش کاربران شما داشته باشد محتویات.

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

ماژول "Fullwidth Menu" Divi با این امکان که به شما امکان می دهد سبد خرید و نمادهای جستجو را به دلخواه خود سفارشی کنید، انعطاف پذیری زیادی را ارائه می دهد.

در این آموزش قصد داریم سه طرح مختلف برای ماژول "Fullwidth Menu" با سبک های مختلف برای آیکون های سبد خرید و جستجو را به شما نشان دهیم.

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

بررسی

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

طرح اول

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

طرح دوم

برای طرح دوم دو آیکون را در سمت راست قرار می دهیم و روی hover رنگ را تغییر می دهیم.

طرح سوم

برای طراحی سوم، از CSS اضافی برای سفارشی کردن آیکون ها استفاده می کنیم.

دفعات بازدید: Divi: نحوه سفارشی سازی ماژول "Countdown Timer" با یک GIF

سفارشی سازی سبد خرید و نمادهای جستجوی ماژول "Fullwidth Menu" Divi

سربرگ جهانی ایجاد کنید

برای هر یک از سه طرح منو، با باز کردن سازنده شروع می‌کنیم تم از دیوی

برای انجام این کار، از داشبورد وردپرس، به Divi > تم ساز

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

سپس انتخاب کنید سربرگ جهانی بسازید

یک بخش جدید با عرض کامل درج کنید.

سپس قسمت قبلی را حذف کنید.

ماژول را وارد کنید منوی تمام عرض.

لوگوی خود را از منو آپلود کنید.

اکنون آماده ادامه کار هستیم.

طرح اول

اولین طراحی ما از جلوه های شناور داخلی Divi برای تغییر رنگ متن و نمادها در شناور استفاده می کند. بیا شروع کنیم.

همچنین ببینید: Divi: چگونه یک نماد همبرگر را به ماژول منو اضافه کنیم

با باز کردن تنظیمات ماژول و افزودن پس‌زمینه شروع کنید.

پس زمینه: #fbf9f4

برو به برگه طرح و طرح آرم را انتخاب کنید.

سبک: آرم درون خطی مرکزی

Divi Style سبد خرید نمادهای جستجوی منوی پهنای کامل طرح بندی 1 سبک طرح بندی

حال اجازه دهید برخی از تنظیمات متن منو را تغییر دهیم.

رنگ پیوند فعال: #09148c
قلم منو: روبی
وزن قلم منو: پررنگ
سبک قلم: TT و U (با حروف بزرگ و خط دار)

سپس رنگ متن منو، اندازه متن و فاصله حروف را تنظیم کنید.

رنگ متن منو: #000000
اندازه متن منو: 21 پیکسل
فاصله حروف: 1 پیکسل

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

رنگ متن منو (Hover): #b70018

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

رنگ پس‌زمینه منوی کشویی: #fbf9f4
رنگ خط منوی کشویی: #b70018
رنگ متن منو: #000000

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

رنگ متن منوی کشویی (Hover): #b70018

منوی کشویی رنگ پیوند فعال: #b70018
رنگ پس زمینه منوی موبایل: #fbf9f4
رنگ متن منوی موبایل: #000000

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

رنگ متن منوی موبایل (Hover): #b70018

سبد خرید و سفارشی سازی نماد جستجو

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

نمایش نماد سبد خرید: بله
نمایش نماد جستجو: بله

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

رنگ نماد سبد خرید: #000000
رنگ نماد جستجو: #000000
رنگ نماد منوی همبرگر: #000000

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

رنگ نماد سبد خرید (Hover): #b70018
رنگ نماد جستجو (Hover): #b70018
رنگ نماد منوی همبرگر (Hover): #b70018

تنظیم اندازه نماد

اندازه قلم نماد سبد خرید: 25 پیکسل
اندازه قلم نماد جستجو: 25 پیکسل

به بخش بروید فاصله، سپس بالشتک بالا و پایین را تنظیم کنید.

بالشتک (بالا و پایین): 5 پیکسل

در نهایت، یک حاشیه به بالا و پایین ماژول Menu اضافه می کنیم. تنظیمات حاشیه را باز کنید.

پهنای حاشیه بالا: 3 پیکسل

عرض حاشیه پایین: 3 پیکسل

طراحی نهایی

و در اینجا طراحی نهایی ما است.

طرح دوم

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

ابتدا یک گرادینت پس زمینه به ماژول Menu اضافه می کنیم. گرادیان دارای سه توقف است که تنظیمات به شرح زیر است:

توقف های گرادیان:
- 0٪: rgba (255,255,255,0)
- 23٪: rgba (252,199,76,0.65)
- 82٪: rgba (232,119,255,0.32)

نوع گرادیان و موقعیت گرادیان را تنظیم کنید.

نوع گرادیان: مخروطی
موقعیت گرادیان: پایین

سپس به برگه بروید طرح و چیدمان را تنظیم کنید (طرح).

سبک: متمرکز

به بخش بروید منوی متنی برای سفارشی کردن طراحی متن منو

رنگ پیوند فعال: #FFFFFF
منوی فونت: Syne
وزن قلم: پررنگ
سبک قلم منو: TT (حروف بزرگ)
منوی رنگ متن: #FFFFFF

حالا اندازه متن منو و فاصله حروف را تنظیم کنید.

اندازه متن منو: 20 پیکسل
فاصله حروف منو: 2 پیکسل

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

اندازه متن منو: 22 پیکسل

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

رنگ پس‌زمینه منوی کشویی: #fcda90
رنگ خط منوی کشویی: #FFFFFF
منوی رنگ متن: #FFFFFF
رنگ پیوند فعال منوی کشویی: #FFFFFF

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

رنگ پس زمینه منوی موبایل: #fcda90
رنگ متن منوی موبایل: #FFFFFF

سبد خرید و سفارشی سازی نماد جستجو

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

نماد سبد خرید: بله
نمایش نماد جستجو: بله

به برگه برگردید طرح و تنظیمات آیکون را باز کنید.

رنگ نماد سبد خرید: #ffffff
رنگ نماد جستجو: #ffffff
رنگ نماد منوی همبرگر: #ffffff

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

رنگ نماد سبد خرید (Hover): #fcac00
رنگ نماد جستجو (Hover): #fcac00
رنگ نماد منوی همبرگر (Hover): #fcac00

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

اندازه قلم نماد سبد خرید: 25 پیکسل
اندازه قلم نماد جستجو: 25 پیکسل

برای افزایش اندازه نماد در حالت شناور، گزینه hover را انتخاب کنید.

اندازه قلم نماد سبد خرید (Hover): 30 پیکسل
اندازه قلم نماد جستجو (Hover): 30 پیکسل

در نهایت به بخش بروید فاصله و بالشتک بالا و پایین را تنظیم کنید.

بالشتک (بالا و پایین): 5 پیکسل

طراحی نهایی

در اینجا طراحی نهایی طرح منوی دوم ما است.

طرح سوم

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

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

بیایید شروع.

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

پس زمینه: #efb6ac

سپس به برگه بروید طرح و گزینه را باز کنید منوی متنی.

رنگ پیوند فعال: #e84322
قلم منو: Cinzel
منوی وزن قلم: فوق العاده پررنگ

ما می خواهیم رنگ متن منو در حالت شناور تغییر کند. ابتدا رنگ متن منو را تنظیم کنید.

منوی رنگ متن (رومیزی): #e7644a

روی نماد شناور کلیک کنید و رنگ متن شناور را تنظیم کنید.

رنگ متن منو (Hover): #e84322

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

اندازه متن منو: 21 پیکسل
فاصله حروف منو: 1 پیکسل

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

فاصله حروف منو: 2 پیکسل

تراز متن را در سمت چپ تنظیم کنید.

تراز متن: چپ

سپس تنظیمات زیر را از منوی کشویی تغییر دهید.

رنگ پس‌زمینه منوی کشویی: #efb6ac
رنگ خط منوی کشویی: #e7644a

دفعات بازدید: Divi: نحوه ایجاد بخش Testimonials در قالب یک شبکه

رنگ متن منوی کشویی
- دسکتاپ: #e7644a
- شناور: #e84322
منوی کشویی رنگ پیوند فعال: #e84322

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

رنگ پس زمینه منوی موبایل: #efb6ac
رنگ متن منوی موبایل:
- دسکتاپ: #e7644a
- شناور: #e84322

سبد خرید و سفارشی سازی نماد جستجو

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

نمایش نماد سبد خرید: بله
نمایش نماد خرید: بله

سپس به برگه برگردید طرح و تنظیمات آیکون را باز کنید. رنگ نماد را تنظیم کنید.

رنگ نماد سبد خرید: #e7644a
رنگ نماد جستجو: #e7644a
رنگ نماد منوی همبرگر: #e7644a

رنگ این آیکون ها با شناور تغییر می کند. گزینه های شناور را فعال کنید و رنگ را تنظیم کنید.

رنگ نماد سبد خرید (Hover): #e84322
رنگ نماد جستجو (Hover): #e84322
رنگ نماد منوی همبرگر (Hover): #e84322

همچنین می‌خواهیم اندازه نماد در حالت شناور افزایش یابد. ابتدا اندازه فونت آیکون را تنظیم کنید.

اندازه قلم نماد سبد خرید: 22 پیکسل
اندازه قلم نماد جستجو: 22 پیکسل

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

اندازه قلم نماد سبد خرید (Hover): 26 پیکسل
اندازه قلم نماد جستجو (Hover): 26 پیکسل

سپس به بخش بروید فاصله و بالشتک بالا و پایین را اضافه کنید.

بالشتک (بالا و پایین): 5 پیکسل

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

شما می توانید این CSS را مطابق با طراحی ماژول منوی خود سفارشی کنید.

تنظیمات قالب هدر را باز کنید، سپس به تب بروید فناوری و CSS سفارشی زیر را وارد کنید.

.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}