Divi: نحوه ایجاد دکمه های آیکون با ماژول Icon

آیا می خواهید بدانید که چگونه از ماژول Icon استفاده کنید DIVI برای ایجاد آیکون های سفارشی؟

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

در آموزش امروز قصد داریم نحوه طراحی دکمه های آیکون را به شما نشان دهیم DIVI. ایجاد یک دکمه آیکون در DIVI انجام بسیار ساده و سرگرم کننده است. 

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

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

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

بررسی

در اینجا یک نمای کلی از دکمه‌های آیکونی که در این آموزش ایجاد خواهیم کرد، آورده شده است.

یک صفحه جدید با Divi Builder ایجاد کنید

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

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

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

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

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

با ماژول Divi Icons دکمه های آیکون ایجاد کنید

قسمت 1: ایجاد یک دکمه آیکون

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

سپس یک ماژول جدید اضافه کنید شمایل به ستون

نماد، URL پیوند و رنگ پس‌زمینه

زیر زبانه محتوا تنظیمات ماژول نماد، موارد زیر را به روز کنید:

• نماد: فلش سمت راست (نگاه کنید به تصویر)
• نشانی اینترنتی پیوند نماد: # (فعلا فقط یک پرکننده)
• پس زمینه: #3e22ff

مرز و شعاع مرز

زیر زبانه طرح، موارد زیر را به روز کنید:

• گوشه های گرد: 10 پیکسل
• عرض حاشیه: 2 پیکسل
• رنگ حاشیه: #7272ff

جعبه سایه

• سایه جعبه: اسکرین شات را ببینید
• رنگ سایه: rgba(62,34,255,0.48)

مطابقت با فضای قابل کلیک با اندازه دکمه نماد

در حال حاضر، ماژول نماد تمام عرض ظرف (یا ستون) والد را در بر می گیرد. این بدان معنی است که فضای قابل کلیک بزرگتر از دکمه نماد واقعی است. 

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

در این مثال، عرض کل دکمه 94 پیکسل است.

در تب پیشرفته، CSS سفارشی زیر را به عنصر اصلی اضافه کنید:

max-width: 94px

در اینجا نتیجه است.

قسمت 2: یک دکمه آیکون مربع ایجاد کنید

برای ایجاد دکمه آیکون مربعی خود، ردیف حاوی اولین دکمه نمادی را که ایجاد کردیم، کپی کنید. این به ما یک دکمه تکراری در ردیف می دهد تا با آن کار کنیم.

در حالی که نماد را در مرکز نگه دارید، ارتفاع و عرض یکسانی به آن بدهید

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

به منظور ایجاد یک دکمه کاملا مربعی که نماد را در حالت شناور درگیر می کند، می توانیم CSS سفارشی را برای تعیین ارتفاع و عرض برای نماد و همچنین با استفاده از ویژگی CSS Flex در مرکز نماد اضافه کنیم.

در اینجا چگونه است.

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

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

در زیر تب پیشرفته، CSS سفارشی زیر را به آن اضافه کنید عنصر نماد :

height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;

اکنون دکمه آیکون دارای ارتفاع و عرض برابر با 90 پیکسل خواهد بود که آن را به یک مربع کامل تبدیل می کند. همچنین ویژگی flex نماد را در مرکز ماژول تراز می کند. این به شما امکان می دهد تا اندازه آیکون را در ماژول آیکون به راحتی به روز کنید.

برای تکمیل این دکمه، یک گرادیان پس زمینه و یک رنگ حاشیه سفید به صورت زیر به آن می دهیم:

• توقف های گرادیان:
  • 0%: #3e22ff
  • 100%: #ff2000

• رنگ حاشیه: #fff

نتیجه نهایی است.

دکمه آیکون دایره ای ایجاد کنید

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

اکنون تنظیمات مربوط به آیکون تکراری جدید خود را در زیر تب باز کنید طرح، شعاع حاشیه (یا گوشه های گرد) را به صورت زیر به روز کنید:

• گوشه های گرد: 50%

و دقیقاً مانند آن، ما یک دکمه آیکون دایره ای داریم!

