آموزش طراحی قالب HTML5 جلسه ۳۰ | ساخت باکس مطالب مرتبط حرفه‌ای با تصویر و استایل جذاب 🎯📦

در این جلسه از آموزش طراحی قالب با HTML5 و CSS، به صورت مرحله‌به‌مرحله بخش بسیار کاربردی و محبوب مطالب مرتبط (Related Posts) را طراحی و پیاده‌سازی می‌کنیم؛ این بخش باعث افزایش بازدید صفحات سایت و بهبود تجربه کاربری می‌شود.

📌 در این آموزش یاد می‌گیرید:

✅ طراحی باکس مطالب مرتبط با HTML5
✅ استفاده از ساختار معنایی section و article
✅ جایگذاری تصویر برای هر مطلب مرتبط
✅ استفاده از SVG آیکون‌ها برای زیبایی و خوانایی بیشتر
✅ طراحی عنوان بخش مطالب مرتبط
✅ استایل‌دهی کامل با CSS برای حالت ریسپانسیو و کاربرپسند
✅ آماده‌سازی کدها برای اتصال به CMS مثل وردپرس یا PHP

این بخش برای تمامی قالب‌های شخصی، فروشگاهی، خبری و آموزشی قابل استفاده است.
https://youtu.be/BdjbMgkHGgY?si=ffP_nhoOVPkE8407

آموزش طراحی قالب فروشگاهی ووکامرس جلسه ۲۳ | نمایش محصولات تخفیف‌دار با درصد تخفیف + پنل حرفه‌ای 🎁🔥



در این جلسه از دوره پروژه‌محور طراحی قالب فروشگاهی با ووکامرس، به صورت کاملاً عملی و کاربردی یاد می‌گیرید چگونه محصولات دارای تخفیف را در پنل کاربری اختصاصی نمایش دهید؛ این بخش نقش مهمی در افزایش فروش و جذب کاربر دارد.

📌 در این آموزش موارد زیر را به‌صورت کامل پیاده‌سازی می‌کنیم:

✅ نوشتن کدهای نمایش محصولات دارای تخفیف در ووکامرس
✅ معرفی دو روش حرفه‌ای و ساده برای نمایش محصولات تخفیف خورده
✅ استفاده از آیدی دسته‌بندی برای کنترل لیست محصولات
✅ نمایش تصویر محصول به صورت ریسپانسیو
✅ نمایش عنوان محصول در پنل کاربر
✅ نمایش درصد تخفیف فعال روی هر محصول
✅ طراحی بخش کاملاً سفارشی برای تخفیف‌های ویژه کاربران

این ویژگی باعث می‌شود کاربران در پنل خود به‌راحتی محصولات تخفیف‌دار را ببینند و تجربه خرید بهتری داشته باشند.


https://youtu.be/Z_uCzj_UWVw?si=8rrmdZcFSeY1Lj48

آموزش طراحی قالب HTML5 جلسه ۳۱ | ساخت فرم ارسال نظر حرفه‌ای + اتمام single.html 💬✅

در این جلسه از دوره طراحی قالب HTML5 و CSS، به صورت کامل و گام‌به‌گام، فرم ارسال نظر را در صفحه single.html پیاده‌سازی می‌کنیم. در انتهای جلسه نیز ساخت فایل single.html به پایان می‌رسد و آماده استفاده در پروژه‌های شخصی، خبری و فروشگاهی خواهد بود.

📌 در این جلسه یاد می‌گیرید:

✅ طراحی فرم نظرات با استفاده از ساختار HTML5
✅ استفاده از کلاس‌های بوت‌استرپ برای طراحی ریسپانسیو و مرتب
✅ پیاده‌سازی فیلدهای نام، ایمیل، آدرس وب‌سایت (URL)
✅ افزودن چک‌باکس برای پذیرش قوانین یا یادآوری اطلاعات
✅ طراحی textarea حرفه‌ای برای نوشتن نظر
✅ ساخت دکمه ارسال نظر با استایل جذاب
✅ استایل‌دهی کامل و حرفه‌ای به فرم نظرات
✅ اتمام کامل صفحه single.html برای استفاده در پروژه واقعی

