هاور و سایه ها در طراحی سایت

( )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه بیست و نه

آموزگار :

مهدی جبین پور

حتماً در بازدید از بسیاری از سایت ها، افکت های زیبای Hover را دیده اید. در واقع وقتی نشانگر موس روی عناصر سایت حرکت می کند و ظاهر عناصر تغییر می کنند، از افکت های Hover در طراحی اجزاء سایت استفاده شده است. به کارگیری Hover علاوه بر زیبایی، باعث تعامل بیشتر کاربر با سایت می شود. ( ادامه مطلب … )

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

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

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

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

اورجینال

کیفیت

پشتیبانی

آپدیت

مهدی جبین پور

مـهـدی جـبین پـور

دانشجوی دکتری تجارت الکترونیک ، امیدوارم بتوانم خدمتگزار خوبی برای مردم کشورم باشم.

مهدی جبین پور

مـهـدی جـبین پـور

دانشجوی دکتری تجارت الکترونیک ، امیدوارم بتوانم خدمتگزار خوبی برای مردم کشورم باشم.

هاور و سایه ها در طراحی سایت

( )

در صفحه ­سازهای وردپرس امکان اضافه کردن Hover وجود ندارد. توصیه می­ شود برای ایجاد افکت ­های Hover به عناصر سایت از افزونه مداد زرد استفاده کنید. تهیه افزونه مداد زرد

آموزش Hover با افزونه مداد زرد

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

از منوی سمت راست، روی نام مخصوص المان کلیک کنید.  وضعیت (States) آن را در حالت Hover قرار دهید. حال هر تغییری بر روی المان ایجاد کنید به عنوان Hover در نظر گرفته می­شود.

برای مثال رنگ پس­ زمینه المان را وقتی موس روی آن قرار می­گیرد تغییر دهید. البته می توانید برای المان از قسمت Shadow سایه تعیین کنید.

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

همان طور که گفتیم افزودن افکت­ های Hover به عناصر سایت، باعث تعامل بیشتر کاربران می­شود. ذکر این نکته خالی از لطف نیست که استفاده بیش از حد این افکت ­ها و برای تمامی المان­ ها نیز توصیه نمی­شود.

برای نوشتن دیدگاه باید وارد بشوید.

