تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
Novin.com
تبلیغات
تبلیغات تبلیغات

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

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

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

 

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 2.5 / 5. تعداد رای : 2

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 وردپرس , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=50893
کلمات کلیدی پست :
مطالب مرتبط
13,976افزونه Premium Addons PRO امکانات جانبی صفحه ساز Elementor Pro نسخه 2.0.7 تاریخ : 2020/10/19
4,432دانلود افزودنی Coder برای المنتور تاریخ : 2021/07/28
5,968چگونه صفحات ساخته شده با المنتور را بهینه کنیم؟ تاریخ : 2019/12/5
5,996افزایش سرعت سایت ساخته شده با المنتور تاریخ : 2020/01/25
7,484ایجاد اسکرول افقی در پس‌زمینه با المنتور تاریخ : 2020/02/3
8,644دانلود قالب فارسی و فروشگاهی Zigcy Lite برای وردپرس تاریخ : 2020/06/14
6,484ساخت مگامنو های حرفه ای در المنتور با افزونه HT Menu Pro تاریخ : 2020/07/7
82,848افزونه پاورپک با 60 ابزارک کابردی برای المنتور PowerPack تاریخ : 2021/02/15
3,752چگونه صفحه نخست سفارشی در وردپرس بسازیم؟ تاریخ : 2019/10/22
5,752چگونه با کمک المنتور یک کادر ایجاد کنیم؟ تاریخ : 2020/04/6
5,944Visual Composer یا Elementor ، کدامیک را انتخاب می‌کنید؟ تاریخ : 2019/08/11
4,236دانلود افزونه TM Elementor Addons – افزودنی مخصوص المنتور تاریخ : 2022/01/17
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file
تبلیغات