هیچ محصولی در سبد خرید نیست.
مدرس دوره
نبی عبدی
زمان ویدیو
33:12 دقیقه
برو به دیگر جلسات
برای دانلود ویدیو
طراحی لندینگ پیج استارباکس با المنتور
در این آموزش از سری آموزش المنتور می‌خواهیم یک لندینگ پیج زیبا و جذاب را باهم طراحی کنیم، دقت کنید که در این ویدیو نحوه طراحی لندینگ پیج استارباکس آموزش داده شده است.
راهنمای مطالعه:
قطعه کدهای مورد استفاده در این آموزش
قطعه کد مربوط به المان فاصله گذار
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>
سلام الان موندم کدوم رو اول ببینم ترتیب و تقدم دوره ها؟ اول المنتور پیشرفته یا دوره 0 تا 100 آموزش طراحی سایت و فروشگاه اینترنتی یاآموزش HTML و CSS رایگان یا دوره های دیگه؟ کاش یه چارت ترتیبی تو سایت می زدین
سلام، از بخش مسیر یادگیری طراحی سایت با برنامه نویسی دیدن کنید.
سلام ، تو اموزش پیشرفته المنتور کد نویسی هایی که استفاده شده اینجا و مشابه شون (سی اس اس و جاوا و..) هم شاملش است؟یا صرفا طراحی ظاهر سایت است؟اگه شامل نیست چه اموزشی دارین برا اینا ؟! با کپی پیست کد نمیشه خوب به مطلب مسلط شد
سلام، برای یادگیری کدنویسی دوره های زیر را مشاهده کنید:
آموزش HTML و CSS رایگان
دوره 0 تا 100 آموزش طراحی سایت و فروشگاه اینترنتی
با تغییراتی که در inspect element دادین روی ابعاد مانیتور خودتان اون قسمت سبز رنگ منحنی (قطعه کد مربوط به المان فاصله گذار) را تراز کردین اما حالت عمومی نداره و روی مانیتورهای با ابعاد دیگر مثلا بزرگتر و.. ممکنه تراز نباشه و فاصله از چپ و پایین داشته باشه راه حلش برای تراز عمومی چیه؟!!
برای تنظیم کردن روی تمامی مانیتورها باید از کدنویسی استفاده کنید.
سلام ،اخرین نسخه المنتور پرو یعنی نگارش 3.7.7 دارم که از نسخه ی زمان ضبط فیلم تون قطعا جدیدتر است اما سر برگ قسمت “موقعیت” را همچنان ندارد مشکل از چیه؟
سلام، قسمت “موقعیت” به زیر مجموعه تنظیمات پیشرفته منتقل شده است.
سلام ، تو اموزش گفته شده بریک پوینت رو ، از حالت تبلت به موبایل می ذاریم دقیقا بریک پوینت کارش چیه و هدف از این کار چیه؟!!
سلام، بریک پوینت سایز ریسپانسیو در حالت موبایل و تبلت را مشخص می‌کند، برای اطلاعات بیشتر در این رابطه داخل گوگل تحقیق کنید.
برای ویرایش سر برگ قسمت “موقعیت” در المنتور پرو که از سایت تون دانلود کردم نداره چکار میشه کرد؟
در ورژن های جدید المنتور بخش موقعیت به تب پیشرفته اضافه شده است.
سلام کار بریک پوینت چیه که گفته شد روی موبایل می ذارین؟رزولوشن صفحه م روی 1600 در 900 است(برا شما چنده؟) مشابه تنظیمات شما رفتم اما سکشن اولی (منو و عکس) وسط چین نیست و راست چینه چکار کنم تراز وسط بشه؟
بریک پوینت برای تنظیم حالت تبلت و موبایل است، رزولوشن سیستمی که با آن دوره ضبط شده است نیز 1920×1080 است.
در دوره المنتور پیشرفته گفته شده دو سایت از 0 طراحی شده کدوم سایت ها هستن؟ ادرس شون لطفا
سایت‌های طراحی شده در دوره المنتور پیشرفته آنلاین نیستند، ولی تصاویر و ویدیوی ها آن داخل همان صفحه موجود است که می‌توانید مشاهده کنید.
سلام خسته نباشبد
من کلاس css و کدها رو وارد کردم ولی وقتی رو عکس ها میزنم تصویر تغییری نمیکنه
سلام، حتما کلاس‌ها و کدها را به درستی وارد نکرده‌اید.
بله درست شد. تو ویرایشگر المنتور کار نمیداد و باید خود برگه رو باز کنیم