آموزش طرح های شبکه ای قالب ایمپرزا و زفایر

طرح های شبکه ای قالب ایمپرزا و زفایر

آموزش جدیدترین تغییرات قالب ایمپرزا

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

مفهوم طرح های شبکه ای و تغییرات قالب ایمپرزا

مفهوم طرح های شبکه ای و تغییرات قالب ایمپرزا

 

تغییرات جدید قالب ایمپرزا اجازه می دهد تا از طریق ویرایشگر کشیدن و رها کردن (drag&drop)، طرح های شبکه ای نامحدود ایجاد کرده و از آنها در موارد زیر استفاده کنید.

با کمک طرح های شبکه میتوان موارد زیر را ویرایش کرد:

  • صفحه مربوط به پست های مرتبط
  • چیدمان و ساختار صفحه اصلی وبلاگ
  • چیدمان و ساختار صفحات بایگانی
  • چیدمان و ساختار صفحه نتایج جستجو
  • چیدمان و ساختار صفحه محصولات در ووکامرس
  • چیدمان و ساختار ویجت نمونه کارها
  • چیدمان و ساختار ویجت وبلاگ

شما میتوانید از منوی impreza > طرح های شبکه ای به این تنظیمات دسترسی پیدا کنید:

دسترسی به طرح های شبکه ای

دسترسی به طرح های شبکه ای

 

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

ویرایشگر طرح های شبکه ای و تغییرات قالب ایمپرزا

ویرایشگر طرح های شبکه ای و تغییرات قالب ایمپرزا

عناصر چیدمان طرح های شبکه و تغییرات قالب ایمپرزا

بر روی نماد به علاوه (Plus) کلیک کنید تا عناصر مورد نظر برای شما نمایش داده شود:

المان های طرح های شبکه ای

المان های طرح های شبکه ای

عکس نوشته

تصویر مربوط به پست را نشان می دهد. به طور پیش فرض، “تصویر شاخص” در پست ها، صفحات و صفحات نمونه کارها را نمایش میدهد.

  • هنگامی که تصویری وجود ندارد، خصوصیت placeholder را نشان می دهد – هنگامی که روشن است، یک بلاک رنگی با ابعادی متناسب با سایز تصویر را نشان می دهد. این بلاک، رنگ پس زمینه را از گزینه های تنظیمات قالب> رنگ ها> رنگ های محتوا> رنگ اصلی می گیرد.
  • پیش نمایش رسانه ها برای پست های با قالب ویدیویی، صوتی و تصویری– هنگامی که روشن است، نشان داده می شود:
    • پخش کننده ویدیو به جای تصویر برای پست های با فرمت “ویدئویی”
    • پخش کننده صوتی به جای تصویر برای پست های با فرمت “صوتی”
    • قابلیت کشویی بودن و ورق زدن تصاویر به جای وجود یک تصویر برای پست های با فرمت “تصویری”
  • فعال کردن حالت چرخش تصویر – وقتی روشن است، تصویری با قابلیت چرخشی ایجاد می کند. ویژگی CSS موجب اضافه شدن شعاع چرخش 50 درصدی می شود.
  • سایز تصویر – یکی از سایز های آماده ی تصویر را انتخاب کنید، در مورد سایز تصویر بخوانید.
  آموزش ساخت مگامنو در قالب ایمپرزا و زفایر
عنوان پست

عنوان پست نشان داده می شود.

هنگامی که تگ HTML به صورت پیش فرض در حالت های h1 ، h2 ، h3 ، h4 ، h5 ، h6  می باشد:

  • همه ی تنظیمات فونت از گزینه های تنظیمات قالب> تایپوگرافی> عناوین خوانده میشود.
  • رنگ از گزینه های تنظیمات قالب> رنگ ها> رنگ محتوا> عنوان رنگ خوانده میشود.
  • ارتفاع خط برابر “1.4” است.

وقتی گزینه ی  Inherit از رنگ متن روشن باشد، لینک مورد نظر، مقدار رنگ موجود در متن را حتی در حالت هاور (hover) می گیرد. در غیر این صورت، از گزینه های تم> رنگ ها> رنگ محتوا> رنگ لینک و رنگ هاور لینک، مقادیر مورد نظر خود را می گیرد.

تاریخ پست

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

توضیحات در مورد قالب های نمایش تاریخ:

  • X دقیقه پیش – کمتر از 1 ساعت گذشته است.
  • X ساعت پیش – کمتر از 4 ساعت گذشته است.
  • امروز در XX: XX – بیش از 4 ساعت گذشته است اما هنوز، روز جاری است
  • دیروز در XX: XX – دیروز، تمام روز
  • 7 فوریه در XX: XX – بیش از 2 روز گذشته و هنوز هم در سال جاری است
  • 18 دسامبر 2018 – یک سال دیگر
دسته بندی پست

دسته بندی پست را نشان می دهد. در حال حاضر ممکن است موارد زیر را نشان دهد:

  • تگ های پست
  • دسته بندی پست
  • دسته بندی نمونه کارها
  • دسته بندی گواهی ها

وقتی گزینه ی Inherit  از رنگ متن روشن باشد، لینک مورد نظر، مقدار رنگ موجود در متن را حتی در حالت هاور (hover) می گیرد. در غیر این صورت، از گزینه های تم> رنگ ها> رنگ محتوا> رنگ لینک و رنگ هاور لینک، مقادیر مورد نظر خود را می گیرد.

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

نام نویسنده پست را نشان می دهد، این نام، از نمایه ی کاربر گرفته می شود.

