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

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

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

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

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>

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

---

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