در این قسمت می‌خواهیم طراحی هدر فروشگاه اینترنتی را به شما آموزش دهیم. البته قابل ذکر است که با یاد گرفتن تنظیمات هدر (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 هر قسمت از سایت که می‌خواهید را مشاهده کنید. با انتخاب کد بخشی که می‌خواهید تغییراتی در آن اعمال کنید و سپس با کلیک بر روی آیکون بعلاوه سمت راست کادر می‌توانید هر کد دلخواهی که می‌خواهید را اعمال نمایید.
در نهایت باید کل کدهایی که در این قسمت نوشتید را کپی کرده و از قسمت تنظیمات قالب ودمارت وارد بخش استایل سفارشی شوید و کدها را آنجا قرار دهید. بهتر است قبل از ورود هر کدی که می‌نویسید در سطر اول مشخص کنید که این کدها مربوط به چه چیزی هستند. برای این کار کافی است که در سطر اول یک اسلش و یک ستاره وارد کنید. سپس نام کد خود را بنویسید و در آخر دوباره از حروف اسلش و ستاره استفاده نمایید.
توجه کنید که اگر این کار را انجام ندهید کدهایی که وارد نموده‌اید بر روی سایتتان اعمال نخواهد شد.
حالا می‌خواهیم رنگ پس زمینه Main header را تغییر دهیم. Main header در واقع قسمتی از هدر است که لوگو سایت در آن قرار می‌گیرد. حالا باید لوگو خود را در این قسمت آپلود کنید. سپس بر روی ایکون تنظیمات Main header کلیک کنید و به قسمت رنگ‌ها بروید. همانطور که گفتیم رنگ پس زمینه را باید از پالت رنگی که برای سایت خود انتخاب نموده‌اید تعیین کنید. اگر خواستید ارتفاع Main header را تغییر دهید دقیقا مانند Top header می‌توانید عمل کنید.
قابل ذکر است که بسیاری از تغییرات در هدر با کدهای CSS قابل اجرا است فقط به همین روشی که توضیح دادیم باید عمل کنید. متاسفانه تمام کدهای CSS که اعمال شده را نمی‌توانیم برای شما توضیح دهیم ولی از تمام کدهایی که استفاده کردیم خروجی گرفتیم و فایل آن را در اختیار شما قرار می‌دهیم.
سخن پایانی
همانطور که مشاهده کردید در این جلسه سعی نمودیم، طراحی یک هدر حرفه‌ای را به شما آموزش دهیم. با استفاده از این آموزش‌ها می‌توانید هر هدری که دوست دارید را بسازید زیرا شما مبنا و اصول طراحی را به خوبی یاد گرفته‌اید. همچنین در انتها نیز گفتیم اینکه بلد باشید چگونه از کدهای CSS استفاده کنید تاثیر زیادی بر روی نحوه طراحی سایت شما خواهد گذاشت. امیدواریم مطالب این مقاله برای شما مفید واقع شده باشد. لطفا دیدگاه و نظرات خود را با ما در میان بگذارید. موفق و پیروز باشید.
42 دیدگاه. Leave new
با عرض سلام خسته نباشید خدمت تیم ابزار ورد پرس و آرزوی موفقیت بیشتر
فونت ایران یکان داخل تایپوگرافی قالب وودمارت من نبود میشه بگید مشکل از کجاست و چجوری میتونم اضافه ش کنم؟
وقت شما بخیر
در صورت نصب افزونه فارسی ساز، فونت ها اضافه می شود.
البته در خرید های شما قالب وودمارت مشاهده نمی شود..
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; من این کدو دادم هدر اصلی نپوشوند کل قسمتو مشکل چیه؟ ینی رتگ فقط تو کادرش هست و همه زمینه رو پوشش نداده خطاهم نداده!
باسلام خدمت شما
دقت نمایید و طبق راهنمای ویدئویی انجام دهید.
اگر افزونه کش دارید هم کش افزونه خالی شود و سایت هم با کلید های کنترل F5 بروز رسانی شود که کش مرورگرهم خالی شود تا تغییرات قالب مشاهده باشد.
از حضور شما ممنونیم.
سلام ممنون بابت اموزشهای جامعتون خدا خیرتون بده:) یه سوال الان کد هارو که قسمت اینسپکت عوض می کنیم خودش تو قالب سیو نمیشه اگر نریم قسمت تنظیمات و تو قسمت css سفارشی نکنیم؟بعد من کل تاپ هدرمو در حال حاضر دارم border میندازم اما دلم میخاد این borderصرفا دورتکست باشه اما کل کادر بالارو گرفته کدی هست بشه باهاش اینکارو کرد ؟ یا باید از تنظیمات سربرگساز ادیت کنیم؟
باسلام خدمت شما
کد های css که ایجاد می شود را باید در سایت ذخیره کرد تا اعمال شود.
از حضور شما ممنونیم.
من سیو کردم کدارو ولی رفتم خونه انگگار هیشکاری نکردم رفتم wp rocket امو نصب و فعال کردم کشرو پاک کردم اوکی شد به نظرتون مشکل از کش میتونه باشه یا قالب؟
اگر درست متوجه توضیحات شما شده باشم ، تغییرات شما کش شده است ، با خالی کردن کش تغییرات نمایش داده می شود.
با تشکر.
سلام از آموزش هاتون متشکرم .درباره این نکته صحبت نکردین که اگه رمز هایی از قبیل ورود به وردپرس رو گم کنیم چون تصادفی و سخت هستن باید چیکار کنیم؟
وقت شما بخیر
باید مراقب باشید که فراموش نشود
می توانید از قابلیت ذخیره رمز مرورگر هم استفاده نمایید.
با تشکر.
سلام.خسته نباشید.واقعا عالی هستید…ببخشید استاد داخل آموزش ویدیویی گفتش که کد های html زیر این ویدیو قرار میده از کجا میشه کدها رو دانلود کرد؟ با تشکر از آموزش های عالیتون
وقت شما بخیر،
در این بخش قرار گرفته است.
سلام ممنون بابت آموزش و زمانی که گذاشتین
دلیل خاصی داره که از المنتور برای ساخت هدر استفاده نکردین؟
مثلا در سرعت سایت تاثیری داره؟
سلام و عرض ادب
برخی اقدامات، مانند مگا منو را باالمنتور نسخه عادی نمی توان انجام داد و لازم است که از نسخه جت منو استفاده شود.
سلام بزرگوار
اول از ههمه ممنون بخاطر اموزش توپتون
یه سوال
من تو قسمت ویرایش هدر المنت حساب کاربری و سبد خرید رو میزارم
ولی تا وقتی افزونه ووکامرس ندارم اون امنت هارو تو سایت نشون نمیده
میخام بدونم این یه مشکله یا طبیعیه؟
و بعد از نصب و فعال سازی افزونه ووکامرس این المنت هارو نشون میده
و بعد لاگین کاربر وقتی رو المنت حساب کاربری هاور میکنم بخش های پنل کاربری ووکامرس رو بصورت زیر منو میاره
و من نمیخام اینو
بنظرتون اینو با کد زنی بردارم یا راه دیگه ای هم هست؟
وقت شما بخیر
المان های یک افزونه زمانی نمایش داده می شود که فعال باشد.
عالی بود آموزشتون. واقعا خیلی مفید بود. ممنون از ابزار وردپرس
خدا پشت و پناهتون باشه
استاد من قصد دارم یه سایت فروشگاهی بزنم سرمایم هم خیلی کمه با چند تا شرکت صحبت کردم میگن هزینه ساخت سایت تا 15 میلیون میره بعد هزینه سئو سایت هم ماهیانه بین ۲ تا ۵ میلیونه
ولی من توان پرداخت این پول و هزینه سئو و بقیه چیزاشو ندارم
میخواستم بپرسم که اگه من این ده میلیون رو به جای پرداخت به کسی که سایت میسازه
بیام این ده میلیون رو بدم به یه لپ تاپ خودم میتونم روی این اموزش های ساخت سایت شما حساب باز کنم
یعنی نمیخوام ده تومن هزینه کنم و نتونم خودم سایت بزنم
میخوام جوری باشه که صد درصد ساخت سایتو مرحله به مرحله
با فیلم هایی که گذاشتید نگاه کنم و جلو برم تا اینکه سایت اماده بشه
همینطور اینجا میتونم صد در صد کارای سئو سایت خودمو با دیدن این فیلما یاد بگیرم که حداقل کمتر هزینه بکنم مشگل من تا وقتی هستش که سایت جون میگیره مثلا یه سال اول اگه بتونم خودم کارای سایت سئو این چیزاشو با اموزش های شما انجام بدم که سایت به جایی برسه که روزانه فروش کنه اون موقه هر هزینه ای نیاز باشه پرداخت میکنم و بهترین امکانات رو برای سایت تامین میکنم بابت اینکه متن طولانی شد معذرت میخوام
واقعا بابت اموزش هاتون ممنون و سپاس گذارم
سلام و عرض ادب جناب دالوند
حتماً اینکه این هزینه را برای خود سرمایه گذاری کنید ایده بهتری است.
به شما پیشنهاد می کنم در کانال تلگرامی آقای جبین پور عضو شوید ، می توانید سیستم با قیمت پایین و قسطی تهیه نمایید ، بعد از آن خودتان آموزش ها را مشاهده نمایید و حتی خودتان طراح سایت شوید.
با تشکر.
با سلام من به تازگی یک سایت با کمک آموزش های شما طراحی کردم و وقتی محصول اضافه می کنم به سبد خرید،سبد خریدم بزرگ شده و کل هدر رو در بر می گیره اگه کمکم کنید که اصلاحش کنم ممنون می شوم.
سلام و عرض ادب جناب حسینی گرامی ،
ممکن است در بخشی از طراحی خود تنظیم لازم را انجام نداده اید.
البته در خرید های شما هم محصولی مشاهده نشد که طبق آن مورد راهنمایی شوید..
در صورتی که با اکانت دیگری از ما تهیه کرده اید ، تیکت ارسال نمایید تا بررسی شود.
با تشکر.
سلام کد ها کجا هستش؟
وقت بخیر
در زیر ویدئو قرار دارد.
اصن عشق کردم خدایی اخر سر کد هارو هم داد دمتون گرم خسته نباشید
سلام لین کدنویسی که برای هدر نوشته شده و قرار شده درون ریزی کنیم زیر ویدئوه نیست؟
وقت بخیر
زیر ویدئو قرار دارد.
عرض سلام و خسته نباشید خدمت تیم خوب ابزار وردپرس
آیا میشه بجای اینکه از کد نویسی استفاده کنیم از افزونه ی مداد زرد استفاده کنیم؟
برای من که دانش برنامه نویسی ندارم و میخوام در عین حال سایتم جذاب هم باشه
ممنون از آموزش های خوبتون
وقت بخیر
بله ، مداد زرد برای همین موارد است.
سلام. قرار بود کد هایی که در این ویدیو استفاده شد رو زیر همین ویدیو قرار بدید.
سلام و وقت بخیر.
در این بخش > https://screen.center/s/13LdO قرار دارد.
با آرزوی موفقیت برای شما .
سلام باتوجه به معرفی تم فارست مگه قرار نبود یکی از دمو هارو طراحی کنید ؟ چون دیدم از قالب آماده وودمارت استفاده کردین پرسیدم
سلام و وقت بخیر.
از سایت آماده استفاده نشده است و طراحی بصورت کامل انجام شده است.
کامل مشاهده کنید…
با آرزوی موفقیت برای شما .
سلام . خسته نباشین استاد . مهربونی و عشق به کارتون و علاقه به نشر این علم از صدای شما مشخصه.انشالله سلامت و موفق باشین.
من تا جلسه ۱۲ دیدم . فعلا
سایت من فروشگاهی نیست قالب وودمارت نمیخوام؟
چرا با المنتور هدر نساختین؟؟
سایت سمساری برای همسرم میخوام طراحی کنم از کدوم سایت های آماده شما میتونم استفاده کنم؟؟؟؟
اگر امکانش هست یه فیلم آموزش ساخت سایت خدماتی یا شرکتی با استفاده از سایت های آماده سایت خودتون آموزش بدین.
سلام ، احتراماً جهت مشاوره بهتر و دقیقتر با شماره های شرکت ما تماس حاصل فرمایید همکاران ما در خدمت شما هستند. از حضور شما متشکریم.
سلام و خسته نباشید کد css توی استایل و cssاضافی ذخیره کنیم یا روش دیگی داره؟؟
سلام بر شما ، وقت بخیر از حضور شما ممنونیم.
در برخی قالب ها در بخش تنظیمات آن می توانید ذخیره نمایید ، همچنین در بخش نمایش > سفارشی سازی> CSS اضافی هم می توانید قرار دهید و مشکلی ندارد .
آرزوی موفقیت برای شما داریم.
باسلام و تشکر از زحمات بی دریغ شما .
جنا جبین پور چرا آموزش وودمارت و از نصب قالب آغاز نکردید ؟
سلام بر شما ، وقت بخیر از حضور شما ممنونیم.
در آموزش توضیح داده شده است.. البته در ادامه آموزش همه بخش های قالب بررسی می شود.
نصب را در ده ها آموزش دیگر بیان کرده ایم ،
آرزوی موفقیت برای شما داریم.
سلام خسته نباشید ممنون میشم کل افزونه های نصب شده رو بگید چون داخل ویدیو های قبلی ندیده بودم ممنون میشم لیستش کنید.
سلام و عرض ادب
باید کل آموزش را مشاهده نمایید تا دقیق متوجه همه موارد شوید
برای سئو > رنک مث
برای امنیت > وردفنس
با تشکر.
سلام و احترام روش نصب قالب وودمارت برای این اموزش رو همراه با خرید قالب وودمارت اموزش میدید و یا نصبش فرقی با نصب قالبهای دیگه نداره؟
سلام بر شما ، وقت بخیر از حضور شما ممنونیم.
روش نصب مانند آموزش نصب محصولات سایت ، توضیح فایل ها ، آموزش خرید از سایت و … است که البته اگر تمایل داشته باشید ، پس از تهیه ما نیز می توانیم برای شما نصب را بصورت رایگان انجام دهیم.
آرزوی موفقیت برای شما داریم.