دوره آموزشی ساخت سایت تسلا با المنتور
با دوره آموزشی "ساخت سایت تسلا با پلاگین المنتور"، طراحی سایت‌های حرفه‌ای و زیبا را بدون نیاز به کدنویسی بیاموزید و سایت‌هایی مانند سایت تسلا بسازید.
سرفصل های دوره
برای مشاهده ویدیوها ابتدا دکمه شرکت در دوره را بزنید
دوره آموزشی ساخت سایت تسلا با استفاده از پلاگین المنتور
در این دوره آموزشی، شما با استفاده از پلاگین محبوب و قدرتمند المنتور (Elementor)، مراحل گام به گام ساخت یک سایت حرفه‌ای و مدرن شبیه به سایت رسمی تسلا را خواهید آموخت. المنتور یکی از بهترین و محبوب‌ترین پلاگین‌های وردپرس برای طراحی صفحات وب به صورت بصری است که امکانات بی‌نظیری را بدون نیاز به کدنویسی در اختیار شما قرار می‌دهد.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این قسمت، به بررسی المنتور، محیط داخلی آن و قسمت‌های مختلف ادیتور آن می‌پردازیم. سپس به سایت گلوبال متغیرها و منوها توجه می‌کنیم. در ادامه، منوی سایت تسلا را بررسی کرده و نحوه چینش بخش‌های مختلف آن را تحلیل می‌کنیم تا هدری مشابه سایت تسلا ایجاد کنیم. درباره کانتینرها و تأثیر آنها بر سایت و قسمت ادیتور پلاگین المنتور صحبت می‌کنیم و نحوه استفاده از آنها برای زیباسازی سایت را بررسی می‌کنیم. همچنین، به منوها در وردپرس و نحوه ایجاد منوی جدید در وردپرس می‌پردازیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این قسمت، به بررسی پیمایش منو و نحوه قرارگیری آن در سایت می‌پردازیم. به خاصیت کانتینرها و چگونگی ارائه بک‌گراند خاص به آنها صحبت می‌کنیم. همچنین، جزئیات دایرکشن‌ها در المنتور و انواع دایرکشن‌ها را بررسی می‌کنیم. سپس به خاصیت Align آیتم‌ها پرداخته و نحوه قرار گرفتن منوها کنار هم را تحلیل می‌کنیم تا مشابه سایت تسلا شود. در نهایت، سکشن اول را ایجاد می‌کنیم تا در قسمت‌های بعدی، سکشن منوی خود را با هم ترکیب کنیم، همانند سایت تسلا.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این بخش، نحوه ایجاد نوتیفیکیشن بالای صفحه، نوار و منو در سایت را می‌آموزیم و به تنظیمات زد ایندکس و ارتفاع مینیمم بخش‌ها می‌پردازیم تا رابط کاربری زیبا ایجاد کنیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این قسمت، پس از چینش منو، به سراغ بخش سکشن می‌رویم و نواحی مختلف سکشن را بررسی می‌کنیم تا مقادیر مناسب را به کانتینرهای مختلف اختصاص دهیم و سکشن اول را مانند سایت تسلا ایجاد کنیم. درباره خاصیت نستد (Nested) و نحوه ایجاد باطن‌های مناسب در سکشن‌های مختلف صحبت می‌کنیم و همچنین متون مناسب هر سکشن را درون تگ‌های HTML قرار می‌دهیم. در این بخش، به نحوه استفاده از کانتینرها درون یکدیگر برای رسیدن به طراحی موردنظر می‌پردازیم و سکشن اول را تکمیل می‌کنیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این قسمت، سکشن اول و منوی خود را بررسی کرده و سعی می‌کنیم استایل‌های مناسبی با الهام از سکشن‌ها و منوی تسلا ایجاد کنیم. استایل‌های اضافی را اضافه می‌کنیم تا به شکل و شمایل سایت تسلا برسیم. پس از آن، سکشن دوم که شامل یک ویدیو بک‌گراند است را معرفی کرده و نحوه بارگذاری و استفاده از آن در المنتور را آموزش می‌دهیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این قسمت، سکشن‌های مختلفی که ایجاد کرده‌ایم را با هم بررسی می‌کنیم. سپس به سراغ ایجاد منوی چسبنده (sticky) می‌رویم، به همراه هدر نوتیفیکیشن و تغییراتی که برای چسباندن منو در بالای صفحه درون کانتینرهای آن لازم است را اعمال می‌کنیم. در نهایت، منوی چسبنده خود را اجرا می‌کنیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
پس از ایجاد منوی چسبنده (sticky) و چسباندن آن به بالای صفحه در قسمت قبل، در این قسمت به سراغ رفع ایرادات ظاهری منو می‌رویم. به عنوان مثال، نحوه hover شدن هرکدام از گزینه‌های منو و همچنین وسط‌چینی کامل منو را بررسی می‌کنیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این قسمت، به سراغ ساخت اولین مگا منو (mega-menu) می‌رویم و برای بخش وسایل نقلیه (vehicles) مگا منوی خود را طراحی می‌کنیم. با قسمت‌های مختلف و نحوه استفاده از آن در المنتور آشنا می‌شویم و در نهایت مگا منوی محصولات را همانند سایت تسلا تکمیل می‌کنیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این قسمت و قسمت بعد، مگا منوهای بخش‌های مختلف سایت خودمان را مانند تسلا ایجاد می‌کنیم و با استایل‌های گوناگون آشنا می‌شویم. در نهایت، مگا منوی خود را برای تغییرات نهایی در قسمت بعد آماده می‌کنیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این قسمت، مگا منوهای بخش‌های مختلف سایت خودمان را مانند تسلا ایجاد می‌کنیم و با استایل‌های گوناگون آشنا می‌شویم. در نهایت، مگا منوی خود را برای تغییرات نهایی در قسمت بعد آماده می‌کنیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این قسمت، با استفاده از custom code های المنتور، نقایصی که نمی‌توانستیم با المنتور پوشش دهیم را با زبان jQuery و استایل‌دهی مناسب رفع می‌کنیم. این تکه از کدها کپی می‌شود و در اختیار دوستان درون دوره به نمایش گذاشته می‌شود.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این جا، مگا منوی خود را با استفاده از کلاس‌ها و کدها به سایت تسلا نزدیک‌تر می‌کنیم. هدف از انجام این کار، آشنایی بیشتر با custom-code های المنتور است. در قسمت دوم، مگا منوی خود را با استفاده از کلاس‌ها و کدها به سایت تسلا نزدیک‌تر می‌کنیم. هدف از انجام این کار، آشنایی بیشتر با custom-code های المنتور است.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این قسمت، در مورد مبحث ریسپانسیو (responsive) در المنتور صحبت می‌کنیم و مقادیر breakpoint ها را در حالت‌های مختلف موبایل، دسکتاپ و تبلت بررسی می‌کنیم. با استفاده از این خاصیت المنتور، می‌بینیم چقدر این مبحث برای ما ساده‌تر می‌شود. به بیان نکات مختلف درباره ریسپانسیو می‌پردازیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این قسمت، در مورد مبحث ریسپانسیو (responsive) در المنتور صحبت می‌کنیم و مقادیر breakpoint ها را در حالت‌های مختلف موبایل، دسکتاپ و تبلت بررسی می‌کنیم. با استفاده از این خاصیت المنتور، می‌بینیم چقدر این مبحث برای ما ساده‌تر می‌شود. به بیان نکات مختلف درباره ریسپانسیو می‌پردازیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این قسمت، سایت تسلا را مورد بررسی قرار می‌دهیم و قسمت‌ها و سکشن‌های مختلف آن را تحلیل می‌کنیم. به منوی سایت که از نوع مگا منو است، توجه می‌شود. سپس، در وردپرس خود یک مگا منو ایجاد می‌کنیم. برای معرفی و اضافه کردن مگا منو به المنتور، از پلاگینی به نام المنت کیت بهره می‌بریم. این پلاگین به المنتور اضافه می‌شود تا بتوان از ویژگی‌های منوها در سایت استفاده کرد. همچنین، درباره خاصیت اسکرول اسنپ و پیمایش بین سکشن‌های مختلف صحبت می‌شود. در نهایت، سایت با ایجاد کانتینرها و بخش‌های مختلف طراحی می‌شود.
سلام چجور میتونم برا یک زیر منو «مگامنو درست کنم»؟ همه جا آموزش رو فقط برای منوی اصلی آورده ولی من یک دپارتمان دارم تو منوی اصلی که 5 تا دپارتمان در زیرمنوی خودش داره که افقی نشون میده بعد روی هر دپارتمان بری باید یک مگا منو نشون بده. لطفا راهنماییم کنید
برای اینکه تو زیرمنو یه مگامنو داشته باشی، کافیه تو HTML، هر دپارتمان رو داخل یه < li> بذاری و یه div class="mega-menu"> براش تعریف کنی که توش لینکای مربوطه باشه. بعد با CSS، این مگامنو رو اول display: none; کن و وقتی موس رفت روی دپارتمان (.mega-parent:hover .mega-menu)، نمایش بده. اگه می‌خوای افکت نرم داشته باشه، می‌تونی با jQuery از slideDown() و slideUp() استفاده کنی تا با انیمیشن باز و بسته بشه.