طراحی و ساخت هدر برای سایت فروشگاهی

( )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه دوازدهم

آموزگار :

مهدی جبین پور

هدر (Header)، اولین بخش از هر صفحه سایت است که کاربر آن را مشاهده میکند؛ به همین دلیل باید در طراحی آن دقت زیادی داشته باشید و یک هدر فوق العاده جذاب را خلق کنید... ? ( ادامه مطلب … )

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

مشاهده لینک ویدئو بالا

جهت بررسی کلیک کنید.

مهدی جبین پور

مـهـدی جـبین پـور

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

مهدی جبین پور

مـهـدی جـبین پـور

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

طراحی و ساخت هدر برای سایت فروشگاهی

( )

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

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

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

افزودن برگه جدید
افزودن برگه جدید

حالا برای اینکه صفحه اصلی، بر روی دامنه سایت نشان داده شود، دوباره به پیشخوان وردپرس بروید و از بخش تنظیمات گزینه خواندن را انتخاب نمایید.

تنظیمات خواندن
تنظیمات خواندن

در قسمت تنظیمات خواندن باید تیک گزینه “یک برگه یکتا” را علامت زده و صفحه نخست را بر روی گزینه “صفحه اصلی” قرار دهید.

انتخاب برگه برای صفحه اصلی سایت
انتخاب برگه برای صفحه اصلی سایت

سپس باید از قسمت ویرایش برگه، گزینه “غیرفعال کردن عنوان صفحه” را تیک بزنید.

غیرفعال کردن عنوان صفحه
غیرفعال کردن عنوان صفحه

همچنین از قسمت تنظیمات موقعیت نوارکناری را بر روی گزینه “بدون” قرار دهید.

غیرفعال کردن سایدبار
غیرفعال کردن سایدبار

حالا از بخش تنظیمات قالب وودمارت به قسمت تایپوگرافی بروید. برای قسمت فونت عنوان، یک فونت انتخاب کنید (Iranyekan-fanum فونت خوبی است) و گزینه دوم را بر روی “استیال” قرار دهید. قابل ذکر است که برای تمامی فونت‌هایی که در این صفحه وجود دارند باید همین کارها را انجام دهیم.

انتخاب فونت در تنظیمات تایپوگرافی
انتخاب فونت در تنظیمات تایپوگرافی

طراحی هدر

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

مدیریت هدرها
مدیریت هدرها