وقتی گزینه ی Inherit  از رنگ متن روشن باشد، لینک مورد نظر، مقدار رنگ موجود در متن را حتی در حالت هاور (hover)  می گیرد. در غیر این صورت، از گزینه های تم> رنگ ها> رنگ محتوا> رنگ لینک و رنگ هاور لینک، مقادیر مورد نظر خود را می گیرد.

نظرات یا کامنت های پست

تعداد نظرات پست را نشان می دهد، مانند “9 نظر”. همیشه کلمات ترجمه شده به زبان مشخص شده ی سایت را در تنظیمات کلی آن نشان می دهد.

وقتی گزینه ی  Inherit از رنگ متن روشن باشد، لینک مورد نظر، مقدار رنگ موجود در متن را حتی در حالت هاور (hover) می گیرد. در غیر این صورت، از گزینه های تم> رنگ ها> رنگ محتوا> رنگ لینک و رنگ هاور لینک، مقادیر مورد نظر خود را می گیرد.

محتوای پست

محتوای پست را نشان می دهد. همچنین اجازه می دهد تا گزیده ای از پست را نشان دهید.

هنگامی که از گزیده یا بخشی از محتوا استفاده می کنید، تمام برچسب های HTML (از جمله کدهای کوتاه) محتوای پست حذف می شوند.

فیلد سفارشی پست

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

صفحه نمونه کارها: تصویر سفارشی– تصویری تنظیم شده در گزینه ی طرح های شبکه ای را نشان می دهد، در مورد گزینه های صفحه، نمونه کارها بخوانید.

  • توصیف: نام نویسنده – مقدار مربوط به یک توصیف را نشان می دهد.
  • توصیف: نقش نویسنده – مقدار مربوط به یک توصیف را نشان می دهد.
  • فیلد سفارشی – مقدار هر فیلد سفارشی را نشان می دهد.
دکمه

دکمه ای را با ظاهر سفارشی نشان می دهد.

HTML سفارشی

اجازه می دهد تا هرگونه کد سفارشی را در آیتم طرح های شبکه ای قرار دهید. کد اضافه شده در قسمت <div class = “w-html“> </div> قرار خواهد گرفت.

دربرگیرنده افقی

اجازه می دهد تا عناصر طرح های شبکه ای را به ترتیب در یک ردیف نمایش دهید.

  آموزش تغییر فونت قالب ایمپرزا

دربرگیرنده عمودی

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

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

گزینه های طراحی برای همه عناصر پست برابر است و در هنگام ویرایش یک عنصر در درون “گزینه های طراحی” موجود است.

موقعیت یابی مطلق – زمانی که این نوع از تنظیمات روشن باشد، عنصر مورد نظر، ویژگی CSS “موقعیت: مطلق” را بدست می آورد. این موضوع اجازه می دهد تا عنصر مورد نظر را در درون یک آیتم از شبکه و بی توجه به اندازه آن قرار دهید.

می توانید مقادیر خاص را برای 4 بعد (بالا، راست، پایین، چپ) از 4 ویژگی (موقعیت، حاشیه، مرز، بالشتک) تنظیم کنید. شما می توانید از واحدهای px،٪، em، rem استفاده کنید.

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

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

تنظیمات طرح های شبکه ای

تنظیمات طرح های شبکه ای بر کل منطقه چیدمان شبکه تاثیر می گذارد.

تنظیمات طرح های شبکه ای و تغییرات قالب ایمپرزا

تنظیمات طرح های شبکه ای و تغییرات قالب ایمپرزا

 

  • تنظیم نسبت آیتم ها– یک نسبت تصویر ثابت را برای همه موارد شبکه اعمال می کند. هنگامی که نسبت ابعاد را روشن کردید، تمام عناصر سطح اول در طرح های شبکه ای، دارای موقعیت یابی مطلق می شوند. این موضوع با اضافه کردن یک مثلث قرمز در گوشه تصویر منعکس می شود:
  • پنهان کردن محتوای بیشتر – عناصری را که می توانند خارج از محدوده ی طرح باشند، کراپ می کنند. در واقع، این موضوع، ویژگی CSS را اضافه می کند “سرریز: پنهان”.
  • رنگ پس زمینه
  • رنگ متن
  • گرد کردن گوشه ها
  • سایه
  • سایه ی شناوری (هنگام هاور شدن)

نام طرح های شبکه ای

با آیکون “مداد” روی عنوان کلیک کرده و نام مورد نظر خود را وارد کنید، سپس بر روی دکمه “ذخیره تغییرات” کلیک کنید:

نام طرح های شبکه ای

نام طرح های شبکه ای

خروجی و ورودی گرفتن

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

خروجی و ورودی گرفتن

خروجی و ورودی گرفتن

 

برای کپی / چسباندن کد،  بر روی دکمه ورودی(Import)  کلیک کنید. هنگامی که الگوی دیگری اعمال می کنید، تمام عناصر و تنظیمات قبلی شما حذف می شوند.

قالب های طرح های شبکه ای

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

تغییرات قالب ایمپرزا

تغییرات قالب ایمپرزا

 

توجه: هنگامی که قالب دیگری اعمال می کنید، تمام عناصر و تنظیمات قبلی شما حذف می شوند.

پاسخگوی سوالات شما در بخش نظرات این مقاله در زمینه جدیدترین تغییرات قالب ایمپرزا خواهیم بود.

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

پست های مرتبط

۲ دیدگاه. ارسال دیدگاه جدید

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

پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Fill out this field
Fill out this field
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست