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

صفحه‌ی اصلی انجمن‌ها فروم وردپرس آیکون اسکرول ماوس در المنتور

در حال نمایش 2 نوشته (از کل 2)
  • نویسنده
    نوشته‌ها
  • #6877
    مبین شکری
    میهمان

    سلام و عرض ادب

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

    اسکرول با ماوس

    مشابه این وبسایت: ostadline دات ir

    ممنون.

    #6883
    شایان فرهنگ پژوه
    مدیریت سایت

    سلام و درود بر شما
    در این وبسایت با revslider ایجاد شده است.
    اما شما با قالب انفولد و یا المنتور هم می‌توانید.
    برای پیاده‌سازی این مورد در المنتور

    1. می‌توانید از این آموزش کمک بگیرید:
      https://www.templatemonster.com/blog/create-animated-scroll-down-arrow/
    2. یا اینکه اگر می‌خواهید دقیقا به این شکل بشود، در المنتور یک المان html مشابه تصویر زیر قرار دهید:
      المان html المنتور
      سپس در بخش محتوای آن، کد html زیر را قرار دهید:

      <div id="shayanweb-slider-scroll" data-type="button">
      <span class="spanbox"></span>
      </div>

      و سپس به تب پیشرفته بروید و در بخش css سفارشی، کد css زیر را اضافه کنید:

      #shayanweb-slider-scroll {
      margin: auto;
      z-index: 19;
      font-family: Roboto;
      cursor: pointer;
      box-sizing: border-box;
      color: rgb(255, 255, 255);
      text-decoration: none;
      white-space: nowrap;
      width: 35px;
      height: 55px;
      min-height: 0px;
      min-width: 0px;
      max-height: none;
      max-width: none;
      text-align: left;
      line-height: 25px;
      letter-spacing: 0px;
      font-weight: 400;
      font-size: 20px;
      border-color: rgb(255 255 255);
      border-style: solid;
      border-width: 3px;
      border-radius: 23px;
      transform-origin: 50% 50%;
      opacity: 1;
      transform: translate(0px, 0px);
      visibility: visible;
      }
      #shayanweb-slider-scroll span.spanbox {
      position: absolute;
      display: block;
      top: 29%;
      left: 50%;
      width: 8px;
      height: 8px;
      margin: -4px 0 0 -4px;
      border-radius: 50%;
      animation: shweb-ani-mouse 2.5s linear infinite;
      background: #fff;
      }
      @keyframes shweb-ani-mouse {
      0% {opacity: 1;top: 29%;}
      15% {opacity: 1;top: 70%;}
      50% {opacity: 0;top: 70%;}
      100% {opacity: 0;top: 29%;}
      }

      و سپس برای اضافه کردن لینک به آن، ابتدا در ابتدای کد html کد زیر را قرار بدهید:
      <a href="#nextbox">
      و در آخرین خط html هم کد  زیر را:
      </a>

      در نهایت روی ویرایش سکشن بعدی (جایی که می‌خواهید با کلیک روی دکمه به آن برود) کلیک کنید و بعد در تب پیشرفته، بخش شناسه‌ی css عبارت shweb-next-section را وارد کنید.

      به همین راحتی و تمام!

    باتشکر. موفق باشید💚😊

در حال نمایش 2 نوشته (از کل 2)
  • برای پاسخ به این تاپیک باید وارد وبسایت شوید.

برای ورود یا ثبت‌نام در شایان وب از این لینک استفاده کنید.