جلسه ۸۳

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

مسعود قربان خانی

مدرس : مسعود قربان خانی

فایل های ضروری و مورد نیاز

پخش ویدیو
تخفیف ویژه دانشجویان دوره رایگان المنتور

علاوه بر تخفیف همیشگی المنتور پرو 20% بیشتر تخفیف بگیرید

کد تخفیف : off-elementor

در این نوشته شما می خوانید

نمایش زیبا دسته بندی محصولات یا خدمات در سایت برای اینکه مشتری و کاربر سایت را مشتاق کند تا روی آن کلیک کند خیلی تاثیر گذار می باشد .

ما در این آموزش Elementor باکس هایی با کد css ایجاد کردیم ، تا زمانی که کاربر موس خود را روی آن ها ببرد ، نوشته ها آن نمایش داده شود .( همانند تصویر زیر )

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

کد های CSS استفاده شده در این آموزش

شما فقط کافیه آموزش را تماشا کنید و کد CSS زیر را در صفحه خود استفاده نمایید .

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

 

/*Content Show/Hide on Hover*/
selector{
opacity: 0;
transition: 0.5s ease-in-out;
}
selector:hover{
opacity: 1;
}

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

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

40 پاسخ

  1. سلام وقت بخیر . میخوام سبد خرید را در المنتور که از ابزارک کاروسل هست بردارم . تیکت زده بودم در سایتتون . گفتنند از طریق CSS بردارید به صورت دستی . ؟!

  2. سلام
    من روکش پس زمینه کانتینر اولیه رو رنگ تیره براش در نظر میگیرم میزان شفافیت هم کم میکنم اما تغییر رنگی موقع اجرا صورت نمیگیره

      1. سلام خسته نباشی
        من اموزش شما رو با کانتینر هم هم انجام دادم مشکلی نداشت الزاما نباید بخش داخلی باشه

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

  3. سلام
    استاد ابتدای ویدیو ، بخش داخلی به ستون دادین علت چیست؟ (میشه سربرگ و متن داخلی و دگمه رو رو خود ستون انداخت)
    و اگه بخش داخلی ندیم راهی برای افزایش ارتفاع ستون به 400 پیکسل نیست؟

  4. سلام خسته نباشید
    من یه مشکلی دارم در اسلایدر ها تصاویر یا هرچیزی بک گراند وقتی صفحه رو کوچیک میکنم رو حالت inspect مرورگر عکس هام فشرده میشن راه حلی هست برای درست شدن؟

  5. درود و سپاس آقا مسعود عزیز و واقعا ممنون از پست ها و آموزش های زیبا ، پر مفهوم و آموزندتون

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

    اگر راهنمایی بفرمایید ممنون میشم

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

        1. سلام ممنون از وقتی که گذاشتید
          من عینا طبق آموزشتون پیش رفتم و مراحل تکمیل شده و مشکلی اصلا نداشته و کاملا درست نشون میده .
          اما فقط در زمان ویرایش برگه المنتور صحیح نشون میده و وقتی سایت رو مشاهده میکنم , فقط و فقط اولین ستونی که روش کار کردم به درستی نشون داده میشه و مابقی ستون ها متن نشون داده میشه و هنگام هاور تنها رنگش تغییر میکنه .

  6. سلام وقت بخیر
    آیا راهی وجود داره که بخوایم css شورت کد رو در المنتور تغییر بدیم ..برای مثال من از افزونه yith membership premium استفاده میکنم که لینک دانلود برای کاربرانی که حق عضویت خریدن قابل نمایشه اما شورت کدی داره که وقتی در المنتور قرار میدم css و استایل دکمه ها از قبل و پیش فرض طراحی شدست میخوام استایل و css اون شورت کد رو تغییر بدم

    1. سلام وقت بخیر
      بله کاملا میتوانید اینکار را انجام دهید فقط کافیه کلاس دکمه یا المان را پیدا کنید و با CSS استایل مناسب را اعمال کنید و داخل فایل Style.css قالب و یا قسمت سفارشی سازی وردپرس قرار دهید .
      موفق باشید

  7. سلام و ادب
    ممنون از اموزش های خوبتون
    مگا منو دیجی کالا با جت منو طراحی شده؟‌ من میخواستم با ماکس مگا منو طراحی کنم ولی ساب منو را شامل نمیشه

  8. ممنون بابت آموزشهای خوبتون.
    فقط یه سوال:
    من وقتی میخوام بخش داخلی ایجاد کنم فقط یه خط نشون میده و با افزایش حداقل ارتفاع هیچ تغییری نمیکنه. به علاوه باقی المان ها مثل سربرگ و متن و دکمه هم نمیتونم به اون بخش داخلی اضافه کنم.

    1. سلام به شما
      ببنید در حال طبیعی این مشکل وجود ندارد و این مشکل معمولا تحت تاثیر قالب شما قرار دارد .و حتی ممکنه است ناسازگاری با برخی از افزونه های شما این مشکل را به وجود بیاورد

      1. قالبم هلو بود الان زفیر کردم فرقی نکرد. بجز افزونه المنتور و یواست هم فعلا افزونه فعالی ندارم… عجیبه واقعا…

  9. سلام مهندس ممنون از زحماتت
    آیا میشه آموزش جلسه 60 و 62 رو با هم ادغام کرد و این دو تا کد رو با هم اجرا کرد؟

  10. سلام درود خدمت شما آموزش خیلی خوبی بود من یه مشکل بزرگی برای یکی از سایت ها داشتم با آموزشهای شما این مشکل حل شد با تشکر

  11. من تازه طراحی سایتو شروع کردم (حدود ۸ماه) و دنبال آموزشا زیاد گشتم و وااقعا این آموزش قشنگی بود سر فرصت تو سایتم استفاده می کنم 😍

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آپدیت های جدید محصولات

جدیدترین محصولات آپدیت شده