آموزش طراحی هدر وردپرس

( یکشنبه ، 6 خرداد سال 1403 )

حق کپی ویدئو

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

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

جلسه سی و چهار

آموزگار :

مهدی جبین پور

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

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

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

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

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

اورجینال

کیفیت

پشتیبانی

آپدیت

مهدی جبین پور

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

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

مهدی جبین پور

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

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

آموزش طراحی هدر وردپرس

( یکشنبه ، 6 خرداد سال 1403 )

 طراحی هدر

در ساختار قالب ­های وردپرس، معمولاً زیرگروهی برای تنظیمات پوسته در نظر گرفته شده است که تنظیمات هدر سایت به عنوان اولین قسمتی که کاربر در سایت شما مشاهده می­کند از آن­­جا انجام می­شود.

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

برای طراحی هدر در قالب زفایر، از طریق پیشخوان وردپرس به زیرگروه زفایر> هدرهای سایت بروید.

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

سر برگ

پس از افزودن سربرگ، صفحه مربوط به سازنده هدر را مشاهده می­کنید که به طور پیش فرض از 3 بخش نوار بالا، نوار میانی اصلی و نوار پایینی تشکیل شده است و شما می­توانید بر اساس نیاز سایت خود بعضی از این نوارها استفاده کنید. همچنین با استفاده از علامت + در هر کدام از نوارها، المان­ هایی را به هدر اضافه کنید.

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

پس از انتخاب هدر موردنظرتان، می­توانید المان ­ها و یا نوارها را ویرایش کنید. با استفاده از تنظیماتی که در سمت چپ صفحه وجود دارد، برای هر کدام از ناحیه­  (نوار)ها، رنگ پس زمینه، اندازه هر کدام از نواحی و بسیاری دیگر از تغییرات قابل سفارشی کردن است. همچنین امکان ویرایش هر کدام از المان ­ها نیز با کلیک بر روی المان موردنظر و انتخاب دکمه ویرایش وجود دارد.

طرح های رنگی هدر

برای تغییر رنگ هدر سایت، در پیشخوان وردپرس مسیر زفایر> تنظیمات پوسته > رنگ ­ها را طی کنید. در این قسمت رنگ­ بخش­ های مختلف سایت از جمله هدر قابل تغییر است.

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

دقت کنید شما باید برای هدر خود فهرست ایجاد کنید. ما در ادامه به ­طور کامل ساخت فهرست را به شما آموزش خواهیم داد. ولی در این­جا و برای نمایش فهرست یا منو در هدر سایت در پیشخوان وردپرس زیرگروه نمایش > فهرست­ ها را انتخاب و فهرست مورد نظر خود را ایجاد کنید.

حال باید به سربرگ خود فهرستی که ساخته­ اید معرفی کنید. روی المان هدر منو(header-menu) کلیک کرده و نام منویی را که ایجاد کردید به عنوان فهرستی که در سایت شما نمایش داده می­شود انتخاب نمایید.

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

حال با وارد کردن آدرس سایت در مرورگر، طراحی هدر سایت خود را مشاهده می­نمایید.

در قسمت­ های بعد آموزش طراحی هدر سایت را ادامه خواهیم داد.

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

12 دیدگاه. Leave new

  • سپهر سلیمی
    آوریل 16, 2024 1:27 ب.ظ

    سلام وقتتون بخیر
    من وقتی می خواهم عنوان رابنویسم با گذاشتن لگو عنوان نمایش داده نمی شود

  • محمد مهدی رحیمیان
    آوریل 1, 2024 10:04 ب.ظ

    سلام خسته نباشید
    حقیقتش من بر اساس پیشنهاد همکاران تون قالب آسترا رو خریداری کردم
    حتی تمپلیتش هم خیلی خوب بود اما مشکل اینکه قالبی که دارید در این دوره یاد میدید برای منی که تا حالا با ورد پرس کار نکردم و برای شروع دارم با آسترا کار میکنم خیییلی سخته کلا هرچی اینجا میگید نمیدونم توی آسترا چه شکلیه…

  • افشین برقیان
    مارس 24, 2024 2:19 ب.ظ

    سلام قسمت رنگ بندی اعمال نمیشود و هیچ قالب یا تغییر رنگی را قبول نمیکند لطفا راهنمای نمایید ممنون

  • فرزانه صادقی
    مارس 19, 2024 3:52 ب.ظ

    و اینکه دلیل تغییر پیدا نکردن ارتفاع بخش های مختلف هدر چیه ؟!

    • محمد قاسمی
      مارس 19, 2024 5:48 ب.ظ

      با سلام و وقت بخیر

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

      تصویر

      اما اگر می خواهید یک ردیف را در نسخه جدید تمام عرض یا کامل نمایش دهید می توانید از گزینه زیر استفاده نمایید.

      تصویر

      پیروز و پاینده باشید

  • فرزانه صادقی
    مارس 19, 2024 3:46 ب.ظ

    با عرض سلام و خسته نباشید …برای طراحی هدر در قالب زفایر بدون استفاده از قالبهای آماده هدری که استاد فرمودند چگونه نی توان عمل کرد ؟……. آیا از بخش سفارشی سازی می توان استفاده کرد ؟….در نسخه ۶.۴.۳ زفایر قسمت سفارشی سازی آن بخش هدر را ندارد؟…..در کل بخواهیم خودمان هدرمان را طراحی کنیم بدون لستفاده از قالب های آماده چگونه در زفایر باید عمل کنیم؟

    • محمد قاسمی
      مارس 20, 2024 5:28 ق.ظ

      سلام وقت شما بخیر،

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

      با تشکر.

  • حسین علی اکبریان
    مارس 9, 2024 6:10 ب.ظ

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

    • محمد قاسمی
      مارس 10, 2024 12:37 ق.ظ

      سلام وقت شما بخیر،

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

      با تشکر.

فهرست