چگونه دکمه هایی با آیکون های Divi ایجاد کنیم

دکمه های دارای فونت نمادین در دنیای طراحی وب کاربردهای زیادی دارند. از آنجا که قلم های نمادین در اندازه ها و اندازه های مختلف ، واضح و روشن هستند ، خوب است از آنها در دکمه ها استفاده کنید و ایجاد یک دکمه با فونت های نمادین در Divi با استفاده از قلم های موجود در کتابخانه بسیار آسان است " ElegantIcons" در این آموزش ، من به شما نشان می دهم که چگونه می توانید با استفاده از ماژول دکمه Divi از فونت های آیکون برای ایجاد یک دکمه آیکون استفاده کنید.

برخی از نکات برجسته این آموزش عبارتند از:

• نحوه استفاده ElegantIcons برای افزودن یک نماد به عنوان متن دکمه
• چگونه می توان لایه padding و حاشیه را اضافه کرد تا دکمه به صورت یک مربع یا دایره کامل درآید
• نحوه جایگزینی نماد دکمه با یک نماد متفاوت هنگام شناور کردن
• نحوه قرار دادن یک نماد دکمه برای روی هم قرار دادن یک تصویر
• و بیشتر ...

بررسی

در اینجا پیش نمایش آنچه در آینده است ...

چه چیزی نیاز دارید؟

برای این آموزش از موارد زیر استفاده خواهم کرد:

• تم دیوی (به طور مشخص)
• آیکون های قلم شیک ، یک آموزش در مورد تم زیبا بسیار دقیق تر است هنگامی که فایل zip را از پست وبلاگ بارگیری کردید ، آن را به داخل پرونده قلم eleganticons.ttf می کشیم تا به عنوان یک فونت سفارشی برای ماژول دکمه های ما استفاده شود.
• صفحه اصلی تختخواب و صبحانه (در دسترس رایگان از Divi Builder)

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

قلم Elegant Icons را به ماژول دکمه خود اضافه کنید

ماژول دکمه را اضافه کنید

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

قلم نماد شیک را بکشید

برای گرفتن بازی رنگ ElegantFontsمی توانید بارگیری کنید این بسته فونت از طریق این لینک. آن را استخراج کنید محتویات از فایل زیپ و با رفتن به elegant_font > HTML CSS > کلاس، فایل‌های فونت نماد زیبا را پیدا کنید. سپس فایل "ElegantIcons.ttf" را به رایانه خود بکشید و آن را در سازنده تصویری رها کنید.

با این کار حالت خودکار بارگیری خودکار ظاهر می شود. برای بارگیری فونت در Divi Builder کافیست روی دکمه بارگیری کلیک کنید.

اکنون هنگام سفارشی کردن قلم mod در سازنده بصری ، به قلم icon elegant دسترسی خواهید داشت.

به تنظیمات ماژول دکمه بروید و فونت دکمه را با قلم Elegant Icon جدیدی که بارگیری کرده اید به روز کنید. در لیست نمادها در زیر "قلم های سفارشی" ظاهر می شود.

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

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

نمادهای دکمه را در حالت شناور قرار دهید

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

دکمه اندازه متن: 30px نماد دکمه: به تصویر صفحه مراجعه کنید (این نمادی خواهد بود که جایگزین نماد قلم استفاده شده برای دکمه می شود) دکمه نماد رنگ: # 0c71c3 (که باید با رنگ استفاده شده برای متن دکمه مطابقت داشته باشد ) قرار دادن دکمه دکمه: دکمه سمت چپ رنگ متن شناور: rgba (255,255,255,0،1،1،XNUMX) (این امر کاملاً شفاف است تا قلم نماد دکمه شناور را پنهان کند). پر کردن سفارشی: اول سمت چپ ، XNUMX راست (این پر کردن جایگزین شدن در حالت شناور می شود)

اکنون تنها کاری که باید انجام دهیم این است که حاشیه عنصر جلو را در css سفارشی جایگزین کنیم. به برگه Advanced بروید و کد CSS زیر را در قسمت جلو وارد کنید:

اکنون نماد دکمه شما با نماد شناور روی جایگزین می شود.

دکمه های نماد خلاق با دایره با اندازه متن دکمه مقیاس بندی شده است

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

این ترفند این است که دکمه خود را با استفاده از واحد طول "em" فاصله دهید. این واحد طول نسبت به اندازه متن دکمه شماست. بنابراین اگر اندازه متن دکمه 30px باشد ، 1em نیز 30px است (2em 60px خواهد بود و غیره ...). با دانستن این موضوع ، فقط باید مطمئن شویم که بالشتک اطراف دکمه ما از هر 4 طرف یکسان خواهد بود. اما آنچه ممکن است در نظر نگرفته باشید این است که ارتفاع متن متن دکمه به طور پیش فرض 1.7em است. این بدان معنی است که وقتی مقادیر بالشتک بالا و پایین خود را اضافه می کنیم ، باید این مسئله را در نظر بگیریم.

