illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آموزش طراحی قالب (فصل دوم - جلسه دوم) : طراحی ستون های کناری (sidebar)

32909 ۳ تیر ۹۲

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

قسمت Sidebar

1. رنگ foreground رو به سفید تغییر دهید و سپس ابزار rectangle tool رو انتخاب کنید و یک مستطیل با ابعاد زیر ایجاد کنید

و آن را در پایین منو قرار دهید.

2. دکمه CTRL + G رو فشار بدین و group رو به content تغییر نام دهید.

3. حال طبق تصاویر زیر خطوط راهنما جدیدی ایجاد کنید

4. دکمه D رو فشار بدین تا رنگ ها به پیشفرض برگرده

5. ابزار rounded rectangle tool رو انتخاب کنید و یک مستطیل با ابعاد زیر ایجاد کنید :

و آن را در سایدبار سمت راست قرار دهید و استایل زیر رو بهش بدین :

6. نام لایه رو به block-bg تغییر دهید و همانطور که لایه انتخاب شده است CTRL + G رو بزنید و group رو به block تغییر نام دهید.

حال باید چنین نتیجه ای داشته باشید :

7. یک متن با فونت b nazanin و اندازه ی 24px و رنگ سیاه #000000  با عنوان " موضوعات " ایجاد کنید و آنرا در بالا وسط بلوک قرار دهید

و استایل زیر رو بهش بدین

8. با ابزار rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید :

و در زیر متن عنوان بلوک قرار دهید :

9. با ابزار polygon tool یک مثلت 4px ایجاد کنید :

و مانند تصویر زیر آن را در بالای خط زیر عنوان قرار دهید :

بسیار خب، حال به سایدبار سمت چپ می رسیم،

1.روی گروه block کلیک راست کنید و duplicate group رو انتخاب کنید و یک کپی از گروه ایجاد و آن را در سمت چپ قرار دهید.

2.کلمه "موضوعات" را به "تبلیغات" تغییر دهید و ارتفاع بلوک را تا 800px بکشید

3.با ابزار ruonded rectangle tool مستطیل با ابعاد زیر :

و یک مستطیل دیگر با ابعاد زیر :

و آنها را زیر هم، در بلوک تبلیغات قرار دهید

4. استایل مستطیل های تبلیغات :

ابتدا رنگ هر دو لایه را به #8ea1bb تغییر دهید :

سپس استایل زیر را بر هر دو لایه اعمال کنید :

5. کلمه "مکان تبلیغات شما" را با فونت b yekan و اندازه ی 24px و رنگ سفید و استایل زیر :

را مانند تصویر زیر در داخل هر دو لایه ایجاد کنید :

فایل رو save کنید

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 35 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    سلام و خسته نباشید..
    داخل block هر چی میزارم استایل همون مستطیل میگیره…با تغییرش استایل کل مستطیل تغییر میکنه..چطوری باید استایل جداگانه باید مشخص کنم؟

    • ‏‏
      سجاد دریس(۱۶ تیر ۱۳۹۲)

      سلام.
      روی لایه جدیدی که استایل مستطیل گرفته کلیک راست کنید ,و گزینه clear layer style رو انتخاب کنید.
      سپس استایلش رو تغییر بدین.

  • ‏‏

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

    • ‏‏

      اشتباه گفتم منظورم اینه که استایل سمت راست را دادم و سمت چپ را ندادم بهش.

    • ‏‏
      سجاد دریس(۲۱ تیر ۱۳۹۲)

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

  • ‏‏
    hamidazadi(۲۳ تیر ۱۳۹۲)

    ممنون واقعا آموزشاتون عالیه

  • ‏‏
    kimiyashop(۲۸ تیر ۱۳۹۲)

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

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

  • ‏‏

    عالی

  • ‏‏

    سلام
    شما هر بار برای Angle سایه یه مقدار وارد می کنید و هر بار جهت همه ی سایه ها عوض می شه
    ولی در تصاویر خودتون هر سایه ای به یه سمتیه
    اگر تر فند خاصی داره لطفا ارائه کنید.

    • ‏‏
      کیوان علی محمدی(۱۰ شهریور ۱۳۹۲)

      سلام توی فتوشاپ توی قسمت Layer Style تیک گزینه Use Global Light رو بردارید.

  • ‏‏

    هرکاری کردم نتونستم مربع سمت چپ را تا 800 بکشم هی جابجا میشد. چجوری باید این کارو بکنم آقای دریس؟

    • ‏‏
      سجاد دریس(۱۳ اسفند ۱۳۹۲)

      سلام.لایه ی مربع رو انتخاب کنید. سپس از منوی Edit گزینه ی Free Transform رو انتخاب کنید.
      یه حاشیه ای اطراف مربع ظاهر میشه، موس رو روی اون مربع کوچک (پایین وسط)بیارید علامت موس به دو فلش بالا پایین تبدیل میشه
      حال با کلیک کردن و نگه داشتن کلیک، موس رو به سمت پایین بکشید.

  • ‏‏

    در جلسات بعدی گفتید که وقتی به کد تبدیل می کنیم ممکنه حتی دکمه های ما بصورت تصویر ساخته شوند مانند کد

    در این صورت چه کنیم ؟ یک مثال کوچک که اگر با آیکون PNG باشه دکمه های ما ❓

    • ‏‏
      سجاد دریس(۱۹ فروردین ۱۳۹۳)

      سلام.
      از همین کدی که گذاشتبن استفاده کنید.
      خب فقط کافیه از background-image استفاده کنید واسه آدرس تصویر.
      font-size و color هم اگه متن دکمه همراه با عکسه از کدهاتون حذف کنید.
      از text-indent هم برای مخفی کردن متن دکمه استفاده کنید/

      • ‏‏

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

  • ‏‏

    سلام
    اگه میشه راجب نرم افزار تمپلیت توستر یه فایل آموزشی بزارید ممنون

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram