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

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

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

آموزش ساخت دکمه در المنتور

جلسه 2
آموزش ساخت گالری تصاویر با المنتور (طراحی گالری تصویر)

آموزش ساخت گالری تصاویر با المنتور (طراحی گالری تصویر)

جلسه 3
آموزش ساخت اسلایدر با المنتور

آموزش ساخت اسلایدر با المنتور

جلسه 4
آموزش ساخت کال تو اکشن در المنتور (call to action)

آموزش ساخت کال تو اکشن در المنتور (call to action)

جلسه 5
آموزش کار با المان نمایش نظرات در المنتور

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

جلسه 6
ساخت شمارنده تاریخ در المنتور (countdown)

ساخت شمارنده تاریخ در المنتور (countdown)

جلسه 7
دکمه اشتراک گذاری در شبکه اجتماعی در المنتور

دکمه اشتراک گذاری در شبکه اجتماعی در المنتور

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

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

جلسه 9
بارگذاری ویدیو و تصاویر انیمیشنی در المنتور

بارگذاری ویدیو و تصاویر انیمیشنی در المنتور

جلسه 10
استفاده از شورت کدها در المنتور shortcode widget

استفاده از شورت کدها در المنتور shortcode widget

جلسه 11
دانلود لندینگ پیج های آماده المنتور و فارسی سازی آنها

دانلود لندینگ پیج های آماده المنتور و فارسی سازی آنها

جلسه 12
آموزش افکت اسکرول در المنتور | scrolling effect

آموزش افکت اسکرول در المنتور | scrolling effect

جلسه 13
آموزش قرار دادن نقشه در المنتور | کار با ویجت Google Map

آموزش قرار دادن نقشه در المنتور | کار با ویجت Google Map

جلسه 14
طراحی باکس های قیمت گذاری در المنتور | price table

طراحی باکس های قیمت گذاری در المنتور | price table

جلسه 15
افزودن انیمیشن متحرک به سایت با المنتور و Lottie

افزودن انیمیشن متحرک به سایت با المنتور و Lottie

جلسه 16

شما در حال مشاهده
جلسه 17 هستید

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

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

جلسه 17
آموزش طراحی لندینگ پیج یلدا با المنتور

آموزش طراحی لندینگ پیج یلدا با المنتور

جلسه 18

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

آخرین بروزرسانی در تاریخ : 14 مهر 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>

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


3.7/5 - (3 امتیاز)

دیدگاه و پرسش

  1. علی میگوید:

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

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

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

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

    سلام الان موندم کدوم رو اول ببینم ترتیب و تقدم دوره ها؟ اول المنتور پیشرفته یا دوره 0 تا 100 آموزش طراحی سایت و فروشگاه اینترنتی یاآموزش HTML و CSS رایگان یا دوره های دیگه؟ کاش یه چارت ترتیبی تو سایت می زدین

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

    سلام ، تو اموزش پیشرفته المنتور کد نویسی هایی که استفاده شده اینجا و مشابه شون (سی اس اس و جاوا و..) هم شاملش است؟یا صرفا طراحی ظاهر سایت است؟اگه شامل نیست چه اموزشی دارین برا اینا ؟! با کپی پیست کد نمیشه خوب به مطلب مسلط شد

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

    با تغییراتی که در inspect element دادین روی ابعاد مانیتور خودتان اون قسمت سبز رنگ منحنی (قطعه کد مربوط به المان فاصله گذار) را تراز کردین اما حالت عمومی نداره و روی مانیتورهای با ابعاد دیگر مثلا بزرگتر و.. ممکنه تراز نباشه و فاصله از چپ و پایین داشته باشه راه حلش برای تراز عمومی چیه؟!!

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

      برای تنظیم کردن روی تمامی مانیتورها باید از کدنویسی استفاده کنید.

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

    سلام ،اخرین نسخه المنتور پرو یعنی نگارش 3.7.7 دارم که از نسخه ی زمان ضبط فیلم تون قطعا جدیدتر است اما سر برگ قسمت “موقعیت” را همچنان ندارد مشکل از چیه؟

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

      سلام، قسمت “موقعیت” به زیر مجموعه تنظیمات پیشرفته منتقل شده است.

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

    سلام ، تو اموزش گفته شده بریک پوینت رو ، از حالت تبلت به موبایل می ذاریم دقیقا بریک پوینت کارش چیه و هدف از این کار چیه؟!!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      • sadrashirinkar11 میگوید:

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

آموزش‌های ویدیویی جدید فقط در یوتیوب منتشر می‌شود!

بزن بریــم!