آموزش وردپرس – ویرایش پوسته ها – درس سوم

در درس قبلی ویرایش پوسته های وردپرس، روش استفاده از دکمه های text و background از افزونه مداد زرد را آموزش دادیم. در این درس دکمه های بعدی این افزونه را مورد بررسی قرار خواهیم داد. برای مطالعه موارد ذکر شده در مقاله قبلی روی لینک زیر کلیک کنید.

آموزش وردپرس – ویرایش پوسته ها – درس دوم

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

اگر روی علامت ∞ که در کنار عنوان margin قرار دارد کلیک کنید می توانید عنصر را در تمامی جهت ها، به یک نسبت مساوی فاصله دهید.
دکمه MARGIN LEFT عنصر را از سمت چپ فاصله می دهد. اگر روی دکمه AUTO که در کنار عنوان MARGIN LEFT قرار دارد کلیک کنید تنظیم فاصله از سمت چپ به صورت خودکار انجام خواهد گرفت.
اگر روی باکسی که در تصویر زیر، تحت عنوان “بر حسب موارد مختلف” مشخص شده است موس را برده و کلیک کنید می توانید در داخل آن px که به صورت پیش فرض نوشته شده است را پاک نمایید و به جای آن یکی از دو عبارت انگلیسی em و یا % را بنویسید.
حرف پیش فرض px، فاصله ها را بر حسب پیکسل تنظیم می کند. اگر بخواهید که عناصر موجود در سایت شما، در موبایل و تبلت نیز به خوبی و به اصطلاح به صورت ریسپانسیو نمایش داده شوند بهتر است از عنصر % استفاده کنید. در این صورت فواصل بر حسب درصد ایجاد خواهند شد. عبارت em نیز مقدار فاصله ای وابسته به پیکسل ایجاد می کند. یعنی اگر سایز پیش فرض یک فونت توسط طراح قالب، ۱۶ پیسکل در نظر گرفته شده باشد حالا اگر در جایی بخواهیم یکی از زیر شاخه های آن فونت را بر حسب em استایل دهی کنیم در اینصورت ۱em برابر با ۱۶px خواهد بود.

MARGIN RIGHT و MARGIN TOP و MARGIN BOTTOM به ترتیب لبه خارجی عنصر انتخاب شده را از عنصر سمت راست، عنصر بالایی و عنصر پایینی آن، فاصله می دهند.

دکمه بعدی Padding نام دارد. این دکمه عناصر موجود در کادر انتخاب شده را از لبه های داخلی آن کادر فاصله می دهد. تمامی گزینه های این دکمه نیز مانند margin است.
PADDING BOTTOM ،PADDING TOP ،PADING RIGHT ،PADDING LEFT به ترتیب عناصر را از لبه های داخلی سمت چپ، راست، بالا و پایین فاصله می دهد.

دکمه بعدی پلاگین، Border نام دارد. با کمک این دکمه می توانید به دور عنصر انتخاب شده ی خود، کادر بکشید.

در بخش BORDER TYPE می توانید تعیین کنید که خط و خطوط کدام سمت از عنصر به وسیله کادر مشخص شود. دکمه all دورتادور عنصر کادر می کشد. مثل تصویر بالا. دکمه های دیگر در این بخش، فقط یک سمت از عنصر کادر می کشند و به ترتیب از چپ به راست، سمت بالا، راست، پایین و چپ عنصر خط می کشند.
در بخش BORDER STYLE می توانید تعیین کنید که نوع خط کادر به چه شکلی باشد. اگر solid را انتخاب کنید یک خط ممتد دور عنصر کشیده می شود. اگر dotted را انتخاب نمایید دور عنصر نقطه چین کشیده می شود. اگر dashed را برگزینید دور عنصر خط چین و اگر hidden را انتخاب کنید کادر پیرامون عنصر مخفی خواهد شد.

از قسمت BORDER WIDTH می توانید ضخامت کادر را انتخاب و تنظیم نمایید.
با استفاده از بخش BORDER COLOR نیز می توانید رنگ کادر را تغییر دهید.

دکمه بعدی پلاگین Border Radius نام دارد. به وسیله این ابزار می توانید لبه های کادر را به شکل دایره در بیاورید تا به زیبایی کادر کمک شود.

از بخش TOP LEFT RADIUS می توانید شعاع لبه کادر سمت بالا و چپ را تنظیم کنید.
با کمک TOP RIGHT RADIUS شعاع لبه کادر سمت بالا و راست تنظیم می گردد.
BOTTOM RIGHT RADIUS شعاع لبه کادر سمت پایین و راست را تغییر می دهد.
BOTTOM LEFT RADIUS نیز شعاع لبه کادر سمت پایین و چپ را اصلاح می کند.

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

به توضیح بخش های مختلف آن می پردازیم. با استفاده از Z-INDEX می توانید ترتیب چیدمان و قرارگیری عناصری که روی هم قرار دارند را تعیین کنید. فرض کنید چند عنصر روی هم قرار دارند. عنصری که z-index بیشتری داشته باشد در ظاهر به بیننده نزدیک تر خواهد بود و عنصری که z-index کمتری داشته باشد روی محور Z قبل از عناصر دیگر قرار می گیرد، یعنی از بیننده دورتر خواهد بود و زیر عناصر دیگر قرار خواهد گرفت.

در بخش POSITION انواع مختلفی از موقعیت قرارگیری عناصر در دسترس است. اگر موقعیت قرارگیری روی static تنظیم شده باشد دیگر نمی توانید از خصوصیت Z-INDEX استفاده کنید. تصویر زیر چگونگی قرارگیری عنصر انتخاب شده در حالت static را در کنار عناصر دیگر صفحه نشان می دهد. (عنصر انتخاب شده در شکل زیر با خصوصیت static، به رنگ صورتی)

اگر گزینه relative انتخاب شود، ضمن اینکه با تغییر محل قرارگیری عنصر، عناصر مجاور آن، جایش را نمی گیرند، تغییر محل قرارگیری عنصر انتخاب شده، بر موقعیت عناصر دیگر تاثیری ندارد و آنها را جا به جا نمی کند. (مثل تصویر زیر)

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

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

در ادامه و با استفاده از دکمه های RIGHT ،BOTTOM ،LEFT ،TOP به ترتیب موقعیت قرارگیری عنصر از لبه بالایی، سمت چپ، پایین و راست بسته به اینکه چه نوعی از پوزیشن انتخاب شده باشد تعیین می گردد.

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