68 دیدگاه. Leave new

  • علی قاضی
    2025-03-16 17:34

    سلام وثت بخیر…ببخشید من وقتی روی هدر هاور میزنم و تنظیمات رو میخوام بروزرسانی کنم سایتمو ک رفرش میکنم باگ میخوره و چیزی ک طراحی کردم رو نشون نمیده. ممنون میشم راهنمایی کنید(روی چند تا مرورگر امتحان کردم و وضعیت همین بود)

    • محمد قاسمی
      2025-03-19 21:14

      سلام وقت شما بخیر،

       

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

      با تشکر.

  • سعیده سیدکاظمی
    2025-01-06 20:40

    سلام خسته نباشید ممنون از آموزش های خوبتون.
    سوالی داشتم من این قسمت از آموزش رو دیدم و انجام دادم اما وقتی save کردم این پیغام رو برای ویرایشگر المنتور نشون میده
    No route was found matching the URL and request method.
    ممنون میشم راهنمایی کنید.

  • مارال فرهنگ
    2024-12-05 21:52

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

    • محمد قاسمی
      2024-12-08 06:57

      سلام وقت شما بخیر،

       

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

      با تشکر.

  • نفیسه عباس زاده
    2024-11-28 13:13

    سلام اگر اشتباهی دستمون بخوره و کانتینری مخفی بشه چطور برش گردونیم؟چون توی ناوبری هم دیده نمیشه یکبار این اتفاق افتاد و درستش کردم الان یادم رفته

  • shademani
    2024-07-30 12:52

    سلام و عر ض ادب
    در طراحی سایت وردپرسی می توان از کد های CSS خارجی هم استفاده کرد ؟ به طور مثال دستور های CSS بخشی از سایت به جای استفاده از افزونه ها به طور کد توسط طراح نوشته شوند ؟

  • shademani
    2024-07-30 12:49

    سلام و عرض ادب و احترام
    در طراحی وردپرسی و المنتوری می توان از هاور ها و مأوس ایونت های خاص دکمه هم استفاده است ؟ برای نمونه کد هایی CSS که بعد از کلیک روی دکمه حالت آن عوض شود و یا نوشته داخل آن ؟ و برای هاور به عنوان مثال بوردر آن به صورت طیف رنگی متحرک تبدیل شود ؟

    • محمد قاسمی
      2024-07-30 17:10

      سلام وقت شما بخیر،

       

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

      با تشکر.

  • حامد مروتی
    2024-01-02 17:06

    سلام می خواستم بدونم برای تصویر تو قالب ووکامرس میشه هاور تصویر داد اگه میشه داد چه چوری میشه؟

    • کامران قائمی
      2024-01-03 10:48

      سلام وقت شما بخیر،

      منظورتان این است با هاور روی تصویر ، تصویر دوم محصول نمایش داده شود؟

      با تشکر.

      • حامد مروتی
        2024-01-04 09:59

        بله

        • حامد مروتی
          2024-01-04 10:01

          باید از چه افزونه ای یا چه قالبی استفاده کنم ؟

          • کامران قائمی
            2024-01-04 19:44

            اگر قصد استفاده از قالب دارید این ویژگی بصورت حرفه ای در قالب وودمارت در دسترس شما قرار دارد و می‌توانید از آن استفاده کنید.
            باتشکر از شما

          • حامد مروتی
            2024-01-04 19:57

            ببخشید با قالب ووکامرس نمی شه ؟؟

          • کامران قائمی
            2024-01-04 20:42

            قالب سایت شما در حال حاضر چه نام دارد؟

          • حامد مروتی
            2024-01-04 22:01

            ووکامرس

          • کامران قائمی
            2024-01-05 16:43

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

          • حامد مروتی
            2024-01-07 08:34

            پوسته فعال من سلام المنتور

          • کامران قائمی
            2024-01-08 01:57

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

  • امیررضا کریمی
    2023-12-02 00:37

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

  • میترا کلانتری
    2023-11-29 17:47

    سلام وقت بخیر
    چطور میشه با نگه داشتن ماوس روی منو یا یک عکس تو سایت نوشته ای ظاهر بشه و با کنار بردن ماوس اون نوشته پنهان بشه ؟

    • کامران قائمی
      2023-12-01 08:55

      سلام وقت شما بخیر،

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

      با تشکر.

  • رسول آقاعبداللهیان
    2023-10-15 18:55

    سلام وقت به خیر
    حتما دیدید در قالبهای آماده وردپرس مثلا باکس نمایش عکس وجود داره که شامل دکمه و متن و عکس و وقتی موس میره روش همزمان همه به صورت انیمیشن متفاوت حرکت میکنند مثلا عکس یک کادر دروش مساد و دکمه آبی میشه توی این آموزش که گفتید یا افکت های پیش فرض المنتور همچین چیزی وجود نداره برای این موضوع آیا راه حلی وجود دااره ؟

    • کامران قائمی
      2023-10-16 17:42

      سلام وقت شما بخیر،

      در المنتور معمولا این موارد را با ادان های جانبی نظیر پاور پک یا المنت پک طراحی میکنند و بخش ذکر شده برای طراحی این حالات کاربرد خاصی ندارد.

      با تشکر.

  • متین کاردان
    2023-07-11 13:56

    به حالت هاور نمیشه انیمیشن داد؟خیلی خشک سویچ می کنه مثلا با یه قید 1000ms تغییر کنه

  • علی مجد
    2023-06-11 20:46

    اگر بخوایم در حالت هاور از key frame استفاده کنیم چیکار کنیم؟

  • حمیدرضا بردبار
    2023-04-28 14:54

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

  • فاطمه ایرانی
    2023-03-09 11:29

    سلام وقتتون بخیر
    میخوام زمانی که روی المانی hover میشود هم موقع رفت و هم موقع برگشت موس ، المان من hover اش ارام نمایش داده شود. چه کاری باید انجام بدم؟
    از transition هم استفاده کردم ولی فقط زمانی که موس روی المان میرود کار میکند موقع برداشتن موس از روی المان ، خیلی سریع به حالت اولیه اش برمیگردد.

  • علی زاهدی
    2022-11-10 09:54

    درود. برای آموزش ACTIVE STATES هم ویدیو دارید؟
    نمیدونم چرا من اکتیو منو هامو فعال می کنم اعمال نمیشه

  • ابراهيم صالح‎‎
    2022-04-19 02:59

    با درود و سپاس بيكران
    در برخي از تارنماها ديدم كه با هاور كردن صداي دينگ پخش ميشود، يعني هاور صوتي. اين كار چطور انجام ميشود؟

  • سلام خسته نباشید با استفاده از مداد زرد میشه این امکان رو به تصویر داد که وقتی با اشاره گر روی آن ایستادیم تصویر بزرگ تر از دیگر تصاویر شود ؟

    • علی حیدری
      2022-03-12 18:47

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

      البته که با افزونه مداد زرد هم می توان Css های جذاب ایجاد کنید.
      بصورت کلی باید در این افزونه تغییرات مربوط به css انجام شود و موارد مربوط به اصل طراحی با خوده صفحه ساز و امکانات قالب انجام دهید.
      با تشکر

  • فاطمه کرمانی
    2021-08-16 14:20

    سلام خسته نباشید من میخوام وقتی یه المان هاور میشه به مدت یک ثانیه طول بکشه و سریع این اتفاق نیفته
    چطور انجام بدم؟

  • محمدیوسف تنباکوزاده
    2021-08-02 12:45

    سلام خسته نباشید یه سوال :تغییراتی که با مداد زرد انجام میدیم،اگه بعد افزونه پاک کنیم ، اون تغییرات باقی می مونه یا نه؟

  • علی مهدیان
    2021-07-23 19:05

    آقای جبین پور عالی بود عالی خیلی دنبالش میگشتم مرسییییی

  • محمد کاظمی
    2021-06-08 11:58

    با سلام و احترام
    در ” وردپرس ” بدون مداد زرد نمیشه Hover رو ایجاد کرد؟
    اگر میشه لطفا بفرمایید چطور میشه انجام داد؟

    • کارشناس پشتیبانی شماره چهار
      2021-06-08 15:04

      سلام و درود آقای کاظمی عزیز
      برای ایجاد حالت هاور می بایست با css آشنا باشید. در غیر این صورت می بایست از افزونه برای این کار استفاده نمایید.
      با تشکر

  • صدرا سامانی
    2021-05-11 23:51

    سلام خسته نباشید، من وقتی در مداد زرد هاور ايجاد می کنم اون هاور یک دفعه اتفاق می افته ولی مثلا سایت شما وقتی روی بعضی از المان ها که ماوس رو می برم آرم آرم ساله دار می شه ولی برای من یک دفعه اتفاق می افته باید چکار کنم ؟

  • دانیال تقی زاده
    2021-04-05 14:06

    با عرض سلام و خسته نباشید من یک سوال دارم در زمینه هاست لینوکس. پوشه tmp هاست من حدود 110 مگ فضا اشغال کرده میخواستم ببینم ایا این پوشه مهمه یا میتونم حذف کنم .از بین فایل هایی که درون پوشه tmp قرار گرفته اند cpanel form file uploade چهار عدد با این نام هستند که بیشترین فضا را اشعال کرده اند ممنون میشم راهنماییم کنین

  • ممنون
    این امکان برای نوشته ها هم وجود داره؟

  • سلام
    میشه تو قسمت برگه ها طوری برگه طراحی کرد که چند تا برگه زیر مجموعه ی یه برگه باشه و در قسمت نشانی سایت در مرورگر با اسلش نشون داده بشه ؟

  • سلام
    من توی مداد زرد مثلا هر کار روی یه بلاک متن انجام میدم دفعه ی بعد که یه بلاک متن درست میکنم اون تغییرات رو این بلاک متن هم اعمال میشه
    اما نمی خوام اینطوری باشه
    میشه راهنمایم کنید

  • سلام زمانی که موس میره روی المان یه تکون کوچیک میخوره هم با افزونه مداد زرد هستش؟

  • الهام نصرآبادی
    2020-11-02 09:30

    تبلیغات افزونه مداد زردتون صفحه ی قالب زفایر رو میاره

  • الهام نصرآبادی
    2020-11-02 09:28

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

فهرست