https://youtu.be/zRzq_QkkGs8?si=H5fzIxt4Z1MAOLWs

فایل تمرین این جلسه https://youtu.be/zRzq_QkkGs8?si=H5fzIxt4Z1MAOLWs

آموزش طراحی قالب فروشگاهی ووکامرس جلسه ۲۴ | ساخت اعلانات پنل کاربری + کنترل محصولات تخفیف‌دار 🚨🛍


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

در این جلسه یاد می‌گیرید:

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

این جلسه باعث می‌شود پنل کاربری سایت شما از حالت ساده و پیش‌فرض ووکامرس خارج شده و به یک داشبورد حرفه‌ای و کاربردی تبدیل شود — مناسب برای سایت‌های آموزشی، فروش فایل یا فروشگاه‌های خدمات دیجیتال.

https://youtu.be/RYO4YrtwU1s?si=BWwXAJZBEM3yEBEC

آموزش طراحی قالب فروشگاهی ووکامرس جلسه ۲۵ | پیاده‌سازی فرم لاگین مودال + منوی داینامیک کاربر 🔐✨
در این جلسه از دوره پروژه‌محور طراحی قالب فروشگاهی ووکامرس، با یک ویژگی بسیار کاربردی و جذاب آشنا می‌شویم: فرم لاگین به صورت مودال (پاپ‌آپ) که تجربه کاربری را بسیار بهبود می‌بخشد.

همچنین با نمایش داینامیک اطلاعات کاربر مثل نام، تصویر، و لینک‌های پنل، ثبت‌نام و خروج، یک سیستم ورود/خروج حرفه‌ای برای سایت فروشگاهی ایجاد می‌کنیم.

📌 در این جلسه یاد می‌گیرید:

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

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

https://youtu.be/OLA9V2RiyZM?si=wPqfr9sGef8ymUyw

آموزش طراحی قالب فروشگاهی ووکامرس | جلسه 26 | پیاده‌سازی سبد خرید حرفه‌ای در هدر 🛒🔥


در جلسه ۲۶ از دوره پروژه‌محور طراحی قالب فروشگاهی با ووکامرس (WooCommerce)، به سراغ پیاده‌سازی سبد خرید حرفه‌ای در هدر سایت می‌رویم. سبد خرید یکی از مهم‌ترین بخش‌های هر فروشگاه اینترنتی است که تجربه خرید کاربران را به شکل چشم‌گیری بهبود می‌بخشد.

در این قسمت یاد می‌گیرید:

🔸 پیاده‌سازی سبد خرید در هدر قالب
🔸 نمایش تعداد محصولات اضافه‌شده به سبد خرید به‌صورت داینامیک
🔸 طراحی و کدنویسی فایل نمایش محصولات سبد خرید
🔸 کنترل نمایش تصویر محصول با اندازه دلخواه
🔸 اضافه‌کردن استایل اختصاصی و ریسپانسیو برای سبد خرید
🔸 تعامل مستقیم با اطلاعات سبد خرید ووکامرس بدون نیاز به افزونه خاص

این جلسه به شما کمک می‌کند سبد خرید جذاب، سریع و سبک مخصوص قالب خودتان پیاده‌سازی کنید و ظاهر سایت فروشگاهی‌تان را حرفه‌ای‌تر کنید.
https://youtu.be/c-OCmbUZuhg?si=GZhZXb9xrNzyIpIO

آموزش طراحی قالب با Bootstrap 5 | جلسه 34 | پیاده‌سازی صفحه ورود و ثبت‌نام اختصاصی 💻🔒

در جلسه ۳۴ از دوره طراحی قالب با Bootstrap 5، به سراغ پیاده‌سازی یک صفحه ورود و ثبت‌نام اختصاصی، ریسپانسیو و شیک می‌رویم. در این جلسه، یاد می‌گیرید که چطور بدون استفاده از افزونه یا قالب آماده، یک فرم لاگین و رجیستر کاملاً سفارشی و حرفه‌ای طراحی و استایل‌دهی کنید.

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

