جستجو برای:
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ
 
کنترل وب
دسترسی سریع
  • طراحی سایت
  • المنتور
  • وردپرس
  • ووکامرس
0

ورود و ثبت نام

  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ

بلاگ

کنترل وببلاگویدئوساخت دکمه جذاب در المنتور

ساخت دکمه جذاب در المنتور

https://ctrlweb.ir/wp-content/uploads/2022/05/ساخت-دکمه-جذاب-در-المنتور.mp4

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

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

ساخت-دکمه-جذاب-در-المنتور

توی قدم اول در ساخت دکمه جذاب در المنتور،باید یک بخش(سکشن) ایجاد کنیم تا بتونیم المان دکمه رو توی یکی از ستون های این بخش قرار بدیم.

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

 

Screenshot 21

 

Screenshot 22

 

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

 

Screenshot 23

 

بعد از درست کردن بخش، باید المان دکمه رو از المان های المنتور، انتخاب کنیم و توی ستون دلخواه بخش موردنظر بزاریم. اگرم پیداش نکردین می تونین از قسمت بالای نوار “دکمه” رو سرچ کنین.

Screenshot 24

 

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

Screenshot 25

 

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

 

Screenshot 26

 

همچنین مثل قسمت رنگ متن، رنگی رو برای خود دکمه در نظر میگیریم. برای اینکه این دکمه حالت شفاف و داشته باشه، با استفاد قسمتی که توی تنظیم رنگ هست مقدار Transparency  اونو کم می کنیم. درست مثل تصویر زیر:

Screenshot 27

 

در ویرایش دکمه،از قسمت استایل، مقدار نوع کادر رو روی یکپارچه میزاریم و با تنظیم اندازه عرض در کادر پایین اون؛ عرضی رو مشخص می کنیم تا بتونیم حاشیه ای رو برای دکممون تعیین کنیم.

Screenshot 30

این کار باعث میشه کادر دکمه به شکل زیر در بیاد.

 

Screenshot 32

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

هم چنین برای دکمه فاصله داخلی 15px رو در کادر فاصله داخلی تنظیم می کنیم.

 

Screenshot 34

 

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

 

Screenshot 35

 

حالا اگر روی دکمتون موس رو نگه دارین( هاور کنین)، می بینین که دکمه کارایی خودشو به دست آورده و کار ساخت دکمه جذاب در المنتور تمومه!

توی قطعه کد زیر قسمتی به نام lightColor وجود داره که میتونین با تغییر کد رنگی اون به رنگ دلخواهتون، رنگ قسمت رنگی دکمه رو که ایجاد کننده انیمیشن روشناییه تغییر بدین.

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

قطعه کد:

				
					:root {
  --lightColor: #ff1f71;
 
}
 selector a{
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    transition: 0.5s;
    z-index: 1;
    backdrop-filter: blur(5px);
}

selector a:hover{
    font-size:100%;
    cursor: pointer;
    
}
selector::before{
       position: absolute;
   content: '';
    top:-30%;
   left:50%;
   width:20px ;
   height:75px;
   border-radius: 30px;
  background:  var(--lightColor);
 transform :translateX(-50%);
 transition: 0.5s;

}
selector:hover::before{

    top: 0px;
   left:50%;
   width:100%;
    height:100%;
     background:  var(--lightColor);
   box-shadow: 0 0 5px  var(--lightColor),0 0 15px  var(--lightColor),0 0 30px  var(--lightColor),0 0 60px  var(--lightColor);
   border-radius: 30px;
 transition-delay:0.5s;
}

				
			
برای امتیاز به این نوشته کلیک کنید!
[کل: 2 میانگین: 5]
اشتراک گذاری:
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!
مطالب زیر را حتما بخوانید
  • لیست قیمت در المنتور - کنترل وب
    لیست قیمت در المنتور

    12 بازدید

  • z ایندکس در المنتور | کنترل وب
    z ایندکس در المنتور

    14 بازدید

  • تغییر عرض سکشن در المنتور-کنترل وب
    تغییر عرض سکشن در المنتور

    22 بازدید

  • ساخت خط عمودی در المنتور-کنترل وب
    ساخت خط عمودی در المنتور

    33 بازدید

  • ماسک در المنتور-کنترل وب
    ماسک (Mask) در المنتور

    34 بازدید

  • نصب وردپرس روی لوکال هاست (زمپ) - کنترل وب
    نصب وردپرس روی لوکال هاست (زمپ)

    48 بازدید

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
دسته‌ها
  • آموزش المنتور
  • آموزش وردپرس
  • مقالات
  • ویدئو
نوشته‌های تازه
  • لیست قیمت در المنتور
  • z ایندکس در المنتور
  • تغییر عرض سکشن در المنتور
  • ساخت خط عمودی در المنتور
  • ماسک (Mask) در المنتور
لوگو کنترل وب

کنترل وب

مرجع آموزش هنر طراحی سایت

کنترل وب

مرجع آموزش هنر طراحی سایت

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

Telegram Instagram

دسترسی سریع

  • آموزش وردپرس
  • آموزش المنتور
  • آموزش ووکامرس
  • آموزش سئو
  • تریک css
  • آموزش وردپرس
  • آموزش المنتور
  • آموزش ووکامرس
  • آموزش سئو
  • تریک css

لینک های پر بازدید

  • ترفند المنتور
  • آموزش رایگان المنتور
  • دوره جامع وردپرس
  • آموزش html-css
  • مینی دوره آموزش وردپرس

جدید ترین آموزشها

لیست قیمت در المنتور

z ایندکس در المنتور

تغییر عرض سکشن در المنتور

ساخت خط عمودی در المنتور

ماسک (Mask) در المنتور

Telegram Instagram

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

لوگو کنترل وب
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت