جلسه 27: طراحی هدر سایت فروشگاهی

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

طراحی هدر قالب وودمارت

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

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

حالا که ذخیره می‌کنیم، دقیقاً آن چیزی که ما انتخاب کردیم برای‌مان راه اندازی شده، حالا می‌رویم اِلمان‌هایش را چک می‌کنیم، اول از همه بگویم که هر کدام از اینهایی که به رنگ مشکی وجود دارد یک اِلمان است و ما می‌توانیم با گزینه‌ی بعلاوه اضافه کنیم یعنی اینجا اِلمان‌هایش را می‌توانیم اضافه کنیم مثلاً ما می‌خواهیم یک دکمه‌ای ما اینجا اضافه کنیم، می‌نویسیم: کد تخفیف، حالا لینکش را خالی می‌گذاریم و حالا یکسری تنظیمات هم دارد که ما زیاد واردش نمی‌شویم، رنگ اصلی قالب را بگیرد و ذخیره را می‌زنیم نتیجه را با هم مشاهده می‌کنیم.

اینجا یکی به حالت دکمه قرار گرفت که دکمه کد تخفیف و کاربر می‌تواند با کلیک کردن روی آن کدتخفیف را دریافت کند حالا ما می‌خواهیم این کدتخفیفی که ایجاد کردیم بیاد وسط قرار بگیرد مثلاً اینجا قرار گیرد باید چه کار کنیم؟

طراحی کلی هدر

این‌که خب وسط دکمه‌ای که ساختیم به صورت پیش‌فرض وسط باید چه کار کنیم؟ وقتی که روی هرکدام میاید اینجا یک بعلاوه میاد که بعلاوه را که کلیک می‌کنید اینجا فاصله وجود دارد یک فضای خالی این و مثلاً ما می‌گذاریم روی، 100پیکسل، ذخیره می‌کنیم، گذاشتیم روی اولین اِلمان، حالا ببینید چه اتفاقی می‌افتد؟

Ctrl+F5 را می‌زنم الان این اِلمان دکمه‌مان یکم رفت به سمت چپ ولی هنوز وسط نیامده پس این باعث می‌شود که یک فاصله‌ای بین این اِلمان و اِلمان دکمه‌مان بی‌افتد، ما این فاصله را بیشتر می‌کنیم تا آن چیزی که می‌خواهیم به دست بیاد، اگر که مثلاً تا آخر بردیم و باز دیدیم این اتفاق نیفتاد و آن چیزی که نبود، روی این دکمه کلیک کنید این را کپی می‌کنیم و شما دوباره می‌توانید بیاید و فضا اختصاص دهید یعنی این دوتا روی هم جمع می‌شود و فضایی که تولید می‌شود درواقع جمع این دوتا است.

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

حالا می‌رویم داخل اِلمان متن می‌شویم، یک متنی را برای ما نوشته ولی متنش اینجا وجود ندارد، چون فونتش سفید اگر اینجا هم نگاه کنیم سفید رنگ،‌ وقتی که کلش را انتخاب کنیم می‌توانیم متن و بگیریم و اینجا رنگش را تغییر دهیم یا متن دیگری را وارد کنیم، من متن دیگری را می‌نویسم، حالا برای این‌که دیده شود ما مجبوریم که روی همین سفید بگذاریم تا رنگی که داریم مشخص شود.

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

روی ویرایش این اِلمان کلیک می‌کنیم، اینجا قسمت عمومی مشخص می‌کند که ارتفاع این ردیف چقدر باشد مثلاً ما می‌گوییم ارتفاعش خوبه، می‌گوید که در دستگاه تلفن ارتفاعش چقدر باشد؟

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

مثلاً رنگ آبی کم‌رنگ و انتخاب می‌کنیم یا بنفش، بنفش و یکم تیره‌تر می‌کنیم چون متن‌هایی که ما نوشتیم متن‌های سفید هستند و برای این‌که خوانا باشد یک بک‌گراند تیره‌تر نیاز داریم، ذخیره را می‌زنیم، ذخیره هدر را هم می‌زنیم، Ctrl+F5 می‌زنم، الان به این شکل قرار گرفت که خب شکل بهتری الان این کدتخفیف‌مان سبز‌رنگ ما باید این را هم بیایم و درستش کنیم اول این‌که همین و بیشترش کنیم که حالا وسط‌تر قرار بگیرد البته حالا که دیگه فهمیدیم چطور این و حرکت دهیم بهتر که این و این قسمت قرار دهیم یا این قسمت تا بهتر باشد،‌ برای این‌ کار هم می‌توانیم این و بکشیم اینجا و هم می‌توانستیم چیکار کنیم؟

طراحی المان های هدر فروشگاهی

این دکمه را بگذاریم اینجا و این فضاها را همین‌جا باید قرار دهیم ولی باید فضاهای بیشتری و بهش اختصاص دهیم، می‌توانیم از اینجا قرار دهیم و این یکی را هم بیاریم این طرف دکمه، خب مثل این‌که نمیاد، اینجا، به این صورت، الان باید این فضاها را تا آخر ببریم تا این اتفاقی که می‌خواستیم بی‌افتد، اینجا قرارش دهیم تا راحت‌تر باشد برای‌مان دوتا اِلمان هم پاک می‌کنیم، ببینیم آن چیزی که می‌خواهیم شد؟

بعد برویم سراغ رنگی که داشت، یک بار دیگر با Ctrl+F5 تست می‌کنم، الان اینطوری که می‌خواستیم انجام شده، فقط باید رنگش را درست کنیم، اول این‌که آیکونش را هم باید اینجا قرار دهید، آیکونش باید بروید داخل سایتش و انتخاب کنید، اگر جلسه پیش را دیده باشید، سایتش مشخص می‌توانید همان سایت بروید و آیکون‌تان را نامش را اینجا بنویسید.

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

تغییرات رنگ در سربرگ سایت فروشگاهی

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

از داخل قسمت تنظیمات بخش رنگها و استایل‌ها اینجا شما می‌توانید رنگش را تغییر دهید رنگ اصلی ما گذاشتیم سبزرنگ بود الان ببینید داخل رنگ‌ها، رنگ اصلی‌مان سبزرنگ یا نه؟

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

حالا می‌رویم به قسمت مین‌هدر در این قسمت یک متنی نوشته مثلاً ما می‌توانیم اینجا متنش را تغییر دهیم یا هرچیز دیگری را اینجا بگذاریم دکمه بگذاریم یا هر اِلمانی را که می‌خواهید از این قسمت می‌توانید اضافه کنید و قرار دهید. خب ما همین متن را یک چیزی می‌نویسیم، به طور مثال ما این را می‌نویسیم، برای این‌که اینجا انگلیسی نباشد، لوگو خود را اینجا می‌توانید تغییر دهید، لوگویی که انتخاب می‌کنید حواس‌تان باشد از این قسمت می‌توانید عوض کنید و ارتفاعش زیاد نباشد که لوگوی‌تان را خراب کند و درواقع هدرتان را خراب کند.

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

تنظیمات قالب وودمارت وردپرس برای هدر

به خاطر این‌که داخل تنظیمات آمدیم رنگ اصلی را بنفش کردیم و الان می‌بینیم که اینها بنفش شد، خب این متن هم اضافه کردیم، خب اینجا هم که حساب کاربری، اینجا اِلمان‌هایش را می‌توانید ببینید، خب این موارد بالا هم دکمه‌های شبکه‌ی اجتماعی را که دیدید تقسیم کننده که همین خطی است که دارد به ما نمایش می‌دهد حالا یکسری تنظیمات دارد مثل ارتفاع کامل و اسلاید استایل دلخواه که اگر بخواهیم به صورت CSS باید بهش اضافه کنیم، و یک منو دارد که نمایش نمی‌دهد دلیلش هم این‌که ما فهرست‌مان خالی درواقع و باید یک فهرست مناسب برایش بسازیم.

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

چشبان شدن هدر فروشگاهی

روی 75 می‌گذاریم و آن را چسبان کنید و ما تیکش را میزنیم و به شما نشان دهم که دقیقاً به چه صورت، خب الان اندازش به نظرم مناسب شد، برای این‌که آن را چسبان کنید و بخواهم به شما نشان دهم ما باید اول داخل یکی از برگه‌هایمان بشویم حالا شاید بتوانیم از همین جا وارد شویم،‌ ببینید؛

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

لوگو که مشخص جستجو، فرم‌های مختلفی دارد که می‌توانید این و تنظیم کنید یک تنظیمات خود اِلمان‌ها فکر می‌کنم که ساده است و خودتان می‌توانید تنظیماتش را انجام دهید.