✅ طراحی فرم ورود و ثبت‌نام با HTML5 و Bootstrap 5
✅ ساخت فایل اختصاصی استایل برای فرم‌ها
✅ پاک‌سازی فایل‌های اضافه و سازمان‌دهی پروژه
✅ استایل‌دهی دقیق به فرم‌ها و جایگاه آن‌ها
✅ پیاده‌سازی عنوان ورود و ثبت‌نام به‌صورت جداگانه
✅ ایجاد فرم‌های کاربرپسند با فیلدهای کامل و دکمه‌های زیبا
✅ آماده‌سازی فرم برای اتصال به PHP یا هر سیستم لاگین دلخواه

با این آموزش می‌توانید فرم‌های ورود و عضویت اختصاصی خودتان را طراحی کنید و ظاهری حرفه‌ای‌تر و کاربرپسندتر برای سایت‌تان بسازید.

https://youtu.be/upkhIsiIgLg?si=wVbs39-HUNKVQAZy

فایل تمرین https://youtu.be/upkhIsiIgLg?si=wVbs39-HUNKVQAZy

آموزش طراحی قالب فروشگاهی وردپرس | جلسه 27 | پیاده‌سازی فرم جستجوی ووکامرس 🔍🛒



در جلسه ۲۷ از دوره پروژه‌محور طراحی قالب فروشگاهی وردپرس با ووکامرس، به سراغ پیاده‌سازی حرفه‌ای فرم جستجو در فروشگاه اینترنتی می‌رویم. در این جلسه یاد می‌گیرید که چطور با استفاده از توابع پیش‌فرض ووکامرس، یک فرم جستجوی کاربردی و قابل‌سفارشی‌سازی طراحی کنید.

در این جلسه موارد زیر را به‌صورت کامل آموزش می‌دهیم:

✅ پیاده‌سازی فرم جستجوی ووکامرس با استفاده از get_product_search_form()
✅ آشنایی با ساختار فرم جستجو در ووکامرس
✅ قرار دادن فرم جستجو داخل هدر سایت
✅ افزودن المان‌های دلخواه (مثل آیکون، placeholder و کلاس دلخواه)
✅ استفاده از منابع رسمی ووکامرس برای توسعه قالب
✅ نحوه جستجو در محصولات توسط کاربر با تجربه کاربری بالا
✅ و نکات کلیدی برای سئو جستجوی محصولات در فروشگاه

با این آموزش، سایت فروشگاهی شما دارای یک فرم جستجوی هوشمند، سریع و سازگار با ووکامرس خواهد شد.

https://youtu.be/TAhwaEq_38w?si=T1JeZVP6imSbv1-E

✅ اگر قصد دارید یک قالب فروشگاهی حرفه‌ای طراحی کنید، این جلسه را از دست ندهید!

📌 اگه جلسه قبلی رو هنوز ندیدی، پیشنهاد می‌کنم حتماً اول از اونجا شروع کنی!
توی این دوره، همه‌چیز به‌صورت پروژه‌محور و مرحله‌به‌مرحله آموزش داده شده.
برای اینکه آموزش‌ها رو کامل و منظم یاد بگیری، می‌تونی همه جلسات این دوره رو از لینک زیر ببینی 👇

🎬 مشاهده تمام جلسات دوره طراحی قالب فروشگاهی وردپرس:

https://www.youtube.com/watch?v=tHSYiLHZMX4&list=PLLUj8Z1WopvYfjAwJ-tEblrqtrCxCgEjl&index=2

آموزش طراحی قالب با Bootstrap 5 | جلسه ۳۵ | پیاده‌سازی حرفه‌ای صفحه ورود و ثبت‌نام با استایل مدرن 🔐✨


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

✅ کنترل و استایل‌دهی حرفه‌ای به placeholderهای فرم
✅ افزودن توضیحات جذاب برای بخش ثبت‌نام و ورود
✅ پیاده‌سازی دکمه‌های جابجایی بین ورود و ثبت‌نام با انیمیشن
✅ استفاده از جاوااسکریپت برای کنترل رفتار دکمه‌ها و فرم‌ها
✅ اضافه کردن تصاویر گرافیکی برای فرم ورود و ثبت‌نام
✅ استفاده از تکنیک زیبای linear-gradient::before برای پس‌زمینه فرم‌ها
✅ طراحی کاملاً ریسپانسیو و واکنش‌گرا با Bootstrap 5

