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

( یکشنبه ، 14 خرداد سال 1402 )

حق کپی ویدئو

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

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

جلسه دوازدهم

آموزگار :

مهدی جبین پور

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

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

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

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

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

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

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

مهدی جبین پور

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

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

مهدی جبین پور

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

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

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

( یکشنبه ، 14 خرداد سال 1402 )

در این قسمت می‌خواهیم طراحی هدر فروشگاه اینترنتی را به شما آموزش دهیم. البته قابل ذکر است که با یاد گرفتن تنظیمات هدر (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 استفاده کنید تاثیر زیادی بر روی نحوه طراحی سایت شما خواهد گذاشت. امیدواریم مطالب این مقاله برای شما مفید واقع شده باشد. لطفا دیدگاه و نظرات خود را با ما در میان بگذارید. موفق و پیروز باشید.

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

42 دیدگاه. Leave new

  • محمدرضا رضایی
    می 19, 2023 6:36 ب.ظ

    با عرض سلام خسته نباشید خدمت تیم ابزار ورد پرس و آرزوی موفقیت بیشتر
    فونت ایران یکان داخل تایپوگرافی قالب وودمارت من نبود میشه بگید مشکل از کجاست و چجوری میتونم اضافه ش کنم؟

  • متینه اصغری
    می 3, 2023 2:17 ب.ظ

    whb-row.whb-general-header.whb-sticky-row.whb-with-bg.whb-border-fullwidth.whb-color-dark.whb-flex-flex-middle {
    border-radius: 0px 0px 0px 40px;
    background: #fbfbfb52 !important; من این کدو دادم هدر اصلی نپوشوند کل قسمتو مشکل چیه؟ ینی رتگ فقط تو کادرش هست و همه زمینه رو پوشش نداده خطاهم نداده!

    • علی حیدری
      می 3, 2023 4:33 ب.ظ

      باسلام خدمت شما

      دقت نمایید و طبق راهنمای ویدئویی انجام دهید.
      اگر افزونه کش دارید هم کش افزونه خالی شود و سایت هم با کلید های کنترل F5 بروز رسانی شود که کش مرورگرهم خالی شود تا تغییرات قالب مشاهده باشد.

      از حضور شما ممنونیم.

  • متینه اصغری
    می 3, 2023 12:28 ب.ظ

    سلام ممنون بابت اموزشهای جامعتون خدا خیرتون بده:) یه سوال الان کد هارو که قسمت اینسپکت عوض می کنیم خودش تو قالب سیو نمیشه اگر نریم قسمت تنظیمات و تو قسمت css سفارشی نکنیم؟بعد من کل تاپ هدرمو در حال حاضر دارم border میندازم اما دلم میخاد این borderصرفا دورتکست باشه اما کل کادر بالارو گرفته کدی هست بشه باهاش اینکارو کرد ؟ یا باید از تنظیمات سربرگساز ادیت کنیم؟

  • کیهان ایراندوست
    آوریل 15, 2023 3:34 ب.ظ

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

  • رامین یوسفی
    مارس 18, 2023 10:58 ق.ظ

    سلام.خسته نباشید.واقعا عالی هستید…ببخشید استاد داخل آموزش ویدیویی گفتش که کد های html زیر این ویدیو قرار میده از کجا میشه کدها رو دانلود کرد؟ با تشکر از آموزش های عالیتون

  • مجید احمدی
    مارس 16, 2023 9:21 ق.ظ

    سلام ممنون بابت آموزش و زمانی که گذاشتین
    دلیل خاصی داره که از المنتور برای ساخت هدر استفاده نکردین؟
    مثلا در سرعت سایت تاثیری داره؟

  • مهدی محمدی
    مارس 9, 2023 1:57 ق.ظ

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

  • رسول محمدی
    فوریه 11, 2023 12:49 ب.ظ

    عالی بود آموزشتون. واقعا خیلی مفید بود. ممنون از ابزار وردپرس

  • علی دالوند
    فوریه 5, 2023 5:14 ب.ظ

    خدا پشت و پناهتون باشه
    استاد من قصد دارم یه سایت فروشگاهی بزنم سرمایم هم خیلی کمه با چند تا شرکت صحبت کردم میگن هزینه ساخت سایت تا 15 میلیون میره بعد هزینه سئو سایت هم ماهیانه بین ۲ تا ۵ میلیونه
    ولی من توان پرداخت این پول و هزینه سئو و بقیه چیزاشو ندارم
    میخواستم بپرسم که اگه من این ده میلیون رو به جای پرداخت به کسی که سایت میسازه
    بیام این ده میلیون رو بدم به یه لپ تاپ خودم میتونم روی این اموزش های ساخت سایت شما حساب باز کنم
    یعنی نمیخوام ده تومن هزینه کنم و نتونم خودم سایت بزنم
    میخوام جوری باشه که صد درصد ساخت سایتو مرحله به مرحله
    با فیلم هایی که گذاشتید نگاه کنم و جلو برم تا اینکه سایت اماده بشه
    همینطور اینجا میتونم صد در صد کارای سئو سایت خودمو با دیدن این فیلما یاد بگیرم که حداقل کمتر هزینه بکنم مشگل من تا وقتی هستش که سایت جون میگیره مثلا یه سال اول اگه بتونم خودم کارای سایت سئو این چیزاشو با اموزش های شما انجام بدم که سایت به جایی برسه که روزانه فروش کنه اون موقه هر هزینه ای نیاز باشه پرداخت میکنم و بهترین امکانات رو برای سایت تامین میکنم بابت اینکه متن طولانی شد معذرت میخوام
    واقعا بابت اموزش هاتون ممنون و سپاس گذارم

  • جواد حسینی
    فوریه 5, 2023 12:20 ق.ظ

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

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

  • محمد ابیاتی
    ژانویه 15, 2023 7:46 ب.ظ

    سلام کد ها کجا هستش؟

  • اصن عشق کردم خدایی اخر سر کد هارو هم داد دمتون گرم خسته نباشید

  • سلام لین کدنویسی که برای هدر نوشته شده و قرار شده درون ریزی کنیم زیر ویدئوه نیست؟

  • علی کیوان شکوه
    نوامبر 30, 2022 6:39 ب.ظ

    عرض سلام و خسته نباشید خدمت تیم خوب ابزار وردپرس
    آیا میشه بجای اینکه از کد نویسی استفاده کنیم از افزونه ی مداد زرد استفاده کنیم؟
    برای من که دانش برنامه نویسی ندارم و میخوام در عین حال سایتم جذاب هم باشه
    ممنون از آموزش های خوبتون

  • عرفان اسماعیلی
    نوامبر 10, 2022 9:47 ق.ظ

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

  • مهدی ترابی
    نوامبر 7, 2022 2:39 ب.ظ

    سلام باتوجه به معرفی تم فارست مگه قرار نبود یکی از دمو هارو طراحی کنید ؟ چون دیدم از قالب آماده وودمارت استفاده کردین پرسیدم

  • پرهام حسینجانی
    اکتبر 24, 2022 2:49 ب.ظ

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

  • سلام و خسته نباشید کد css توی استایل و cssاضافی ذخیره کنیم یا روش دیگی داره؟؟

    • سلام بر شما ، وقت بخیر از حضور شما ممنونیم.

      در برخی قالب ها در بخش تنظیمات آن می توانید ذخیره نمایید ، همچنین در بخش نمایش > سفارشی سازی> CSS اضافی هم می توانید قرار دهید و مشکلی ندارد .

      آرزوی موفقیت برای شما داریم.

  • باسلام و تشکر از زحمات بی دریغ شما .
    جنا جبین پور چرا آموزش وودمارت و از نصب قالب آغاز نکردید ؟

    • سلام بر شما ، وقت بخیر از حضور شما ممنونیم.

      در آموزش توضیح داده شده است.. البته در ادامه آموزش همه بخش های قالب بررسی می شود.
      نصب را در ده ها آموزش دیگر بیان کرده ایم ،

      آرزوی موفقیت برای شما داریم.

  • ماهان شورگشتی
    آگوست 30, 2022 5:40 ب.ظ

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

  • سلام و احترام روش نصب قالب وودمارت برای این اموزش رو همراه با خرید قالب وودمارت اموزش میدید و یا نصبش فرقی با نصب قالبهای دیگه نداره؟

فهرست