تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
کالیگرافی 1 پاسخ 217 بازدید باز نشدن سایت با موبایل 0 پاسخ 300 بازدید سرعت پایین سایت 1 پاسخ 386 بازدید مخفی کردن یک دسته بندی 0 پاسخ 402 بازدید عدم نمایش منو در وردپرس 0 پاسخ 409 بازدید راهنمایی در راستچین سازی 4 پاسخ 1719 بازدید لینکدهی اینستاگرام و تلگرام 6 پاسخ 3632 بازدید فروش دامنه 0 پاسخ 646 بازدید طراحی سایت 0 پاسخ 610 بازدید 5 ارز دیجیتال برتر برای سرمایه گذاری در سال 2021 0 پاسخ 1317 بازدید

تبلیغات
تبلیغات تبلیغات

ایجاد دکمه در المنتور با کمک آیکون‌ها

مقالات,آموزش,ترفند , وردپرس

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

 

ایجاد دکمه در المنتور

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

 

چگونگی نمایش دکمه به صورت آیکون با المنتور

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

ایجاد دکمه در المنتور با کمک آیکون‌ها

قدم دوم: ساختار بخش ایجاد شده را تعیین کنید. در اینجا حالت تک ستونه را انتخاب کردیم. شما می‌­توانید برای قرارگیری تعداد آیکون­‌های بیشتر در کنارهم، حالت دیگری را انتخاب کنید. این امر کاملا بستگی به نوع سلیقه و نیاز شما دارد.

ایجاد دکمه در المنتور با کمک آیکون‌ها

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

ایجاد دکمه در المنتور با کمک آیکون‌ها

قدم چهارم: با کلیک کردن بر روی آیکون همانند تصویر زیر، آیکون پیش فرض را تغییر دهید و آیکون موردنظر را از مجموعه مشخص شده انتخاب کنید.

ایجاد دکمه در المنتور با کمک آیکون‌ها

با کلیک کردن بر روی آیکون، مجموعه آیکون­‌ها به صورت زیر نمایش داده می­‌شود. یک مورد از آیکون­‌ها را انتخاب و تغییرات را ذخیره کنید:

ایجاد دکمه در المنتور با کمک آیکون‌ها

با تعیین آیکون به برگه اصلی تنظیمات المنتور برمی­‌گردید. در اینجا می‌­توانید نوع نمایش را تغییر دهید و یا به صورت پیش فرض بگذارید. با تعیین نوع نمایش بایستی شکل آن را هم مشخص کنید. با تمامی این عملیات می‌خواهیم نمایش دکمه در المنتور را امکان‌پذیر سازیم. برای نمونه در تصویر زیر حالت نمایش را قالب­‌دار و شکل آن را گرد انتخاب کرده‌­ایم:

ایجاد دکمه در المنتور با کمک آیکون‌ها

قدم پنجم: برای انجام تنظیمات بیشتر به سربرگ استایل بروید. در اینجا رنگ، سایز، حاشیه و… آیکون قابل تغییر است. همانطور که مشاهده می­‌کنید رنگ آیکون نسبت به حالت پیش‌فرض آن تغییر پیدا کرده است:

ایجاد دکمه در المنتور با کمک آیکون‌ها

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

ایجاد دکمه در المنتور با کمک آیکون‌ها

قدم ششم: حال برای نمایش آیکون به صورت دکمه و لینک‌دار شدن آن به تب محتوا بازگردید و در بخش پیوند، لینکی را به ان اختصاص دهید.

ایجاد دکمه در المنتور با کمک آیکون‌ها

در آخر هم تغییرات را ذخیره کنید تا نتیجه تنظیمات در سایت­تان قابل مشاهده باشد. به همین راحتی امکان ایجاد دکمه در المنتور را فراهم کردیم.

نکته: در تب پیشرفته تنظیمات دیگری وجود دارد که با مراجعه به این تب می‌­توانید پس زمینه، حاشیه و… برای آیکن تعیین کنید.

دانلود


هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=50893
کلمات کلیدی پست :
مطالب مرتبط
10,740افزایش امکانات صفحه ساز Elementor با افزونه Elementor Extras نسخه 2.2.20 تاریخ : 2020/02/20
3,344دانلود قالب فارسی و فروشگاهی Zigcy Lite برای وردپرس تاریخ : 2020/06/14
42,916افزونه پاورپک با 60 ابزارک کابردی برای المنتور PowerPack تاریخ : 2020/09/17
2,288چگونه سرعت سایت وردپرسی را افزایش دهیم؟ تاریخ : 2019/09/24
2,160چگونه تصاویر سه بعدی با المنتور بسازیم؟ تاریخ : 2020/01/22
1,964افزونه ساخت اسلایدر و کروسل برای المنتور Glider تاریخ : 2021/01/2
4,312افزونه Premium Addons PRO امکانات جانبی صفحه ساز Elementor Pro نسخه 2.0.7 تاریخ : 2020/10/19
2,784Visual Composer یا Elementor ، کدامیک را انتخاب می‌کنید؟ تاریخ : 2019/08/11
21,100افزایش امکانات صفحه ساز Elementor با افزونه فارسی JetElements نسخه 2.5.3 تاریخ : 2020/12/27
1,572چگونه صفحه نخست سفارشی در وردپرس بسازیم؟ تاریخ : 2019/10/22
2,604ساخت آیکون های سفارشی در المنتور چگونه است؟ تاریخ : 2020/01/9
2,424چگونه صفحات ساخته شده با المنتور را بهینه کنیم؟ تاریخ : 2019/12/5
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
تبلیغات
تبلیغات
تبلیغات