برای آن دسته از شما که می خواهید ریاضیات مربوط به مقادیر بالشتک مورد نیاز برای ایجاد دکمه های دایره را بدانید ، در اینجا آمده است:

برای پر کردن چپ و راست ، هر دو را روی 1em تنظیم کنید. این بدان معنی است که عرض کل دکمه شما 90px (یا 3em) خواهد بود زیرا ...

بالشتک 30px در سمت چپ + 30px برای نماد قلم + لمس 30px سمت راست = کل 90px

ارتفاع خط متن دکمه 1.7em است ، که معادل 170٪ اندازه متن دکمه (30 پیکسل) است که 51 پیکسل است.

برای پر کردن بالا و پایین ، هر دو را روی 0,65em تنظیم کنید. 0.65em معادل 65٪ اندازه متن دکمه (30 پیکسل) است که برابر با 19.5 پیکسل است.

بنابراین ...

بالشتک بالایی 19.5px + ارتفاع خط 51px + بالشتک پایین 19.5px = کل 90px

این بدان معناست که وقتی متن دکمه روی 30px تنظیم شود ، اندازه کل دکمه 90px در 90px خواهد بود (یک مربع کامل). در واقع ، شما می توانید اینگونه فکر کنید. صرف نظر از اندازه متن دکمه ، کل اندازه دکمه 3 برابر مقدار است. بنابراین ، متن دکمه 40px یک دکمه 120px در 120px و غیره ایجاد می کند.

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

در اینجا چیزی است که شما نیاز دارید دکمه ی خود را به دکمه دایره تغییر دهید:

دکمه ی شعاع مرز: 50٪
اثاثه یا لوازم داخلی سفارشی: 0.65em بالا، 0.65em پایین، 1em راست، 1em سمت چپ

به یاد داشته باشید ، شما می توانید اندازه متن دکمه را تنظیم کنید و دکمه کاملاً مانند اندازه متن پر شود.

دکمه های اضافه کردن به Divi

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

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

برای افزودن طرح به صفحه خود ، با کلیک روی نماد بنفش در پایین صفحه ، منوی تنظیمات را باز کنید (مطمئن شوید که مولد بصری فعال است). سپس بر روی نماد Load from library کلیک کنید. طرح صفحه اصلی تختخواب و صبحانه را انتخاب کرده و برای نصب طرح در صفحه بر روی دکمه "استفاده از این طرح" کلیک کنید.

افزودن دکمه نماد به تصویر

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

بخش "درباره ما" را در صفحه اصلی جستجو کنید. سپس یک ماژول دکمه درست زیر یکی از تصاویر استفاده شده برای ارائه "اتاق دوتخته" (اولین ستون در ستون اول ردیف سه ستونی) اضافه کنید.

سپس تنظیمات دکمه را باز کرده و "P" بزرگ را در جعبه متن دکمه قرار دهید. هنگامی که مجموعه های جذاب پس زمینه مانند قلم دکمه را انتخاب کنید ، این در نماد ما تغییر می کند.

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

حال بر روی ماژول اضافه شده در زیر کلیک راست کرده و "سبک دکمه چسباندن" را انتخاب کنید.

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

دکمه فونت: فونت بسیار معروف
دکمه قلم عرض حاشیه: 0px
نمایش نماد دکمه: نه

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

Padding سفارشی: 0.65em بالا، 0.65em پایین، 1em چپ، 1em راست

برای قرار دادن دکمه به گونه ای که گوشه پایین سمت راست تصویر را پوشش دهد ، ابتدا باید حاشیه پایین را از ماژول تصویر بالا حذف کنید. تنظیمات Image Image Module را مستقیماً بالای دکمه باز کنید و Bottom Margin را روی 0px تنظیم کنید.

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

همانطور که قبلاً در این مقاله ذکر شد ، با پر کردن سفارشی ، می توانیم اندازه دقیق دکمه خود را بر اساس اندازه فعلی متن دکمه بدانیم. از آنجا که اندازه متن دکمه 20 پیکسل است ، ما می دانیم که ارتفاع دکمه ما 3 برابر است (3 برابر اندازه متن دکمه) ، که 60 پیکسل است. بنابراین ، باید برای دکمه خود حاشیه سفارشی را به شرح زیر تنظیم کنیم:

حاشیه سفارشی: -60px بالا

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

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

از آنجا که حاشیه پایین تصویر را حذف کردیم ، می توانیم به راحتی و با استفاده از گزینه Extend Styles این تغییر را برای همه تصاویر موجود در بخش اعمال کنیم. بر روی تصویر کلیک راست کرده و "Extend Picture Styles" را انتخاب کنید.

در کادر محاوره ای Extend Styles ، "این بخش" را برای گزینه Across انتخاب کرده و بر روی دکمه Expand کلیک کنید. اکنون همه تصاویر حاشیه پایینی 0px دارند.

مرحله آخر صرفاً کپی و چسباندن ماژولهای دکمه در زیر هر تصویر است.

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

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

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

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

در اینجا یک تصویر از شخصیت ها با نماد قلم مربوطه است:

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

آخرین افکار

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

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