مدرس دوره

نبی عبدی

زمان ویدیو

33:12 دقیقه

برو به دیگر جلسات

آموزش المنتور

برای دانلود ویدیو

وارد شوید

طراحی لندینگ پیج استارباکس با المنتور

آخرین بروزرسانی در تاریخ : 5, شهریور, 1401

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

قطعه کدهای مورد استفاده در این آموزش

قطعه کد مربوط به المان فاصله گذار

selector{
   position: absolute;
    left: -20%;
    top: 10%;
    width: 100%;
    height: 100%;
    background: #017143;
    clip-path: circle(596px at left 600px);
}
@media (max-width:1024px){
selector{
    clip-path: circle(380px at left 530px);
}
}
@media (max-width:768px){
selector{
    left: 0;
    clip-path: circle(420px at left 530px);
}
}

قطعه کد مربوط به سکشن تصاویر Thumbnail

selector{
    position: absolute;
    right: -10px;
    bottom:0;
    width: 200px;
    transform: translateX(-50%);
}
selector img{
    cursor: pointer;
    transition: 0.5s;
}
selector img:hover{
    transform: translateY(-15px)
}


@media (max-width:1024px){
selector{
    right: -30%;
} }


@media (max-width:767px){
selector{
    right: -10%;
     bottom:-4vh
}
}

قطعه کد مربوط به خود تصاویر Thumbnail

دقت کنید که این کد را باید در بخش Attibutes قرار دهید همچنین لینک این قطعه کد را باید مرتبط با لینک تصاویر سایت خود قرار دهید

data-jim|http://elementor.nabiabdi.ir/wp-content/uploads/2022/02/img1.png

قطعه کد مربوط به المان HTML


<script type="text/javascript">
var $ = jQuery;
    $(document).ready(function(){
    $('[data-jim]').on('click', function(){
        var jim = $(this).attr('data-jim')
        $('.starbucks img').attr('src', jim ).attr('srcset', '')
    })
    })
</script>

لینک دانلود تصاویر مورد نیاز این آموزش


5/5 - (2 امتیاز)

نظرات در “طراحی لندینگ پیج استارباکس با المنتور

  1. الیاس میگوید:

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

    • پشتیبانی میگوید:

      در ورژن های جدید المنتور بخش موقعیت به تب پیشرفته اضافه شده است.

  2. الیاس میگوید:

    سلام کار بریک پوینت چیه که گفته شد روی موبایل می ذارین؟رزولوشن صفحه م روی 1600 در 900 است(برا شما چنده؟) مشابه تنظیمات شما رفتم اما سکشن اولی (منو و عکس) وسط چین نیست و راست چینه چکار کنم تراز وسط بشه؟

    • پشتیبانی میگوید:

      بریک پوینت برای تنظیم حالت تبلت و موبایل است، رزولوشن سیستمی که با آن دوره ضبط شده است نیز 1920×1080 است.

  3. الیاس میگوید:

    در دوره المنتور پیشرفته گفته شده دو سایت از 0 طراحی شده کدوم سایت ها هستن؟ ادرس شون لطفا

    • پشتیبانی میگوید:

      سایت‌های طراحی شده در دوره المنتور پیشرفته آنلاین نیستند، ولی تصاویر و ویدیوی ها آن داخل همان صفحه موجود است که می‌توانید مشاهده کنید.

  4. سامان میگوید:

    سلام خسته نباشبد
    من کلاس css و کدها رو وارد کردم ولی وقتی رو عکس ها میزنم تصویر تغییری نمیکنه

    • پشتیبانی میگوید:

      سلام، حتما کلاس‌ها و کدها را به درستی وارد نکرده‌اید.

      • sadrashirinkar11 میگوید:

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

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

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