در پایان این جلسه، شما می‌تونید یک فرم لاگین و ثبت‌نام مدرن، خلاقانه و کاربرپسند برای پروژه‌های خود بسازید.

https://youtu.be/5sqCGjQVUqw?si=HHmMfZCeyTZyr5vL

فایل تمرین این جلسه

https://youtu.be/5sqCGjQVUqw?si=HHmMfZCeyTZyr5vL

آموزش طراحی قالب فروشگاهی وردپرس | جلسه ۲۸ | دسته‌بندی محصولات با تصویر در ووکامرس 🎯🛒

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

در این قسمت یاد می‌گیریم:

✅ نحوه نوشتن کد نمایش دسته‌بندی ووکامرس در قالب اختصاصی
✅ نمایش تصویر شاخص برای هر دسته‌بندی محصول
✅ طراحی عنوان زیبا برای دسته‌بندی‌ها
✅ لینک کردن دسته‌ها به صفحه اختصاصی هر دسته‌بندی
✅ نمایش تعداد محصولات هر دسته به صورت داینامیک
✅ ساخت ظاهری جذاب برای دسته‌ها مخصوص فروشگاه حرفه‌ای

اگر قصد دارید یک قالب فروشگاهی حرفه‌ای و قابل سفارشی‌سازی بسازید، این جلسه را از دست ندهید!

https://youtu.be/RhmCFUrO02Q?si=isdp5Kw9LXHNmpEF

✅ اگر قصد دارید یک قالب فروشگاهی حرفه‌ای طراحی کنید، این جلسه را از دست ندهید!

📌 اگه جلسه قبلی رو هنوز ندیدی، پیشنهاد می‌کنم حتماً اول از اونجا شروع کنی!
توی این دوره، همه‌چیز به‌صورت پروژه‌محور و مرحله‌به‌مرحله آموزش داده شده.
برای اینکه آموزش‌ها رو کامل و منظم یاد بگیری، می‌تونی همه جلسات این دوره رو از لینک زیر ببینی 👇

🎬 مشاهده تمام جلسات دوره طراحی قالب فروشگاهی وردپرس:

https://www.youtube.com/watch?v=tHSYiLHZMX4&list=PLLUj8Z1WopvYfjAwJ-tEblrqtrCxCgEjl&index=2

آموزش طراحی قالب با Bootstrap 5 | جلسه ۳۶ | ساخت صفحه ورود و ثبت‌نام ریسپانسیو و حرفه‌ای ✅

در جلسه ۳۶ از دوره آموزش طراحی قالب با Bootstrap 5، آخرین مرحله‌ی طراحی و کدنویسی صفحه ورود و ثبت‌نام را به‌صورت کامل انجام می‌دهیم. این بخش یکی از مهم‌ترین قسمت‌های تجربه کاربری در هر سایت است، به همین دلیل:

✅ تمام بخش‌های فرم لاگین و رجیستر استایل‌دهی کامل می‌شوند
✅ صفحه کاملاً ریسپانسیو می‌شود تا روی موبایل و تبلت بهترین نمایش را داشته باشد
✅ کدهای CSS ریسپانسیو جداگانه نوشته می‌شوند
✅ نکات مهم برای زیبا سازی و عملکرد بهتر فرم ورود و ثبت‌نام
✅ و در پایان، صحبت پایانی برای دانشجویان عزیز دوره + معرفی بروزرسانی‌های آینده

اگر می‌خواید یک صفحه ورود مدرن، زیبا و واکنش‌گرا بسازید، این جلسه دقیقاً برای شماست 💯

https://youtu.be/rFvqgU7tkjE?si=MZ3dYO890GAFCyfp

فایل تمرین این جلسه

https://youtu.be/rFvqgU7tkjE?si=MZ3dYO890GAFCyfp

آموزش طراحی قالب فروشگاهی وردپرس | افزودن متاباکس ویدیو به پست + نمایش حرفه‌ای 🎥🔥