برای تغییر کمی طرح، اجازه دهید به ماژول آیکون یک نماد و رنگ پس‌زمینه متفاوت به صورت زیر بدهیم:

• نماد: اسکرین شات را ببینید
• پس زمینه: #121212

در اینجا نتیجه است.

یک منوی افقی دکمه آیکون ایجاد کنید

یک روند محبوب استفاده از نمادها برای ایجاد یک منوی نماد است که معمولاً از چندین دکمه در کنار هم قرار می گیرد. برای این کار می توانیم از ویژگی flex استفاده کنیم. 

در اینجا چگونگی انجام این کار است.

ابتدا یک ردیف جدید به ستونی در صفحه اضافه کنید.

تنظیمات خط را باز کنید و عرض ناودان را به 1 به روز کنید.

• عرض ناودان: 1

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

display:flex;
align-items:center;

یک ماژول جدید اضافه کنید شمایل به ستون

زیر زبانه محتوا تنظیمات نماد، یک نماد را انتخاب کنید و URL پیوند نماد را اضافه کنید.

زیر زبانه طرح، موارد زیر را به روز کنید:

• رنگ نماد: #3e22ff
• اندازه آیکون: 40 پیکسل

• حاشیه (چپ و راست): 10 پیکسل

• عرض حاشیه: 2 پیکسل
• رنگ حاشیه: #3e22ff

تذکر: هنگامی که بعداً موارد بیشتری را اضافه کنیم، حاشیه بین دکمه‌های مجاور فاصله ایجاد می‌کند.

زیر زبانه فناوری، CSS سفارشی زیر را در فیلد اضافه کنید عنصر نماد (همانطور که قبلا برای دکمه آیکون مربع انجام دادیم):

display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;

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

پس از آن، می توانیم به عقب برگردیم و در صورت نیاز آیکون ها را به روز کنیم.

در اینجا نتیجه است.

افکت های شناور به دکمه آیکون اضافه شد

صحبت در مورد طراحی دکمه آیکون بدون ذکر افکت های شناور سخت است. آنها خیلی سرگرم کننده هستند که نمی توان آنها را نادیده گرفت. 

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

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

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

در این مثال رنگ پس زمینه را از سفید به آبی و نماد را از آبی به سفید تغییر می دهیم.

تغییر نماد در شناور

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

مقیاس دکمه نماد در شناور

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

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

• تبدیل Y: 118٪
• تبدیل X: 118٪

با این کار اندازه دکمه آیکون زمانی که کاربر روی آن قرار می گیرد 18 درصد افزایش می یابد.

چرخش دکمه نماد در شناور

چرخاندن اجسام معلق همیشه یک ریز تعامل سرگرم کننده است. برای چرخاندن یک دکمه آیکون در شناور، می توانیم از گزینه transform rotate استفاده کنیم. اما قبل از آن، بیایید دکمه را دایره ای کنیم تا فقط آیکون به نظر برسد که بچرخد.

برای دایره ای کردن نماد، با فرض مربع بودن دکمه، به سادگی تنظیمات گوشه های گرد را به 50% در هر چهار گوشه به روز کنید.

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

• تبدیل تبدیل Z: 180 درجه

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

نتیجه نهایی

بیایید نگاهی به نتایج نهایی آموزش خود بیندازیم.

دفعات بازدید: Divi: چگونه یک ماژول "Blurb" را در شناور برجسته کنیم و بقیه را تار کنیم

در اینجا سه ​​دکمه آیکون ما (استاندارد، مربع و دایره) وجود دارد.

و در اینجا منوی دکمه افقی آیکون با جلوه های شناور است.

دانلود DIVI در حال حاضر!!!

نتیجه

نحوه طراحی دکمه های نماد برای a را بدانید وب سایت ضروری است. و همانطور که در این آموزش دیدیم، کار با Divi چندان سخت نیست. Divi's Icon Module دارای مجموعه‌ای از گزینه‌های داخلی است که راه را برای طراحی دکمه‌های آیکون خلاقانه باز می‌کند. 

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

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

همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...