بلاگ دروپال تم

display suite module

طراحی قالب دروپال با استفاده از تکنیک و روش های مختلفی انجام می شود که در این بخش از آموزش دروپال ، به آموزش ماژول display suite خواهیم پرداخت. ماژول پرکاربرد و بسیار ساده ds  یا Display suite قطعا در طراحی سایت دروپالی به شما کمک بسیاری خواهد کرد.

ihover css library for drupal

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

library for dtupal theming

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

1- Animate.css

  یک کتابخانه بسیار سبک css که فقط کافیه کلاس انیمیشن مورد نظرمون رو به اون المنت یا بخش دلخواه خودمون بدیم.بطور مثال برای بلوک درباره ما ،  شبکه های اجتماعی یا فرم تماس که در فوتر سایت قرار دادیم.

smooth-scrolling-navigation-with-jquery-in-drupal

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

برای اجرای این تکنیک ، نیاز به 3 مرحله داریم : 

مرحله اول : کد html زیر رو باید پیاده سازی کنیم.کاری به بخش head نداریم ، و در این مرحله منو و کد بخش های (section) خودمون که در اصل صفحات ما محسوب می شوند رو درست میکنیم.

build-animated-fixed-menu-for-drupal

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

مرحله دوم : کد زیر رو به بخشی که می خواهیم منوی اصلی (main menu) در اون قرار بگیره اضافه میکنیم :