در جلسه ۲۹ از دوره پروژه‌محور طراحی قالب فروشگاهی وردپرس، یاد می‌گیرید چطور برای پست‌های سایت خود متاباکس ویدیویی حرفه‌ای ایجاد کنید. این آموزش به صورت کامل و کاربردی به شما کمک می‌کند ویدیوهای اختصاصی را به هر پست اضافه کرده و در صفحه اصلی یا single.php به شکلی حرفه‌ای نمایش دهید.

📌 آنچه در این آموزش یاد می‌گیرید:

✅ ساخت فایل متاباکس برای آپلود ویدیو
✅ قرار دادن ویدیو در قسمت پست‌ها
✅ کنترل نمایش تنها یک ویدیو در لیست پست‌ها
✅ استفاده از حلقه وردپرس برای نمایش ویدیو
✅ نمایش ویدیو داخل single.php
✅ نمایش تصویر کاور ویدیو در صفحه اصلی
✅ استایل‌نویسی زیبا و کاربرپسند برای بخش ویدیوها

این جلسه یک گام مهم برای توسعه قالب‌های حرفه‌ای فروشگاهی وردپرس به شمار می‌رود.

https://youtu.be/4GHMKYpHPxU?si=Dy0dXTrJuTv0zMrS

https://youtu.be/4Dad_K_Vtb4?si=K7x3XSm0XEGmyV4x


در جلسه اول از بروزرسانی جدید آموزش Bootstrap 5، با طراحی یک صفحه اسکرولی جذاب شروع می‌کنیم تا پایه‌ی طراحی مدرن و ریسپانسیو را به‌صورت اصولی بچینیم.

🔧 در این قسمت یاد می‌گیریم:

✅ نحوه کدنویسی اولیه با HTML5
✅ قرار دادن تصاویر با ساختار استاندارد و سئو شده
✅ استایل‌دهی حرفه‌ای تصاویر با CSS و Bootstrap
✅ ایجاد ظاهر اسکرولی چشم‌نواز برای صفحه اصلی سایت

اگر می‌خوای طراحی وب رو با بوت‌استرپ ۵ به‌صورت اصولی و پروژه‌محور یاد بگیری، این جلسه شروع مسیر حرفه‌ای تو هست 💡

در جلسه دوم از بروزرسانی دوره‌ی آموزش Bootstrap 5، نحوه ساخت یک منوی اسکرولی حرفه‌ای و ریسپانسیو را به‌صورت کامل یاد می‌گیرید.
در این جلسه به‌جای تئوری، روی پروژه عملی قالب قبلی کار می‌کنیم و منو را طوری تنظیم می‌کنیم که با اسکرول، واکنش مناسبی نشان دهد و ظاهر حرفه‌ای به سایت بدهد.

🎯 مواردی که در این آموزش یاد می‌گیرید:

✅ ویرایش قالب آماده برای استفاده از منوی اسکرولی
✅ استفاده از کلاس‌های اختصاصی برای افکت اسکرول
✅ نوشتن کدهای CSS برای منوی چسبان
✅ استفاده از JavaScript برای کنترل رفتار منو هنگام اسکرول
✅ پیاده‌سازی منوی حرفه‌ای برای همه صفحات وب

این آموزش برای طراحانی که به دنبال زیباسازی تجربه کاربری و رابط کاربری حرفه‌ای هستند، کاملاً ضروریه.

https://youtu.be/VANIXHqnd14?si=kmELV-6LckKEBW12

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

🔹 در این قسمت یاد می‌گیریم:

نحوه پیاده‌سازی محصولات تخفیف‌دار

بررسی و اضافه کردن کدهای مربوط به محصولات تخفیفی در ووکامرس

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

قرار دادن باکس حرفه‌ای محصولات تخفیف‌دار

اضافه کردن کلاس woocommerce به body برای استایل‌دهی بهتر

با دیدن این جلسه، شما می‌توانید بخش محصولات تخفیفی حرفه‌ای مثل سایت‌های بزرگ (دیجی‌کالا و ...) را در قالب فروشگاهی خود پیاده‌سازی کنید. ✨


https://youtu.be/GQ10GULB_xI?si=4PLx1Ain0FO1w-gD