در ابتدا باید بگوییم که برای هدر حتما به یک منو احتیاج دارید پس برای ساخت منو از پیشخوان وردپرس به قسمت نمایش رفته و بر روی گزینه فهرست‌ها کلیک می‌کنیم. ابتدا یک فهرست به نام “فهرست اصلی” می‌سازیم. سپس در قسمت پیوندهای دلخواهد هر تعداد آیتمی که می‌خواهیم در فهرست وجود داشته باشد را وارد می‌کنیم و در قسمت لینک پیوند علامت شارپ (#) می‌گذاریم. همچنین بهتر است در فهرست اصلی آیتم‌هایی مانند خانه، محصولات، درباره ما، تماس با ما و… وجود داشته باشد. در نهایت تیک گزینه “فهرست اصلی” که در قسمت تنظیمات فهرست قرار گرفته را بزنید.

تنظیمات فهرست
تنظیمات فهرست

نکته: اگر گاهی تغییراتی که بر روی سایت انجام می‌دهید اعمال نمی‌شوند کافی است که دو دکمه F5 + Ctrl را همزمان فشار دهید تا حافظه کش مروگر شما خالی شود و سایت به درستی رفرش گردد.

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

ابتدا ارتفاع Header Bottom را صفر کنید. البته می‌توانید از گزینه مخفی کردن Header Bottom هم برای از بین بردن ردیف پایین هدر استفاده نمایید.

تنظیمات پایین هدر
تنظیمات پایین هدر

همچنین شما هر المانی که بخواهید را می‌توانید توسط المنتور به هدر خود اضافه کنید. فقط کافی است که بر روی علامت بعلاوه وسط هر ردیف هدر کلیک کنید تا المان‌های موجود را ببینید.

افزودن المان به پایین هدر
افزودن المان به پایین هدر

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

حالا احتمالا فهرست شما در هدر سمت راست یا چپ قرار گرفته است. برای اینکه فهرست دقیقا در وسط هدر قرار بگیرد کافی است که در صفحه هدر ساز بر روی آیکون تنظیمات فهرست کلیک کرده و گزینه چینش منو را بر روی “مرکز” قرار دهید.

پیکربندی منوی اصلی تنظیمات
پیکربندی منوی اصلی تنظیمات

اگر بخواهیم ارتفاع نوار بالای هدر یا همان Top Bar را کم و زیاد کنیم باید بر روی آیکون تنظیمات نوار بالایی هدر کلیک کرده و ارتفاع ردیف را به صورت دلخواه تغییر دهید.

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

گزینه Full Width Header را تیک بزنید تا هدری که ساختید، کل عرض سایت را در بر بگیرد.

هدر تمام عرض
هدر تمام عرض

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

برون ریزی ساختار هدر
برون ریزی ساختار هدر

حالا برای اینکه رنگ پس زمینه تاپ بار را تغییر دهید دوباره بر روی آیکون تنظیمات Top Bar کلیک کرده و به قسمت رنگ‌ها بروید. از طریق گزینه Color شما می‌توانید رنگ دلخواه خودتان را انتخاب نمایید.

تنظیمات نوار بالا
تنظیمات نوار بالا

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

انتخاب پالت رنگی
انتخاب پالت رنگی

اگر می‌خواهید رنگ نوشته‌های فهرست خود را تغییر دهید باید بر روی آیکون تنظیمات Top Bar کلیک کرده و طرح رنگ متن را بر روی روشن قرار دهید.

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

همچنین بهتر است متن HTML را هم در Top Bar خود تغییر دهید. معمولا در این قسمت نام سایت یا نام برند نوشته می‌شود.

تغییر متن اچ تی ام ال در نوار بالا
تغییر متن اچ تی ام ال در نوار بالا

گاهی لازم است برای زیباتر کردن سایتمان از کدهای CSS استفاده کنیم. برای اینکار بر روی تنظیمات بلوک HTML کلیک کرده و وارد قسمت استایل‌ها می‌شویم.

تنظیمات بلوک اچ تی ام ال
تنظیمات بلوک اچ تی ام ال

در ابتدا باید مشخص کنیم که برای چه چیزی در سایت خود می‌خواهیم کد CSS بنویسیم. حالا فکر کنید می‌خواهید برای نام سایت خود که در قسمت سمت راست هدر نوشته شده، کد CSS بنویسید.

به عنوان مثال hojre_brand_top را با همین فرمت (بدون استفاده از عدد و حروف بزرگ) در کادر “کلاس CSS اضافی” وارد می‌کنیم.

اضافه کردن کد سی اس اس برای هدر سایت
اضافه کردن کد سی اس اس برای هدر سایت

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

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

اینسپکت
اینسپکت

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

CSS سفارشی
CSS سفارشی

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

حالا می‌خواهیم رنگ پس زمینه Main header را تغییر دهیم. Main header در واقع قسمتی از هدر است که لوگو سایت در آن قرار می‌گیرد. حالا باید لوگو خود را در این قسمت آپلود کنید. سپس بر روی ایکون تنظیمات Main header کلیک کنید و به قسمت رنگ‌ها بروید. همانطور که گفتیم رنگ پس زمینه را باید از پالت رنگی که برای سایت خود انتخاب نموده‌اید تعیین کنید. اگر خواستید ارتفاع Main header را تغییر دهید دقیقا مانند Top header می‌توانید عمل کنید.

تغییر رنگ پس زمینه هدر اصلی
تغییر رنگ پس زمینه هدر اصلی

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

سخن پایانی

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

برای نوشتن دیدگاه باید وارد بشوید.

135 دیدگاه. Leave new

فهرست